{{-- --- FOOTER SECTION --- --}}
<footer class="bg-white border-t border-sky-100 pt-16 pb-8 px-6">
    <div class="max-w-7xl mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">

            {{-- Kolom 1: Branding & Alamat --}}
            <div class="md:col-span-1">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shadow-lg shadow-sky-100">
                        <img src="{{ asset('assets/img/logo.webp') }}" alt="Logo YPTP"
                            class="w-full h-full object-contain">
                    </div>
                    <span
                        class="text-xl font-black text-sky-900 tracking-tight">{{ $setting->website_name ?? 'YPTP PAPUA' }}</span>
                </div>
                <div class="text-slate-500 text-sm leading-relaxed mb-6">
                    @if ($setting->address)
                        <p class="mb-4"><i class="fas fa-map-marker-alt text-sky-500 mr-2"></i>
                            {{ $setting->address }}
                        </p>
                    @endif
                    @if ($setting->google_maps_link)
                        <a href="{{ $setting->google_maps_link }}" target="_blank"
                            class="text-sky-600 font-bold hover:underline">
                            <i class="fas fa-directions mr-1"></i> Petunjuk Arah
                        </a>
                    @endif
                </div>
            </div>

            {{-- Kolom 2: Tautan Cepat --}}
            <div>
                <h4 class="font-bold text-slate-900 mb-6 uppercase tracking-widest text-xs">Navigasi</h4>
                <ul class="space-y-4 text-sm text-slate-500 font-medium">
                    <li><a href="#tentang" class="hover:text-sky-600 transition-colors">Tentang Kami</a></li>
                    <li><a href="#program" class="hover:text-sky-600 transition-colors">Program Pelatihan</a></li>
                    <li><a href="{{ route('berita') }}" class="hover:text-sky-600 transition-colors">Warta Terbaru</a>
                    </li>
                    <li><a href="#donasi" class="hover:text-sky-600 transition-colors">Donasi</a></li>
                </ul>
            </div>

            {{-- Kolom 3: Bantuan & Legal --}}
            <div>
                <h4 class="font-bold text-slate-900 mb-6 uppercase tracking-widest text-xs">Bantuan</h4>
                <ul class="space-y-4 text-sm text-slate-500 font-medium">
                    <li><a href="/faq" class="hover:text-sky-600 transition-colors">FAQ</a></li>
                    <li><a href="/privacy-policy" class="hover:text-sky-600 transition-colors">Privacy Policy</a></li>
                    <li><a href="/syarat-ketentuan" class="hover:text-sky-600 transition-colors">Syarat & Ketentuan</a>
                    </li>
                    <li><a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $setting->phone) }}"
                            class="hover:text-sky-600 transition-colors">Hubungi Kami</a></li>
                </ul>
            </div>

            {{-- Kolom 4: Kontak --}}
            <div>
                <h4 class="font-bold text-slate-900 mb-6 uppercase tracking-widest text-xs">Hubungi Kami</h4>
                <div class="space-y-4">
                    @if ($setting->phone)
                        <a href="tel:{{ $setting->phone }}"
                            class="flex items-center gap-3 text-sm text-slate-500 hover:text-sky-600 group">
                            <div
                                class="w-8 h-8 rounded-lg bg-slate-50 flex items-center justify-center group-hover:bg-sky-50 transition-colors">
                                <i class="fas fa-phone-alt text-xs"></i>
                            </div>
                            {{ $setting->phone }}
                        </a>
                    @endif
                    @if ($setting->email)
                        <a href="mailto:{{ $setting->email }}"
                            class="flex items-center gap-3 text-sm text-slate-500 hover:text-sky-600 group">
                            <div
                                class="w-8 h-8 rounded-lg bg-slate-50 flex items-center justify-center group-hover:bg-sky-50 transition-colors">
                                <i class="fas fa-envelope text-xs"></i>
                            </div>
                            {{ $setting->email }}
                        </a>
                    @endif
                </div>
            </div>
        </div>

        <hr class="border-slate-100 mb-8">

        {{-- Bottom Footer --}}
        <div class="flex flex-col md:flex-row justify-between items-center gap-6">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">
                &copy; {{ date('Y') }} {{ $setting->website_name ?? 'YPT PAPUA' }}
            </p>

            {{-- Sosial Media Dinamis --}}
            <div class="flex items-center gap-4">
                @if ($setting->facebook)
                    <a href="{{ $setting->facebook }}"
                        class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:bg-sky-600 hover:text-white transition-all shadow-sm">
                        <i class="fab fa-facebook-f text-sm"></i>
                    </a>
                @endif
                @if ($setting->instagram)
                    <a href="{{ $setting->instagram }}"
                        class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:bg-pink-600 hover:text-white transition-all shadow-sm">
                        <i class="fab fa-instagram text-sm"></i>
                    </a>
                @endif
                @if ($setting->youtube)
                    <a href="{{ $setting->youtube }}"
                        class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:bg-red-600 hover:text-white transition-all shadow-sm">
                        <i class="fab fa-youtube text-sm"></i>
                    </a>
                @endif
                @if ($setting->tiktok)
                    <a href="{{ $setting->tiktok }}"
                        class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:bg-black hover:text-white transition-all shadow-sm">
                        <i class="fab fa-tiktok text-sm"></i>
                    </a>
                @endif
                @if ($setting->linked)
                    <a href="{{ $setting->linked }}"
                        class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:bg-sky-700 hover:text-white transition-all shadow-sm">
                        <i class="fab fa-linkedin-in text-sm"></i>
                    </a>
                @endif
            </div>
        </div>
    </div>
</footer>

<script src="{{ asset('assets/js/custom.js') }}"></script>
</body>

</html>