@props(['menu' => collect(), 'navMegaMenus' => []])

@php
    $currentPath = '/'.ltrim(request()->path(), '/');
    if ($currentPath === '/') { $currentPath = '/'; }
    $ps = $publicSettings ?? $themeSettings ?? [];
    $bookUrl = $ps['cta.primary_url'] ?? '/book';
    $bookText = $ps['cta.primary_text'] ?? 'Book Consultation';

    $megaTypes = [
        'services' => ['path' => '/services', 'icon' => 'services'],
        'hire' => ['path' => '/hire', 'icon' => 'hire'],
        'industries' => ['path' => '/industries', 'icon' => 'industries'],
        'locations' => ['path' => '/locations', 'icon' => 'location'],
    ];
@endphp

<div x-data="{ open: false, expanded: null }"
     @toggle-mobile-nav.window="open = !open"
     @mobile-nav-closed.window="open = false"
     x-effect="document.body.classList.toggle('mobile-nav-open', open)">
    <div x-show="open" x-cloak class="fixed inset-0 z-50 bg-black/50 lg:hidden" @click="open = false; $dispatch('mobile-nav-closed')" aria-hidden="true"></div>
    <nav x-show="open" x-cloak class="fixed inset-y-0 right-0 z-50 flex w-full max-w-[22rem] flex-col bg-white shadow-2xl lg:hidden" aria-label="Mobile navigation" role="navigation">
        <div class="flex items-center justify-between border-b border-border px-6 py-5">
            <span class="font-bold text-secondary">Menu</span>
            <button type="button" class="flex min-h-11 min-w-11 items-center justify-center rounded-lg text-muted hover:bg-slate-100" @click="open = false; $dispatch('mobile-nav-closed')" aria-label="Close menu">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <ul class="nav-mega-scroll flex-1 space-y-1 overflow-y-auto p-4">
            @foreach($menu as $item)
                @php
                    $itemPath = parse_url($item->url, PHP_URL_PATH) ?: $item->url;
                    $isActive = $itemPath === $currentPath || ($itemPath !== '/' && str_starts_with($currentPath, rtrim($itemPath, '/')));
                    $megaType = null;

                    foreach ($megaTypes as $type => $meta) {
                        if (($item->icon ?? '') === $meta['icon'] || rtrim($itemPath, '/') === $meta['path']) {
                            $megaType = $type;
                            break;
                        }
                    }

                    $megaMenu = $megaType ? ($navMegaMenus[$megaType] ?? null) : null;
                    $categories = $megaMenu['categories'] ?? [];
                    $config = $megaMenu['config'] ?? [];
                @endphp

                @if($megaType && $megaMenu)
                    <li>
                        <button type="button"
                                @click="expanded = expanded === '{{ $megaType }}' ? null : '{{ $megaType }}'"
                                :aria-expanded="expanded === '{{ $megaType }}'"
                                @class([
                                    'flex min-h-11 w-full items-center gap-3 rounded-xl px-4 py-3.5 font-semibold transition',
                                    'bg-primary/10 text-primary-text' => $isActive,
                                    'text-secondary hover:bg-slate-50' => ! $isActive,
                                ])>
                            <span @class([
                                'flex h-9 w-9 items-center justify-center rounded-xl',
                                'bg-primary text-white' => $isActive,
                                'bg-slate-100 text-primary' => ! $isActive,
                            ])>
                                <x-menu.icon :name="$config['icon'] ?? $megaTypes[$megaType]['icon']" class="h-4 w-4" />
                            </span>
                            <span class="flex-1 text-left">{{ $item->label }}</span>
                            <svg class="h-4 w-4 text-muted transition" :class="expanded === '{{ $megaType }}' && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                        </button>

                        <div x-show="expanded === '{{ $megaType }}'"
                             x-cloak
                             x-transition:enter="transition ease-out duration-200"
                             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-150"
                             x-transition:leave-start="opacity-100 translate-y-0"
                             x-transition:leave-end="opacity-0 -translate-y-1"
                             class="mt-1 space-y-4 rounded-2xl bg-slate-50 p-3">
                            @foreach($categories as $category)
                                <div>
                                    <p class="nav-mega-category-label mb-2 px-2 text-[0.6875rem] font-semibold uppercase tracking-wider text-slate-400">
                                        {{ $category['label'] }}
                                    </p>
                                    <ul class="mt-1 space-y-0.5">
                                        @foreach($category['items'] as $entry)
                                            <li>
                                                <a href="{{ $entry['url'] }}"
                                                   @click="open = false; $dispatch('mobile-nav-closed')"
                                                   class="flex min-h-10 gap-2.5 rounded-lg px-2 py-2 transition hover:bg-white">
                                                    <x-nav.hire-role-icon :name="$entry['icon']" size="sm" variant="plain" />
                                                    <span class="min-w-0">
                                                        <span class="block truncate text-sm font-medium text-secondary">{{ $entry['title'] }}</span>
                                                        <span class="mt-0.5 block truncate text-xs text-slate-500">{{ $entry['line1'] }}</span>
                                                    </span>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endforeach
                            <div class="flex flex-col gap-2 border-t border-slate-200 pt-3">
                                <x-ui.button :href="$bookUrl" size="sm" class="w-full justify-center" :data-track-cta="$config['ctaTrack'] ?? 'mega-mobile-book'">
                                    Book consultation
                                </x-ui.button>
                                <a href="{{ $config['hubUrl'] ?? '#' }}" @click="open = false; $dispatch('mobile-nav-closed')" class="text-center text-sm font-semibold text-primary hover:underline">
                                    {{ $config['hubLabel'] ?? 'View all' }}
                                </a>
                            </div>
                        </div>
                    </li>
                @else
                    <li>
                        <a href="{{ $item->url }}"
                           @class([
                               'flex min-h-11 items-center gap-3 rounded-xl px-4 py-3.5 font-semibold transition',
                               'bg-primary/10 text-primary-text' => $isActive,
                               'text-secondary hover:bg-slate-50' => ! $isActive,
                           ])>
                            <span @class([
                                'flex h-9 w-9 items-center justify-center rounded-xl',
                                'bg-primary text-white' => $isActive,
                                'bg-slate-100 text-primary' => ! $isActive,
                            ])>
                                <x-menu.icon :name="$item->icon ?? 'default'" class="h-4 w-4" />
                            </span>
                            {{ $item->label }}
                        </a>
                    </li>
                @endif
            @endforeach
        </ul>

        <div class="shrink-0 border-t border-border p-4">
            <x-ui.button :href="$bookUrl" class="w-full justify-center" data-track-cta="mobile-nav-book">
                {{ $bookText }}
            </x-ui.button>
        </div>
    </nav>
</div>