Store Navbar

@props([
    'brand'        => 'Monogram',
    'brandHref'    => '/',
    'announcement' => 'Complimentary shipping & returns on every order',
    'cartCount'    => 2,
    'cartHref'     => '/cart',
    'accountHref'  => '/account',
    'collectionsLabel' => 'Collections',
    'links'        => null,
    'categories'   => null,
    'locales'      => null,
    'featuredName'  => 'The Atelier Edit',
    'featuredPrice' => '$420',
])

@php
    $links ??= [
        ['label' => 'New In',  'href' => '/new'],
        ['label' => 'Women',   'href' => '/women'],
        ['label' => 'Men',     'href' => '/men'],
        ['label' => 'Journal', 'href' => '/journal'],
    ];

    $categories ??= [
        [
            'heading' => 'Ready-to-Wear',
            'links'   => [
                ['label' => 'Tailoring',  'href' => '#'],
                ['label' => 'Knitwear',   'href' => '#'],
                ['label' => 'Outerwear',  'href' => '#'],
                ['label' => 'Dresses',    'href' => '#'],
            ],
        ],
        [
            'heading' => 'Accessories',
            'links'   => [
                ['label' => 'Leather Goods', 'href' => '#'],
                ['label' => 'Footwear',      'href' => '#'],
                ['label' => 'Jewellery',     'href' => '#'],
                ['label' => 'Eyewear',       'href' => '#'],
            ],
        ],
        [
            'heading' => 'The Maison',
            'links'   => [
                ['label' => 'Heritage',     'href' => '#'],
                ['label' => 'Sustainability','href' => '#'],
                ['label' => 'Stores',       'href' => '#'],
                ['label' => 'Contact',      'href' => '#'],
            ],
        ],
    ];

    $locales ??= [
        ['value' => 'en-usd', 'label' => 'United States — USD'],
        ['value' => 'en-gbp', 'label' => 'United Kingdom — GBP'],
        ['value' => 'fr-eur', 'label' => 'France — EUR'],
        ['value' => 'jp-jpy', 'label' => 'Japan — JPY'],
    ];
@endphp

{{--
    store-navbar-04 — "Editorial" Monogram storefront navbar.
    Monochrome editorial layout: thin announcement strip, a centered prominent
    `font-heading` wordmark on its own line, an UPPERCASE wide-tracked primary nav
    row beneath it whose "Collections" item opens a full-width mega-menu flyout,
    and an end cluster (search, account, locale select, cart count). Collapses to a
    focus-managed slide-in drawer on mobile.
    Composes <x-ui.button>, <x-ui.input>, <x-ui.badge>.
    Semantic tokens only, logical spacing, WCAG AA, RTL-safe.
--}}
<header
    {{ $attributes->merge(['class' => 'bg-background text-foreground']) }}
    data-slot="store-navbar"
    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);
            this.$watch('mobileOpen', (value) => {
                if (value) {
                    this.$nextTick(() => this.$refs.drawerClose?.focus());
                } else {
                    this.$refs.menuTrigger?.focus();
                }
            });
        },
        destroy() {
            document.removeEventListener('keydown', this._escape);
        }
    }"
>
    {{-- Announcement strip --}}
    <div class="bg-inverse text-inverse-foreground">
        <p class="mx-auto max-w-7xl px-4 py-2 text-center text-xs font-body uppercase tracking-widest sm:px-6 lg:px-8">
            {{ __($announcement) }}
        </p>
    </div>

    <nav class="relative border-b border-border bg-background" aria-label="{{ __('Main navigation') }}">
        {{-- Top row: start cluster, centered wordmark, end cluster --}}
        <div class="mx-auto grid max-w-7xl grid-cols-3 items-center gap-4 px-4 py-6 sm:px-6 lg:px-8">

            {{-- Start cluster --}}
            <div class="flex items-center">
                {{-- Hamburger — mobile --}}
                <x-ui.button
                    x-ref="menuTrigger"
                    variant="ghost"
                    size="icon"
                    class="lg:hidden"
                    x-on:click="mobileOpen = true"
                    ::aria-expanded="mobileOpen"
                    aria-controls="store-navbar-04-drawer"
                    aria-label="{{ __('Open menu') }}"
                >
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="size-5" aria-hidden="true">
                        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
                    </svg>
                </x-ui.button>

                {{-- Search trigger — desktop --}}
                <a
                    href="#"
                    class="hidden items-center gap-2 text-xs font-body uppercase tracking-widest text-muted-foreground transition-colors hover:text-foreground lg:inline-flex"
                >
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true">
                        <circle cx="11" cy="11" r="7" /><line x1="16.5" y1="16.5" x2="22" y2="22" />
                    </svg>
                    {{ __('Search') }}
                </a>
            </div>

            {{-- Centered brand wordmark --}}
            <div class="flex justify-center">
                <a
                    href="{{ $brandHref }}"
                    class="font-heading text-2xs uppercase tracking-[0.25em] text-foreground transition-opacity hover:opacity-70 sm:text-xs"
                    aria-label="{{ __(':brand home', ['brand' => $brand]) }}"
                >
                    {{ $brand }}
                </a>
            </div>

            {{-- End cluster --}}
            <div class="flex items-center justify-end gap-2">
                {{-- Account --}}
                <x-ui.button variant="ghost" size="icon" :href="$accountHref" aria-label="{{ __('Account') }}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="size-5" aria-hidden="true">
                        <circle cx="12" cy="8" r="4" /><path d="M4 20c0-4 3.582-7 8-7s8 3 8 7" />
                    </svg>
                </x-ui.button>

                {{-- Locale select — desktop --}}
                <div class="hidden lg:block">
                    <label for="store-navbar-04-locale" class="sr-only">{{ __('Country and currency') }}</label>
                    <x-ui.select size="sm" id="store-navbar-04-locale" name="locale" class="w-max font-body uppercase tracking-widest" aria-label="{{ __('Country and currency') }}">
                        @foreach ($locales as $locale)
                            <option value="{{ $locale['value'] }}">{{ __($locale['label']) }}</option>
                        @endforeach
                    </x-ui.select>
                </div>

                {{-- Cart with count --}}
                <x-ui.notification-badge :count="$cartCount">
                    <x-ui.button variant="ghost" size="icon" :href="$cartHref" aria-label="{{ __('Cart, :count items', ['count' => $cartCount]) }}">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="size-5" aria-hidden="true">
                            <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z" /><line x1="3" y1="6" x2="21" y2="6" /><path d="M16 10a4 4 0 01-8 0" />
                        </svg>
                    </x-ui.button>
                </x-ui.notification-badge>
            </div>
        </div>

        {{-- Primary nav row — desktop --}}
        <div class="hidden border-t border-border lg:block">
            <div class="mx-auto flex max-w-7xl items-center justify-center gap-8 px-4 sm:px-6 lg:px-8">
                {{-- Collections — mega trigger --}}
                <button
                    type="button"
                    class="inline-flex h-12 items-center gap-2 text-xs font-body uppercase tracking-widest text-foreground transition-colors hover:text-muted-foreground 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="store-navbar-04-mega"
                >
                    {{ __($collectionsLabel) }}
                    <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="1.5" 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="inline-flex h-12 items-center text-xs font-body uppercase tracking-widest text-foreground transition-colors hover:text-muted-foreground"
                    >
                        {{ __($link['label']) }}
                    </a>
                @endforeach
            </div>
        </div>

        {{-- Mega-menu flyout — desktop --}}
        <div
            id="store-navbar-04-mega"
            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-background shadow-lg"
            role="region"
            aria-label="{{ __(':label menu', ['label' => $collectionsLabel]) }}"
            x-cloak
        >
            <div class="mx-auto grid max-w-7xl grid-cols-1 gap-10 px-4 py-10 sm:px-6 md:grid-cols-4 lg:px-8">
                {{-- Category columns --}}
                @foreach ($categories as $category)
                    <div>
                        <h2 class="mb-4 font-body text-2xs font-semibold uppercase tracking-widest text-muted-foreground">
                            {{ __($category['heading']) }}
                        </h2>
                        <ul class="space-y-4" role="list">
                            @foreach ($category['links'] as $catLink)
                                <li>
                                    <a
                                        href="{{ $catLink['href'] }}"
                                        class="text-sm text-foreground transition-colors hover:text-muted-foreground"
                                    >
                                        {{ __($catLink['label']) }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endforeach

                {{-- Featured editorial tile --}}
                <div class="md:col-span-1">
                    <div class="relative overflow-hidden rounded-lg border border-border bg-muted">
                        <div class="aspect-[4/5] w-full bg-muted"></div>
                        <div class="absolute inset-x-0 bottom-0 flex items-end justify-between gap-4 bg-background/90 p-4 backdrop-blur-sm">
                            <div>
                                <p class="font-body text-2xs uppercase tracking-widest text-muted-foreground">{{ __('Featured') }}</p>
                                <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">{{ __('Discover') }}</x-ui.button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Mobile drawer --}}
        <div x-show="mobileOpen" class="relative z-50 lg:hidden" x-cloak>
            {{-- Scrim --}}
            <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="fixed inset-0 bg-scrim/40"
                x-on:click="mobileOpen = false"
                aria-hidden="true"
            ></div>

            {{-- Panel --}}
            <div
                id="store-navbar-04-drawer"
                x-show="mobileOpen"
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="-translate-x-full rtl:translate-x-full"
                x-transition:enter-end="translate-x-0"
                x-transition:leave="transition ease-in duration-150"
                x-transition:leave-start="translate-x-0"
                x-transition:leave-end="-translate-x-full rtl:translate-x-full"
                class="fixed inset-y-0 start-0 flex w-80 max-w-[85%] flex-col overflow-y-auto border-e border-border bg-background"
                role="dialog"
                aria-modal="true"
                aria-label="{{ __('Menu') }}"
            >
                <div class="flex items-center justify-between border-b border-border px-4 py-4">
                    <span class="font-heading text-2xs uppercase tracking-[0.25em] text-foreground">{{ $brand }}</span>
                    <x-ui.button
                        x-ref="drawerClose"
                        variant="ghost"
                        size="icon"
                        x-on:click="mobileOpen = false"
                        aria-label="{{ __('Close menu') }}"
                    >
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="size-5" aria-hidden="true">
                            <line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" />
                        </svg>
                    </x-ui.button>
                </div>

                <div class="px-4 py-4">
                    <label for="store-navbar-04-search-mobile" class="sr-only">{{ __('Search') }}</label>
                    <x-ui.input
                        id="store-navbar-04-search-mobile"
                        type="search"
                        :placeholder="__('Search…')"
                        class="w-full"
                        autocomplete="off"
                    />
                </div>

                <nav class="flex-1 px-2" aria-label="{{ __('Mobile navigation') }}">
                    <ul class="space-y-2" role="list">
                        <li>
                            <a href="#" class="block rounded-md px-4 py-2 text-xs font-body uppercase tracking-widest text-foreground transition-colors hover:bg-muted">
                                {{ __($collectionsLabel) }}
                            </a>
                        </li>
                        @foreach ($links as $link)
                            <li>
                                <a href="{{ $link['href'] }}" class="block rounded-md px-4 py-2 text-xs font-body uppercase tracking-widest text-foreground transition-colors hover:bg-muted">
                                    {{ __($link['label']) }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </nav>

                <div class="mt-auto space-y-4 border-t border-border px-4 py-4">
                    <a href="{{ $accountHref }}" class="block text-xs font-body uppercase tracking-widest text-muted-foreground transition-colors hover:text-foreground">{{ __('Account') }}</a>
                    <a href="{{ $cartHref }}" class="block text-xs font-body uppercase tracking-widest text-muted-foreground transition-colors hover:text-foreground">{{ __('Cart (:count)', ['count' => $cartCount]) }}</a>
                    <div>
                        <label for="store-navbar-04-locale-mobile" class="sr-only">{{ __('Country and currency') }}</label>
                        <x-ui.select size="sm" id="store-navbar-04-locale-mobile" name="locale" class="font-body uppercase tracking-widest" aria-label="{{ __('Country and currency') }}">
                            @foreach ($locales as $locale)
                                <option value="{{ $locale['value'] }}">{{ __($locale['label']) }}</option>
                            @endforeach
                        </x-ui.select>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</header>