{{-- Tambahkan script Alpine.js di layout utama Anda jika belum ada: --}}
{{-- <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> --}}

<nav class="sticky top-0 z-50 font-sans shadow-sm transition-all duration-300" x-data="{ mobileOpen: false, scrolled: false }" @scroll.window="scrolled = (window.pageYOffset > 20)">
    
    {{-- =======================================================================
       1. TOP BAR (Info Kontak & Sosmed - Premium Dark)
       Menghilang secara perlahan saat di-scroll untuk memberi ruang (opsional)
    ======================================================================== --}}
    <div class="bg-[#042f2e] text-gray-300 text-[11px] md:text-xs py-2 md:py-2.5 transition-all duration-300 relative z-20" :class="{ 'hidden': scrolled }">
        <div class="container mx-auto px-4 lg:px-6 flex justify-between items-center">
            {{-- Kontak Kiri --}}
            <div class="flex items-center gap-4 md:gap-6 font-medium tracking-wide">
                <span class="flex items-center gap-2 hover:text-white transition cursor-default">
                    <i class="fas fa-phone-alt text-yellow-400"></i> {{ $school->no_telp ?? '0851-7974-3232' }}
                </span>
                <span class="hidden md:flex items-center gap-2 hover:text-white transition cursor-default">
                    <i class="far fa-envelope text-yellow-400"></i> {{ $school->email ?? 'info@puruhita.sch.id' }}
                </span>
            </div>

            {{-- Sosmed & Login Kanan --}}
            <div class="flex items-center gap-4 md:gap-5">
                <div class="hidden md:flex items-center gap-4 pr-5 border-r border-white/20">
                    <a href="#" class="text-gray-400 hover:text-yellow-400 transition transform hover:-translate-y-0.5"><i class="fab fa-facebook-f text-sm"></i></a>
                    <a href="#" class="text-gray-400 hover:text-yellow-400 transition transform hover:-translate-y-0.5"><i class="fab fa-instagram text-sm"></i></a>
                    <a href="#" class="text-gray-400 hover:text-yellow-400 transition transform hover:-translate-y-0.5"><i class="fab fa-youtube text-sm"></i></a>
                </div>
                
                @auth
                    <a href="{{ route('dashboard') }}" class="font-bold text-yellow-400 hover:text-white transition flex items-center gap-2">
                        <i class="fas fa-tachometer-alt"></i> Dashboard
                    </a>
                @else
                    <a href="{{ route('login') }}" class="font-bold text-white hover:text-yellow-400 transition flex items-center gap-2 bg-white/10 hover:bg-white/20 px-4 py-1.5 rounded-full border border-white/10 backdrop-blur-sm">
                        <i class="fas fa-laptop-house"></i> Portal Smart
                    </a>
                @endauth
            </div>
        </div>
    </div>

    {{-- =======================================================================
       2. MAIN NAVBAR (Menu Utama - Clean White & Glassmorphism)
    ======================================================================== --}}
    <div class="bg-white/95 backdrop-blur-md text-gray-800 relative z-10 transition-all duration-300 border-b border-gray-100" :class="{ 'shadow-lg': scrolled }">
        <div class="container mx-auto px-4 lg:px-6">
            <div class="flex justify-between items-center h-20 md:h-24">
                
                {{-- A. LOGO SEKOLAH --}}
                <a href="{{ route('home') }}" class="flex items-center gap-3 md:gap-4 group">
                    <div class="relative w-12 h-12 md:w-14 md:h-14 bg-white rounded-full shadow-sm border border-gray-50 flex items-center justify-center p-1.5 overflow-hidden group-hover:shadow-md transition duration-300">
                        @if(isset($school->logo) && $school->logo)
                            <img src="{{ asset('storage/' . $school->logo) }}" alt="Logo" class="w-full h-full object-contain group-hover:scale-110 transition duration-500">
                        @else
                            <img src="https://ui-avatars.com/api/?name=SC&background=0f766e&color=fff&bold=true" class="w-full h-full rounded-full">
                        @endif
                    </div>
                    <div class="leading-none flex flex-col justify-center">
                        <span class="text-[9px] md:text-[10px] text-teal-600 font-extrabold uppercase tracking-widest mb-1">Yayasan Pendidikan</span>
                        <span class="text-lg md:text-2xl font-black tracking-tight uppercase text-gray-900 group-hover:text-teal-700 transition-colors">
                            {{ $school->nama_sekolah ?? 'SMART CENDEKIA' }}
                        </span>
                    </div>
                </a>

                {{-- B. DESKTOP MENU --}}
                <div class="hidden xl:flex items-center gap-6 lg:gap-8 text-sm font-bold text-gray-600">
                    
                    {{-- Nav Link dengan Animasi Underline --}}
                    <a href="{{ route('home') }}" class="relative py-2 group hover:text-teal-700 transition {{ request()->routeIs('home') ? 'text-teal-700' : '' }}">
                        Beranda
                        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-teal-600 transform scale-x-0 origin-left transition-transform duration-300 {{ request()->routeIs('home') ? 'scale-x-100' : 'group-hover:scale-x-100' }}"></span>
                    </a>

                    {{-- Profil (Dropdown) --}}
                    <div class="relative group" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                        <button class="flex items-center gap-1.5 py-2 hover:text-teal-700 transition focus:outline-none" :class="{ 'text-teal-700': open }">
                            Profil <i class="fas fa-chevron-down text-[10px] transition-transform duration-300 text-gray-400 group-hover:text-teal-600" :class="{ 'rotate-180': open }"></i>
                        </button>
                        
                        {{-- Dropdown Menu (Premium Rounded Card) --}}
                        <div x-show="open" 
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 translate-y-3"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             x-transition:leave="transition ease-in duration-150"
                             x-transition:leave-start="opacity-100 translate-y-0"
                             x-transition:leave-end="opacity-0 translate-y-3"
                             class="absolute left-0 top-full w-64 bg-white shadow-[0_20px_40px_rgba(0,0,0,0.08)] rounded-2xl border border-gray-100 overflow-hidden z-50 mt-2"
                             style="display: none;">
                            <div class="p-2">
                                <a href="{{ route('public.profil', 'visi-misi') }}" class="flex items-center gap-3 px-4 py-3 hover:bg-teal-50 hover:text-teal-700 rounded-xl transition group/item">
                                    <div class="w-8 h-8 rounded-lg bg-teal-50 text-teal-600 flex items-center justify-center group-hover/item:bg-teal-600 group-hover/item:text-white transition"><i class="fas fa-bullseye"></i></div>
                                    Visi & Misi
                                </a>
                                <a href="{{ route('public.profil', 'sejarah') }}" class="flex items-center gap-3 px-4 py-3 hover:bg-teal-50 hover:text-teal-700 rounded-xl transition group/item">
                                    <div class="w-8 h-8 rounded-lg bg-amber-50 text-amber-500 flex items-center justify-center group-hover/item:bg-amber-500 group-hover/item:text-white transition"><i class="fas fa-history"></i></div>
                                    Sejarah Yayasan
                                </a>
                                <a href="{{ route('public.profil', 'sambutan-ketua') }}" class="flex items-center gap-3 px-4 py-3 hover:bg-teal-50 hover:text-teal-700 rounded-xl transition group/item">
                                    <div class="w-8 h-8 rounded-lg bg-blue-50 text-blue-500 flex items-center justify-center group-hover/item:bg-blue-500 group-hover/item:text-white transition"><i class="fas fa-user-tie"></i></div>
                                    Sambutan Ketua
                                </a>
                            </div>
                        </div>
                    </div>

                    <a href="{{ route('public.lembaga') }}" class="relative py-2 group hover:text-teal-700 transition {{ request()->routeIs('public.lembaga') ? 'text-teal-700' : '' }}">
                        Lembaga
                        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-teal-600 transform scale-x-0 origin-left transition-transform duration-300 {{ request()->routeIs('public.lembaga') ? 'scale-x-100' : 'group-hover:scale-x-100' }}"></span>
                    </a>

                    <a href="{{ route('public.posts.index') }}" class="relative py-2 group hover:text-teal-700 transition {{ request()->routeIs('public.posts.index') && !request('kategori') ? 'text-teal-700' : '' }}">
                        Kabar Berita
                        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-teal-600 transform scale-x-0 origin-left transition-transform duration-300 {{ request()->routeIs('public.posts.index') && !request('kategori') ? 'scale-x-100' : 'group-hover:scale-x-100' }}"></span>
                    </a>

                    {{-- Informasi (Dropdown) --}}
                    <div class="relative group" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                        <button class="flex items-center gap-1.5 py-2 hover:text-teal-700 transition focus:outline-none" :class="{ 'text-teal-700': open }">
                            Informasi <i class="fas fa-chevron-down text-[10px] transition-transform duration-300 text-gray-400 group-hover:text-teal-600" :class="{ 'rotate-180': open }"></i>
                        </button>
                        <div x-show="open" 
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 translate-y-3"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             class="absolute right-0 top-full w-60 bg-white shadow-[0_20px_40px_rgba(0,0,0,0.08)] rounded-2xl border border-gray-100 overflow-hidden z-50 mt-2"
                             style="display: none;">
                            <div class="p-2">
                                <a href="{{ route('public.posts.index', ['kategori' => 'pengumuman']) }}" class="flex items-center gap-3 px-4 py-3 hover:bg-teal-50 hover:text-teal-700 rounded-xl transition group/item">
                                    <div class="w-8 h-8 rounded-lg bg-red-50 text-red-500 flex items-center justify-center group-hover/item:bg-red-500 group-hover/item:text-white transition"><i class="fas fa-bullhorn"></i></div>
                                    Pengumuman
                                </a>
                                <a href="{{ route('public.posts.index', ['kategori' => 'agenda']) }}" class="flex items-center gap-3 px-4 py-3 hover:bg-teal-50 hover:text-teal-700 rounded-xl transition group/item">
                                    <div class="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-500 flex items-center justify-center group-hover/item:bg-emerald-500 group-hover/item:text-white transition"><i class="fas fa-calendar-alt"></i></div>
                                    Agenda Kegiatan
                                </a>
                            </div>
                        </div>
                    </div>

                    <a href="{{ route('contact.index') }}" class="relative py-2 group hover:text-teal-700 transition {{ request()->routeIs('contact.index') ? 'text-teal-700' : '' }}">
                        Kontak
                        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-teal-600 transform scale-x-0 origin-left transition-transform duration-300 {{ request()->routeIs('contact.index') ? 'scale-x-100' : 'group-hover:scale-x-100' }}"></span>
                    </a>

                    {{-- PPDB (Tombol Highlight Modern) --}}
                    <div class="pl-4 border-l border-gray-200">
                        <a href="{{ route('ppdb.index') }}" class="px-6 py-3 rounded-full bg-gradient-to-r from-orange-500 to-yellow-500 text-white font-black shadow-[0_10px_20px_rgba(249,115,22,0.2)] hover:shadow-[0_15px_30px_rgba(249,115,22,0.4)] transition-all transform hover:-translate-y-1 flex items-center gap-2">
                            <i class="fas fa-user-graduate"></i> Info PPDB
                        </a>
                    </div>

                </div>

                {{-- C. MOBILE MENU BUTTON --}}
                <button @click="mobileOpen = !mobileOpen" class="xl:hidden w-10 h-10 flex items-center justify-center rounded-xl bg-gray-50 text-gray-600 hover:bg-teal-50 hover:text-teal-600 transition focus:outline-none">
                    <i class="fas fa-bars text-xl" x-show="!mobileOpen"></i>
                    <i class="fas fa-times text-xl" x-show="mobileOpen" x-cloak></i>
                </button>
            </div>
        </div>

        {{-- D. MOBILE MENU CONTENT (App-like Drawer Style) --}}
        <div x-show="mobileOpen" 
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 -translate-y-4"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0"
             x-transition:leave-end="opacity-0 -translate-y-4"
             class="xl:hidden bg-white border-t border-gray-100 shadow-[0_20px_40px_rgba(0,0,0,0.1)] absolute w-full z-50 rounded-b-3xl" 
             style="display: none;">
            
            <div class="px-6 py-6 space-y-1 max-h-[80vh] overflow-y-auto font-semibold text-gray-700">
                
                <a href="{{ route('home') }}" class="block px-4 py-3 rounded-xl hover:bg-teal-50 hover:text-teal-600 transition flex items-center gap-4 {{ request()->routeIs('home') ? 'bg-teal-50 text-teal-600' : '' }}">
                    <div class="w-8 h-8 rounded-lg bg-gray-50 flex items-center justify-center text-gray-400"><i class="fas fa-home"></i></div> Beranda
                </a>
                
                <div x-data="{ open: false }">
                    <button @click="open = !open" class="w-full text-left px-4 py-3 rounded-xl hover:bg-teal-50 hover:text-teal-600 flex justify-between items-center transition">
                        <span class="flex items-center gap-4">
                            <div class="w-8 h-8 rounded-lg bg-gray-50 flex items-center justify-center text-gray-400"><i class="fas fa-building"></i></div> Profil
                        </span>
                        <i class="fas fa-chevron-down text-xs transition-transform text-gray-400" :class="{ 'rotate-180': open }"></i>
                    </button>
                    <div x-show="open" class="pl-16 pr-4 space-y-2 bg-gray-50/50 rounded-xl my-2 py-3 border border-gray-50">
                        <a href="{{ route('public.profil', 'visi-misi') }}" class="block py-2 text-sm text-gray-500 hover:text-teal-600">Visi & Misi</a>
                        <a href="{{ route('public.profil', 'sejarah') }}" class="block py-2 text-sm text-gray-500 hover:text-teal-600">Sejarah Yayasan</a>
                        <a href="{{ route('public.profil', 'sambutan-ketua') }}" class="block py-2 text-sm text-gray-500 hover:text-teal-600">Sambutan Ketua</a>
                    </div>
                </div>

                <a href="{{ route('public.lembaga') }}" class="block px-4 py-3 rounded-xl hover:bg-teal-50 hover:text-teal-600 transition flex items-center gap-4">
                    <div class="w-8 h-8 rounded-lg bg-gray-50 flex items-center justify-center text-gray-400"><i class="fas fa-university"></i></div> Lembaga
                </a>

                <a href="{{ route('public.posts.index') }}" class="block px-4 py-3 rounded-xl hover:bg-teal-50 hover:text-teal-600 transition flex items-center gap-4">
                    <div class="w-8 h-8 rounded-lg bg-gray-50 flex items-center justify-center text-gray-400"><i class="fas fa-newspaper"></i></div> Kabar Berita
                </a>

                <div x-data="{ open: false }">
                    <button @click="open = !open" class="w-full text-left px-4 py-3 rounded-xl hover:bg-teal-50 hover:text-teal-600 flex justify-between items-center transition">
                        <span class="flex items-center gap-4">
                            <div class="w-8 h-8 rounded-lg bg-gray-50 flex items-center justify-center text-gray-400"><i class="fas fa-info-circle"></i></div> Informasi
                        </span>
                        <i class="fas fa-chevron-down text-xs transition-transform text-gray-400" :class="{ 'rotate-180': open }"></i>
                    </button>
                    <div x-show="open" class="pl-16 pr-4 space-y-2 bg-gray-50/50 rounded-xl my-2 py-3 border border-gray-50">
                        <a href="{{ route('public.posts.index', ['kategori' => 'pengumuman']) }}" class="block py-2 text-sm text-gray-500 hover:text-teal-600">Pengumuman</a>
                        <a href="{{ route('public.posts.index', ['kategori' => 'agenda']) }}" class="block py-2 text-sm text-gray-500 hover:text-teal-600">Agenda Kegiatan</a>
                    </div>
                </div>

                <a href="{{ route('contact.index') }}" class="block px-4 py-3 rounded-xl hover:bg-teal-50 hover:text-teal-600 transition flex items-center gap-4 mb-4">
                    <div class="w-8 h-8 rounded-lg bg-gray-50 flex items-center justify-center text-gray-400"><i class="fas fa-headset"></i></div> Kontak
                </a>

                {{-- Action Buttons Mobile --}}
                <div class="grid grid-cols-2 gap-3 mt-6 pt-6 border-t border-gray-100">
                    <a href="{{ route('ppdb.index') }}" class="flex flex-col items-center justify-center py-4 rounded-2xl bg-gradient-to-br from-orange-400 to-orange-500 text-white font-bold shadow-lg shadow-orange-500/20 active:scale-95 transition text-sm">
                        <i class="fas fa-user-graduate text-2xl mb-2"></i> Info PPDB
                    </a>
                    @auth
                        <a href="{{ route('dashboard') }}" class="flex flex-col items-center justify-center py-4 rounded-2xl bg-teal-600 text-white font-bold shadow-lg shadow-teal-600/20 active:scale-95 transition text-sm">
                            <i class="fas fa-tachometer-alt text-2xl mb-2"></i> Dashboard
                        </a>
                    @else
                        <a href="{{ route('login') }}" class="flex flex-col items-center justify-center py-4 rounded-2xl bg-gray-900 text-white font-bold shadow-lg active:scale-95 transition text-sm">
                            <i class="fas fa-laptop-house text-2xl mb-2"></i> Portal Smart
                        </a>
                    @endauth
                </div>

            </div>
        </div>
    </div>
</nav>