{{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    HEADER
    Mobile: logo | search icon | cart icon
    Desktop: logo | search bar | account | cart | sell CTA
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
<header class="bg-orange-500 sticky top-0 z-50 shadow-md" x-data>

    {{-- ── Top Bar ── --}}
    <div class="max-w-7xl mx-auto px-3 md:px-6">
        <div class="flex items-center gap-3 h-14 md:h-16">

            {{-- Logo --}}
            <a href="/" class="flex-shrink-0 flex items-center gap-1.5">
                <div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center shadow-sm">
                    <span class="text-orange-500 font-black text-base leading-none">J</span>
                </div>
                <span class="text-white font-black text-lg hidden sm:block tracking-tight">Jumia</span>
            </a>

            {{-- ── Search Bar (desktop always visible, mobile toggleable) ── --}}
            <div class="flex-1 max-w-2xl mx-auto hidden md:block" x-data="searchBar()">
                <div class="relative">
                    <input
                        type="text"
                        x-model="query"
                        @input.debounce.300ms="search()"
                        @keydown.enter="submit()"
                        @keydown.escape="open = false"
                        @click.outside="open = false"
                        placeholder="Search products, brands and categories"
                        class="w-full pl-4 pr-12 py-2.5 rounded-md text-sm bg-white text-gray-900 placeholder-gray-400
                               focus:outline-none focus:ring-2 focus:ring-white/50 transition-all"
                    >
                    <button @click="submit()"
                            class="absolute right-0 top-0 bottom-0 px-4 bg-orange-600 hover:bg-orange-700 rounded-r-md
                                   flex items-center justify-center transition-colors">
                        <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </button>

                    {{-- Suggestions dropdown --}}
                    <div x-show="open" x-transition:enter="animate-slide-down"
                         class="absolute top-full left-0 right-0 mt-1 bg-white rounded-lg shadow-xl border border-gray-100 z-50 overflow-hidden">
                        <template x-for="item in results" :key="item.uuid">
                            <a :href="`/products/${item.uuid}`"
                               class="flex items-center gap-3 px-4 py-3 hover:bg-orange-50 transition-colors">
                                <div class="w-10 h-10 bg-gray-100 rounded flex-shrink-0 overflow-hidden">
                                    <img :src="item.primary_image || '/images/placeholder.png'"
                                         :alt="item.name"
                                         class="w-full h-full object-cover">
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm text-gray-900 line-clamp-1" x-text="item.name"></p>
                                    <p class="text-xs text-orange-500 font-semibold"
                                       x-text="'₦' + Number(item.current_price).toLocaleString('en-NG')"></p>
                                </div>
                            </a>
                        </template>
                        <a :href="`/products?q=${encodeURIComponent(query)}`"
                           class="flex items-center gap-2 px-4 py-3 bg-orange-50 text-orange-600 text-sm font-medium hover:bg-orange-100 transition-colors">
                            <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>
                            Search for "<span x-text="query"></span>"
                        </a>
                    </div>
                </div>
            </div>

            {{-- ── Right Actions ── --}}
            <div class="flex items-center gap-1 ml-auto md:ml-0">

                {{-- Mobile search toggle --}}
                <button class="md:hidden p-2 text-white hover:bg-orange-600 rounded-lg transition-colors"
                        @click="$store.app.searchOpen = !$store.app.searchOpen">
                    <svg class="w-5 h-5" 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>

                {{-- Account (desktop) --}}
                <div class="hidden md:block relative" x-data="{ open: false }">
                    <button @click="open = !open" @click.outside="open = false"
                            class="flex items-center gap-1.5 px-3 py-2 text-white hover:bg-orange-600 rounded-lg transition-colors text-sm">
                        <svg class="w-5 h-5" 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>
                        <span x-show="!$store.app.isLoggedIn">Account</span>
                        <span x-show="$store.app.isLoggedIn" x-text="$store.app.user?.first_name || 'Account'"></span>
                        <svg class="w-3 h-3" 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>
                    </button>

                    <div x-show="open" x-transition:enter="animate-slide-down"
                         class="absolute right-0 top-full mt-1 w-52 bg-white rounded-xl shadow-xl border border-gray-100 py-1 z-50">

                        <template x-if="!$store.app.isLoggedIn">
                            <div>
                                <a href="/login" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-orange-50 font-medium">Sign In</a>
                                <a href="/register" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-orange-50">Create Account</a>
                                <div class="border-t border-gray-100 my-1"></div>
                                <a href="/seller/register" class="block px-4 py-2.5 text-sm text-orange-500 hover:bg-orange-50 font-medium">
                                    Sell on Jumia →
                                </a>
                            </div>
                        </template>

                        <template x-if="$store.app.isLoggedIn">
                            <div>
                                <a href="/account" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-orange-50">My Account</a>
                                <a href="/orders" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-orange-50">My Orders</a>
                                <a href="/wishlist" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-orange-50">Wishlist</a>
                                <template x-if="$store.app.isSeller">
                                    <div>
                                        <div class="border-t border-gray-100 my-1"></div>
                                        <a href="/seller/dashboard" class="block px-4 py-2.5 text-sm text-orange-500 hover:bg-orange-50 font-medium">Seller Centre</a>
                                    </div>
                                </template>
                                <div class="border-t border-gray-100 my-1"></div>
                                <button @click="$store.app.logout()"
                                        class="block w-full text-left px-4 py-2.5 text-sm text-red-500 hover:bg-red-50">
                                    Sign Out
                                </button>
                            </div>
                        </template>
                    </div>
                </div>

                {{-- Wishlist (desktop) --}}
                <a href="/wishlist"
                   class="hidden md:flex items-center gap-1.5 px-3 py-2 text-white hover:bg-orange-600 rounded-lg transition-colors text-sm">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                    </svg>
                    <span>Saved</span>
                </a>

                {{-- Cart --}}
                <button @click="$store.app.cartDrawerOpen = true"
                        class="flex items-center gap-1.5 px-3 py-2 text-white hover:bg-orange-600 rounded-lg transition-colors relative">
                    <div class="relative">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                        <span x-show="$store.app.cartCount > 0"
                              x-text="$store.app.cartCount > 99 ? '99+' : $store.app.cartCount"
                              class="absolute -top-2 -right-2 bg-white text-orange-500 text-xs font-black
                                     w-4 h-4 rounded-full flex items-center justify-center leading-none min-w-[1rem] px-0.5">
                        </span>
                    </div>
                    <span class="hidden md:block text-sm">Cart</span>
                </button>

                {{-- Sell CTA (desktop) --}}
                <a href="/seller/register" x-show="!$store.app.isSeller"
                   class="hidden md:block ml-1 px-3 py-2 bg-white text-orange-500 text-sm font-bold rounded-lg hover:bg-orange-50 transition-colors">
                    Sell
                </a>
            </div>
        </div>
    </div>

    {{-- ── Mobile Search Bar (expandable) ── --}}
    <div x-show="$store.app.searchOpen"
         x-transition:enter="animate-slide-down"
         x-data="searchBar()"
         class="md:hidden bg-orange-600 px-3 pb-3">
        <div class="relative">
            <input
                type="text"
                x-model="query"
                @input.debounce.300ms="search()"
                @keydown.enter="submit()"
                x-ref="mobileInput"
                placeholder="Search products..."
                class="w-full pl-4 pr-10 py-2.5 rounded-md text-sm bg-white text-gray-900 placeholder-gray-400 focus:outline-none"
                x-init="$nextTick(() => { if ($store.app.searchOpen) $refs.mobileInput.focus() })"
            >
            <button @click="submit()" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">
                <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.5"
                          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
            </button>
        </div>
        {{-- Mobile search suggestions --}}
        <div x-show="open && results.length" class="mt-1 bg-white rounded-lg shadow-lg overflow-hidden">
            <template x-for="item in results" :key="item.uuid">
                <a :href="`/products/${item.uuid}`"
                   class="flex items-center gap-3 px-3 py-2.5 hover:bg-orange-50 border-b border-gray-100 last:border-0">
                    <div class="w-8 h-8 bg-gray-100 rounded flex-shrink-0 overflow-hidden">
                        <img :src="item.primary_image || '/images/placeholder.png'" class="w-full h-full object-cover">
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-xs text-gray-900 line-clamp-1" x-text="item.name"></p>
                        <p class="text-xs text-orange-500 font-semibold"
                           x-text="'₦' + Number(item.current_price).toLocaleString('en-NG')"></p>
                    </div>
                </a>
            </template>
        </div>
    </div>

    {{-- ── Category Navigation (desktop) ── --}}
    <nav class="hidden md:block bg-orange-600 border-t border-orange-400/30">
        <div class="max-w-7xl mx-auto px-6">
            <div class="flex items-center gap-1 overflow-x-auto scrollbar-hide py-1">
                @php
                    $navCategories = [
                        ['name' => 'All Categories', 'icon' => '☰', 'url' => '/products'],
                        ['name' => 'Electronics', 'icon' => '📱', 'url' => '/products?category=electronics'],
                        ['name' => 'Fashion', 'icon' => '👗', 'url' => '/products?category=fashion'],
                        ['name' => 'Home & Living', 'icon' => '🏠', 'url' => '/products?category=home-living'],
                        ['name' => 'Computing', 'icon' => '💻', 'url' => '/products?category=computing'],
                        ['name' => 'Phones', 'icon' => '📞', 'url' => '/products?category=phones-tablets'],
                        ['name' => 'Appliances', 'icon' => '🏪', 'url' => '/products?category=home-appliances'],
                        ['name' => 'Health & Beauty', 'icon' => '💅', 'url' => '/products?category=health-beauty'],
                        ['name' => 'Groceries', 'icon' => '🛒', 'url' => '/products?category=groceries'],
                        ['name' => 'Baby', 'icon' => '🍼', 'url' => '/products?category=baby-products'],
                        ['name' => 'Sports', 'icon' => '⚽', 'url' => '/products?category=sports'],
                        ['name' => 'Flash Sale', 'icon' => '⚡', 'url' => '/products?flash_sale=1'],
                    ];
                @endphp
                @foreach($navCategories as $cat)
                    <a href="{{ $cat['url'] }}"
                       class="flex items-center gap-1.5 px-3 py-1.5 text-white/90 hover:text-white hover:bg-orange-500/50
                              rounded text-xs font-medium whitespace-nowrap transition-colors">
                        <span>{{ $cat['icon'] }}</span>
                        <span>{{ $cat['name'] }}</span>
                    </a>
                @endforeach
            </div>
        </div>
    </nav>
</header>