{{-- Announcement bar --}}
<div class="bg-moss-800 px-4 py-2.5 text-center">
    <p class="text-[11px] font-medium tracking-[0.16em] text-white uppercase">{{ config('shop.announcement') }}</p>
</div>

{{-- Site header --}}
<header class="sticky top-0 z-40 border-b border-cream-200 bg-white transition-shadow duration-300" data-site-header>
    <div class="container-shop flex h-16 items-center justify-between gap-4 lg:h-20">

        {{-- Mobile menu button --}}
        <button type="button" class="-ml-2 cursor-pointer p-2 text-ink-900 lg:hidden" data-menu-toggle aria-expanded="false" aria-label="Open menu">
            <x-icon name="menu" class="h-6 w-6" />
        </button>

        {{-- Logo --}}
        <a href="{{ route('home') }}" class="flex items-center" aria-label="{{ config('shop.name') }} — home">
            <img src="{{ asset('images/logo.png') }}" alt="{{ config('shop.name') }}" class="h-10 sm:h-12 w-auto object-contain">
        </a>

        {{-- Desktop nav --}}
        <nav class="hidden items-center gap-3.5 xl:gap-5 lg:flex" aria-label="Primary">
            <a href="{{ route('shop') }}" class="nav-link whitespace-nowrap" style="white-space: nowrap;">Bestsellers</a>

            <div class="group relative">
                <a href="{{ route('shop', 'serums') }}" class="nav-link inline-flex items-center gap-1 whitespace-nowrap" style="white-space: nowrap;">
                    Face <x-icon name="chevron-down" class="h-3.5 w-3.5" />
                </a>
                <div class="invisible absolute top-full left-1/2 z-50 w-[430px] -translate-x-1/2 translate-y-2 border border-cream-200 bg-white opacity-0 shadow-lift transition-all duration-200 group-hover:visible group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:visible group-focus-within:translate-y-0 group-focus-within:opacity-100">
                    <div class="grid grid-cols-2 gap-6 p-7">
                        <div>
                            <p class="eyebrow mb-3">Shop Face</p>
                            <ul class="space-y-2.5 text-sm text-ink-700">
                                <li><a href="{{ route('shop', 'face-wash') }}" class="transition-colors hover:text-moss-600">Face Cleansers</a></li>
                                <li><a href="{{ route('shop', 'moisturisers') }}" class="transition-colors hover:text-moss-600">Moisturisers</a></li>
                                <li><a href="{{ route('shop', 'lip-care') }}" class="transition-colors hover:text-moss-600">Lip Care</a></li>
                                <li><a href="{{ route('shop', 'toners') }}" class="transition-colors hover:text-moss-600">Toners & Mists</a></li>
                            </ul>
                        </div>
                        <div>
                            <p class="eyebrow mb-3">By Ingredient</p>
                            <ul class="space-y-2.5 text-sm text-ink-700">
                                <li><a href="{{ route('shop') }}" class="transition-colors hover:text-moss-600">Kashmiri Saffron</a></li>
                                <li><a href="{{ route('shop') }}" class="transition-colors hover:text-moss-600">Goat Milk</a></li>
                                <li><a href="{{ route('shop') }}" class="transition-colors hover:text-moss-600">Damask Rose</a></li>
                                <li><a href="{{ route('shop') }}" class="transition-colors hover:text-moss-600">Wild Amla</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="group relative">
                <a href="{{ route('shop', 'shampoos') }}" class="nav-link inline-flex items-center gap-1 whitespace-nowrap" style="white-space: nowrap;">
                    Hair <x-icon name="chevron-down" class="h-3.5 w-3.5" />
                </a>
                <div class="invisible absolute top-full left-1/2 z-50 w-[430px] -translate-x-1/2 translate-y-2 border border-cream-200 bg-white opacity-0 shadow-lift transition-all duration-200 group-hover:visible group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:visible group-focus-within:translate-y-0 group-focus-within:opacity-100">
                    <div class="grid grid-cols-2 gap-6 p-7">
                        <div>
                            <p class="eyebrow mb-3">Shop Hair</p>
                            <ul class="space-y-2.5 text-sm text-ink-700">
                                <li><a href="{{ route('shop', 'shampoos') }}" class="transition-colors hover:text-moss-600">Herbal Shampoos</a></li>
                                <li><a href="{{ route('shop', 'shampoos') }}" class="transition-colors hover:text-moss-600">Cold-Pressed Oils</a></li>
                            </ul>
                        </div>
                        <div>
                            <p class="eyebrow mb-3">By Concern</p>
                            <ul class="space-y-2.5 text-sm text-ink-700">
                                <li><a href="{{ route('shop') }}" class="transition-colors hover:text-moss-600">Hairfall Control</a></li>
                                <li><a href="{{ route('shop') }}" class="transition-colors hover:text-moss-600">Dandruff Care</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <a href="{{ route('shop', 'perfumes') }}" class="nav-link whitespace-nowrap" style="white-space: nowrap;">Perfumes</a>
            <a href="{{ route('shop') }}" class="nav-link whitespace-nowrap" style="white-space: nowrap;">Shop All</a>
            <a href="{{ route('contact') }}" class="nav-link whitespace-nowrap" style="white-space: nowrap;">Contact</a>
            <a href="{{ route('order.track') }}" class="nav-link whitespace-nowrap" style="color: #186297; font-weight: 700; white-space: nowrap;">Track Order</a>
        </nav>

        {{-- Action icons & Customer Auth State --}}
        <div class="flex items-center gap-3">
            @auth
                <div class="group relative">
                    <button type="button" style="display: inline-flex; align-items: center; gap: 8px; border-radius: 50px; border: 1px solid #cbd5e1; background: #ffffff; padding: 6px 14px; font-size: 13px; font-weight: 600; color: #0f172a; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.05); white-space: nowrap;">
                        <span style="background: #186297; color: #ffffff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; text-transform: uppercase; flex-shrink: 0;">
                            {{ substr(Auth::user()->name, 0, 1) }}
                        </span>
                        <span style="white-space: nowrap;">Hi, {{ Str::words(Auth::user()->name, 1, '') }}</span>
                        <x-icon name="chevron-down" class="h-3.5 w-3.5 text-ink-500 shrink-0" />
                    </button>

                    <div class="invisible absolute right-0 top-full z-50 opacity-0 transition-all duration-200 group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100" style="width: 270px; min-width: 270px; margin-top: 8px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 16px; box-shadow: 0 12px 30px rgba(15,23,42,0.15); overflow: hidden; padding: 6px;">
                        
                        {{-- Header user card --}}
                        <div style="padding: 12px 14px; background: #f8fafc; border-radius: 12px; border-bottom: 1px solid #e2e8f0; margin-bottom: 4px; display: flex; align-items: center; gap: 10px;">
                            <div style="width: 36px; height: 36px; border-radius: 50%; background: #186297; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; text-transform: uppercase;">
                                {{ substr(Auth::user()->name, 0, 1) }}
                            </div>
                            <div style="overflow: hidden; width: 100%;">
                                <div style="font-size: 13px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ Auth::user()->name }}</div>
                                <div style="font-size: 11px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ Auth::user()->email }}</div>
                            </div>
                        </div>

                        {{-- Navigation links --}}
                        <a href="{{ route('account') }}" style="display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: #334155; text-decoration: none; border-radius: 8px; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap;" onmouseover="this.style.background='#e0eff9'; this.style.color='#186297';" onmouseout="this.style.background='transparent'; this.style.color='#334155';">
                            <x-icon name="user" style="width: 16px; height: 16px; flex-shrink: 0; color: #186297;" />
                            <span>My Account Dashboard</span>
                        </a>

                        <a href="{{ route('account') }}#orders" style="display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: #334155; text-decoration: none; border-radius: 8px; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap;" onmouseover="this.style.background='#e0eff9'; this.style.color='#186297';" onmouseout="this.style.background='transparent'; this.style.color='#334155';">
                            <x-icon name="bag" style="width: 16px; height: 16px; flex-shrink: 0; color: #186297;" />
                            <span>My Orders History</span>
                        </a>

                        <a href="{{ route('account') }}#address" style="display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: #334155; text-decoration: none; border-radius: 8px; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap;" onmouseover="this.style.background='#e0eff9'; this.style.color='#186297';" onmouseout="this.style.background='transparent'; this.style.color='#334155';">
                            <x-icon name="truck" style="width: 16px; height: 16px; flex-shrink: 0; color: #186297;" />
                            <span>Manage Shipping Address</span>
                        </a>

                        <a href="{{ route('account') }}#password" style="display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: #334155; text-decoration: none; border-radius: 8px; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap;" onmouseover="this.style.background='#e0eff9'; this.style.color='#186297';" onmouseout="this.style.background='transparent'; this.style.color='#334155';">
                            <x-icon name="lock" style="width: 16px; height: 16px; flex-shrink: 0; color: #186297;" />
                            <span>Security & Change Password</span>
                        </a>

                        <div style="height: 1px; background: #e2e8f0; margin: 4px 0;"></div>

                        <form action="{{ route('logout') }}" method="POST" style="margin: 0;">
                            @csrf
                            <button type="submit" style="width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; font-weight: 700; color: #b91c1c; background: transparent; border: none; border-radius: 8px; cursor: pointer; text-align: left; white-space: nowrap; transition: background 0.15s ease;" onmouseover="this.style.background='#fee2e2';" onmouseout="this.style.background='transparent';">
                                <span>Sign Out Account</span>
                            </button>
                        </form>
                    </div>
                </div>
            @else
                <a href="{{ route('login') }}" class="hidden sm:inline-flex items-center gap-1.5 text-xs font-semibold text-ink-800 hover:text-moss-700 transition-colors px-3 py-1.5 border border-sand-300 rounded-full hover:border-moss-600 bg-cream-50 hover:bg-white">
                    <x-icon name="user" class="h-4 w-4" />
                    <span>Sign In / Register</span>
                </a>
            @endauth

            <a href="{{ route('cart') }}" class="relative p-2 text-ink-900 transition-colors hover:text-moss-600" aria-label="Shopping Bag">
                <x-icon name="bag" class="h-5 w-5" />
                @php $cartCount = count(session('cart', [])); @endphp
                @if($cartCount > 0)
                    <span class="absolute top-0.5 right-0 flex h-4.5 w-4.5 items-center justify-center rounded-full bg-terra-500 text-[10px] font-bold text-white">{{ $cartCount }}</span>
                @endif
            </a>
        </div>
    </div>
</header>

{{-- Mobile drawer + overlay --}}
<div class="fixed inset-0 z-50 bg-ink-900/50 opacity-0 transition-opacity duration-300 pointer-events-none lg:hidden" data-menu-overlay aria-hidden="true"></div>
<aside class="fixed inset-y-0 left-0 z-50 flex w-80 max-w-[85vw] -translate-x-full flex-col bg-white transition-transform duration-300 lg:hidden" data-mobile-menu aria-label="Mobile menu">
    <div class="flex items-center justify-between border-b border-cream-200 px-5 py-4">
        <img src="{{ asset('images/logo.png') }}" alt="{{ config('shop.name') }}" class="h-9 w-auto object-contain">
        <button type="button" class="cursor-pointer p-2 text-ink-900" data-menu-close aria-label="Close menu">
            <x-icon name="close" class="h-5 w-5" />
        </button>
    </div>
    <nav class="flex-1 overflow-y-auto px-5 py-4" aria-label="Mobile">
        <ul class="divide-y divide-cream-200">
            <li><a href="{{ route('shop') }}" class="block py-3.5 text-sm font-semibold tracking-[0.14em] uppercase">Bestsellers</a></li>
            <li><a href="{{ route('shop') }}" class="block py-3.5 text-sm font-semibold tracking-[0.14em] uppercase">Shop All</a></li>
            <li><a href="{{ route('contact') }}" class="block py-3.5 text-sm font-semibold tracking-[0.14em] uppercase">Contact</a></li>
            <li><a href="{{ route('order.track') }}" class="block py-3.5 text-sm font-semibold tracking-[0.14em] uppercase text-moss-700">Track Order</a></li>
        </ul>
    </nav>
    <div class="border-t border-cream-200 p-5">
        @auth
            <a href="{{ route('account') }}" class="btn-outline w-full justify-center">
                <x-icon name="user" class="h-4 w-4" /> My Account
            </a>
        @else
            <a href="{{ route('login') }}" class="btn-outline w-full justify-center">
                <x-icon name="user" class="h-4 w-4" /> Sign In
            </a>
        @endauth
    </div>
</aside>