<nav class="premium-blur-dark border-b border-white/5 sticky top-0 z-[100] transition-all duration-500 shadow-[0_1px_20px_rgba(0,0,0,0.2)]">
    <div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
        <div class="flex justify-between h-24">
            <div class="flex items-center gap-8">
                <!-- Mobile Logo (Hidden on Desktop) -->
                <div class="shrink-0 flex items-center lg:hidden">
                    <a href="{{ route('dashboard') }}" class="flex items-center gap-3 group">
                        <div class="w-10 h-10 bg-white/5 rounded-xl border border-white/10 flex items-center justify-center shadow-lg transition-all group-hover:border-indigo-500/30">
                            <x-application-logo class="w-6 h-6 fill-current text-white" />
                        </div>
                    </a>
                </div>

                <!-- Page Indicator / Status -->
                <div class="hidden lg:flex items-center gap-4">
                    <div class="w-1 h-6 bg-white/5 rounded-full"></div>
                    <div class="flex flex-col">
                        <span class="text-[10px] font-black uppercase tracking-[0.4em] text-slate-500 italic">Core Portal v2.5</span>
                        <span class="text-[8px] font-black uppercase tracking-[0.1em] text-indigo-500 italic leading-none mt-1">Dark Environment Active</span>
                    </div>
                </div>
            </div>

            <!-- Settings & Notifications -->
            <div class="hidden sm:flex sm:items-center sm:ms-6 gap-6">
                <!-- Notifications -->
                <a href="{{ route('notifications.index') }}" class="relative p-3 text-slate-400 hover:text-indigo-400 hover:bg-white/5 rounded-2xl transition-all duration-300 group">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
                    @if(auth()->user()->unreadNotifications->count() > 0)
                        <span class="absolute top-2 right-2 flex h-4 w-4">
                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-4 w-4 bg-red-500 text-[8px] text-white font-black items-center justify-center border-2 border-slate-900">{{ auth()->user()->unreadNotifications->count() }}</span>
                        </span>
                    @endif
                </a>

                <div class="h-8 w-px bg-white/5"></div>

                <x-dropdown align="right" width="64">
                    <x-slot name="trigger">
                        <button class="flex items-center gap-4 px-4 py-2 rounded-[20px] border border-transparent hover:bg-white/5 transition-all duration-500 group">
                            <div class="text-right hidden lg:block">
                                <div class="text-[11px] font-black text-white uppercase tracking-tight group-hover:text-indigo-400 transition-colors">{{ Auth::user()->name }}</div>
                                <div class="text-[8px] font-bold text-slate-500 uppercase tracking-[0.2em] mt-0.5 italic">{{ Auth::user()->role->name }} Hub Access</div>
                            </div>
                            <div class="w-11 h-11 rounded-[18px] bg-white/5 border border-white/10 flex items-center justify-center text-white font-black uppercase tracking-tighter text-xs shadow-xl transition-all duration-500 group-hover:scale-105 group-hover:rotate-3 group-hover:border-indigo-500/30">
                                {{ substr(Auth::user()->name, 0, 2) }}
                            </div>
                        </button>
                    </x-slot>

                    <x-slot name="content">
                        <!-- Custom Dark Dropdown -->
                        <div class="bg-slate-900 border border-white/5 rounded-3xl overflow-hidden shadow-[0_30px_60px_-15px_rgba(0,0,0,0.5)]">
                            <div class="px-6 py-5 border-b border-white/5 bg-white/5">
                                <p class="text-[8px] font-black text-slate-500 uppercase tracking-widest mb-2 italic text-center">Auth Integrity Status</p>
                                <div class="flex items-center justify-center gap-3">
                                    <div class="w-2 h-2 rounded-full {{ auth()->user()->isActive() ? 'bg-indigo-500 animate-pulse' : 'bg-red-500' }}"></div>
                                    <span class="text-[10px] font-black uppercase italic tracking-wider {{ auth()->user()->isActive() ? 'text-indigo-400' : 'text-red-500' }}">
                                        {{ auth()->user()->isActive() ? 'Sistem Aktif & Terlindungi' : 'Akses Terbatas' }}
                                    </span>
                                </div>
                            </div>

                            <div class="p-3 space-y-1">
                                <x-dropdown-link :href="route('profile.edit')" class="rounded-xl font-bold text-[10px] uppercase tracking-widest py-3 text-slate-300 hover:bg-white/5 hover:text-indigo-400 transition-all">
                                    {{ __('Pengaturan Keamanan') }}
                                </x-dropdown-link>

                                <form method="POST" action="{{ route('logout') }}">
                                    @csrf
                                    <x-dropdown-link :href="route('logout')" class="rounded-xl font-bold text-[10px] uppercase tracking-widest py-3 text-red-400 hover:bg-red-500/10 transition-all" onclick="event.preventDefault(); this.closest('form').submit();">
                                        {{ __('Terminasi Sesi') }}
                                    </x-dropdown-link>
                                </form>
                            </div>
                        </div>
                    </x-slot>
                </x-dropdown>
            </div>

            <div class="-mr-2 flex items-center lg:hidden">
                <button @click="isSidebarOpen = ! isSidebarOpen" class="inline-flex items-center justify-center p-3 rounded-2xl text-slate-400 hover:text-indigo-400 hover:bg-white/5 transition duration-500">
                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                        <path :class="{'hidden': isSidebarOpen, 'inline-flex': ! isSidebarOpen }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 6h16M4 12h16M4 18h16" />
                        <path :class="{'hidden': ! isSidebarOpen, 'inline-flex': isSidebarOpen }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Responsive Navigation Menu -->
    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden premium-blur-dark border-t border-white/5 shadow-2xl">
        <div class="pt-6 pb-8 space-y-3 px-6 italic">
            <x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" class="rounded-2xl font-black uppercase text-[10px] tracking-[0.2em] py-4 bg-white/5 text-slate-300 border-none">
                {{ __('Dashboard Entry') }}
            </x-responsive-nav-link>
            <!-- Add more responsive links as needed -->
        </div>
    </div>
</nav>
