{{-- Footer Component --}}
<footer class="lph-footer py-12">
    <div class="max-w-screen-xl mx-auto px-8">
        <div class="grid md:grid-cols-3 gap-10">
            {{-- Brand --}}
            <div>
                <div class="flex items-center gap-3 mb-5">
                    <div class="w-14 h-14 rounded-full border-2 border-white/30 bg-white/10 flex items-center justify-center">
                        <i class="fa fa-mosque text-white text-xl"></i>
                    </div>
                    <div>
                        <div class="font-black text-3xl leading-none" style="color:#b8972a">LPH</div>
                        <div style="font-size:8px;letter-spacing:.12em" class="text-white/60 font-semibold">SALMAN ITB</div>
                    </div>
                </div>
                <p class="text-white/80 text-sm leading-relaxed">
                    Lembaga Pemeriksa Halal (LPH) YPM Salman ITB adalah lembaga di bawah naungan Yayasan Pembina Masjid Salman ITB yang bergerak di bidang pemeriksaan kehalalan produk dengan komitmen tinggi mewujudkan ekosistem halal yang berkelanjutan di tingkat nasional dan internasional.
                </p>
            </div>

            {{-- Service Scope --}}
            <div>
                <h4 class="text-white font-bold text-base mb-5">Service Scope</h4>
                <div class="grid grid-cols-2 gap-x-6 gap-y-2 text-sm text-white/80">
                    <a href="{{ route('service.layanan') }}" class="hover:text-white transition">Makanan</a>
                    <a href="{{ route('service.layanan') }}" class="hover:text-white transition">Jasa Penyembelihan</a>
                    <a href="{{ route('service.layanan') }}" class="hover:text-white transition">Minuman</a>
                    <a href="{{ route('service.layanan') }}" class="hover:text-white transition">Jasa Pengolahan</a>
                    <a href="{{ route('service.layanan') }}" class="hover:text-white transition">Obat-obatan</a>
                    <a href="{{ route('service.layanan') }}" class="hover:text-white transition">Jasa Penyimpanan</a>
                    <a href="{{ route('service.layanan') }}" class="hover:text-white transition">Kosmetik</a>
                    <a href="{{ route('service.layanan') }}" class="hover:text-white transition">Jasa Pengemasan</a>
                    <a href="{{ route('service.layanan') }}" class="hover:text-white transition">Produk Kimia</a>
                    <a href="{{ route('service.layanan') }}" class="hover:text-white transition">Jasa Distribusi</a>
                    <a href="{{ route('service.layanan') }}" class="hover:text-white transition">Produk Biologi</a>
                    <a href="{{ route('service.layanan') }}" class="hover:text-white transition">Jasa Penjualan</a>
                    <a href="{{ route('service.layanan') }}" class="hover:text-white transition">Produk Rekayasa Genetik</a>
                    <a href="{{ route('service.layanan') }}" class="hover:text-white transition">Jasa Penyajian</a>
                    <a href="{{ route('service.layanan') }}" class="hover:text-white transition">Barang Konsumsi</a>
                </div>
            </div>

            {{-- Contact --}}
            <div>
                <h4 class="text-white font-bold text-base mb-5">Our Contact</h4>
                <div class="text-white/80 text-sm leading-loose mb-6">
                    <p class="font-semibold text-white">Alamat:</p>
                    <p>Kompleks Masjid Salman ITB, Lantai 3</p>
                    <p>Jl. Ganesha No.7, Lb. Siliwangi,</p>
                    <p>Kec. Coblong, Kota Bandung 40132</p>
                </div>
                <div class="flex gap-3">
                    <a href="{{ route('home') }}#contact" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-[#b8972a] transition transform hover:scale-110" title="Facebook"><i class="fab fa-facebook text-white"></i></a>
                    <a href="{{ route('home') }}#contact" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-[#b8972a] transition transform hover:scale-110" title="Instagram"><i class="fab fa-instagram text-white"></i></a>
                    <a href="https://wa.me/622250000089" target="_blank" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-[#b8972a] transition transform hover:scale-110" title="WhatsApp"><i class="fab fa-whatsapp text-white"></i></a>
                    <a href="{{ route('home') }}#contact" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-[#b8972a] transition transform hover:scale-110" title="TikTok"><i class="fab fa-tiktok text-white"></i></a>
                    <a href="{{ route('home') }}#contact" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-[#b8972a] transition transform hover:scale-110" title="YouTube"><i class="fab fa-youtube text-white"></i></a>
                </div>
            </div>
        </div>

        <div class="border-t border-white/20 mt-10 pt-6 text-center text-xs text-white/50">
            © {{ date('Y') }} LPH Salman ITB — Lembaga Pemeriksa Halal Yayasan Pembina Masjid Salman ITB. All rights reserved.
        </div>
    </div>
</footer>