@php
    $navMode = $storeConfig['headerNavigationMode'] ?? 'MODE_A';
    $currentPath = '/' . ltrim(request()->path(), '/');

    if ($navMode === 'MODE_B') {
        $navLinks = [
            ['label' => 'Home', 'url' => '/'],
            ['label' => 'All Sarees', 'url' => '/sarees'],
            ['label' => 'New Arrivals', 'url' => '/collections/new-arrivals'],
            ['label' => 'Festive Edit', 'url' => '/collections/festive-edit'],
            ['label' => 'Offers', 'url' => '/collections/offers'],
        ];
    } else {
        // MODE_A (Default): Flat Direct Saree Category Bar
        $navLinks = [
            ['label' => 'Home', 'url' => '/'],
            ['label' => 'All Sarees', 'url' => '/sarees'],
        ];
        foreach ($activeCategories as $cat) {
            if (!empty($cat['showInHeaderModeA'])) {
                $navLinks[] = [
                    'label' => $cat['shortName'] ?? $cat['name'],
                    'url' => '/category/' . $cat['slug'],
                ];
            }
        }
    }
@endphp

<header class="sticky top-0 z-header w-full bg-brand-primary text-text-light">
    {{-- ====================================================================
         1. DESKTOP MAIN MENUBAR (1025px+ Viewport, Height: 74px)
         3-Zone Horizontal Layout: Left 20% Logo | Center 65% Links | Right 15% Bag
         ==================================================================== --}}
    <div class="hidden lg:flex items-center justify-between h-[74px] max-w-container mx-auto px-[24px]">
        {{-- Left Zone (20% Width) — Brand Logo --}}
        <div class="w-[20%] flex items-center">
            <a href="{{ url('/') }}" class="inline-flex items-center focus:outline-none group" aria-label="{{ $storeConfig['brandName'] }} Home">
                @if(!empty($storeConfig['logoUrl']))
                    <img src="{{ $storeConfig['logoUrl'] }}" alt="{{ $storeConfig['brandName'] }}" class="h-[40px] w-auto object-contain">
                @else
                    <span class="font-heading font-bold text-[28px] tracking-[1px] text-text-light group-hover:text-brand-accent transition-colors duration-200">
                        {{ $storeConfig['brandName'] }}
                    </span>
                @endif
            </a>
        </div>

        {{-- Center Zone (65% Width) — Switchable Navigation Modes (MODE_A or MODE_B) --}}
        <nav class="w-[65%] flex items-center justify-center gap-[28px]" aria-label="Main Navigation">
            @foreach($navLinks as $link)
                @php
                    $isActive = ($link['url'] === '/' && $currentPath === '/')
                        || ($link['url'] !== '/' && str_starts_with($currentPath, $link['url']));
                @endphp
                <a href="{{ url($link['url']) }}"
                   class="relative py-[6px] font-body font-medium text-[15px] transition-colors duration-200 border-b-[2px] {{ $isActive ? 'text-brand-accent border-brand-accent' : 'text-text-light border-transparent hover:text-brand-accent hover:border-brand-accent' }}">
                    {{ $link['label'] }}
                </a>
            @endforeach
        </nav>

        {{-- Right Zone (15% Width) — Shopping Bag Trigger Only (Zero Clutter) --}}
        <div class="w-[15%] flex items-center justify-end">
            <button type="button"
                    @click="$store.ui.openCartDrawer($el)"
                    :aria-label="'Shopping bag, ' + $store.cart.totalCount + ' items'"
                    class="inline-flex items-center gap-[8px] h-[44px] px-[12px] text-text-light hover:text-brand-accent transition-colors duration-200 cursor-pointer">
                <svg class="w-[22px] h-[22px] stroke-current fill-none" viewBox="0 0 24 24" stroke-width="1.8" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                </svg>
                {{-- Contrast Rule: Solid --brand-accent badge ALWAYS uses --text-primary text --}}
                <span class="inline-flex items-center justify-center min-w-[22px] h-[22px] px-[6px] rounded-full bg-brand-accent text-text-primary font-body font-bold text-[12px] leading-none"
                      x-text="$store.cart.totalCount">
                    0
                </span>
            </button>
        </div>
    </div>

    {{-- ====================================================================
         2. MOBILE & TABLET STICKY HEADER BAR (320px – 1024px, Height: 60px)
         3-Part Symmetric Layout: Left Hamburger | Center Logo | Right Bag
         ==================================================================== --}}
    <div class="flex lg:hidden items-center justify-between h-[60px] px-[12px] md:px-[20px]">
        {{-- Left: 44x44px Hamburger Menu Button --}}
        <button type="button"
                @click="$store.ui.openMobileMenu($el)"
                aria-label="Open menu"
                class="w-[44px] h-[44px] inline-flex items-center justify-center text-text-light hover:text-brand-accent transition-colors duration-200 cursor-pointer">
            <svg class="w-[24px] h-[24px] stroke-current fill-none" viewBox="0 0 24 24" stroke-width="1.8" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
        </button>

        {{-- Center: Brand Logo (22px) --}}
        <a href="{{ url('/') }}" class="inline-flex items-center justify-center" aria-label="{{ $storeConfig['brandName'] }} Home">
            @if(!empty($storeConfig['logoUrl']))
                <img src="{{ $storeConfig['logoUrl'] }}" alt="{{ $storeConfig['brandName'] }}" class="h-[32px] w-auto object-contain">
            @else
                <span class="font-heading font-bold text-[22px] tracking-[1px] text-text-light">
                    {{ $storeConfig['brandName'] }}
                </span>
            @endif
        </a>

        {{-- Right: 44x44px Shopping Bag Button + Counter Badge --}}
        <button type="button"
                @click="$store.ui.openCartDrawer($el)"
                :aria-label="'Shopping bag, ' + $store.cart.totalCount + ' items'"
                class="min-w-[44px] h-[44px] px-[4px] inline-flex items-center justify-end gap-[5px] text-text-light hover:text-brand-accent transition-colors duration-200 cursor-pointer">
            <svg class="w-[21px] h-[21px] stroke-current fill-none" viewBox="0 0 24 24" stroke-width="1.8" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
            </svg>
            <span class="inline-flex items-center justify-center min-w-[20px] h-[20px] px-[5px] rounded-full bg-brand-accent text-text-primary font-body font-bold text-[11px] leading-none"
                  x-text="$store.cart.totalCount">
                0
            </span>
        </button>
    </div>
</header>