Store Navbar

@props([
    'brand'       => 'Lumière',
    'promoText'   => 'Free shipping on orders over $50',
    'cartCount'   => 3,
    'shopLabel'   => 'Shop',
    'links'       => [
        ['label' => 'Deals',   'href' => '#'],
        ['label' => 'New In',  'href' => '#'],
        ['label' => 'About',   'href' => '#'],
    ],
    'categories'  => [
        [
            'heading' => 'Women',
            'links'   => [
                ['label' => 'Dresses',    'href' => '#'],
                ['label' => 'Tops',       'href' => '#'],
                ['label' => 'Knitwear',   'href' => '#'],
                ['label' => 'Outerwear',  'href' => '#'],
            ],
        ],
        [
            'heading' => 'Men',
            'links'   => [
                ['label' => 'Shirts',     'href' => '#'],
                ['label' => 'Trousers',   'href' => '#'],
                ['label' => 'Footwear',   'href' => '#'],
                ['label' => 'Accessories','href' => '#'],
            ],
        ],
        [
            'heading' => 'Kids',
            'links'   => [
                ['label' => 'Girls',      'href' => '#'],
                ['label' => 'Boys',       'href' => '#'],
                ['label' => 'Footwear',   'href' => '#'],
                ['label' => 'Gifts',      'href' => '#'],
            ],
        ],
        [
            'heading' => 'Home',
            'links'   => [
                ['label' => 'Bedding',    'href' => '#'],
                ['label' => 'Kitchen',    'href' => '#'],
                ['label' => 'Living',     'href' => '#'],
                ['label' => 'Garden',     'href' => '#'],
            ],
        ],
    ],
    'featuredName'  => 'Merino Knit Dress',
    'featuredPrice' => '$129',
])

{{--
    store-navbar-mega — Storefront navbar with a full-width mega-menu flyout.
    - Promo strip (bg-primary), sticky main bar, Alpine x-data mega panel.
    - Composes <x-ui.button>, <x-ui.input>, <x-ui.badge>.
    - Semantic tokens only, logical spacing, WCAG AA, RTL-safe.
--}}
<x-ui.section
    space="none" {{ $attributes }}
    x-data="{
        open: false,
        mobileOpen: false,
        init() {
            this._escape = (e) => { if (e.key === 'Escape') { this.open = false; this.mobileOpen = false; } };
            document.addEventListener('keydown', this._escape);
        },
        destroy() {
            document.removeEventListener('keydown', this._escape);
        }
    }"
>
    {{-- Promo strip --}}
    <div class="bg-primary text-primary-foreground">
        <p class="mx-auto max-w-7xl px-4 py-2 text-center text-sm font-medium">
            {{ __($promoText) }}
        </p>
    </div>

    {{-- Main navbar --}}
    <nav
        class="relative border-b border-border bg-background"
        aria-label="{{ __('Main navigation') }}"
    >
        <div class="mx-auto flex h-16 max-w-7xl items-center gap-4 px-4 sm:px-6 lg:px-8">

            {{-- Brand wordmark --}}
            <a href="#" class="me-6 shrink-0 text-xl font-bold tracking-tight text-foreground">
                {{ $brand }}
            </a>

            {{-- Primary nav — desktop --}}
            <div class="hidden flex-1 items-center gap-2 lg:flex">

                {{-- Shop trigger --}}
                <button
                    type="button"
                    class="inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    x-on:click="open = !open"
                    :aria-expanded="open"
                    aria-haspopup="true"
                    aria-controls="mega-panel"
                >
                    {{ __($shopLabel) }}
                    {{-- Chevron --}}
                    <svg
                        class="size-4 shrink-0 transition-transform duration-200"
                        :class="open ? 'rotate-180' : ''"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        aria-hidden="true"
                    >
                        <path d="M6 9l6 6 6-6"/>
                    </svg>
                </button>

                @foreach ($links as $link)
                    <a
                        href="{{ $link['href'] }}"
                        class="rounded-md px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted"
                    >
                        {{ __($link['label']) }}
                    </a>
                @endforeach
            </div>

            {{-- End cluster --}}
            <div class="ms-auto flex items-center gap-2">

                {{-- Search input — desktop --}}
                <div class="hidden lg:block">
                    <label for="store-search" class="sr-only">{{ __('Search') }}</label>
                    <x-ui.input
                        id="store-search"
                        type="search"
                        :placeholder="__('Search…')"
                        class="w-56"
                        autocomplete="off"
                    />
                </div>

                {{-- Wishlist --}}
                <button
                    type="button"
                    class="rounded-md p-2 text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    aria-label="{{ __('Wishlist') }}"
                >
                    <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                    </svg>
                </button>

                {{-- Account --}}
                <button
                    type="button"
                    class="rounded-md p-2 text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    aria-label="{{ __('Account') }}"
                >
                    <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <circle cx="12" cy="8" r="4"/>
                        <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
                    </svg>
                </button>

                {{-- Cart with badge --}}
                <x-ui.notification-badge :count="$cartCount">
                    <button
                        type="button"
                        class="rounded-md p-2 text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                        aria-label="{{ __('Cart, :count items', ['count' => $cartCount]) }}"
                    >
                        <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
                            <line x1="3" y1="6" x2="21" y2="6"/>
                            <path d="M16 10a4 4 0 0 1-8 0"/>
                        </svg>
                    </button>
                </x-ui.notification-badge>

                {{-- Hamburger — mobile --}}
                <button
                    type="button"
                    class="rounded-md p-2 text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring lg:hidden"
                    x-on:click="mobileOpen = !mobileOpen"
                    :aria-expanded="mobileOpen"
                    aria-label="{{ __('Toggle menu') }}"
                >
                    <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <line x1="4" y1="6" x2="20" y2="6"/>
                        <line x1="4" y1="12" x2="20" y2="12"/>
                        <line x1="4" y1="18" x2="20" y2="18"/>
                    </svg>
                </button>
            </div>
        </div>

        {{-- Mega-menu panel — desktop --}}
        <div
            id="mega-panel"
            x-show="open"
            x-on:click.outside="open = false"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 -translate-y-2"
            x-transition:enter-end="opacity-100 translate-y-0"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100 translate-y-0"
            x-transition:leave-end="opacity-0 -translate-y-2"
            class="absolute inset-x-0 top-full z-50 border-b border-border bg-card shadow-lg"
            role="region"
            aria-label="{{ __('Shop menu') }}"
            x-cloak
        >
            <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
                <div class="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-6">

                    {{-- Category columns --}}
                    @foreach ($categories as $category)
                        <div class="col-span-1">
                            <h3 class="mb-4 text-xs font-semibold uppercase tracking-widest text-muted-foreground">
                                {{ __($category['heading']) }}
                            </h3>
                            <ul class="space-y-2" role="list">
                                @foreach ($category['links'] as $catLink)
                                    <li>
                                        <a
                                            href="{{ $catLink['href'] }}"
                                            class="text-sm text-foreground transition-colors hover:text-primary"
                                        >
                                            {{ __($catLink['label']) }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endforeach

                    {{-- Featured product card --}}
                    <div class="col-span-2 lg:col-span-2">
                        <div class="relative overflow-hidden rounded-lg bg-muted">
                            {{-- Aspect ratio placeholder --}}
                            <div class="aspect-[4/3] w-full bg-muted"></div>

                            {{-- "New arrival" badge --}}
                            <div class="absolute start-3 top-3">
                                <x-ui.badge variant="secondary">{{ __('New arrival') }}</x-ui.badge>
                            </div>

                            {{-- Product info overlay --}}
                            <div class="absolute inset-x-0 bottom-0 flex items-end justify-between gap-2 bg-card/90 p-4 backdrop-blur-sm">
                                <div>
                                    <p class="text-sm font-semibold text-foreground">{{ __($featuredName) }}</p>
                                    <p class="text-sm text-muted-foreground">{{ $featuredPrice }}</p>
                                </div>
                                <x-ui.button size="sm" variant="default">
                                    {{ __('Shop') }}
                                </x-ui.button>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Currency / language selector --}}
                <div class="mt-6 flex items-center gap-2 border-t border-border pt-4">
                    <label for="mega-locale" class="text-xs text-muted-foreground">{{ __('Language / Currency') }}</label>
                    <x-ui.select size="sm" id="mega-locale" name="locale" class="w-max" aria-label="{{ __('Language / Currency') }}">
                        <option value="en-usd">{{ __('EN / USD') }}</option>
                        <option value="en-gbp">{{ __('EN / GBP') }}</option>
                        <option value="fr-eur">{{ __('FR / EUR') }}</option>
                    </x-ui.select>
                </div>
            </div>
        </div>

        {{-- Mobile nav drawer --}}
        <div
            x-show="mobileOpen"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            class="border-b border-border bg-card px-4 py-4 lg:hidden"
            x-cloak
        >
            <div class="mb-4">
                <label for="store-search-mobile" class="sr-only">{{ __('Search') }}</label>
                <x-ui.input
                    id="store-search-mobile"
                    type="search"
                    :placeholder="__('Search…')"
                    class="w-full"
                    autocomplete="off"
                />
            </div>
            <nav aria-label="{{ __('Mobile navigation') }}">
                <ul class="space-y-2" role="list">
                    <li>
                        <a href="#" class="block rounded-md px-4 py-2 text-sm font-medium text-foreground hover:bg-muted">
                            {{ __($shopLabel) }}
                        </a>
                    </li>
                    @foreach ($links as $link)
                        <li>
                            <a
                                href="{{ $link['href'] }}"
                                class="block rounded-md px-4 py-2 text-sm font-medium text-foreground hover:bg-muted"
                            >
                                {{ __($link['label']) }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </nav>
        </div>
    </nav>
</x-ui.section>