<!-- FOOTER dengan warna elegan -->
    <footer class="bg-white border-t border-slate-200 py-12 md:py-16">
        <div class="max-w-7xl mx-auto px-6 md:px-8 grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-16">
            <!-- Left Footer Column -->
            <div class="space-y-6 md:space-y-8 text-center md:text-left">
                <h3 class="font-bold text-3xl md:text-4xl text-[#1e2b3a]">Terhubung<span class="text-[#C5A028]"> dengan kami</span></h3>
                <p class="text-slate-600 text-base md:text-lg">Kami siap mendengar kebutuhan rumah tangga Anda. Diskusi gratis tanpa kewajiban.</p>
                <div class="space-y-4 flex flex-col items-center md:items-start">
                    <a href="https://wa.me/6285283399086" class="flex items-center gap-4 text-slate-700 hover:text-[#C5A028] transition-all group text-base md:text-lg border-b border-slate-200 pb-3 w-fit">
                        <span class="bg-[#1e2b3a] text-white w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-2xl group-hover:scale-110 transition shadow-md">📞</span>
                        <span class="font-semibold text-sm md:text-base">wa +62 852 8339 9086</span>
                    </a>
                    <a href="https://www.instagram.com/efatagemilang_jaya?igsh=bTM4bXBqaWw3dGo3" class="flex items-center gap-4 text-slate-700 hover:text-[#C5A028] transition-all group text-base md:text-lg border-b border-slate-200 pb-3 w-fit">
                        <span class="bg-[#1e2b3a] text-white w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-2xl group-hover:scale-110 transition shadow-md">📱</span>
                        <span class="font-semibold text-sm md:text-base">Instagram @efatagemilang_jaya</span>
                    </a>
                    <a href="https://www.tiktok.com/@efatagemilang_jaya100?_r=1&_t=ZS-96xB3WxK9VS" class="flex items-center gap-4 text-slate-700 hover:text-[#C5A028] transition-all group text-base md:text-lg border-b border-slate-200 pb-3 w-fit">
                        <span class="bg-[#1e2b3a] text-white w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-2xl group-hover:scale-110 transition shadow-md">🎵</span>
                        <span class="font-semibold text-sm md:text-base">TikTok @efatagemilang_jaya100</span>
                    </a>
                </div>
            </div>

            <!-- Right Footer Column -->
            <div class="space-y-4 text-center md:text-left">
                <h4 class="font-bold text-xl md:text-2xl text-[#1e2b3a] mb-2">Kantor utama</h4>
                <p class="text-slate-600 flex gap-3 items-start justify-center md:justify-start text-sm md:text-base"><span class="text-2xl shrink-0">📍</span>Jl. Murai II No.B.13/16, RT.008/RW.009, Jatirasa, Kec. Jatiasih, Kota Bks, Jawa Barat 17424</p>
                <div class="rounded-2xl overflow-hidden shadow-2xl border-4 border-slate-100 h-48 md:h-72 w-full map-container transition-all hover:shadow-3xl">
                    <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>

        <!-- Copyright -->
        <div class="text-center mt-12 md:mt-16 pt-6 md:pt-8 border-t border-slate-200 text-slate-500 text-xs md:text-sm flex flex-col md:flex-row justify-center gap-1 md:gap-2 px-4">
            <span>&copy; 2026 Efata Gemilang Jaya — semua hak dilindungi.</span>
            <span class="hidden md:inline">|</span>
            <span>Desain dengan ✦ untuk kenyamanan rumah Anda.</span>
        </div>
    </footer>

    <!-- Floating WA Button -->
    <div class="fixed bottom-4 right-4 md:bottom-8 md:right-8 z-50">
        <a href="https://wa.me/6285283399086" class="bg-gradient-to-r from-green-600 to-green-700 w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center shadow-2xl hover:scale-110 transition-transform duration-300 hover:shadow-green-600/40 border-4 border-white">
            <span class="text-2xl md:text-4xl">💬</span>
        </a>
    </div>

    <!-- Mobile Menu Toggle Script -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const menuToggle = document.getElementById('menuToggle');
            const mobileMenu = document.getElementById('mobileMenu');
            
            if (menuToggle && mobileMenu) {
                menuToggle.addEventListener('click', function() {
                    if (mobileMenu.classList.contains('open')) {
                        mobileMenu.classList.remove('open');
                        mobileMenu.classList.add('closed');
                    } else {
                        mobileMenu.classList.remove('closed');
                        mobileMenu.classList.add('open');
                    }
                });

                const mobileLinks = mobileMenu.querySelectorAll('a');
                mobileLinks.forEach(link => {
                    link.addEventListener('click', function() {
                        mobileMenu.classList.remove('open');
                        mobileMenu.classList.add('closed');
                    });
                });
            }
        });
    </script>