<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kontak Kami | Efata Gemilang Jaya</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        * { font-family: 'Plus Jakarta Sans', sans-serif; scroll-behavior: smooth; }
        body { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); }

        /* Custom Soft Shadow */
        .soft-shadow {
            box-shadow: 0 20px 50px -12px rgba(0, 20, 40, 0.08);
        }

        /* Bento Card Hover */
        .bento-card {
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            background: #ffffff;
            border: 1px solid rgba(212, 175, 55, 0.15);
        }
        .bento-card:hover {
            transform: translateY(-5px);
            border-color: #C5A028;
            box-shadow: 0 30px 60px -15px rgba(30, 43, 58, 0.15);
        }

        /* Floating Animation */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        .animate-float { animation: float 4s ease-in-out infinite; }

        /* Gradient Text */
        .text-gradient {
            background: linear-gradient(135deg, #1e2b3a 0%, #C5A028 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .map-wrapper {
            mask-image: radial-gradient(white, black);
            -webkit-mask-image: -webkit-radial-gradient(white, black);
        }

        /* Mobile menu styles */
        .mobile-menu {
            transition: all 0.3s ease-in-out;
        }
        .hamburger-line {
            transition: all 0.3s ease;
        }
        .mobile-menu.open {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .mobile-menu.closed {
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
        }
        .glass-nav {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            border-bottom: 1px solid rgba(212, 175, 55, 0.15);
        }
    </style>
</head>
<body class="text-slate-700 antialiased">

    <?php include __DIR__ . "/../components/header.php" ?>

    <!-- Hero Section -->
    <div class="max-w-7xl mx-auto px-6 md:px-8 pt-20 pb-16 text-center md:text-left">
        <span class="inline-block px-4 py-1.5 mb-4 text-xs font-bold tracking-widest text-[#C5A028] uppercase bg-[#C5A028]/10 rounded-full border border-[#C5A028]/20">
            Available 24/7
        </span>
        <h1 class="text-5xl md:text-7xl font-extrabold text-[#1e2b3a] tracking-tight mb-6">
            Mari <span class="text-gradient">Bicara.</span>
        </h1>
        <p class="text-slate-500 text-lg md:text-xl max-w-2xl leading-relaxed mx-auto md:mx-0">
            Punya pertanyaan seputar layanan kami? Tim Efata siap membantu Anda menemukan solusi tenaga kerja terbaik dengan ramah dan cepat.
        </p>
    </div>

    <!-- Main Contact Section -->
    <section class="max-w-7xl mx-auto px-6 md:px-8 pb-32">
        <div class="grid grid-cols-12 gap-6">
            
            <!-- Left Column -->
            <div class="col-span-12 lg:col-span-7 grid grid-cols-1 md:grid-cols-2 gap-6">
                
                <!-- Alamat Card -->
                <div class="bento-card col-span-1 md:col-span-2 p-6 md:p-8 rounded-[2rem]">
                    <div class="flex flex-col md:flex-row gap-6 items-start">
                        <div class="w-16 h-16 bg-[#f8fafc] rounded-2xl flex items-center justify-center text-3xl shadow-inner animate-float mx-auto md:mx-0 text-[#1e2b3a]">📍</div>
                        <div class="text-center md:text-left">
                            <h3 class="font-bold text-2xl text-[#1e2b3a] mb-3">Kantor Utama</h3>
                            <p class="text-slate-500 leading-relaxed text-base md:text-lg">
                                Jl. Murai II No.B.13/16, RT.008/RW.009, Jatirasa, Kec. Jatiasih,<br> Kota Bks, Jawa Barat 17424
                            </p>
                            <div class="mt-6 flex flex-wrap gap-3 justify-center md:justify-start">
                                <span class="text-sm font-medium px-3 py-1 bg-slate-100 rounded-md text-slate-500">BEKASI</span>
                                <span class="text-sm font-medium px-3 py-1 bg-slate-100 rounded-md text-slate-500">Pusat Bisnis</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- WhatsApp Card -->
                <a href="https://wa.me/6285283399086" target="_blank" class="bento-card p-6 md:p-8 rounded-[2rem] group text-center md:text-left">
                    <div class="w-12 h-12 bg-green-50 text-green-600 rounded-xl flex items-center justify-center text-2xl mb-6 group-hover:scale-110 transition-transform mx-auto md:mx-0">
                        <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.89 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.743-.981z"/></svg>
                    </div>
                    <p class="text-slate-400 text-sm font-semibold uppercase tracking-wider mb-1">Hubungi Kami</p>
                    <p class="text-lg md:text-xl font-bold text-[#1e2b3a] group-hover:text-green-600 transition break-all">+62 852 8339 9086</p>
                </a>

                <!-- Instagram Card -->
                <a href="https://www.instagram.com/efatagemilang_jaya?igsh=bTM4bXBqaWw3dGo3" class="bento-card p-6 md:p-8 rounded-[2rem] group text-center md:text-left">
                    <div class="w-12 h-12 bg-rose-50 text-rose-600 rounded-xl flex items-center justify-center text-2xl mb-6 group-hover:scale-110 transition-transform mx-auto md:mx-0">
                        <svg class="w-6 h-6 stroke-current fill-none" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
                    </div>
                    <p class="text-slate-400 text-sm font-semibold uppercase tracking-wider mb-1">Update Terbaru</p>
                    <p class="text-lg md:text-xl font-bold text-[#1e2b3a] group-hover:text-rose-600 transition break-all">@efatagemilang_jaya</p>
                </a>

                <!-- Jam Operasional Card -->
                <div class="bento-card col-span-1 md:col-span-2 p-6 md:p-8 rounded-[2rem] bg-[#1e2b3a] border-none group overflow-hidden relative">
                    <div class="relative z-10 flex flex-col md:flex-row justify-between items-center gap-4 md:gap-0">
                        <div class="text-center md:text-left">
                            <h4 class="text-white font-bold text-xl mb-2">Jam Operasional</h4>
                            <p class="text-slate-300">Kami tersedia untuk konsultasi langsung.</p>
                        </div>
                        <div class="text-center md:text-right">
                            <p class="text-[#C5A028] font-bold">Sen - Jum: 08:00 - 18:00</p>
                            <p class="text-slate-400 text-sm">Sabtu: 08:00 - 14:00</p>
                        </div>
                    </div>
                    <div class="absolute -right-10 -bottom-10 w-40 h-40 bg-white/5 rounded-full group-hover:scale-150 transition-transform duration-700"></div>
                </div>
            </div>

            <!-- Right Column -->
            <div class="col-span-12 lg:col-span-5 space-y-6">
                <!-- Form -->
                <div class="bg-white p-6 md:p-10 rounded-[2.5rem] soft-shadow border border-slate-100 relative overflow-hidden">
    
                    <div class="absolute top-0 right-0 w-32 h-32 bg-[#C5A028]/5 rounded-bl-full"></div>

                    <h3 class="text-2xl font-bold text-[#1e2b3a] mb-8 relative text-center md:text-left">
                        Kirim Pesan Cepat
                    </h3>

                    <form onsubmit="sendToWhatsApp(event)" class="space-y-5 relative">

                        <!-- Nama -->
                        <div class="group">
                            <label class="text-xs font-bold text-slate-400 uppercase ml-1 mb-2 block group-focus-within:text-[#C5A028] transition">
                                Nama Lengkap
                            </label>

                            <input
                                type="text"
                                id="nama"
                                class="w-full px-6 py-4 rounded-2xl bg-slate-50 border border-slate-100 focus:bg-white focus:border-[#C5A028] focus:ring-4 focus:ring-[#C5A028]/5 outline-none transition-all"
                                placeholder="Contoh: Bpk. Dharma"
                                required>
                        </div>

                        <!-- Pesan -->
                        <div class="group">
                            <label class="text-xs font-bold text-slate-400 uppercase ml-1 mb-2 block group-focus-within:text-[#C5A028] transition">
                                Pesan
                            </label>

                            <textarea
                                id="pesan"
                                rows="5"
                                class="w-full px-6 py-4 rounded-2xl bg-slate-50 border border-slate-100 focus:bg-white focus:border-[#C5A028] focus:ring-4 focus:ring-[#C5A028]/5 outline-none transition-all resize-none"
                                placeholder="Bagaimana kami bisa membantu Anda?"
                                required></textarea>
                        </div>

                        <!-- Tombol -->
                        <button
                            type="submit"
                            class="w-full py-5 bg-[#1e2b3a] text-white rounded-2xl font-bold text-lg hover:bg-[#2c3e50] transform hover:-translate-y-1 transition-all shadow-lg hover:shadow-[#1e2b3a]/20 active:scale-95">
                            Kirim Sekarang
                        </button>

                    </form>

                </div>

                <!-- Map -->
                <div class="h-48 md:h-64 rounded-[2.5rem] overflow-hidden soft-shadow border-4 border-white grayscale hover:grayscale-0 transition-all duration-700">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3965.717958001111!2d106.971876!3d-6.300742199999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e6993c5b6c6bdf5%3A0x3e9a88c6cac736e!2sPT.%20Efata%20Gemilang%20Jaya!5e0!3m2!1sid!2sid!4v1780655536630!5m2!1sid!2sid" 
                        width="600" 
                        height="450" 
                        style="border:0;" 
                        allowfullscreen="" loading="lazy" 
                        referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <div class="bg-[#E6D5B8] py-16 md:py-20 px-6 text-center">
        <h2 class="text-3xl md:text-4xl font-extrabold text-[#1e2b3a] mb-6">Butuh Tenaga Kerja Mendadak?</h2>
        <p class="text-slate-600 mb-10 max-w-xl mx-auto px-4">Tim admin kami siap memproses permintaan Anda secara instan bahkan di hari libur sekalipun.</p>
        <a href="https://wa.me/6285283399086" class="inline-flex items-center gap-3 bg-white text-[#1e2b3a] px-8 md:px-10 py-4 rounded-full font-bold shadow-xl hover:bg-[#1e2b3a] hover:text-white transition-all transform hover:scale-105">
            Chat Admin Efata Sekarang
            <span>→</span>
        </a>
    </div>

    <?php include __DIR__ . "/../components/footer.php" ?>
<!-- Transition masuk dari landing page -->
    <style>
        @keyframes pageEnter {
            0% {
                opacity: 0;
                transform: scale(0.95);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        body {
            animation: pageEnter 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }
        
        /* Optional: tambahkan efek glow saat pertama masuk */
        .hero-section {
            animation: glowPulse 1s ease-out;
        }
        
        @keyframes glowPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(197, 160, 40, 0.5);
            }
            50% {
                box-shadow: 0 0 30px 10px rgba(197, 160, 40, 0.2);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(197, 160, 40, 0);
            }
        }
    </style>
</body>
<script>
function sendToWhatsApp(event) {
    event.preventDefault();

    const nama = document.getElementById("nama").value;
    const pesan = document.getElementById("pesan").value;

    const nomorAdmin = "6285283399086";

    const text =
`Halo Efata Gemilang Jaya,

Nama : ${nama}

Pesan :
${pesan}`;

    const waUrl = `https://wa.me/${nomorAdmin}?text=${encodeURIComponent(text)}`;

    window.open(waUrl, "_blank");
}
</script>
</html>