@php
     $megaGroups = [
         'product' => [
             'label' => 'Product',
             'items' => [
                 [
                     'icon' => 'fa-route',
                     'title' => 'How It Works',
                     'desc' => 'Purchase, recharge, tap in, travel, tap out.',
                     'route' => 'how-it-works',
                 ],
                 [
                     'icon' => 'fa-id-card',
                     'title' => 'Card Types',
                     'desc' => 'Personalized vs Non-Personalized cards.',
                     'route' => 'cards',
                 ],
                 [
                     'icon' => 'fa-star',
                     'title' => 'Features',
                     'desc' => 'Everything the card can do, in detail.',
                     'route' => 'features',
                 ],
                 [
                     'icon' => 'fa-shield-halved',
                     'title' => 'Security',
                     'desc' => 'Encryption, fraud detection, compliance.',
                     '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.',
                     'route' => 'recharge',
                 ],
                 [
                     'icon' => 'fa-gift',
                     'title' => 'Rewards & Discounts',
                     'desc' => 'Student, senior, and loyalty benefits.',
                     'route' => 'rewards',
                 ],
                 [
                     'icon' => 'fa-mobile-screen',
                     'title' => 'Mobile App',
                     'desc' => 'Manage your card from your pocket.',
                     'route' => 'app',
                 ],
             ],
             'promo' => [
                 'title' => 'Get the App',
                 'desc' => 'Manage everything on your phone.',
                 'icon' => 'fa-mobile-screen',
                 'href' => route('app'),
             ],
         ],
         'company' => [
             'label' => 'Company',
             'items' => [
                 [
                     'icon' => 'fa-building',
                     'title' => 'About Us',
                     'desc' => 'Our story, mission, and timeline.',
                     'route' => 'about',
                 ],
                 [
                     'icon' => 'fa-briefcase',
                     'title' => 'Careers',
                     'desc' => 'Join the team building Fintech.',
                     'route' => 'careers',
                 ],
                 [
                     'icon' => 'fa-newspaper',
                     'title' => 'Blog',
                     'desc' => 'Product stories and deep-dives.',
                     'route' => 'blog',
                 ],
                 [
                     'icon' => 'fa-bullhorn',
                     'title' => 'News',
                     'desc' => 'Company announcements and press.',
                     'route' => 'news',
                 ],
                 [
                     'icon' => 'fa-file-circle-exclamation',
                     'title' => 'Notice Board',
                     'desc' => 'Regulatory circulars and notices.',
                     'route' => 'notice',
                 ],
                 [
                     'icon' => 'fa-images',
                     'title' => 'Gallery',
                     'desc' => 'Photos from across the network.',
                     'route' => 'gallery',
                 ],
             ],
         ],
         'support' => [
             'label' => 'Support',
             'items' => [
                 [
                     'icon' => 'fa-circle-question',
                     'title' => 'Help Center',
                     'desc' => 'Guides, tutorials, and live chat.',
                     'route' => 'help',
                 ],
                 [
                     'icon' => 'fa-comments',
                     'title' => 'FAQ',
                     'desc' => 'Quick answers to common questions.',
                     'route' => 'faq',
                 ],
                 [
                     'icon' => 'fa-envelope',
                     'title' => 'Contact Us',
                     'desc' => 'Offices, phone, email, and map.',
                     'route' => 'contact',
                 ],
                 [
                     'icon' => 'fa-download',
                     'title' => 'Download Forms',
                     'desc' => 'KYC forms and user guides.',
                     'route' => 'download',
                 ],
                 [
                     'icon' => 'fa-magnifying-glass-location',
                     'title' => 'Track Application',
                     'desc' => 'Check your card application status.',
                     'route' => 'track-application',
                 ],
             ],
         ],
     ];

     // Resolve hrefs + active state here once, rather than repeating request()->routeIs()
     // checks throughout the markup below.
     foreach ($megaGroups as $key => &$group) {
         $group['active'] = false;
         foreach ($group['items'] as &$item) {
             $item['href'] = route($item['route']);
             $item['active'] = request()->routeIs($item['route']) || request()->routeIs($item['route'] . '.*');
             if ($item['active']) {
                 $group['active'] = true;
             }
         }
         unset($item);
     }
     unset($group);

     $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 z-50 transition-all duration-300"
     :style="`top: ${announcementH}px`"
     :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" aria-label="Fintech — Home">
             <img src="{{ asset('images/brandings/fintech-logo.png') }}" alt="Fintech" width="195" height="50"
                 class="h-12 w-auto dark:brightness-0 dark:invert">
         </a>

         <!-- Desktop mega menu -->
         <nav aria-label="Primary" class="hidden items-center gap-1 lg:flex" @mouseleave="openMega = null">
             <a href="{{ route('home') }}" @if (request()->routeIs('home')) aria-current="page" @endif
                 class="rounded-lg px-3 py-2 text-sm font-medium transition duration-200 {{ request()->routeIs('home')
                     ? 'bg-primary/5 text-primary dark:bg-white/5 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' }}">
                 Home
             </a>

             @foreach ($megaGroups as $key => $group)
                 <div class="relative" @mouseenter="openMega = '{{ $key }}'"
                     @keydown.escape="openMega = null; $refs.megaTrigger{{ $key }}.focus()">
                     <button type="button" x-ref="megaTrigger{{ $key }}"
                         @click="openMega = openMega === '{{ $key }}' ? null : '{{ $key }}'"
                         aria-haspopup="true" :aria-expanded="(openMega === '{{ $key }}').toString()"
                         aria-controls="mega-panel-{{ $key }}"
                         @if ($group['active']) aria-current="true" @endif
                         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' :
                             '{{ $group['active'] ? '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'" aria-hidden="true"></i>
                     </button>

                     <div id="mega-panel-{{ $key }}" 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"
                                         @if ($item['active']) aria-current="page" @endif
                                         class="group flex items-start gap-3 rounded-xl p-3 transition duration-200 {{ $item['active'] ? 'bg-primary/5 dark:bg-white/5' : '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="flex items-center gap-1.5 text-sm font-semibold text-slate-800 dark:text-white">
                                                 {{ $item['title'] }}
                                                 @if ($item['active'])
                                                     <span
                                                         class="inline-block h-1.5 w-1.5 rounded-full bg-primary dark:bg-secondary"
                                                         aria-hidden="true"></span>
                                                 @endif
                                             </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('agents') }}" @if (request()->routeIs('agents
                                      ')) aria-current="page" @endif
                 class="rounded-lg px-3 py-2 text-sm font-medium transition duration-200 {{ request()->routeIs('agents
                                                  ')
                     ? 'bg-primary/5 text-primary dark:bg-white/5 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' }}">
                 Agents

             </a>

         </nav>

         <div class="hidden items-center gap-2 lg:flex">
             <button type="button" x-data="{ dark: document.documentElement.classList.contains('dark') }" @click="dark = !dark; {{ $themeToggleScript }}"
                 :aria-pressed="dark.toString()" aria-label="Toggle dark mode"
                 class="grid h-11 w-11 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" aria-hidden="true"></i>
                 <i class="fa-solid fa-sun hidden dark:inline" aria-hidden="true"></i>
             </button>
             <a href="{{ route('cards') }}"
                 class="rounded-xl bg-accent px-5 py-2.5 text-sm font-semibold text-ink 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" x-data="{ dark: document.documentElement.classList.contains('dark') }" @click="dark = !dark; {{ $themeToggleScript }}"
                 :aria-pressed="dark.toString()" aria-label="Toggle dark mode"
                 class="grid h-11 w-11 place-items-center rounded-lg text-slate-500 dark:text-slate-300">
                 <i class="fa-solid fa-moon dark:hidden" aria-hidden="true"></i>
                 <i class="fa-solid fa-sun hidden dark:inline" aria-hidden="true"></i>
             </button>
             <button x-ref="mobileMenuButton" @click="mobileOpen = !mobileOpen" aria-label="Toggle menu"
                 aria-controls="mobile-menu" :aria-expanded="mobileOpen.toString()"
                 class="grid h-11 w-11 place-items-center rounded-lg text-primary dark:text-secondary">
                 <i class="fa-solid fa-bars text-xl" x-show="!mobileOpen" aria-hidden="true"></i>
                 <i class="fa-solid fa-xmark text-xl" x-show="mobileOpen" x-cloak aria-hidden="true"></i>
             </button>
         </div>
     </div>

     <!-- Mobile menu: accordion groups -->
     <nav id="mobile-menu" aria-label="Mobile" x-show="mobileOpen" x-cloak x-transition
         @keydown.escape="mobileOpen = false; $refs.mobileMenuButton?.focus()"
         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"
             @if (request()->routeIs('home')) aria-current="page" @endif
             class="block rounded-lg px-3 py-2.5 text-sm font-medium transition duration-200 {{ request()->routeIs('home')
                 ? 'bg-primary/5 text-primary dark:bg-white/5 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' }}">
             Home
         </a>

         @foreach ($megaGroups as $key => $group)
             <div x-data="{ open: {{ $group['active'] ? 'true' : 'false' }} }" class="border-t border-slate-100 py-1 dark:border-white/10">
                 <button type="button" @click="open = !open" :aria-expanded="open.toString()"
                     aria-controls="mobile-mega-panel-{{ $key }}"
                     class="flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-sm font-semibold {{ $group['active'] ? 'text-primary dark:text-secondary' : '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'"
                         aria-hidden="true"></i>
                 </button>
                 <div id="mobile-mega-panel-{{ $key }}" x-show="open" x-collapse x-cloak class="pl-3">
                     @foreach ($group['items'] as $item)
                         <a href="{{ $item['href'] }}" @click="mobileOpen = false"
                             @if ($item['active']) aria-current="page" @endif
                             class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm transition duration-200 {{ $item['active'] ? 'bg-primary/5 font-semibold text-primary dark:bg-white/5 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' }}">
                             <i class="fa-solid {{ $item['icon'] }} w-4 text-secondary-a11y dark:text-secondary"
                                 aria-hidden="true"></i>
                             {{ $item['title'] }}
                         </a>
                     @endforeach
                 </div>
             </div>
         @endforeach

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