{{-- =====================================================================
     Mega Menu Panels — Desktop Navigation
     Triggered by CLICK via toggleMegaMenu() in siteHeader().

     ARCHITECTURE:
     - Included directly inside <header x-data="siteHeader()"> (after </nav>)
       so all Alpine expressions bind to the siteHeader component scope.
     - position:fixed so panels escape every overflow/stacking constraint.
     - top is ALWAYS set (even when closed) via :style so panels never
       default to top:0 and bleed above the navbar during transitions.
     - z-[201] sits above the navbar (z-[200]).
     - Outside-click: document capture listener in siteHeader.init() (app.js)
       closes the menu when the click lands outside <header> and outside any
       [data-mega-panel] element.
     - Each panel uses x-show (not x-if) so Alpine keeps the DOM node but
       hides it; x-cloak prevents flash-of-content before Alpine boots.
===================================================================== --}}

@php
$megaMenus = [

    /* ── SSHIA ─────────────────────────────────────────────────────── */
    'sshia' => [
        'cols' => 4,
        'items' => [
            ['route' => ['pages.show','about-us'],                     'icon' => 'fa-info-circle',        'color' => 'text-green-400',  'label' => 'About Us',                  'desc' => 'Learn who we are, our history, and core values.'],
            ['route' => ['pages.show','vision-mission'],               'icon' => 'fa-eye',                'color' => 'text-green-400',  'label' => 'Vision & Mission',           'desc' => 'Our guiding purpose and long-term strategic direction.'],
            ['route' => ['pages.show','what-we-do'],                   'icon' => 'fa-tasks',              'color' => 'text-green-400',  'label' => 'What We Do',                 'desc' => 'Explore our programmes, initiatives, and key activities.'],
            ['route' => ['pages.show','governance'],                   'icon' => 'fa-gavel',              'color' => 'text-green-400',  'label' => 'Governance',                 'desc' => 'Our leadership structure, policies, and accountability framework.'],
            ['route' => ['pages.show','contact-us'],                   'icon' => 'fa-envelope',           'color' => 'text-green-400',  'label' => 'Contact Us',                 'desc' => 'Reach our team for enquiries, support, or collaboration.'],
        ],
        'auth_items' => [
            ['route' => ['organization.leadership-history.index'],     'icon' => 'fa-users-cog',          'color' => 'text-green-400',  'label' => 'Leadership',                 'desc' => 'Meet the elected officials steering our organisation forward.'],
            ['route' => ['organization.organogram.show'],              'icon' => 'fa-sitemap',            'color' => 'text-green-400',  'label' => 'Organogram',                 'desc' => 'Visual chart of our organisational structure and departments.'],
        ],
    ],

    /* ── Membership ─────────────────────────────────────────────────── */
    'membership' => [
        'cols' => 4,
        'items' => [
            ['route' => ['membership.categories.index'],               'icon' => 'fa-list',               'color' => 'text-blue-400',   'label' => 'Membership Categories',      'desc' => 'Browse all available membership tiers and their benefits.'],
            ['route' => ['register.role.member'],                      'icon' => 'fa-user-plus',          'color' => 'text-blue-400',   'label' => 'Apply for Membership',       'desc' => 'Join SSHIA and become part of our growing professional network.'],
            ['route' => ['membership.check-status'],                   'icon' => 'fa-search',             'color' => 'text-blue-400',   'label' => 'Check Application Status',   'desc' => 'Track the progress of your submitted membership application.'],
            ['route' => ['register.role.contributor'],                 'icon' => 'fa-pen-nib',            'color' => 'text-blue-400',   'label' => 'Become Contributor',         'desc' => 'Share expertise by contributing articles, resources, and insights.'],
        ],
    ],

    /* ── Health ─────────────────────────────────────────────────────── */
    'health' => [
        'cols' => 3,
        'items' => [
            ['route' => ['institutions.index'],                        'icon' => 'fa-hospital',           'color' => 'text-teal-400',   'label' => 'Institutions Directory',     'desc' => 'Browse registered health institutions across South Sudan.'],
            ['route' => ['institutions.register'],                     'icon' => 'fa-plus-circle',        'color' => 'text-teal-400',   'label' => 'Register Institution',       'desc' => 'List your health facility in our national institutions database.'],
            ['route' => ['machines.index'],                            'icon' => 'fa-cogs',               'color' => 'text-teal-400',   'label' => 'Digital Machines',           'desc' => 'Explore digital health equipment and technology resources available.'],
        ],
    ],

    /* ── Advocacy ───────────────────────────────────────────────────── */
    'advocacy' => [
        'cols' => 4,
        'items' => [
            ['route' => ['advocacy.public.index'],                     'icon' => 'fa-bullhorn',           'color' => 'text-cyan-400',   'label' => 'Campaigns',                  'desc' => 'Discover active health advocacy campaigns driving meaningful change.'],
            ['route' => ['advocacy.public.stories.index'],             'icon' => 'fa-book-open',          'color' => 'text-cyan-400',   'label' => 'Health Stories',             'desc' => 'Real experiences from communities shaping health policy decisions.'],
            ['route' => ['advocacy.public.polls.active'],              'icon' => 'fa-poll',               'color' => 'text-cyan-400',   'label' => 'Polls & Surveys',            'desc' => 'Participate in surveys that influence national health priorities.'],
            ['route' => ['advocacy.public.stories.create'],            'icon' => 'fa-pen',                'color' => 'text-cyan-400',   'label' => 'Submit Story',               'desc' => 'Share your health journey to inspire and inform others.'],
        ],
    ],

    /* ── Training ───────────────────────────────────────────────────── */
    'training' => [
        'cols' => 3,
        'items' => [
            ['route' => ['public.training.index'],                     'icon' => 'fa-chalkboard-teacher', 'color' => 'text-yellow-400', 'label' => 'Training Programmes',        'desc' => 'Structured professional development programmes for health informatics.'],
            ['route' => ['register.role.trainee'],                     'icon' => 'fa-user-plus',          'color' => 'text-yellow-400', 'label' => 'Apply for Training',         'desc' => 'Enrol in a training programme to advance your professional skills.'],
            ['route' => ['public.training.certificates.verify-page'],  'icon' => 'fa-certificate',        'color' => 'text-yellow-400', 'label' => 'Verify Certificate',         'desc' => 'Authenticate the validity of any SSHIA-issued training certificate.'],
        ],
    ],

    /* ── Mentorship ─────────────────────────────────────────────────── */
    'mentorship' => [
        'cols' => 3,
        'items' => [
            ['route' => ['mentorship.public.index'],                   'icon' => 'fa-user-graduate',      'color' => 'text-purple-400', 'label' => 'Mentorship Programmes',      'desc' => 'Structured guidance programmes connecting professionals across disciplines.'],
            ['route' => ['register.role.mentor'],                      'icon' => 'fa-user-tie',           'color' => 'text-purple-400', 'label' => 'Become Mentor',              'desc' => 'Share your expertise and guide the next generation of professionals.'],
            ['route' => ['register.role.mentee'],                      'icon' => 'fa-user-friends',       'color' => 'text-purple-400', 'label' => 'Become Mentee',              'desc' => 'Gain career guidance from experienced health informatics professionals.'],
            ['route' => ['mentorship.public.check-status'],            'icon' => 'fa-search',             'color' => 'text-purple-400', 'label' => 'Check Status',               'desc' => 'Monitor the current status of your mentorship application online.'],
            ['route' => ['mentorship.certificates.verify-page'],       'icon' => 'fa-certificate',        'color' => 'text-purple-400', 'label' => 'Verify Certificate',         'desc' => 'Confirm the authenticity of an issued mentorship completion certificate.'],
        ],
    ],

    /* ── Research ───────────────────────────────────────────────────── */
    'research' => [
        'cols' => 3,
        'items' => [
            ['route' => ['research.public.index'],                     'icon' => 'fa-book-open',          'color' => 'text-indigo-400', 'label' => 'Publications',               'desc' => 'Access peer-reviewed research advancing health informatics in South Sudan.'],
            ['route' => ['research.public.featured'],                  'icon' => 'fa-star',               'color' => 'text-yellow-400', 'label' => 'Featured Research',          'desc' => 'Highlighted publications selected by our editorial team.'],
            ['route' => ['research.public.submit'],                    'icon' => 'fa-upload',             'color' => 'text-indigo-400', 'label' => 'Submit Publication',         'desc' => 'Submit your research paper or study for peer review and publication.'],
        ],
    ],

    /* ── Knowledge ──────────────────────────────────────────────────── */
    'knowledge' => [
        'cols' => 2,
        'items' => [
            ['route' => ['public.knowledge-base.index'],               'icon' => 'fa-book',               'color' => 'text-green-400',  'label' => 'Knowledge Base',             'desc' => 'Curated resources, guides, and references for health informatics professionals.'],
            ['route' => ['public.discussions.index'],                  'icon' => 'fa-comments',           'color' => 'text-green-400',  'label' => 'Discussions',                'desc' => 'Engage in professional forums and community-driven knowledge exchange.'],
        ],
    ],

    /* ── Partners ───────────────────────────────────────────────────── */
    'partners' => [
        'cols' => 2,
        'items' => [
            ['route' => ['partners.public.index'],                     'icon' => 'fa-handshake',          'color' => 'text-blue-400',   'label' => 'Partners Directory',         'desc' => 'Explore organisations collaborating with SSHIA on health initiatives.'],
            ['route' => ['register.role.partner'],                     'icon' => 'fa-plus-circle',        'color' => 'text-blue-400',   'label' => 'Become Partner',             'desc' => 'Partner with SSHIA to co-create impactful health informatics solutions.'],
        ],
    ],

];

/* col count → Tailwind grid class */
$colMap = [
    1 => 'grid-cols-1',
    2 => 'grid-cols-1 sm:grid-cols-2',
    3 => 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3',
    4 => 'grid-cols-2 md:grid-cols-4',
];
@endphp

{{-- ─────────────────────────────────────────────────────────────────────────
     One panel per mega-menu key.

     KEY TECHNIQUE — always-set top:
       :style always writes a top value (open → computed bottom of navbar,
       closed → same value but panel is display:none via x-show).
       This prevents the panel ever defaulting to top:0 and flashing above
       the navbar during Alpine's leave transition.
───────────────────────────────────────────────────────────────────────────── --}}
@foreach($megaMenus as $key => $menu)
<div
    x-show="megaMenuOpen === '{{ $key }}'"
    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-100"
    x-transition:leave-start="opacity-100 translate-y-0"
    x-transition:leave-end="opacity-0 -translate-y-1"
    :style="'top:' + getNavbarBottom() + 'px'"
    class="fixed left-0 right-0 bg-gray-900 border-t-2 border-green-600 shadow-2xl z-[201]"
    x-cloak
    data-mega-panel
    role="region"
    aria-label="{{ ucfirst($key) }} menu"
>
    <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="grid {{ $colMap[$menu['cols']] ?? 'grid-cols-2 md:grid-cols-4' }} gap-3">

            {{-- Regular items --}}
            @foreach($menu['items'] as $item)
            <a href="{{ route($item['route'][0], isset($item['route'][1]) ? $item['route'][1] : []) }}"
               @click="closeMegaMenu()"
               class="flex items-start gap-3 p-3 rounded-xl hover:bg-gray-800 border border-transparent hover:border-gray-700 transition-all duration-150 group focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-gray-900">
                {{-- Icon badge --}}
                <div class="flex-shrink-0 w-9 h-9 rounded-lg bg-gray-800 group-hover:bg-gray-700 flex items-center justify-center transition mt-0.5">
                    <i class="fas {{ $item['icon'] }} {{ $item['color'] }} text-sm group-hover:scale-110 transition-transform" aria-hidden="true"></i>
                </div>
                {{-- Label + description --}}
                <div class="min-w-0 flex-1">
                    <span class="block text-sm font-semibold text-gray-200 group-hover:text-white transition leading-tight mb-1">
                        {{ $item['label'] }}
                    </span>
                    <span class="block text-[11px] leading-snug text-gray-400 group-hover:text-gray-300 transition
                                 bg-gray-950/60 border border-gray-700/60
                                 shadow-[inset_0_1px_3px_rgba(0,0,0,0.6),inset_0_0_0_1px_rgba(255,255,255,0.03)]
                                 rounded-md px-2 py-1 w-full">
                        {{ $item['desc'] }}
                    </span>
                </div>
            </a>
            @endforeach

            {{-- Auth-only items (e.g. SSHIA → Leadership, Organogram) --}}
            @if(isset($menu['auth_items']))
                @auth
                @foreach($menu['auth_items'] as $item)
                <a href="{{ route($item['route'][0], isset($item['route'][1]) ? $item['route'][1] : []) }}"
                   @click="closeMegaMenu()"
                   class="flex items-start gap-3 p-3 rounded-xl hover:bg-gray-800 border border-transparent hover:border-gray-700 transition-all duration-150 group focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-gray-900">
                    <div class="flex-shrink-0 w-9 h-9 rounded-lg bg-gray-800 group-hover:bg-gray-700 flex items-center justify-center transition mt-0.5">
                        <i class="fas {{ $item['icon'] }} {{ $item['color'] }} text-sm group-hover:scale-110 transition-transform" aria-hidden="true"></i>
                    </div>
                    <div class="min-w-0 flex-1">
                        <span class="block text-sm font-semibold text-gray-200 group-hover:text-white transition leading-tight mb-1">
                            {{ $item['label'] }}
                        </span>
                        <span class="block text-[11px] leading-snug text-gray-400 group-hover:text-gray-300 transition
                                     bg-gray-950/60 border border-gray-700/60
                                     shadow-[inset_0_1px_3px_rgba(0,0,0,0.6),inset_0_0_0_1px_rgba(255,255,255,0.03)]
                                     rounded-md px-2 py-1 w-full">
                            {{ $item['desc'] }}
                        </span>
                    </div>
                </a>
                @endforeach
                @endauth
            @endif

        </div>
    </div>
</div>
@endforeach
