{{-- =====================================================================
     Mobile Menu Overlay
     Full-screen canvas that slides in when the hamburger is tapped.
     Controlled by $store.siteLayout.mobileMenuOpen.
     Uses toggleMobileSection() / isMobileSectionExpanded() from siteHeader().
===================================================================== --}}
<div x-show="$store.siteLayout.mobileMenuOpen"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0 -translate-y-2"
     x-transition:enter-end="opacity-100 translate-y-0"
     x-transition:leave="transition ease-in duration-200"
     x-transition:leave-start="opacity-100 translate-y-0"
     x-transition:leave-end="opacity-0 -translate-y-2"
     class="w-full bg-slate-900 xl:hidden overflow-y-auto"
     @keydown.escape.window="$store.siteLayout.closeMobileMenu()"
     role="dialog"
     aria-modal="true"
     aria-label="Mobile navigation menu"
     x-cloak>

    <div class="px-4 py-4">

        {{-- ── Home ── --}}
        <a href="{{ route('home') }}"
           @click="$store.siteLayout.closeMobileMenu()"
           class="flex items-center gap-3 px-4 py-3 rounded-lg text-white hover:bg-white/10 transition mb-1 min-h-[44px] focus:outline-none focus:ring-2 focus:ring-white">
            <i class="fas fa-home text-green-400 w-5 text-center" aria-hidden="true"></i>
            <span class="font-medium">Home</span>
        </a>

        {{-- ── Accordion sections ── --}}
        @php
        $sections = [
            ['key'=>'sshia',      'label'=>'SSHIA',       'icon'=>'fa-building',           'color'=>'text-green-400'],
            ['key'=>'membership', 'label'=>'Membership',  'icon'=>'fa-users',              'color'=>'text-blue-400'],
            ['key'=>'health',     'label'=>'Health',      'icon'=>'fa-heartbeat',          'color'=>'text-teal-400'],
            ['key'=>'advocacy',   'label'=>'Advocacy',    'icon'=>'fa-bullhorn',           'color'=>'text-cyan-400'],
            ['key'=>'training',   'label'=>'Training',    'icon'=>'fa-chalkboard-teacher', 'color'=>'text-yellow-400'],
            ['key'=>'mentorship', 'label'=>'Mentorship',  'icon'=>'fa-user-graduate',      'color'=>'text-purple-400'],
            ['key'=>'research',   'label'=>'Research',    'icon'=>'fa-flask',              'color'=>'text-indigo-400'],
            ['key'=>'knowledge',  'label'=>'Knowledge',   'icon'=>'fa-book',               'color'=>'text-green-400'],
            ['key'=>'partners',   'label'=>'Partners',    'icon'=>'fa-handshake',          'color'=>'text-blue-400'],
        ];
        @endphp

        @foreach($sections as $section)
        <div class="mb-1">
            <button @click="toggleMobileSection('{{ $section['key'] }}')"
                    class="w-full flex items-center justify-between px-4 py-3 rounded-lg text-white hover:bg-white/10 transition min-h-[44px] focus:outline-none focus:ring-2 focus:ring-white"
                    :aria-expanded="isMobileSectionExpanded('{{ $section['key'] }}').toString()">
                <div class="flex items-center gap-3">
                    <i class="fas {{ $section['icon'] }} {{ $section['color'] }} w-5 text-center" aria-hidden="true"></i>
                    <span class="font-medium">{{ $section['label'] }}</span>
                </div>
                <i class="fas fa-chevron-down text-xs text-gray-400 transition-transform"
                   :class="{ 'rotate-180': isMobileSectionExpanded('{{ $section['key'] }}') }"
                   aria-hidden="true"></i>
            </button>

            <div x-show="isMobileSectionExpanded('{{ $section['key'] }}')"
                 x-transition
                 class="ml-8 mt-1 space-y-0.5 pb-1"
                 role="region"
                 aria-label="{{ $section['label'] }} submenu">

                @if($section['key'] === 'sshia')
                    <a href="{{ route('pages.show','about-us') }}"          @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">About Us</a>
                    <a href="{{ route('pages.show','vision-mission') }}"    @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Vision &amp; Mission</a>
                    <a href="{{ route('pages.show','what-we-do') }}"        @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">What We Do</a>
                    <a href="{{ route('pages.show','governance') }}"        @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Governance</a>
                    @auth
                    <a href="{{ route('organization.leadership-history.index') }}" @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Leadership</a>
                    <a href="{{ route('organization.organogram.show') }}"   @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Organogram</a>
                    @endauth
                    <a href="{{ route('pages.show','contact-us') }}"        @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Contact Us</a>

                @elseif($section['key'] === 'membership')
                    <a href="{{ route('membership.categories.index') }}"    @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Membership Categories</a>
                    <a href="{{ route('register.role.member') }}"           @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Apply for Membership</a>
                    <a href="{{ route('membership.check-status') }}"        @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Check Application Status</a>
                    <a href="{{ route('register.role.contributor') }}"      @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Become Contributor</a>

                @elseif($section['key'] === 'health')
                    <a href="{{ route('institutions.index') }}"             @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Institutions Directory</a>
                    <a href="{{ route('institutions.register') }}"          @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Register Institution</a>
                    <a href="{{ route('machines.index') }}"                 @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Digital Machines</a>

                @elseif($section['key'] === 'advocacy')
                    <a href="{{ route('advocacy.public.index') }}"          @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Campaigns</a>
                    <a href="{{ route('advocacy.public.stories.index') }}"  @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Health Stories</a>
                    <a href="{{ route('advocacy.public.polls.active') }}"   @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Polls &amp; Surveys</a>
                    <a href="{{ route('advocacy.public.stories.create') }}" @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Submit Story</a>

                @elseif($section['key'] === 'training')
                    <a href="{{ route('public.training.index') }}"          @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Training Programmes</a>
                    <a href="{{ route('register.role.trainee') }}"          @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Apply for Training</a>
                    <a href="{{ route('public.training.certificates.verify-page') }}" @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Verify Certificate</a>

                @elseif($section['key'] === 'mentorship')
                    <a href="{{ route('mentorship.public.index') }}"        @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Mentorship Programmes</a>
                    <a href="{{ route('register.role.mentor') }}"           @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Become Mentor</a>
                    <a href="{{ route('register.role.mentee') }}"           @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Become Mentee</a>
                    <a href="{{ route('mentorship.public.check-status') }}" @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Check Status</a>
                    <a href="{{ route('mentorship.certificates.verify-page') }}" @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Verify Certificate</a>

                @elseif($section['key'] === 'research')
                    <a href="{{ route('research.public.index') }}"          @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Publications</a>
                    <a href="{{ route('research.public.featured') }}"       @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Featured Research</a>
                    <a href="{{ route('research.public.submit') }}"         @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Submit Publication</a>

                @elseif($section['key'] === 'knowledge')
                    <a href="{{ route('public.knowledge-base.index') }}"    @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Knowledge Base</a>
                    <a href="{{ route('public.discussions.index') }}"       @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Discussions</a>

                @elseif($section['key'] === 'partners')
                    <a href="{{ route('partners.public.index') }}"          @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Partners Directory</a>
                    <a href="{{ route('register.role.partner') }}"          @click="$store.siteLayout.closeMobileMenu()" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition min-h-[44px]">Become Partner</a>
                @endif

            </div>
        </div>
        @endforeach

        {{-- ── SSHIA Academy ── --}}
        <a href="{{ route('self-paced.public.index') }}"
           @click="$store.siteLayout.closeMobileMenu()"
           class="flex items-center gap-3 px-4 py-3 rounded-lg bg-yellow-500/10 text-yellow-400 hover:bg-yellow-500/20 transition mt-2 min-h-[44px] focus:outline-none focus:ring-2 focus:ring-yellow-400">
            <i class="fas fa-graduation-cap w-5 text-center" aria-hidden="true"></i>
            <span class="font-medium">SSHIA Academy</span>
        </a>

        {{-- ── Auth buttons ── --}}
        <div class="mt-5 pt-5 border-t border-white/10 space-y-2">
            @guest
            <a href="{{ route('login') }}"
               class="flex items-center justify-center gap-2 w-full px-4 py-3 bg-white/10 hover:bg-white/20 rounded-lg text-white font-medium transition focus:outline-none focus:ring-2 focus:ring-white">
                <i class="fas fa-sign-in-alt" aria-hidden="true"></i>
                <span>Login</span>
            </a>
            <a href="{{ route('register') }}"
               class="flex items-center justify-center gap-2 w-full px-4 py-3 bg-green-600 hover:bg-green-700 rounded-lg text-white font-medium transition focus:outline-none focus:ring-2 focus:ring-green-400">
                <i class="fas fa-user-plus" aria-hidden="true"></i>
                <span>Register</span>
            </a>
            @else
            <a href="{{ route('dashboard') }}"
               class="flex items-center justify-center gap-2 w-full px-4 py-3 bg-green-600 hover:bg-green-700 rounded-lg text-white font-medium transition focus:outline-none focus:ring-2 focus:ring-green-400">
                <i class="fas fa-th-large" aria-hidden="true"></i>
                <span>Dashboard</span>
            </a>
            @endguest
        </div>

    </div>
</div>
