@php
    // Split around the Categories dropdown, which sits second in the nav.
    // Named "before"/"after" rather than left/right — the order reverses in Arabic.
    $navBefore = [
        ['route' => 'home', 'label' => __('nav.home')],
    ];

    $navAfter = [
        ['route' => 'branches', 'label' => __('nav.branches')],
        ['route' => 'catering', 'label' => __('nav.catering')],
        ['route' => 'about', 'label' => __('nav.about')],
    ];

    $onCategory = request()->routeIs('category') || request()->routeIs('catalogue');
@endphp

<header class="sticky top-0 z-50 border-b border-outline-variant/50 bg-surface/95 backdrop-blur">
    <div class="shell flex items-center justify-between gap-6 py-3">

        {{-- Wordmark. The logo already carries the cream field, so it sits on the
             surface unframed — no dark tile, no border. --}}
        <a href="{{ route('home') }}" class="shrink-0" aria-label="{{ __('shop.brand') }}">
            <img src="{{ asset('images/logo.jpeg') }}" alt="{{ __('shop.brand') }}"
                 class="h-14 w-auto md:h-16" width="140" height="64">
        </a>

        <nav class="hidden items-center gap-7 lg:flex" aria-label="{{ __('nav.menu') }}">
            @foreach ($navBefore as $link)
                <a href="{{ route($link['route']) }}"
                   class="u-label border-b-2 pb-1 transition-colors duration-200
                          {{ request()->routeIs($link['route'])
                                ? 'border-secondary text-primary'
                                : 'border-transparent text-on-surface-variant hover:text-primary' }}">
                    {{ $link['label'] }}
                </a>
            @endforeach

            {{-- Categories menu. Pure CSS: opens on hover where there is a real
                 pointer, and on :focus-within for keyboard and touch. Nothing here
                 depends on the JS bundle, because primary navigation should not.
                 The trigger is a real link, so it still works with styles stripped. --}}
            <div data-menu>
                <a href="{{ route('catalogue') }}" aria-haspopup="true"
                   class="u-label flex items-center gap-1.5 border-b-2 pb-1 transition-colors duration-200
                          {{ $onCategory
                                ? 'border-secondary text-primary'
                                : 'border-transparent text-on-surface-variant hover:text-primary' }}">
                    {{ __('nav.categories') }}
                    <svg class="caret h-3.5 w-3.5 transition-transform duration-200" fill="none"
                         stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6"/>
                    </svg>
                </a>

                {{-- Position, width and the hover-bridging padding are all in
                     app.css under [data-menu-panel]. --}}
                <div data-menu-panel>
                    <div class="rounded-lg border border-outline-variant/70
                                bg-surface-container-lowest p-3 shadow-ambient-lg">
                        <ul class="grid grid-cols-2 gap-1">
                            @foreach ($navCategories ?? [] as $category)
                                <li>
                                    <a href="{{ route('category', $category) }}"
                                       class="group/item flex flex-col gap-0.5 rounded border-s-2 border-transparent
                                              px-3 py-2.5 transition-colors duration-200
                                              hover:border-secondary hover:bg-surface-container-low">
                                        <span class="font-headline text-body-md text-primary
                                                     transition-colors group-hover/item:text-secondary">
                                            {{ $category->name }}
                                        </span>
                                        @if ($category->tagline)
                                            <span class="text-label-sm leading-snug text-on-surface-variant">
                                                {{ $category->tagline }}
                                            </span>
                                        @endif
                                    </a>
                                </li>
                            @endforeach
                        </ul>

                        <a href="{{ route('catalogue') }}"
                           class="u-label-sm mt-2 flex items-center gap-1.5 border-t border-outline-variant/60
                                  px-3 pt-3 text-secondary hover:text-primary">
                            {{ __('nav.all_categories') }}
                            <svg class="h-3.5 w-3.5 rtl:rotate-180" fill="none" stroke="currentColor"
                                 stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>

            @foreach ($navAfter as $link)
                <a href="{{ route($link['route']) }}"
                   class="u-label border-b-2 pb-1 transition-colors duration-200
                          {{ request()->routeIs($link['route'])
                                ? 'border-secondary text-primary'
                                : 'border-transparent text-on-surface-variant hover:text-primary' }}">
                    {{ $link['label'] }}
                </a>
            @endforeach
        </nav>

        <div class="flex items-center gap-4">
            <form action="{{ route('search') }}" method="get" class="hidden xl:block">
                <label class="sr-only" for="q">{{ __('nav.search') }}</label>
                <input id="q" name="q" type="search" placeholder="{{ __('nav.search_placeholder') }}"
                       class="field w-56 py-1.5 text-label-sm">
            </form>

            {{-- Each language names itself. --}}
            <a href="{{ route('locale.switch', ['locale' => alt_locale()]) }}"
               class="u-label-sm rounded-full border border-outline-variant px-3 py-1.5
                      text-primary transition-colors hover:border-secondary hover:text-secondary"
               hreflang="{{ alt_locale() }}" lang="{{ alt_locale() }}">
                {{ __('nav.switch_language') }}
            </a>

            <a href="{{ route('cart.index') }}" class="relative text-on-surface hover:text-primary"
               aria-label="{{ __('nav.cart') }}">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.6" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
                </svg>
                <span data-cart-count
                      class="absolute -top-1.5 -end-1.5 flex h-4 w-4 items-center justify-center rounded-full
                             bg-secondary text-[10px] font-semibold text-on-secondary num
                             {{ ($cartCount ?? 0) === 0 ? 'hidden' : '' }}">
                    {{ $cartCount ?? 0 }}
                </span>
            </a>

            <button type="button" data-nav-toggle aria-expanded="false" aria-controls="mobile-nav"
                    class="text-on-surface lg:hidden" aria-label="{{ __('nav.menu') }}">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.6" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" d="M4 7h16M4 12h16M4 17h16"/>
                </svg>
            </button>
        </div>
    </div>

    {{-- Mobile: no hover, so the categories are listed inline under a heading
         rather than hidden behind a second tap. --}}
    <div id="mobile-nav" data-mobile-nav class="hidden border-t border-outline-variant/50 bg-surface lg:hidden">
        <nav class="shell flex flex-col py-4" aria-label="{{ __('nav.menu') }}">
            @foreach ($navBefore as $link)
                <a href="{{ route($link['route']) }}"
                   class="u-label border-b border-outline-variant/40 py-3 text-on-surface-variant">
                    {{ $link['label'] }}
                </a>
            @endforeach

            <p class="u-label-sm pt-4 text-secondary">{{ __('nav.categories') }}</p>
            <ul class="pb-2">
                @foreach ($navCategories ?? [] as $category)
                    <li>
                        <a href="{{ route('category', $category) }}"
                           class="block border-b border-outline-variant/30 py-2.5 ps-3 text-body-md text-on-surface-variant">
                            {{ $category->name }}
                        </a>
                    </li>
                @endforeach
            </ul>

            @foreach ($navAfter as $link)
                <a href="{{ route($link['route']) }}"
                   class="u-label border-b border-outline-variant/40 py-3 text-on-surface-variant">
                    {{ $link['label'] }}
                </a>
            @endforeach

            <form action="{{ route('search') }}" method="get" class="pt-4">
                <input name="q" type="search" placeholder="{{ __('nav.search_placeholder') }}" class="field">
            </form>
        </nav>
    </div>
</header>