@php
    $cartCount = count(session('cart', []));
@endphp

<div x-data="{ mobileMenuOpen: false, searchOpen: false }"
     @keydown.escape.window="mobileMenuOpen = false; searchOpen = false">

    <!-- 1. Top Navbar Header -->
    <header class="fixed top-0 left-0 w-full z-40 bg-[#fbf9f4]/95 backdrop-blur-md border-b border-[#e4e2dd]/70 shadow-[0_10px_30px_rgba(125,140,113,0.06)]">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-20">

                <!-- Left: Mobile Menu Trigger (Hamburger) & Brand Logo -->
                <div class="flex items-center gap-3">
                    <button type="button"
                            @click="mobileMenuOpen = true"
                            class="md:hidden text-[#526048] p-2 hover:bg-[#f0eee9] rounded-xl transition-colors focus:outline-none"
                            aria-label="Open Navigation Menu">
                        <span class="material-symbols-outlined text-2xl">menu</span>
                    </button>

                    <a href="{{ route('home') }}" class="font-serif text-2xl sm:text-3xl font-bold tracking-tight text-[#526048] hover:text-[#3d4b34] transition-colors">
                        Lalita Bloom
                    </a>
                </div>

                <!-- Center: Desktop Navigation Links -->
                <nav class="hidden md:flex items-center space-x-8 font-sans text-sm font-medium">
                    <a href="{{ route('products.index') }}"
                       class="{{ request()->routeIs('products.*') ? 'text-[#526048] font-bold border-b-2 border-[#526048] pb-1' : 'text-[#444840] hover:text-[#526048]' }} transition-colors">
                        Produk
                    </a>
                    <!-- <a href="{{ route('home') }}#rituals"
                       class="text-[#444840] hover:text-[#526048] transition-colors">
                        Spa Rituals
                    </a> -->
                    <a href="{{ route('story') }}"
                       class="{{ request()->routeIs('story') ? 'text-[#526048] font-bold border-b-2 border-[#526048] pb-1' : 'text-[#444840] hover:text-[#526048]' }} transition-colors">
                        Our Story
                    </a>
                    <a href="{{ route('home') }}#pickup"
                       class="text-[#444840] hover:text-[#526048] transition-colors">
                        Opsi Pemesanan
                    </a>
                </nav>

                <!-- Right: Action Icons (Search, Cart, Profile) -->
                <div class="flex items-center space-x-2 sm:space-x-3 text-[#526048]">
                    <!-- Search Button -->
                    <button type="button"
                            @click="searchOpen = !searchOpen"
                            class="p-2 hover:bg-[#f0eee9] rounded-xl transition-colors focus:outline-none"
                            aria-label="Search Catalog">
                        <span class="material-symbols-outlined text-2xl">search</span>
                    </button>

                    <!-- Cart Bag with Badge -->
                    <a href="{{ route('cart.index') }}"
                       class="relative p-2 hover:bg-[#f0eee9] rounded-xl transition-colors inline-flex items-center justify-center"
                       aria-label="Shopping Basket">
                        <span class="material-symbols-outlined text-2xl">shopping_bag</span>
                        @if ($cartCount > 0)
                            <span class="absolute top-0 right-0 w-5 h-5 rounded-full bg-[#526048] text-white text-[10px] font-bold flex items-center justify-center shadow-xs">
                                {{ $cartCount }}
                            </span>
                        @endif
                    </a>

                    <!-- Account / Auth (Desktop) -->
                    @auth
                        <div class="hidden sm:inline-flex items-center gap-2">
                            <a href="{{ route('dashboard') }}" class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-xs font-semibold text-[#526048] bg-[#f0eee9] hover:bg-[#e4e2dd] transition-colors" title="Dashboard Saya">
                                <span class="material-symbols-outlined text-base">person</span>
                                <span>{{ Str::limit(auth()->user()->name, 12) }}</span>
                            </a>

                            @if (auth()->user()->isAdmin())
                                <a href="{{ route('admin.dashboard') }}" class="hidden lg:inline-flex items-center px-3 py-1.5 rounded-full text-[11px] font-bold uppercase tracking-wider text-white bg-[#526048] hover:bg-[#3d4b34] transition-colors">
                                    Admin
                                </a>
                            @endif

                            <form method="POST" action="{{ route('logout') }}" class="inline">
                                @csrf
                                <button type="submit" class="p-1.5 rounded-full text-[#75786f] hover:text-rose-600 hover:bg-[#f0eee9] transition-colors inline-flex items-center justify-center" title="Log Out / Keluar">
                                    <span class="material-symbols-outlined text-xl">logout</span> 
                                </button>
                            </form>
                        </div>
                    @else
                        <a href="{{ route('login') }}" class="hidden sm:inline-flex items-center px-4 py-2 rounded-full text-xs font-semibold uppercase tracking-wider text-[#526048] border border-[#526048] hover:bg-[#526048] hover:text-white transition-colors">
                            Sign In
                        </a>
                    @endauth
                </div>
            </div>

            <!-- Quick Search Dropdown Bar -->
            <div x-show="searchOpen" x-cloak class="py-3 border-t border-[#e4e2dd] transition-all">
                <form method="GET" action="{{ route('products.index') }}" class="flex gap-2">
                    <div class="relative flex-1">
                        <input type="text"
                               name="search"
                               placeholder="Cari skincare, bodycare, atau parfum..."
                               value="{{ request('search') }}"
                               class="w-full pl-10 pr-4 py-2.5 rounded-full border border-[#c5c8bd] bg-white text-xs text-[#1b1c19] focus:outline-none focus:border-[#526048] focus:ring-1 focus:ring-[#526048]">
                        <span class="material-symbols-outlined absolute left-3 top-2.5 text-[#75786f] text-lg pointer-events-none">search</span>
                    </div>
                    <button type="submit" class="px-6 py-2.5 rounded-full bg-[#526048] text-white text-xs font-bold uppercase tracking-wider hover:bg-[#3d4b34] transition-colors shadow-xs">
                        Search
                    </button>
                </form>
            </div>
        </div>
    </header>

    <!-- 2. Mobile Drawer (Sibling with highest z-index z-[99999], completely in front of all layers) -->
    <div x-show="mobileMenuOpen"
         x-cloak
         class="fixed inset-0 z-[99999] md:hidden overflow-hidden"
         style="display: none;"
         aria-modal="true"
         role="dialog">

        <!-- Semi-transparent Dimmed Backdrop -->
        <div x-show="mobileMenuOpen"
             x-transition:enter="transition-opacity ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition-opacity ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             @click="mobileMenuOpen = false"
             class="fixed inset-0 bg-black/60 backdrop-blur-xs"></div>

        <!-- Sliding Offcanvas Drawer Panel -->
        <div x-show="mobileMenuOpen"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="-translate-x-full"
             x-transition:enter-end="translate-x-0"
             x-transition:leave="transition ease-in duration-250 transform"
             x-transition:leave-start="translate-x-0"
             x-transition:leave-end="-translate-x-full"
             class="relative max-w-xs w-full bg-[#fbf9f4] shadow-2xl flex flex-col h-full z-10">

            <!-- Drawer Header -->
            <div class="flex items-center justify-between p-6 border-b border-[#e4e2dd]">
                <div>
                    <span class="font-serif text-xl font-bold text-[#526048] block">Lalita Bloom</span>
                    <p class="text-xs text-[#75786f]">Beauty, Spa & Hotel Essentials</p>
                </div>
                <button type="button"
                        @click="mobileMenuOpen = false"
                        class="p-2 text-[#526048] hover:bg-[#f0eee9] rounded-full transition-colors"
                        aria-label="Close Navigation Menu">
                    <span class="material-symbols-outlined text-xl">close</span>
                </button>
            </div>

            <!-- Drawer Navigation Links -->
            <nav class="flex-1 px-4 py-6 space-y-1.5 overflow-y-auto">
                <a href="{{ route('home') }}"
                   @click="mobileMenuOpen = false"
                   class="flex items-center gap-3 px-4 py-3 rounded-2xl text-xs font-bold uppercase tracking-wider {{ request()->routeIs('home') ? 'bg-[#ecdecb] text-[#6b6153]' : 'text-[#444840] hover:bg-[#f0eee9]' }} transition-colors">
                    <span class="material-symbols-outlined text-lg">home</span>
                    <span>Home</span>
                </a>

                <a href="{{ route('products.index') }}"
                   @click="mobileMenuOpen = false"
                   class="flex items-center gap-3 px-4 py-3 rounded-2xl text-xs font-bold uppercase tracking-wider {{ request()->routeIs('products.*') ? 'bg-[#ecdecb] text-[#6b6153]' : 'text-[#444840] hover:bg-[#f0eee9]' }} transition-colors">
                    <span class="material-symbols-outlined text-lg">explore</span>
                    <span>Explore Products</span>
                </a>

                <a href="{{ route('story') }}"
                   @click="mobileMenuOpen = false"
                   class="flex items-center gap-3 px-4 py-3 rounded-2xl text-xs font-bold uppercase tracking-wider {{ request()->routeIs('story') ? 'bg-[#ecdecb] text-[#6b6153]' : 'text-[#444840] hover:bg-[#f0eee9]' }} transition-colors">
                    <span class="material-symbols-outlined text-lg">auto_awesome</span>
                    <span>Our Story</span>
                </a>

                <!-- <a href="{{ route('home') }}#rituals"
                   @click="mobileMenuOpen = false"
                   class="flex items-center gap-3 px-4 py-3 rounded-2xl text-xs font-bold uppercase tracking-wider text-[#444840] hover:bg-[#f0eee9] transition-colors">
                    <span class="material-symbols-outlined text-lg">self_improvement</span>
                    <span>Spa Rituals</span>
                </a> -->

                <a href="{{ route('home') }}#pickup"
                   @click="mobileMenuOpen = false"
                   class="flex items-center gap-3 px-4 py-3 rounded-2xl text-xs font-bold uppercase tracking-wider text-[#444840] hover:bg-[#f0eee9] transition-colors">
                    <span class="material-symbols-outlined text-lg">storefront</span>
                    <span>Opsi Pemesanan</span>
                </a>

                <a href="{{ route('cart.index') }}"
                   @click="mobileMenuOpen = false"
                   class="flex items-center justify-between px-4 py-3 rounded-2xl text-xs font-bold uppercase tracking-wider text-[#444840] hover:bg-[#f0eee9] transition-colors">
                    <div class="flex items-center gap-3">
                        <span class="material-symbols-outlined text-lg">shopping_bag</span>
                        <span>Keranjang Saya</span>
                    </div>
                    @if ($cartCount > 0)
                        <span class="px-2.5 py-0.5 rounded-full bg-[#526048] text-white text-[10px] font-bold">
                            {{ $cartCount }}
                        </span>
                    @endif
                </a>
            </nav>

            <!-- Drawer Bottom Auth & Actions -->
            <div class="p-6 border-t border-[#e4e2dd] space-y-3 bg-[#f5f3ee]/50">
                @auth
                    <a href="{{ route('dashboard') }}"
                       @click="mobileMenuOpen = false"
                       class="w-full py-3 px-4 rounded-full bg-[#526048] text-white text-xs font-bold tracking-wider uppercase flex items-center justify-center gap-2 shadow-xs">
                        <span class="material-symbols-outlined text-base">person</span>
                        <span>{{ auth()->user()->name }}</span>
                    </a>

                    @if (auth()->user()->isAdmin())
                        <a href="{{ route('admin.dashboard') }}"
                           @click="mobileMenuOpen = false"
                           class="w-full py-2.5 px-4 rounded-full bg-[#1b1c19] text-white text-xs font-bold tracking-wider uppercase text-center block">
                            Admin Operations
                        </a>
                    @endif

                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" 
                            class="w-full flex items-center justify-center gap-2 py-2 text-xs text-rose-700 font-bold uppercase hover:underline">
                            <span class="material-symbols-outlined text-base">logout</span>
                            <span>Log Out</span>
                        </button>
                    </form>

                @else
                    <a href="{{ route('login') }}"
                       @click="mobileMenuOpen = false"
                       class="w-full py-3 px-4 rounded-full bg-[#526048] text-white text-xs font-bold tracking-wider uppercase text-center block shadow-xs">
                        Sign In
                    </a>
                    <a href="{{ route('register') }}"
                       @click="mobileMenuOpen = false"
                       class="w-full py-2.5 px-4 rounded-full border border-[#526048] text-[#526048] text-xs font-bold tracking-wider uppercase text-center block">
                        Create Account
                    </a>
                @endauth
            </div>
        </div>
    </div>
</div>