{{-- Navbar Component --}}
<nav x-data="{ mobileOpen: false, scrolled: false }"
     x-init="window.addEventListener('scroll', () => scrolled = window.scrollY > 50)"
     :class="scrolled ? 'bg-deep-green/95 backdrop-blur-lg shadow-2xl' : 'bg-transparent'"
     class="fixed top-0 left-0 right-0 z-50 transition-all duration-500">

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-20">

            <!-- Logo -->
            <a href="{{ route('home') }}" class="flex items-center gap-3 group">
                @if(isset($settings['logo_light']))
                    <img src="{{ asset('storage/' . $settings['logo_light']) }}" alt="{{ $settings['app_name'] ?? 'Shalik' }}" class="h-12 w-auto group-hover:scale-105 transition-transform">
                @else
                    <div class="w-12 h-12 rounded-full bg-gradient-to-br from-gold to-burnt-orange flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
                        <span class="text-white font-playfair font-bold text-xl">{{ mb_substr($settings['app_name'] ?? 'Shalik', 0, 1) }}</span>
                    </div>
                    <div>
                        <div class="font-playfair text-cream text-xl font-bold leading-tight group-hover:text-gold transition-colors">{{ $settings['app_name'] ?? 'Shalik' }}</div>
                        <div class="text-gold text-xs font-poppins tracking-widest uppercase">{{ $settings['app_tagline'] ?? 'Restaurant' }}</div>
                    </div>
                @endif
            </a>

            <!-- Desktop Nav -->
            <div class="hidden lg:flex items-center gap-8">
                <a href="{{ route('home') }}" class="text-cream/80 hover:text-gold font-poppins text-sm font-medium transition-colors {{ request()->routeIs('home') ? 'text-gold' : '' }}">Home</a>
                <a href="{{ route('about') }}" class="text-cream/80 hover:text-gold font-poppins text-sm font-medium transition-colors {{ request()->routeIs('about') ? 'text-gold' : '' }}">About</a>

                <!-- Menu Dropdown -->
                <div class="relative" x-data="{ open: false }">
                    <button @click="open = !open" @click.away="open = false"
                            class="text-cream/80 hover:text-gold font-poppins text-sm font-medium transition-colors flex items-center gap-1 {{ request()->routeIs('menu.*') ? 'text-gold' : '' }}">
                        Menu <i class="fas fa-chevron-down text-xs transition-transform" :class="open ? 'rotate-180' : ''"></i>
                    </button>
                    <div x-show="open" x-transition
                         class="absolute top-8 left-0 glass-card min-w-40 py-2 shadow-2xl">
                        <a href="{{ route('menu.index') }}" class="block px-4 py-2 text-cream/80 hover:text-gold hover:bg-white/5 text-sm transition-colors">All Menu</a>
                        <a href="{{ route('menu.index') }}?category=biryani" class="block px-4 py-2 text-cream/80 hover:text-gold hover:bg-white/5 text-sm transition-colors">Biryani</a>
                        <a href="{{ route('menu.index') }}?category=fish" class="block px-4 py-2 text-cream/80 hover:text-gold hover:bg-white/5 text-sm transition-colors">Fish & Seafood</a>
                        <a href="{{ route('menu.index') }}?category=dessert" class="block px-4 py-2 text-cream/80 hover:text-gold hover:bg-white/5 text-sm transition-colors">Sweets & Desserts</a>
                    </div>
                </div>

                <a href="{{ route('gallery.index') }}" class="text-cream/80 hover:text-gold font-poppins text-sm font-medium transition-colors {{ request()->routeIs('gallery.*') ? 'text-gold' : '' }}">Gallery</a>
                <a href="{{ route('offers.index') }}" class="text-cream/80 hover:text-gold font-poppins text-sm font-medium transition-colors {{ request()->routeIs('offers.*') ? 'text-gold' : '' }}">Events</a>
                <a href="{{ route('blog.index') }}" class="text-cream/80 hover:text-gold font-poppins text-sm font-medium transition-colors {{ request()->routeIs('blog.*') ? 'text-gold' : '' }}">Blog</a>
                <a href="{{ route('branches.index') }}" class="text-cream/80 hover:text-gold font-poppins text-sm font-medium transition-colors {{ request()->routeIs('branches.*') ? 'text-gold' : '' }}">Branches</a>
                <a href="{{ route('contact.index') }}" class="text-cream/80 hover:text-gold font-poppins text-sm font-medium transition-colors {{ request()->routeIs('contact.*') ? 'text-gold' : '' }}">Contact</a>
            </div>

            <!-- Right Actions -->
            <div class="hidden lg:flex items-center gap-4">
                @auth
                    <div class="relative" x-data="{ open: false }">
                        <button @click="open = !open" @click.away="open = false"
                                class="flex items-center gap-2 text-cream/80 hover:text-gold text-sm font-medium transition-colors">
                            <img src="{{ auth()->user()->avatar_url }}" alt="" class="w-8 h-8 rounded-full object-cover border-2 border-gold">
                            {{ auth()->user()->name }}
                        </button>
                        <div x-show="open" x-transition class="absolute right-0 top-10 glass-card min-w-44 py-2 shadow-2xl">
                            @if(auth()->user()->isAdmin())
                                <a href="{{ route('admin.dashboard') }}" class="block px-4 py-2 text-cream/80 hover:text-gold text-sm hover:bg-white/5 transition-colors">
                                    <i class="fas fa-tachometer-alt mr-2"></i>Dashboard
                                </a>
                            @endif
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit" class="block w-full text-left px-4 py-2 text-red-400 hover:text-red-300 text-sm hover:bg-white/5 transition-colors">
                                    <i class="fas fa-sign-out-alt mr-2"></i>Logout
                                </button>
                            </form>
                        </div>
                    </div>
                @else
                    <a href="{{ route('login') }}" class="text-cream/70 hover:text-gold text-sm font-medium transition-colors">Login</a>
                @endauth
                <a href="{{ route('reservation.index') }}" class="btn-gold text-sm px-6 py-2.5">
                    <i class="fas fa-utensils mr-1.5"></i>Book Table
                </a>
            </div>

            <!-- Mobile Toggle -->
            <button @click="mobileOpen = !mobileOpen"
                    class="lg:hidden text-cream hover:text-gold transition-colors p-2">
                <i class="fas" :class="mobileOpen ? 'fa-times text-xl' : 'fa-bars text-xl'"></i>
            </button>
        </div>
    </div>

    <!-- Mobile Menu -->
    <div x-show="mobileOpen" x-transition:enter="transition ease-out duration-200"
         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-150"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 -translate-y-4"
         class="lg:hidden bg-deep-green/98 backdrop-blur-lg border-t border-gold/20 py-4">
        <div class="max-w-7xl mx-auto px-4 space-y-1">
            <a href="{{ route('home') }}" class="block py-3 px-3 text-cream/80 hover:text-gold text-sm font-medium rounded-lg hover:bg-white/5 transition-colors">Home</a>
            <a href="{{ route('about') }}" class="block py-3 px-3 text-cream/80 hover:text-gold text-sm font-medium rounded-lg hover:bg-white/5 transition-colors">About</a>
            <a href="{{ route('menu.index') }}" class="block py-3 px-3 text-cream/80 hover:text-gold text-sm font-medium rounded-lg hover:bg-white/5 transition-colors">Menu</a>
            <a href="{{ route('gallery.index') }}" class="block py-3 px-3 text-cream/80 hover:text-gold text-sm font-medium rounded-lg hover:bg-white/5 transition-colors">Gallery</a>
            <a href="{{ route('offers.index') }}" class="block py-3 px-3 text-cream/80 hover:text-gold text-sm font-medium rounded-lg hover:bg-white/5 transition-colors">Events & Offers</a>
            <a href="{{ route('blog.index') }}" class="block py-3 px-3 text-cream/80 hover:text-gold text-sm font-medium rounded-lg hover:bg-white/5 transition-colors">Blog</a>
            <a href="{{ route('branches.index') }}" class="block py-3 px-3 text-cream/80 hover:text-gold text-sm font-medium rounded-lg hover:bg-white/5 transition-colors">Branches</a>
            <a href="{{ route('contact.index') }}" class="block py-3 px-3 text-cream/80 hover:text-gold text-sm font-medium rounded-lg hover:bg-white/5 transition-colors">Contact</a>
            <div class="pt-3 pb-1 border-t border-gold/20 mt-2">
                <a href="{{ route('reservation.index') }}" class="btn-gold w-full text-center text-sm block py-3">
                    <i class="fas fa-utensils mr-2"></i>Book a Table
                </a>
            </div>
        </div>
    </div>
</nav>