@props([
    'label' => '',
    'active' => false,
    'megaMenu' => ['categories' => [], 'total' => 0, 'config' => []],
])

@php
    $categories = $megaMenu['categories'] ?? [];
    $config = $megaMenu['config'] ?? [];
    $type = $config['type'] ?? 'nav';
    $menuIcon = $config['icon'] ?? 'default';
    $hubUrl = $config['hubUrl'] ?? '#';
    $hubLabel = $config['hubLabel'] ?? 'View all';
    $ctaTrack = $config['ctaTrack'] ?? 'mega-book';
    $panelId = "mega-panel-{$type}";
    $ps = $publicSettings ?? $themeSettings ?? [];
    $bookUrl = $ps['cta.primary_url'] ?? '/book';
@endphp

<div class="nav-mega-wrap relative"
     x-data="{ open: false, closeTimer: null }"
     @mouseenter="clearTimeout(closeTimer); open = true"
     @mouseleave="closeTimer = setTimeout(() => open = false, 40)"
     @keydown.escape.window="open = false">
    <button type="button"
            @click="open = !open"
            @keydown.enter.prevent="open = !open"
            :aria-expanded="open"
            aria-haspopup="true"
            aria-controls="{{ $panelId }}"
            @class([
                'inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-semibold leading-tight transition',
                'bg-primary/10 text-primary-text' => $active,
                'text-slate-700 hover:bg-slate-100 hover:text-secondary' => ! $active,
            ])>
        <x-menu.icon :name="$menuIcon" class="h-4 w-4 shrink-0" />
        {{ $label }}
        <svg class="h-3.5 w-3.5 shrink-0 text-slate-400 transition duration-200" :class="open && 'rotate-180 text-primary'" 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 id="{{ $panelId }}"
         x-show="open"
         x-cloak
         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-75"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 translate-y-1"
         class="nav-mega-panel fixed inset-x-0 top-14 z-[60] flex justify-center px-4 pt-1 pointer-events-none lg:top-[3.75rem]"
         role="region"
         aria-label="{{ $label }} menu">
        <div class="nav-mega-panel-inner pointer-events-auto w-full max-w-5xl overflow-hidden rounded-xl border border-slate-200 bg-white shadow-lg"
             @mouseenter="clearTimeout(closeTimer); open = true"
             @mouseleave="open = false">
            <div class="flex items-center justify-between gap-4 border-b border-slate-100 px-5 py-4 md:px-6">
                <div class="min-w-0">
                    <p class="text-[0.6875rem] font-semibold uppercase tracking-wider text-slate-400">{{ $config['eyebrow'] ?? $label }}</p>
                    <h3 class="mt-0.5 truncate text-base font-semibold text-secondary">{{ $config['heading'] ?? '' }}</h3>
                </div>
                <a href="{{ $hubUrl }}" class="shrink-0 text-sm font-medium text-slate-600 transition hover:text-primary">
                    {{ $hubLabel }}
                </a>
            </div>

            <div class="nav-mega-scroll max-h-[min(60vh,28rem)] overflow-y-auto px-5 py-4 md:px-6">
                @foreach($categories as $category)
                    <div @class(['nav-mega-category', 'mt-5' => ! $loop->first])>
                        <p class="nav-mega-category-label mb-2 text-[0.6875rem] font-semibold uppercase tracking-wider text-slate-400">
                            {{ $category['label'] }}
                        </p>

                        <div class="grid gap-0.5 sm:grid-cols-2 lg:grid-cols-3">
                            @foreach($category['items'] as $item)
                                <a href="{{ $item['url'] }}"
                                   class="nav-mega-item group flex items-center gap-2.5 rounded-lg px-2.5 py-2 transition hover:bg-slate-50">
                                    <x-nav.hire-role-icon :name="$item['icon']" size="sm" variant="plain" />
                                    <span class="min-w-0 flex-1">
                                        <span class="block truncate text-sm font-medium text-secondary group-hover:text-primary">{{ $item['title'] }}</span>
                                        <span class="mt-0.5 block truncate text-xs text-slate-500">{{ $item['line1'] }}</span>
                                    </span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="border-t border-slate-100 px-5 py-3 md:px-6">
                <a href="{{ $bookUrl }}" class="text-sm font-medium text-primary transition hover:underline" data-track-cta="{{ $ctaTrack }}">
                    Book consultation
                </a>
            </div>
        </div>
    </div>
</div>