<footer class="bg-gray-900 text-gray-300 pt-10 pb-6">
    <div class="container mx-auto px-4">

        <!-- TOP -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">

            <!-- BRAND -->
            <div>
                <div class="flex items-center gap-3 mb-3">
                    <img src="{{ asset('img/LogoBBKN.png') }}" class="h-12">
                    <h3 class="text-lg font-bold text-white">BKKBN Kanigoro</h3>
                </div>
                <p class="text-sm text-gray-400 leading-relaxed">
                    Layanan kependudukan & keluarga berencana untuk mewujudkan keluarga kecil, bahagia, dan sejahtera.
                </p>
            </div>

            <!-- NAVIGASI -->
            <div>
                <h4 class="text-sm font-bold text-white mb-3">Navigasi</h4>
                <ul class="space-y-1 text-sm">
                    <li><a href="{{ route('beranda') }}" class="hover:text-white transition">Beranda</a></li>
                    <li><a href="/#program" class="hover:text-white transition">Program</a></li>
                    <li><a href="{{ route('konsultasi.mandiri') }}" class="hover:text-white transition">Ruang Edukasi &
                            Informasi</a></li>
                    <li><a href="{{ route('articles.index') }}" class="hover:text-white transition">Artikel</a></li>
                    <li><a href="{{ route('kontak.index') }}" class="hover:text-white transition">Kontak</a></li>
                </ul>
            </div>

            <!-- PROGRAM -->
            <div>
                <h4 class="text-sm font-bold text-white mb-3">Program</h4>
                <ul class="space-y-1 text-sm">
                    <li><a href="#" class="hover:text-white transition">Pranikah</a></li>
                    <li><a href="#" class="hover:text-white transition">Balita</a></li>
                    <li><a href="#" class="hover:text-white transition">Remaja</a></li>
                    <li><a href="#" class="hover:text-white transition">Lansia</a></li>
                </ul>
            </div>

            <!-- KONTAK -->
            <div>
                <h4 class="text-sm font-bold text-white mb-3">Kontak</h4>
                <p class="text-sm text-gray-400 mb-2">
                    📍 Kecamatan Kanigoro, Kab. Blitar
                </p>
                <p class="text-sm text-gray-400 mb-2">
                    📞 081332527180
                </p>

                <!-- SOSMED -->
                <div class="flex gap-3 mt-3 text-lg">
                    <a href="#" class="hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
                    <a href="https://www.instagram.com/balaipenyuluhkbkanigoro/" class="hover:text-white transition"><i
                            class="fab fa-instagram"></i></a>
                    <a href="#" class="hover:text-white transition"><i class="fab fa-youtube"></i></a>
                </div>
            </div>

        </div>

        <!-- BOTTOM -->
        <div class="border-t border-gray-700 pt-4 text-center text-xs text-gray-500">
            &copy; {{ date('Y') }} BKKBN Kecamatan Kanigoro • Semua Hak Dilindungi
        </div>

    </div>
</footer>
