{{--
    Main navigation, laid out in the header's flex row: [desktop links, centred] [search + demo button + menu button].
    Items come from config('site.nav'). The desktop bar shows from 1280px; below that the menu button opens the mobile menu.
    Desktop: small centred links on the frosted bar. An item with a menu opens a panel that grows down from the bar, full width,
    while the page behind is dimmed (the veil lives in header.blade.php). The panel comes from the item's 'mega' (columns of
    links and an optional highlight) or, failing that, from its flat 'children'. The mobile menu and the search use App\Support\Nav::children(),
    i.e. the first mega column, so those links are written once. It opens on hover and on keyboard focus, with
    no JavaScript. Every hover/focus class is tied to the named group "item" (this item) so one open menu never opens another.
    The mobile menu uses <details>.
--}}
@php
    $isActive = fn (array $item) => request()->routeIs(...($item['active'] ?? [$item['route']]));
    $cta = config('site.cta_button');
    $productOf = fn (array $child) => isset($child['product']) ? config('products.items.'.$child['product']) : null;
    $linkOf = fn (array $child) => isset($child['product'])
        ? route('products.show', $child['product'])
        : route($child['route'], $child['params'] ?? []).(isset($child['fragment']) ? '#'.$child['fragment'] : '');
    $menuOf = fn (array $item) => $item['mega'] ?? (! empty($item['children']) ? ['columns' => [['title' => $item['label'], 'links' => $item['children']]]] : null);

    // A panel's columns fade up one after the other once it opens; --d is each column's delay (none when closing).
    $rise = 'translate-y-2 opacity-0 transition duration-300 ease-out [transition-delay:0ms] motion-reduce:transition-none motion-reduce:translate-y-0 '
        .'group-hover/item:translate-y-0 group-hover/item:opacity-100 group-hover/item:[transition-delay:var(--d)] '
        .'group-focus-within/item:translate-y-0 group-focus-within/item:opacity-100 group-focus-within/item:[transition-delay:var(--d)]';
@endphp

<nav class="hidden h-full flex-1 justify-center xl:flex" aria-label="Main">
    <ul class="flex h-full items-center 2xl:gap-2">
        @foreach (collect(config('site.nav'))->reject(fn ($item) => ($item['desktop'] ?? true) === false) as $item)
            @php($active = $isActive($item))
            @php($menu = $menuOf($item))

            <li @class(['group/item flex h-full items-center', 'mega-item' => $menu])>
                <a href="{{ route($item['route']) }}"
                   @class([
                       'flex h-full items-center whitespace-nowrap px-3.5 text-sm tracking-tight transition-colors',
                       'font-medium text-brand-700' => $active,
                       'text-slate-700 hover:text-slate-950 group-hover/item:text-slate-950 group-focus-within/item:text-slate-950' => ! $active,
                   ])
                   @if ($active) aria-current="page" @endif>{{ $item['label'] }}</a>

                @if ($menu)
                    @php($featured = $menu['featured'] ?? null)

                    {{-- The panel is a one-row grid whose row grows from 0 to its content height: a smooth "drop down" with no fixed height --}}
                    <div class="invisible absolute inset-x-0 top-full grid grid-rows-[0fr] transition-[grid-template-rows,visibility] duration-300 ease-out motion-reduce:transition-none group-hover/item:visible group-hover/item:grid-rows-[1fr] group-focus-within/item:visible group-focus-within/item:grid-rows-[1fr]">
                        <div class="min-h-0 overflow-hidden">
                            <div class="border-b border-black/5 bg-white/95 backdrop-blur-xl">
                                <div class="container-page flex gap-16 pb-14 pt-10">
                                    @foreach ($menu['columns'] as $c => $column)
                                        @php($lead = $c === 0)

                                        <div class="min-w-0 {{ $lead ? 'flex-[1.3]' : 'flex-1' }} {{ $rise }}" style="--d: {{ 80 + $c * 50 }}ms">
                                            <p class="text-xs text-slate-500">{{ $column['title'] }}</p>

                                            <ul @class(['mt-4', 'space-y-5' => $lead, 'space-y-3' => ! $lead])>
                                                @foreach ($column['links'] as $link)
                                                    @php($product = $productOf($link))

                                                    <li>
                                                        @if ($lead)
                                                            {{-- First column: large links, each with its one-line description --}}
                                                            <a href="{{ $linkOf($link) }}" class="group/link block">
                                                                <span class="block text-2xl font-semibold leading-tight tracking-tight text-slate-900 transition-colors group-hover/link:text-brand-700">{{ $product['name'] ?? $link['label'] }}</span>
                                                                @if ($product || ! empty($link['desc']))
                                                                    <span class="mt-0.5 block text-sm text-slate-500">{{ $product['tagline'] ?? $link['desc'] }}</span>
                                                                @endif
                                                            </a>
                                                        @else
                                                            <a href="{{ $linkOf($link) }}" class="text-[0.9375rem] font-semibold leading-snug text-slate-800 transition-colors hover:text-brand-700">{{ $product['name'] ?? $link['label'] }}</a>
                                                        @endif
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endforeach

                                    @if ($featured)
                                        <div class="w-72 shrink-0 {{ $rise }}" style="--d: {{ 80 + count($menu['columns']) * 50 }}ms">
                                            <p class="text-xs text-slate-500">{{ $featured['eyebrow'] }}</p>
                                            <p class="mt-4 text-[0.9375rem] font-semibold leading-snug text-slate-900">{{ $featured['title'] }}</p>
                                            <ul class="mt-3 space-y-2 text-sm leading-snug text-slate-500">
                                                @foreach ($featured['points'] as $point)
                                                    <li class="flex items-start gap-2"><x-icon name="check" class="mt-0.5 h-4 w-4 shrink-0 text-brand-600" />{{ $point }}</li>
                                                @endforeach
                                            </ul>
                                            <a href="{{ route($featured['button']['route']) }}{{ isset($featured['button']['fragment']) ? '#'.$featured['button']['fragment'] : '' }}" class="mt-5 inline-flex items-center gap-1.5 text-sm font-semibold text-brand-700 hover:underline">
                                                {{ $featured['button']['label'] }} <x-icon name="arrow" class="h-4 w-4" />
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </li>
        @endforeach
    </ul>
</nav>

{{-- Right side: search, demo button (desktop), menu button (below 1280px). Buttons are at least 40px square. --}}
<div class="ml-auto flex items-center gap-1 xl:ml-0 xl:gap-2">
    <button type="button" data-search-open aria-haspopup="dialog" title="Search (Ctrl K)"
            class="flex h-11 w-11 items-center justify-center rounded-full text-slate-700 transition-colors hover:bg-black/5 hover:text-slate-950 xl:h-10 xl:w-10">
        <span class="sr-only">Search the site</span>
        <x-icon name="search" class="h-5 w-5" />
    </button>

    <a href="{{ route($cta['route']) }}" class="hidden shrink-0 whitespace-nowrap rounded-full bg-brand-600 px-4 py-2 text-[0.8125rem] font-medium text-white transition-colors hover:bg-brand-700 xl:inline-flex">
        {{ $cta['label'] }}
    </a>

    <button type="button" data-nav-toggle aria-controls="mobile-menu" aria-expanded="false"
            class="flex h-11 w-11 items-center justify-center rounded-full text-slate-800 transition-colors hover:bg-black/5 xl:hidden">
        <span class="sr-only">Toggle menu</span>
        <x-icon name="menu" data-nav-icon="open" class="h-6 w-6" />
        <x-icon name="close" data-nav-icon="close" class="hidden h-6 w-6" />
    </button>
</div>

{{-- Mobile menu (drops down below the header bar) --}}
<nav id="mobile-menu" class="absolute inset-x-0 top-full hidden max-h-[calc(100dvh-4rem)] overflow-y-auto overscroll-contain border-t border-slate-200 bg-white shadow-2xl shadow-slate-900/15 xl:hidden" aria-label="Mobile">
    <ul class="container-page divide-y divide-slate-100 py-1">
        @foreach (config('site.nav') as $item)
            @php($active = $isActive($item))
            @php($children = \App\Support\Nav::children($item))

            <li>
                @if (empty($children))
                    <a href="{{ route($item['route']) }}" @class([
                        'flex items-center justify-between py-3.5 text-base font-semibold',
                        'text-brand-700' => $active,
                        'text-slate-800' => ! $active,
                    ])@if ($active) aria-current="page" @endif>
                        {{ $item['label'] }}
                        @if ($active)
                            <span class="h-2 w-2 rounded-full bg-brand-600" aria-hidden="true"></span>
                        @endif
                    </a>
                @else
                    <details class="group" @if ($active) open @endif>
                        <summary @class([
                            'flex cursor-pointer list-none items-center justify-between py-3.5 text-base font-semibold [&::-webkit-details-marker]:hidden',
                            'text-brand-700' => $active,
                            'text-slate-800' => ! $active,
                        ])>
                            {{ $item['label'] }}
                            <x-icon name="chevron" class="h-4 w-4 text-slate-400 transition-transform group-open:rotate-180" />
                        </summary>

                        <ul class="mb-3 space-y-1 rounded-2xl bg-slate-50 p-1.5">
                            @foreach ($children as $child)
                                @php($product = $productOf($child))

                                @if ($product || isset($child['route']))
                                    <li>
                                        <a href="{{ $linkOf($child) }}" class="flex items-center gap-3 rounded-xl px-3 py-2.5 transition-colors hover:bg-white active:bg-white">
                                            @if ($product)
                                                <x-product-icon :product="$product" size="sm" class="bg-white" />
                                            @else
                                                <span class="icon-tile h-10 w-10 rounded-lg bg-white"><x-icon :name="$child['icon'] ?? 'arrow'" class="h-5 w-5" /></span>
                                            @endif
                                            <span class="min-w-0">
                                                <span class="block text-sm font-semibold text-slate-900">{{ $product['name'] ?? $child['label'] }}</span>
                                                @if ($product || ! empty($child['desc']))
                                                    <span class="block text-xs leading-snug text-slate-500">{{ $product['tagline'] ?? $child['desc'] }}</span>
                                                @endif
                                            </span>
                                        </a>
                                    </li>
                                @endif
                            @endforeach
                        </ul>
                    </details>
                @endif
            </li>
        @endforeach
    </ul>

    <div class="border-t border-slate-200 bg-slate-50">
        <div class="container-page grid gap-2 py-4 sm:grid-cols-2">
            <a href="{{ route($cta['route']) }}" class="btn-primary rounded-xl py-3 text-base"><x-icon name="calendar" class="h-5 w-5" />{{ $cta['label'] }}</a>
            <a href="tel:{{ preg_replace('/[^\d+]/', '', config('site.company.phone')) }}" class="btn-outline rounded-xl py-3 text-base"><x-icon name="call" class="h-5 w-5" />{{ config('site.company.phone') }}</a>
        </div>
    </div>
</nav>