@php
    $cart = session()->get('cart', []);
@endphp
<header class="w-full bg-white shadow-sm sticky top-[env(safe-area-inset-top,0px)] z-50" style="-webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform;">
    <style>
        .nav-dropdown {
            visibility: hidden;
            opacity: 0;
            transform: translateY(10px) scale(0.98);
            transform-origin: top center;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            pointer-events: none;
        }
        .group:hover > .nav-dropdown {
            visibility: visible;
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }
        .submenu-dropdown {
            left: 100%;
            top: -0.5rem;
            margin-left: 0;
            visibility: hidden;
            opacity: 0;
            transform: translateX(10px) scale(0.98);
            transform-origin: top left;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            pointer-events: none;
        }
        .sub-group:hover > .submenu-dropdown {
            visibility: visible;
            opacity: 1;
            transform: translateX(0) scale(1);
            pointer-events: auto;
        }
    </style>

    <!-- Top Bar -->
    <div class="hidden lg:block bg-gray-50 border-b border-gray-100 py-1 px-4 text-[10px] font-medium text-gray-500">
        <div class="container mx-auto flex justify-between items-center">
            <div class="flex flex-col sm:flex-row items-center gap-4 sm:gap-6">
            <div class="flex items-center gap-2 group cursor-pointer">
                <div class="w-7 h-7 rounded-md bg-primary/10 flex items-center justify-center text-primary transition-all group-hover:bg-primary group-hover:text-white">
                    <i class="fas fa-bullhorn text-[10px]"></i>
                </div>
                <p class="header-top-welcome text-[11px] leading-[1.35] font-bold text-gray-500 uppercase tracking-widest">{{ $siteSettings['welcome_text'] ?? 'ঢাকা ফ্যাশনে স্বাগতম' }}</p>
            </div>
        </div>
            <div class="flex items-center">
                <div class="flex items-center gap-4">
            @if(isset($siteSettings['facebook_url']))
            <a href="{{ $siteSettings['facebook_url'] }}" target="_blank" class="w-7 h-7 rounded-md flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#1877F2] transition-all duration-300">
                <i class="fab fa-facebook-f text-xs"></i>
            </a>
            @endif
            @if(isset($siteSettings['instagram_url']))
            <a href="{{ $siteSettings['instagram_url'] }}" target="_blank" class="w-7 h-7 rounded-md flex items-center justify-center text-gray-400 hover:text-white hover:bg-gradient-to-tr from-[#FFB000] via-[#FF0000] to-[#E5008E] transition-all duration-300">
                <i class="fab fa-instagram text-xs"></i>
            </a>
            @endif
            @if(isset($siteSettings['youtube_url']))
            <a href="{{ $siteSettings['youtube_url'] }}" target="_blank" class="w-7 h-7 rounded-md flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#FF0000] transition-all duration-300">
                <i class="fab fa-youtube text-xs"></i>
            </a>
            @endif
        </div>
                <div class="flex items-center space-x-3 ml-5">
                    @guest
                        <a href="{{ route('login') }}" class="text-[10px] font-bold text-gray-500 hover:text-primary transition-colors flex items-center gap-1.5 px-3 py-1 hover:bg-primary/5 rounded-lg border border-transparent hover:border-primary/10">
                            <i class="fas fa-user-circle text-xs"></i>
                            <span>{{ __('LOGIN') }}</span>
                        </a>
                        <a href="{{ route('signup') }}" class="hidden sm:flex text-[10px] font-bold text-white bg-primary hover:bg-secondary px-4 py-1.5 rounded-lg transition-all shadow-md shadow-primary/15 active:scale-95">
                            {{ __('SIGN UP') }}
                        </a>
                    @else
                        
                        <form method="POST" action="{{ route('logout') }}" class="m-0">
                            @csrf
                            <button type="submit" class="text-[10px] font-bold text-red-500 hover:text-red-600 transition-colors flex items-center gap-1.5 px-3 py-1 hover:bg-red-50 rounded-lg">
                                <i class="fas fa-sign-out-alt"></i>
                                <span>{{ __('LOGOUT') }}</span>
                            </button>
                        </form>
                    @endguest
                </div>

                <!-- Language Switcher -->
                <div class="flex items-center space-x-3 ml-4 border-l border-gray-200 pl-4 h-5">
                    <div class="relative group cursor-pointer h-full flex items-center">
                        <button class="text-[10px] font-black text-gray-500 hover:text-primary transition-colors flex items-center gap-2 uppercase tracking-widest">
                            <i class="fas fa-globe text-xs"></i>
                            <span>{{ App::getLocale() == 'en' ? 'English' : 'বাংলা' }}</span>
                            <i class="fas fa-chevron-down text-[8px] mt-0.5 opacity-50 group-hover:rotate-180 transition-transform"></i>
                        </button>
                        <div class="absolute top-[calc(100%+0.5rem)] right-0 w-36 bg-white shadow-2xl rounded-2xl py-3 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-[100] border border-gray-100/50 scale-95 group-hover:scale-100 origin-top-right overflow-hidden">
                            @php
                                $langFiles = glob(base_path('lang/*.json'));
                                $locales = array_map(fn($f) => basename($f, '.json'), $langFiles);
                                $current = App::getLocale();
                                // Sort: current locale first, others alphabetically
                                usort($locales, function($a, $b) use ($current) {
                                    if ($a === $current) return -1;
                                    if ($b === $current) return 1;
                                    return strcmp($a, $b);
                                });
                                
                                $labels = [
                                    'en' => 'ENGLISH',
                                    'bn' => 'বাংলা (BN)'
                                ];
                            @endphp

                            @foreach($locales as $loc)
                                <a href="{{ route('lang.switch', $loc) }}" class="flex items-center justify-between px-5 py-2.5 text-[11px] font-bold text-gray-500 hover:bg-primary/5 hover:text-primary transition-all {{ $current == $loc ? 'text-primary bg-primary/5 font-black' : '' }}">
                                    <span>{{ $labels[$loc] ?? strtoupper($loc) }}</span>
                                    @if($current == $loc)
                                        <i class="fas fa-check text-[10px]"></i>
                                    @endif
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Header (mobile: same vertical padding as mobile-bottom-nav pt-2.5 pb-2) -->
    <div class="bg-white px-4 sm:px-6 py-0 lg:py-3">
        <div class="container mx-auto flex items-center justify-between gap-3 pt-2.5 pb-2 lg:gap-8 lg:pt-0 lg:pb-0">
            <!-- Mobile Menu Toggle -->
            <button onclick="openMobileMenu()" class="lg:hidden text-gray-700 -ml-0.5">
                <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="M4 6h16M4 12h16M4 18h16"/></svg>
            </button>

            <!-- Logo -->
            <div class="flex-shrink-0">
                <a href="/" class="flex-shrink-0 group">
                    @if(isset($siteSettings['site_logo']))
                        <img src="{{ asset('storage/' . $siteSettings['site_logo']) }}" class="h-8 sm:h-9 w-auto group-hover:scale-105 transition-all duration-500" alt="{{ $siteSettings['site_name'] ?? 'Aura Fashion' }}">
                    @else
                        <div class="flex items-center gap-2.5">
                            <div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white shadow-lg shadow-primary/25 group-hover:rotate-6 transition-all duration-500">
                                <i class="fas fa-shopping-bag text-base"></i>
                            </div>
                            <div class="leading-none">
                                <h1 class="text-lg font-black text-gray-900 uppercase tracking-tighter">{{ $siteSettings['site_name_part1'] ?? 'Aura' }}</h1>
                                <p class="text-[8px] font-black text-primary uppercase tracking-[0.25em]">{{ $siteSettings['site_name_part2'] ?? 'Fashion' }}</p>
                            </div>
                        </div>
                    @endif
                </a>
            </div>

            <!-- Search Bar — grows to use space between logo and call/icons -->
            <div class="hidden lg:flex flex-1 min-w-0 px-3 lg:px-6">
                <form action="/shop" method="GET" class="relative w-full flex">
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="{{ __('Search for Products...') }}" class="w-full border border-primary/25 rounded-l-xl py-2 pl-4 pr-3 focus:outline-none focus:ring-2 focus:ring-primary/15 focus:border-primary transition-colors text-sm font-medium">
                    <button type="submit" class="bg-primary text-white px-7 rounded-r-xl hover:bg-primary-dark transition-colors flex items-center justify-center shrink-0 shadow-md shadow-primary/15" aria-label="{{ __('Search') }}">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    </button>
                </form>
            </div>

            <!-- Icons -->
            <div class="flex items-center space-x-1.5 lg:space-x-4">
                <a href="tel:{{ preg_replace('/[^0-9]/', '', $siteSettings['phone'] ?? '01974210139') }}" class="hidden xl:flex flex-col items-start gap-0 leading-none">
                    <span class="text-[9px] font-bold text-gray-400 uppercase tracking-wide">{{ __('Call Support') }}</span>
                    <span class="text-xs font-extrabold text-primary">{{ $siteSettings['phone'] ?? '01744690307' }}</span>
                </a>

                <div class="flex items-center gap-2 lg:gap-3">
                    <div onclick="openCart()" class="relative group cursor-pointer">
                        <div class="p-2 rounded-full bg-gray-50 text-gray-600 group-hover:bg-primary/10 group-hover:text-primary transition-all">
                            <svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
                        </div>
                        <span class="cart-count-badge absolute -top-0.5 -right-0.5 bg-primary text-white text-[8px] min-w-[1rem] h-4 px-0.5 rounded-full flex items-center justify-center font-bold">{{ count($cart) }}</span>
                    </div>

                    @auth
                        <a href="{{ auth()->user()->role === 'admin' ? route('admin.dashboard') : route('profile') }}" class="hidden lg:block group">
                    @else
                        <a href="{{ route('login') }}" class="hidden lg:block group">
                    @endauth

                        <div class="p-2 rounded-full bg-gray-50 text-gray-600 group-hover:bg-primary/10 group-hover:text-primary transition-all">
                            <svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation Menu -->
    <nav class="hidden lg:block bg-white border-t border-gray-100">
        <div class="container mx-auto">
            <ul class="flex items-center justify-center flex-wrap gap-x-5 lg:gap-x-6 gap-y-1 text-xs font-bold text-gray-700 uppercase tracking-wide relative py-0.5">
                <li class="py-3.5"><a href="/" class="hover:text-primary transition-colors inline-block border-b-2 {{ request()->is('/') ? 'text-primary border-primary' : 'border-transparent' }}">{{ __('HOME') }}</a></li>
                <li class="py-3.5"><a href="/shop" class="hover:text-primary transition-colors inline-block border-b-2 {{ request()->is('shop') && !request('category') ? 'text-primary border-primary' : 'border-transparent' }}">{{ __('SHOP') }}</a></li>
                
                @foreach($categories as $category)
                    <li class="relative group py-3.5">
                        <a href="{{ route('category.show', ['slugs' => $category->slug]) }}" 
                           class="flex items-center gap-1 hover:text-primary transition-colors {{ request('category') == $category->slug ? 'text-primary' : '' }}">
                            {{ __($category->name) }}
                            @if($category->children->count() > 0)
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                            @endif
                        </a>

                        @if($category->children->count() > 0)
                            <ul class="nav-dropdown absolute top-full left-0 w-64 bg-white shadow-2xl shadow-gray-200/50 border border-gray-100/50 rounded-2xl py-3 z-[60]">
                                @foreach($category->children as $child)
                                    <li class="relative sub-group group/item">
                                        <a href="{{ route('category.show', ['slugs' => $category->slug . '/' . $child->slug]) }}" 
                                           class="flex items-center justify-between px-6 py-3 text-gray-600 hover:bg-primary/5 hover:text-primary transition-all text-[13px] font-bold tracking-widest uppercase">
                                            {{ __($child->name) }}
                                            @if($child->children->count() > 0)
                                                <svg class="w-4 h-4 text-gray-300 group-hover/item:text-primary group-hover/item:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                                            @endif
                                        </a>

                                        @if($child->children->count() > 0)
                                            <ul class="submenu-dropdown absolute -top-1 w-64 bg-white shadow-2xl shadow-gray-200/50 border border-gray-100/50 rounded-2xl py-3 z-[70] overflow-hidden">
                                                @foreach($child->children as $grandchild)
                                                    <li class="group/subitem">
                                                        <a href="{{ route('category.show', ['slugs' => $category->slug . '/' . $child->slug . '/' . $grandchild->slug]) }}" 
                                                           class="flex items-center gap-2 px-6 py-3 text-gray-500 hover:bg-primary/5 hover:text-primary transition-all text-[12px] font-bold tracking-[0.2em] uppercase">
                                                            <span class="w-1.5 h-1.5 rounded-full bg-gray-200 group-hover/subitem:bg-primary transition-colors"></span>
                                                            {{ __($grandchild->name) }}
                                                        </a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @endif
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </li>
                @endforeach
            </ul>
        </div>
    </nav>
</header>

<!-- Mobile Menu -->
@include('partials.mobile-menu')