@props(['item', 'menuId'])

{{--
  Same vertical rhythm as mega menu: fixed top = header bottom (`megaMenuTop`) + outer py-3 / sm:py-4.
  Shadow lives on non-overflow wrapper; scroll only inside if needed.
--}}
<div
    x-show="isMenuOpen('{{ $menuId }}')"
    x-cloak
    @mouseenter="cancelCloseMenu()"
    @mouseleave="scheduleCloseMenu()"
    x-transition:enter="transition ease-out duration-150"
    x-transition:enter-start="opacity-0 translate-y-1"
    x-transition:enter-end="opacity-100 translate-y-0"
    x-transition:leave="transition ease-in duration-100"
    x-transition:leave-start="opacity-100 translate-y-0"
    x-transition:leave-end="opacity-0 translate-y-1"
    class="fixed z-[60] w-72 py-3 sm:py-4"
    :style="{ top: megaMenuTop, left: submenuLeft }"
    role="menu"
>
    <div class="rounded-xl border border-border bg-card shadow-soft">
        <div
            class="max-h-[min(60vh,calc(100dvh-8rem))] overflow-y-auto overscroll-contain rounded-xl p-2"
        >
            @foreach ($item['children'] ?? [] as $child)
                <x-layouts.front.navigation.link
                    :entry="$child"
                    class="group flex gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-muted"
                    role="menuitem"
                >
                    @if (!empty($child['icon']))
                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-primary-600 dark:bg-primary-950/50 dark:text-primary-400">
                            <x-dynamic-component :component="$child['icon']" class="h-4 w-4" />
                        </span>
                    @endif
                    <span class="min-w-0">
                        <span class="block text-sm font-medium text-foreground group-hover:text-primary-600 dark:group-hover:text-primary-400">
                            {{ $child['label'] }}
                        </span>
                        @if (!empty($child['description']))
                            <span class="mt-0.5 block text-xs text-muted-foreground">{{ $child['description'] }}</span>
                        @endif
                    </span>
                </x-layouts.front.navigation.link>
            @endforeach
        </div>
    </div>
</div>