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

<div
    x-show="isMenuOpen('{{ $menuId }}')"
    x-cloak
    @mouseenter="cancelCloseMenu()"
    @mouseleave="scheduleCloseMenu()"
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0 translate-y-2"
    x-transition:enter-end="opacity-100 translate-y-0"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100 translate-y-0"
    x-transition:leave-end="opacity-0 translate-y-2"
    {{--
      Do not put overflow-* on the same ancestor as box-shadow: it clips the shadow (esp. top).
      Outer: positioning + horizontal gutters + vertical padding so shadow can paint above/below.
      Inner card: shadow + radius only (overflow visible).
      Scroll: inner panel only.
    --}}
    class="fixed inset-x-4 z-[60] py-3 sm:inset-x-6 sm:py-4 lg:inset-x-8"
    :style="{ top: megaMenuTop }"
    role="menu"
>
    <div class="mx-auto w-full max-w-4xl lg:max-w-5xl">
        <div class="rounded-2xl border border-border bg-card shadow-soft">
            <div class="max-h-[min(65vh,calc(100dvh-7rem))] overflow-y-auto overscroll-contain [scrollbar-gutter:stable] rounded-2xl">
                <div class="grid gap-0 lg:grid-cols-[1fr_16rem]">
                    <div class="grid gap-6 p-6 sm:grid-cols-2">
                        @foreach ($item['sections'] ?? [] as $section)
                            <div>
                                <p class="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                                    {{ $section['title'] }}
                                </p>
                                <ul class="space-y-1">
                                    @foreach ($section['links'] ?? [] as $link)
                                        <li>
                                            <x-layouts.front.navigation.link
                                                :entry="$link"
                                                class="group flex gap-3 rounded-xl px-3 py-2.5 transition-colors hover:bg-muted"
                                                role="menuitem"
                                            >
                                                @if (!empty($link['icon']))
                                                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-muted text-primary-600 dark:text-primary-400">
                                                        <x-dynamic-component :component="$link['icon']" class="h-5 w-5" />
                                                    </span>
                                                @endif
                                                <span class="min-w-0">
                                                    <span class="block text-sm font-medium text-foreground">{{ $link['label'] }}</span>
                                                    @if (!empty($link['description']))
                                                        <span class="mt-0.5 block text-xs leading-relaxed text-muted-foreground">{{ $link['description'] }}</span>
                                                    @endif
                                                </span>
                                            </x-layouts.front.navigation.link>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endforeach
                    </div>

                    @if (!empty($item['featured']))
                        <div class="border-t border-border bg-muted/40 p-6 lg:border-l lg:border-t-0">
                            @foreach ($item['featured'] as $featured)
                                <x-layouts.front.navigation.link
                                    :entry="$featured"
                                    class="group block rounded-xl border border-border bg-card p-4 shadow-card transition-all duration-200 hover:border-primary-200 hover:shadow-soft dark:hover:border-primary-800"
                                >
                                    @if (!empty($featured['badge']))
                                        <span class="mb-2 inline-flex rounded-md bg-primary-100 px-2 py-0.5 text-2xs font-semibold uppercase tracking-wide text-primary-700 dark:bg-primary-950 dark:text-primary-300">
                                            {{ $featured['badge'] }}
                                        </span>
                                    @endif
                                    <p class="text-sm font-semibold text-foreground group-hover:text-primary-600 dark:group-hover:text-primary-400">
                                        {{ $featured['title'] }}
                                    </p>
                                    <p class="mt-1 text-xs leading-relaxed text-muted-foreground">
                                        {{ $featured['description'] }}
                                    </p>
                                    <span class="mt-3 inline-flex items-center gap-1 text-xs font-medium text-primary-600 dark:text-primary-400">
                                        Learn more
                                        <x-heroicon-o-arrow-right class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
                                    </span>
                                </x-layouts.front.navigation.link>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>