{{--
    The public navigation, rendered from the authored menu tree.

    Falls back to the legacy section anchors when no menu has been authored, so
    a tenant that never opened the menu manager keeps the navigation it has.

    Items whose target cannot be resolved are skipped rather than rendered as a
    dead link — the project forbids href="#" placeholders.

    @param string $menuKey    which menu to render (default 'primary')
    @param string $layout     'horizontal' | 'stacked'
    @param string $linkClass  colour/typography for a top-level item
    @param array  $menuSlice  ['skip' => int, 'take' => int] to render part of
                              the menu, used by the centered navbar to split one
                              authored menu either side of the logo
--}}
@php
    $menuKey = $menuKey ?? 'primary';
    $layout = $layout ?? 'horizontal';
    $linkClass = $linkClass ?? 'text-white/85 hover:text-white';
    $stacked = $layout === 'stacked';

    $items = app(\App\Domain\Website\Services\WebsiteMenuService::class)->tree($menuKey);

    if (! empty($menuSlice)) {
        $items = $items->slice((int) ($menuSlice['skip'] ?? 0), (int) ($menuSlice['take'] ?? 99))->values();
    }

    // Legacy tenants have sections but no menu; their nav is section anchors.
    $legacySections = ($items->isEmpty() && isset($sections)) ? collect($sections)->take(7) : collect();
@endphp

@if ($items->isNotEmpty())
    <ul class="flex {{ $stacked ? 'flex-col gap-1' : 'items-center gap-1 lg:gap-2' }}">
        @foreach ($items as $item)
            @php
                $href = $item->href();
                $kids = $item->children->where('is_visible', true);
            @endphp

            @continue (! $href && $kids->isEmpty())

            {{--
                The close is delayed and cancellable. A hover menu that shuts the
                instant the pointer leaves the trigger is unusable: the reader has
                to cross the space between the trigger and the list, and any
                wobble off the trigger's box closes the menu before the click
                lands. The panel below also starts flush against the trigger
                (top-full, padding inside) so there is no dead gap to cross.
            --}}
            <li class="relative"
                @if ($kids->isNotEmpty())
                    x-data="{
                        open: false,
                        closeTimer: null,
                        show() { clearTimeout(this.closeTimer); this.open = true; },
                        hide() { this.closeTimer = setTimeout(() => this.open = false, 220); },
                    }"
                    x-on:mouseenter="show()"
                    x-on:mouseleave="hide()"
                    x-on:focusout="if (! $el.contains($event.relatedTarget)) open = false"
                @endif>
                @if ($kids->isNotEmpty())
                    <button type="button"
                            x-on:click="open ? open = false : show()" x-on:mouseenter="show()"
                            x-bind:aria-expanded="open ? 'true' : 'false'"
                            class="ec-nav-item inline-flex items-center gap-1.5 rounded-lg px-3 py-2 font-medium transition {{ $linkClass }}">
                        @if ($item->icon)<x-website.icon :name="$item->icon" class="w-4 h-4" />@endif
                        <span class="relative z-10">{{ $item->localizedLabel() }}</span>
                        <svg class="w-3.5 h-3.5 transition-transform" x-bind:class="open && 'rotate-180'"
                             fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </button>

                    <div x-show="open" x-cloak x-transition.opacity
                         x-on:keydown.escape.window="open = false"
                         x-on:mouseenter="show()" x-on:mouseleave="hide()"
                         class="{{ $stacked ? 'static' : 'absolute z-50 top-full start-0 min-w-56 pt-2' }}">
                    <ul class="ec-nav-dropdown {{ $stacked
                            ? 'ms-4 mt-1 space-y-1'
                            : 'rounded-xl p-2 shadow-xl' }}">
                        @foreach ($kids as $child)
                            @php $childHref = $child->href(); @endphp
                            @continue (! $childHref)
                            <li>
                                <a href="{{ $childHref }}"
                                   @if ($child->open_in_new_tab) target="_blank" rel="noopener noreferrer" @endif
                                   class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition hover:bg-white/10">
                                    @if ($child->icon)<x-website.icon :name="$child->icon" class="w-4 h-4" />@endif
                                    {{ $child->localizedLabel() }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                    </div>
                @else
                    <a href="{{ $href }}"
                       @if ($item->open_in_new_tab) target="_blank" rel="noopener noreferrer" @endif
                       class="ec-nav-item inline-flex items-center gap-1.5 rounded-lg px-3 py-2 font-medium transition
                              {{ $item->highlight ? 'ec-btn ec-btn--primary rounded-full px-5' : $linkClass }}">
                        @if ($item->icon)<x-website.icon :name="$item->icon" class="w-4 h-4" />@endif
                        <span class="relative z-10">{{ $item->localizedLabel() }}</span>
                    </a>
                @endif
            </li>
        @endforeach
    </ul>
@elseif ($legacySections->isNotEmpty())
    <ul class="flex {{ $stacked ? 'flex-col gap-1' : 'items-center gap-1 lg:gap-2' }}">
        @foreach ($legacySections as $navSection)
            <li>
                <a href="{{ ($navBase ?? '') }}#section-{{ $navSection->section_key->value }}"
                   class="ec-nav-item inline-flex rounded-lg px-3 py-2 text-sm font-medium transition {{ $linkClass }}">
                    <span class="relative z-10">{{ $navSection->title ?? $navSection->section_key->label() }}</span>
                </a>
            </li>
        @endforeach
    </ul>
@endif
