@php
    $navItems = config('front-navigation.items', []);
@endphp

<nav class="hidden items-center gap-1 lg:flex" aria-label="Primary">
    @foreach ($navItems as $index => $item)
        @php
            $menuId = 'nav-' . $index;
            $type = $item['type'] ?? 'link';
        @endphp

        @if ($type === 'link')
            <x-layouts.front.navigation.link
                :entry="$item"
                class="front-nav-link rounded-lg px-3 py-2 text-sm font-medium text-foreground/90 transition-colors hover:bg-foreground/10 hover:text-foreground"
            >
                {{ $item['label'] }}
            </x-layouts.front.navigation.link>
        @else
            <div
                class="relative"
                data-front-nav="{{ $menuId }}"
                @mouseenter="openMenu('{{ $menuId }}')"
                @mouseleave="scheduleCloseMenu()"
            >
                <button
                    type="button"
                    class="front-nav-trigger inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm font-medium text-foreground/90 transition-colors hover:bg-foreground/10 hover:text-foreground"
                    :class="isMenuOpen('{{ $menuId }}') ? 'bg-foreground/10 text-foreground' : ''"
                    :aria-expanded="isMenuOpen('{{ $menuId }}')"
                    aria-haspopup="true"
                    @keydown.escape.window="activeMenu = null"
                >
                    {{ $item['label'] }}
                    <x-heroicon-o-chevron-down
                        class="h-4 w-4 transition-transform duration-200"
                        ::class="isMenuOpen('{{ $menuId }}') ? 'rotate-180' : ''"
                    />
                </button>

                @if ($type === 'dropdown')
                    <x-layouts.front.navigation.submenu-panel :item="$item" :menu-id="$menuId" />
                @elseif ($type === 'mega')
                    <x-layouts.front.navigation.mega-menu-panel :item="$item" :menu-id="$menuId" />
                @endif
            </div>
        @endif
    @endforeach
</nav>