
<div x-show="$store.siteLayout.mobileMenuOpen"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0 -translate-x-full"
     x-transition:enter-end="opacity-100 translate-x-0"
     x-transition:leave="transition ease-in duration-200"
     x-transition:leave-start="opacity-100 translate-x-0"
     x-transition:leave-end="opacity-0 -translate-x-full"
     class="fixed inset-0 bg-slate-900 z-50 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-5">

        
        <div class="flex items-center justify-between mb-5">
            <a href="<?php echo e(route('home')); ?>"
               @click="$store.siteLayout.closeMobileMenu()"
               class="focus:outline-none focus:ring-2 focus:ring-white rounded"
               aria-label="Home">
                <?php if(file_exists(public_path('assets/img/logo.png'))): ?>
                    <img src="<?php echo e(asset('assets/img/logo.png')); ?>" alt="Logo" class="h-10 w-auto object-contain">
                <?php elseif(file_exists(public_path('storage/organization/logo.png'))): ?>
                    <img src="<?php echo e(asset('storage/organization/logo.png')); ?>" alt="Logo" class="h-10 w-auto object-contain">
                <?php else: ?>
                    <span class="text-white font-bold text-lg">SSHIA</span>
                <?php endif; ?>
            </a>
            <button @click="$store.siteLayout.closeMobileMenu()"
                    class="w-10 h-10 rounded-lg bg-white/10 hover:bg-white/20 flex items-center justify-center transition focus:outline-none focus:ring-2 focus:ring-white"
                    aria-label="Close mobile menu">
                <i class="fas fa-times text-white text-lg" aria-hidden="true"></i>
            </button>
        </div>

        
        <a href="<?php echo e(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>

        
        <?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'],
        ];
        ?>

        <?php $__currentLoopData = $sections; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $section): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <div class="mb-1">
            <button @click="toggleMobileSection('<?php echo e($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('<?php echo e($section['key']); ?>').toString()">
                <div class="flex items-center gap-3">
                    <i class="fas <?php echo e($section['icon']); ?> <?php echo e($section['color']); ?> w-5 text-center" aria-hidden="true"></i>
                    <span class="font-medium"><?php echo e($section['label']); ?></span>
                </div>
                <i class="fas fa-chevron-down text-xs text-gray-400 transition-transform"
                   :class="{ 'rotate-180': isMobileSectionExpanded('<?php echo e($section['key']); ?>') }"
                   aria-hidden="true"></i>
            </button>

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

                <?php if($section['key'] === 'sshia'): ?>
                    <a href="<?php echo e(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="<?php echo e(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="<?php echo e(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="<?php echo e(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>
                    <?php if(auth()->guard()->check()): ?>
                    <a href="<?php echo e(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="<?php echo e(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>
                    <?php endif; ?>
                    <a href="<?php echo e(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>

                <?php elseif($section['key'] === 'membership'): ?>
                    <a href="<?php echo e(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="<?php echo e(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="<?php echo e(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="<?php echo e(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>

                <?php elseif($section['key'] === 'health'): ?>
                    <a href="<?php echo e(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="<?php echo e(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="<?php echo e(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>

                <?php elseif($section['key'] === 'advocacy'): ?>
                    <a href="<?php echo e(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="<?php echo e(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="<?php echo e(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="<?php echo e(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>

                <?php elseif($section['key'] === 'training'): ?>
                    <a href="<?php echo e(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="<?php echo e(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="<?php echo e(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>

                <?php elseif($section['key'] === 'mentorship'): ?>
                    <a href="<?php echo e(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="<?php echo e(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="<?php echo e(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="<?php echo e(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="<?php echo e(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>

                <?php elseif($section['key'] === 'research'): ?>
                    <a href="<?php echo e(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="<?php echo e(route('research.public.search')); ?>"         @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]">Search Publications</a>

                <?php elseif($section['key'] === 'knowledge'): ?>
                    <a href="<?php echo e(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="<?php echo e(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>

                <?php elseif($section['key'] === 'partners'): ?>
                    <a href="<?php echo e(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="<?php echo e(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>
                <?php endif; ?>

            </div>
        </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

        
        <a href="<?php echo e(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>

        
        <div class="mt-5 pt-5 border-t border-white/10 space-y-2">
            <?php if(auth()->guard()->guest()): ?>
            <a href="<?php echo e(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="<?php echo e(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>
            <?php else: ?>
            <a href="<?php echo e(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>
            <?php endif; ?>
        </div>

    </div>
</div>
<?php /**PATH /home/www/sshia.org/sshia/resources/views/components/site-mobile-menu.blade.php ENDPATH**/ ?>