@php
    $megaGroups = [
        'product' => [
            'label' => 'Product',
            'items' => [
                ['icon' => 'fa-route', 'title' => 'How It Works', 'desc' => 'Purchase, recharge, tap in, travel, tap out.', 'href' => route('how-it-works')],
                ['icon' => 'fa-id-card', 'title' => 'Card Types', 'desc' => 'Personalized vs Non-Personalized cards.', 'href' => route('cards')],
                ['icon' => 'fa-star', 'title' => 'Features', 'desc' => 'Everything the card can do, in detail.', 'href' => route('features')],
                ['icon' => 'fa-shield-halved', 'title' => 'Security', 'desc' => 'Encryption, fraud detection, compliance.', 'href' => route('security')],
            ],
            'promo' => ['title' => 'Get Your Card', 'desc' => 'Apply online in minutes.', 'icon' => 'fa-credit-card', 'href' => route('cards')],
        ],
        'wallet' => [
            'label' => 'Wallet & Rewards',
            'items' => [
                ['icon' => 'fa-wallet', 'title' => 'Recharge & Wallet', 'desc' => 'Top up via bank, wallet, QR, or counter.', 'href' => route('recharge')],
                ['icon' => 'fa-gift', 'title' => 'Rewards & Discounts', 'desc' => 'Student, senior, and loyalty benefits.', 'href' => route('rewards')],
                ['icon' => 'fa-mobile-screen', 'title' => 'Mobile App', 'desc' => 'Manage your card from your pocket.', 'href' => route('app')],
            ],
            'promo' => ['title' => 'Yatra Dashboard', 'desc' => 'Preview your account.', 'icon' => 'fa-gauge', 'href' => route('dashboard')],
        ],
        'company' => [
            'label' => 'Company',
            'items' => [
                ['icon' => 'fa-building', 'title' => 'About Us', 'desc' => 'Our story, mission, and timeline.', 'href' => route('about')],
                ['icon' => 'fa-briefcase', 'title' => 'Careers', 'desc' => 'Join the team building Yatra Card.', 'href' => route('careers')],
                ['icon' => 'fa-newspaper', 'title' => 'Blog & News', 'desc' => 'Product updates and transit news.', 'href' => route('blog')],
                ['icon' => 'fa-images', 'title' => 'Gallery', 'desc' => 'Photos from across the network.', 'href' => route('gallery')],
            ],
        ],
        'support' => [
            'label' => 'Support',
            'items' => [
                ['icon' => 'fa-circle-question', 'title' => 'Help Center', 'desc' => 'Guides, tutorials, and live chat.', 'href' => route('help')],
                ['icon' => 'fa-comments', 'title' => 'FAQ', 'desc' => 'Quick answers to common questions.', 'href' => route('faq')],
                ['icon' => 'fa-envelope', 'title' => 'Contact Us', 'desc' => 'Offices, phone, email, and map.', 'href' => route('contact')],
                ['icon' => 'fa-download', 'title' => 'Download Forms', 'desc' => 'KYC forms and user guides.', 'href' => route('download')],
            ],
        ],
    ];

    $themeToggleScript = "document.documentElement.classList.toggle('dark');"
        . "localStorage.setItem('yc-theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');";
@endphp

<header
    x-data="{ mobileOpen: false, scrolled: false, openMega: null }"
    x-init="window.addEventListener('scroll', () => scrolled = window.scrollY > 12)"
    class="fixed inset-x-0 top-0 z-50 transition-all duration-300"
    :class="scrolled
        ? 'bg-white/90 backdrop-blur-md shadow-md dark:bg-ink/90'
        : 'bg-white/60 backdrop-blur-sm dark:bg-ink/60'"
>
    <div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-6">
        <a href="{{ route('home') }}" class="flex items-center gap-2 font-heading text-xl font-extrabold">
            <span class="grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br from-primary to-secondary text-white shadow-md">
                <i class="fa-solid fa-train-subway text-sm"></i>
            </span>
            <span class="text-primary">Yatra</span><span class="text-secondary">Card</span>
        </a>

        <!-- Desktop mega menu -->
        <nav class="hidden items-center gap-1 lg:flex" @mouseleave="openMega = null">
            <a href="{{ route('home') }}"
               class="rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition duration-200 hover:bg-primary/5 hover:text-primary dark:text-slate-300 dark:hover:bg-white/5 dark:hover:text-secondary">
                Home
            </a>

            @foreach ($megaGroups as $key => $group)
                <div class="relative" @mouseenter="openMega = '{{ $key }}'">
                    <button type="button"
                            class="flex items-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium transition duration-200"
                            :class="openMega === '{{ $key }}'
                                ? 'text-primary dark:text-secondary'
                                : 'text-slate-600 hover:bg-primary/5 hover:text-primary dark:text-slate-300 dark:hover:bg-white/5 dark:hover:text-secondary'">
                        {{ $group['label'] }}
                        <i class="fa-solid fa-chevron-down text-[10px] transition duration-200" :class="openMega === '{{ $key }}' && 'rotate-180'"></i>
                    </button>

                    <div x-show="openMega === '{{ $key }}'" 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="absolute left-1/2 top-full w-[38rem] -translate-x-1/2 pt-4">
                        <div class="flex overflow-hidden rounded-2xl border border-slate-100 bg-white shadow-2xl dark:border-white/10 dark:bg-panel">
                            <div class="grid flex-1 grid-cols-2 gap-1 p-4">
                                @foreach ($group['items'] as $item)
                                    <a href="{{ $item['href'] }}" @click="openMega = null"
                                       class="group flex items-start gap-3 rounded-xl p-3 transition duration-200 hover:bg-primary/5 dark:hover:bg-white/5">
                                        <span class="grid h-10 w-10 flex-shrink-0 place-items-center rounded-lg bg-primary/10 text-primary transition duration-200 group-hover:scale-105 dark:bg-secondary/10 dark:text-secondary">
                                            <i class="fa-solid {{ $item['icon'] }} text-sm"></i>
                                        </span>
                                        <span>
                                            <span class="block text-sm font-semibold text-slate-800 dark:text-white">{{ $item['title'] }}</span>
                                            <span class="mt-0.5 block text-xs leading-snug text-slate-500 dark:text-slate-400">{{ $item['desc'] }}</span>
                                        </span>
                                    </a>
                                @endforeach
                            </div>

                            @isset($group['promo'])
                                <a href="{{ $group['promo']['href'] }}" @click="openMega = null"
                                   class="flex w-44 flex-shrink-0 flex-col justify-between bg-gradient-to-br from-primary to-secondary p-5 text-white transition duration-300 hover:brightness-110">
                                    <i class="fa-solid {{ $group['promo']['icon'] }} text-2xl text-white/80"></i>
                                    <span>
                                        <span class="block text-sm font-bold">{{ $group['promo']['title'] }}</span>
                                        <span class="mt-1 block text-xs text-white/75">{{ $group['promo']['desc'] }}</span>
                                    </span>
                                </a>
                            @endisset
                        </div>
                    </div>
                </div>
            @endforeach

            <a href="{{ route('dashboard') }}"
               class="rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition duration-200 hover:bg-primary/5 hover:text-primary dark:text-slate-300 dark:hover:bg-white/5 dark:hover:text-secondary">
                Dashboard
            </a>
        </nav>

        <div class="hidden items-center gap-2 lg:flex">
            <button type="button" onclick="{{ $themeToggleScript }}" aria-label="Toggle dark mode"
                    class="grid h-10 w-10 place-items-center rounded-lg text-slate-500 transition duration-200 hover:bg-primary/5 hover:text-primary dark:text-slate-300 dark:hover:bg-white/5 dark:hover:text-secondary">
                <i class="fa-solid fa-moon dark:hidden"></i>
                <i class="fa-solid fa-sun hidden dark:inline"></i>
            </button>
            <a href="{{ route('login') }}" class="ml-1 text-sm font-semibold text-slate-600 transition duration-200 hover:text-primary dark:text-slate-300 dark:hover:text-secondary">Login</a>
            <a href="{{ route('cards') }}"
               class="rounded-xl bg-accent px-5 py-2.5 text-sm font-semibold text-white shadow-lg transition duration-300 hover:scale-105 hover:shadow-xl">
                Apply Now
            </a>
        </div>

        <div class="flex items-center gap-1 lg:hidden">
            <button type="button" onclick="{{ $themeToggleScript }}" aria-label="Toggle dark mode"
                    class="grid h-10 w-10 place-items-center rounded-lg text-slate-500 dark:text-slate-300">
                <i class="fa-solid fa-moon dark:hidden"></i>
                <i class="fa-solid fa-sun hidden dark:inline"></i>
            </button>
            <button @click="mobileOpen = !mobileOpen" aria-label="Toggle menu"
                    class="grid h-10 w-10 place-items-center rounded-lg text-primary dark:text-secondary">
                <i class="fa-solid fa-bars text-xl" x-show="!mobileOpen"></i>
                <i class="fa-solid fa-xmark text-xl" x-show="mobileOpen" x-cloak></i>
            </button>
        </div>
    </div>

    <!-- Mobile menu: accordion groups -->
    <div x-show="mobileOpen" x-cloak x-transition
         class="max-h-[calc(100vh-4rem)] overflow-y-auto border-t border-slate-100 bg-white px-6 py-4 dark:border-white/10 dark:bg-ink lg:hidden">
        <a href="{{ route('home') }}" @click="mobileOpen = false"
           class="block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-600 hover:bg-primary/5 hover:text-primary dark:text-slate-300 dark:hover:bg-white/5 dark:hover:text-secondary">
            Home
        </a>

        @foreach ($megaGroups as $key => $group)
            <div x-data="{ open: false }" class="border-t border-slate-100 py-1 dark:border-white/10">
                <button type="button" @click="open = !open"
                        class="flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-sm font-semibold text-slate-700 dark:text-slate-200">
                    {{ $group['label'] }}
                    <i class="fa-solid fa-chevron-down text-xs transition duration-200" :class="open && 'rotate-180'"></i>
                </button>
                <div x-show="open" x-collapse x-cloak class="pl-3">
                    @foreach ($group['items'] as $item)
                        <a href="{{ $item['href'] }}" @click="mobileOpen = false"
                           class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-slate-600 hover:bg-primary/5 hover:text-primary dark:text-slate-300 dark:hover:bg-white/5 dark:hover:text-secondary">
                            <i class="fa-solid {{ $item['icon'] }} w-4 text-secondary"></i>
                            {{ $item['title'] }}
                        </a>
                    @endforeach
                </div>
            </div>
        @endforeach

        <a href="{{ route('dashboard') }}" @click="mobileOpen = false"
           class="block border-t border-slate-100 px-3 py-2.5 text-sm font-medium text-slate-600 dark:border-white/10 dark:text-slate-300">
            Dashboard
        </a>

        <div class="mt-4 flex flex-col gap-3 border-t border-slate-100 pt-4 dark:border-white/10">
            <a href="{{ route('login') }}" @click="mobileOpen = false" class="text-center text-sm font-semibold text-slate-600 dark:text-slate-300">Login</a>
            <a href="{{ route('cards') }}" @click="mobileOpen = false"
               class="rounded-xl bg-accent px-5 py-3 text-center text-sm font-semibold text-white shadow-lg transition duration-300 hover:scale-105">
                Apply Now
            </a>
        </div>
    </div>
</header>