{{-- One desktop navigation node. Level 2 opens a panel; level 3 nests inside it. --}}
@php
    $hasChildren = $item->relationLoaded('children') && $item->children->isNotEmpty();
    $active = $item->isActive();
@endphp

@if ($level === 0)
    <div class="relative" @mouseenter="openMenu = {{ $item->id }}" @mouseleave="openMenu = null">
        <a href="{{ $item->resolvedUrl() }}" target="{{ $item->target }}"
           @click="{{ $hasChildren ? 'toggle('.$item->id.')' : '' }}"
           @if ($hasChildren) :aria-expanded="openMenu === {{ $item->id }}" @endif
           @class([
               'relative inline-flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium transition',
               'text-primary' => $active,
               'text-text-secondary hover:text-primary' => ! $active,
           ])>
            {{ $item->label }}
            @if ($hasChildren)
                <x-icon name="chevron-down" class="size-3 text-text-muted transition-transform"
                        ::class="openMenu === {{ $item->id }} && 'rotate-180'" />
            @endif

            {{-- Active indicator, not colour alone. --}}
            <span @class([
                'absolute inset-x-4 -bottom-px h-0.5 origin-left transition-transform duration-300',
                'scale-x-100 bg-primary' => $active,
                'scale-x-0 bg-primary' => ! $active,
            ])></span>
        </a>

        @if ($hasChildren)
            <div x-show="openMenu === {{ $item->id }}" x-cloak
                 x-transition:enter="transition duration-200 ease-out"
                 x-transition:enter-start="opacity-0 -translate-y-1" x-transition:enter-end="opacity-100 translate-y-0"
                 class="absolute left-0 top-full w-72 pt-2">
                <ul class="overflow-hidden rounded-xl border border-border bg-surface py-2 shadow-raised">
                    @foreach ($item->children as $child)
                        @include('partials.menu-item', ['item' => $child, 'level' => 1])
                    @endforeach
                </ul>
            </div>
        @endif
    </div>
@else
    <li class="group/sub relative">
        <a href="{{ $item->resolvedUrl() }}" target="{{ $item->target }}"
           @class([
               'flex items-center justify-between gap-3 px-4 py-2.5 text-sm transition',
               'bg-primary-50 text-primary' => $active,
               'text-text-secondary hover:bg-surface-muted hover:text-primary' => ! $active,
           ])>
            <span>{{ $item->label }}</span>
            @if ($hasChildren)
                <x-icon name="chevron-right" class="size-3 text-text-muted" />
            @endif
        </a>

        @if ($hasChildren)
            <ul class="invisible absolute left-full top-0 w-64 overflow-hidden rounded-xl border border-border bg-surface py-2 opacity-0 shadow-raised transition group-hover/sub:visible group-hover/sub:opacity-100 group-focus-within/sub:visible group-focus-within/sub:opacity-100">
                @foreach ($item->children as $grandchild)
                    <li>
                        <a href="{{ $grandchild->resolvedUrl() }}" target="{{ $grandchild->target }}"
                           class="block px-4 py-2.5 text-sm text-text-secondary transition hover:bg-surface-muted hover:text-primary">
                            {{ $grandchild->label }}
                        </a>
                    </li>
                @endforeach
            </ul>
        @endif
    </li>
@endif