@php $currentRoute = Route::currentRouteName(); @endphp

<header
    x-data="{
        scrolled: false,
        megaMenuOpen: null,
        mobileMenuOpen: false,
        mobileExpanded: {},
        init() {
            this.scrolled = window.scrollY > 10;
            window.addEventListener('scroll', () => { this.scrolled = window.scrollY > 10; });
        },
        openMegaMenu(key) { this.megaMenuOpen = key; },
        closeMegaMenu() { this.megaMenuOpen = null; },
        toggleMobile() {
            this.mobileMenuOpen = !this.mobileMenuOpen;
            document.body.style.overflow = this.mobileMenuOpen ? 'hidden' : 'auto';
        },
        toggleSection(key) {
            this.mobileExpanded[key] = !this.mobileExpanded[key];
        }
    }"
    :class="scrolled
        ? 'h-16 bg-white/90 dark:bg-gray-900/90 backdrop-blur-lg shadow-lg'
        : 'h-20 bg-white dark:bg-gray-900'"
    class="sticky top-0 left-0 right-0 z-50 w-full h-20 transition-all duration-300 ease-in-out border-b border-gray-200/50 dark:border-gray-700/50"
>
    <div class="container mx-auto px-4 lg:px-6 h-full flex items-center justify-between">

        {{-- ================================================================
             LOGO
        ================================================================ --}}
        <div class="flex items-center flex-shrink-0 h-full py-2">
            <a href="{{ route('home') }}" class="flex items-center h-full">
                <x-application-logo class="h-full w-auto" />
            </a>
        </div>

        {{-- ================================================================
             DESKTOP NAVIGATION
        ================================================================ --}}
        <nav class="hidden xl:flex items-center h-full">

            {{-- Home --}}
            <a href="{{ route('home') }}"
               class="px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors rounded-md {{ $currentRoute === 'home' ? 'text-blue-600 dark:text-blue-400 font-medium' : '' }}">
                Home
            </a>

            {{-- ============================================================
                 MEGA MENU 1: ABOUT SSHIA — GREEN background, full height
            ============================================================ --}}
            <div class="relative h-full flex items-center"
                 @mouseenter="openMegaMenu('about')"
                 @mouseleave="setTimeout(() => { if(megaMenuOpen === 'about') closeMegaMenu(); }, 200)">
                <button class="flex items-center space-x-1 px-4 h-full text-sm font-semibold text-white bg-green-600 hover:bg-green-700 transition-colors"
                        :class="megaMenuOpen === 'about' ? 'bg-green-700' : ''">
                    <span>SSHIA</span>
                    <i class="fa-solid fa-chevron-down text-xs transition-transform duration-200" :class="megaMenuOpen === 'about' ? 'rotate-180' : ''"></i>
                </button>
                <div x-show="megaMenuOpen === 'about'"
                     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 top-full left-0 mt-0 w-64 bg-white/95 dark:bg-gray-800/95 backdrop-blur-lg rounded-xl shadow-xl border border-gray-200/50 dark:border-gray-700/50 p-5 z-50"
                     style="display:none;">
                    <h3 class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">Organisation</h3>
                    <ul class="space-y-1">
                        <li><a href="{{ route('pages.show', 'about-sshia') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-building fa-fw text-blue-500 w-4"></i><span>About SSHIA</span></a></li>
                        <li><a href="{{ route('pages.show', 'vision') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-eye fa-fw text-blue-500 w-4"></i><span>Our Vision</span></a></li>
                        <li><a href="{{ route('pages.show', 'mission') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-bullseye fa-fw text-blue-500 w-4"></i><span>Our Mission</span></a></li>
                        <li><a href="{{ route('pages.show', 'what-we-do') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-briefcase fa-fw text-blue-500 w-4"></i><span>What We Do</span></a></li>
                        <li><a href="{{ route('pages.show', 'governance') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-landmark fa-fw text-blue-500 w-4"></i><span>Governance</span></a></li>
                        @auth
                        <li><a href="{{ route('organization.organogram.show') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-sitemap fa-fw text-blue-500 w-4"></i><span>Leadership &amp; Organogram</span></a></li>
                        @endauth
                        <li><a href="{{ route('pages.show', 'about-sshia') }}#contact" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-envelope fa-fw text-blue-500 w-4"></i><span>Contact Us</span></a></li>
                    </ul>
                </div>
            </div>

            {{-- ============================================================
                 MEGA MENU 2: MEMBERSHIP
            ============================================================ --}}
            <div class="relative h-full flex items-center"
                 @mouseenter="openMegaMenu('membership')"
                 @mouseleave="setTimeout(() => { if(megaMenuOpen === 'membership') closeMegaMenu(); }, 200)">
                <button class="flex items-center space-x-1 px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors rounded-md"
                        :class="megaMenuOpen === 'membership' ? 'text-blue-600 dark:text-blue-400' : ''">
                    <span>Membership</span>
                    <i class="fa-solid fa-chevron-down text-xs transition-transform duration-200" :class="megaMenuOpen === 'membership' ? 'rotate-180' : ''"></i>
                </button>
                <div x-show="megaMenuOpen === 'membership'"
                     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 top-full left-0 mt-0 w-64 bg-white/95 dark:bg-gray-800/95 backdrop-blur-lg rounded-xl shadow-xl border border-gray-200/50 dark:border-gray-700/50 p-5 z-50"
                     style="display:none;">
                    <h3 class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">Join SSHIA</h3>
                    <ul class="space-y-1">
                        <li><a href="{{ route('membership.categories.index') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-id-card fa-fw text-blue-500 w-4"></i><span>Membership Categories</span></a></li>
                        <li><a href="{{ route('membership.apply') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-user-plus fa-fw text-blue-500 w-4"></i><span>Apply for Membership</span></a></li>
                        <li><a href="{{ route('membership.check-status') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-magnifying-glass fa-fw text-blue-500 w-4"></i><span>Check Application Status</span></a></li>
                        <li><a href="{{ route('public.contributor.become') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-pen-nib fa-fw text-blue-500 w-4"></i><span>Become a Contributor</span></a></li>
                    </ul>
                </div>
            </div>

            {{-- ============================================================
                 MEGA MENU 3: HEALTH SERVICES — RED background, full height
            ============================================================ --}}
            <div class="relative h-full flex items-center"
                 @mouseenter="openMegaMenu('health')"
                 @mouseleave="setTimeout(() => { if(megaMenuOpen === 'health') closeMegaMenu(); }, 200)">
                <button class="flex items-center space-x-1 px-4 h-full text-sm font-semibold text-white bg-red-600 hover:bg-red-700 transition-colors"
                        :class="megaMenuOpen === 'health' ? 'bg-red-700' : ''">
                    <span>Health</span>
                    <i class="fa-solid fa-chevron-down text-xs transition-transform duration-200" :class="megaMenuOpen === 'health' ? 'rotate-180' : ''"></i>
                </button>
                <div x-show="megaMenuOpen === 'health'"
                     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 top-full left-0 mt-0 w-[480px] bg-white/95 dark:bg-gray-800/95 backdrop-blur-lg rounded-xl shadow-xl border border-gray-200/50 dark:border-gray-700/50 p-5 z-50"
                     style="display:none;">
                    <div class="grid grid-cols-2 gap-6">
                        <div>
                            <h3 class="text-xs font-semibold uppercase tracking-wider text-teal-500 mb-3 flex items-center space-x-1">
                                <i class="fa-solid fa-hospital fa-fw"></i><span>Institutions</span>
                            </h3>
                            <ul class="space-y-1">
                                <li><a href="{{ route('institutions.index') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-teal-600 dark:hover:text-teal-400 hover:bg-teal-50 dark:hover:bg-teal-900/20 rounded-lg transition-colors"><i class="fa-solid fa-list fa-fw text-teal-400 w-4"></i><span>Browse Directory</span></a></li>
                                <li><a href="{{ route('institutions.index') }}?search=1" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-teal-600 dark:hover:text-teal-400 hover:bg-teal-50 dark:hover:bg-teal-900/20 rounded-lg transition-colors"><i class="fa-solid fa-magnifying-glass fa-fw text-teal-400 w-4"></i><span>Find an Institution</span></a></li>
                                <li><a href="{{ route('institutions.register') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-teal-600 dark:hover:text-teal-400 hover:bg-teal-50 dark:hover:bg-teal-900/20 rounded-lg transition-colors"><i class="fa-solid fa-plus-circle fa-fw text-teal-400 w-4"></i><span>Register Your Institution</span></a></li>
                            </ul>
                        </div>
                        <div class="border-l border-gray-200 dark:border-gray-700 pl-6">
                            <h3 class="text-xs font-semibold uppercase tracking-wider text-cyan-500 mb-3 flex items-center space-x-1">
                                <i class="fa-solid fa-computer fa-fw"></i><span>Digital Machines</span>
                            </h3>
                            <ul class="space-y-1">
                                <li><a href="{{ route('machines.index') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-cyan-600 dark:hover:text-cyan-400 hover:bg-cyan-50 dark:hover:bg-cyan-900/20 rounded-lg transition-colors"><i class="fa-solid fa-list fa-fw text-cyan-400 w-4"></i><span>Browse Machines</span></a></li>
                                <li><a href="{{ route('machines.index') }}?search=1" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-cyan-600 dark:hover:text-cyan-400 hover:bg-cyan-50 dark:hover:bg-cyan-900/20 rounded-lg transition-colors"><i class="fa-solid fa-magnifying-glass fa-fw text-cyan-400 w-4"></i><span>Find a Machine</span></a></li>
                                <li><a href="{{ route('machines.index') }}#featured" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-cyan-600 dark:hover:text-cyan-400 hover:bg-cyan-50 dark:hover:bg-cyan-900/20 rounded-lg transition-colors"><i class="fa-solid fa-star fa-fw text-cyan-400 w-4"></i><span>Featured Machines</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ============================================================
                 MEGA MENU 4: TRAINING & MENTORSHIP
            ============================================================ --}}
            <div class="relative h-full flex items-center"
                 @mouseenter="openMegaMenu('training')"
                 @mouseleave="setTimeout(() => { if(megaMenuOpen === 'training') closeMegaMenu(); }, 200)">
                <button class="flex items-center space-x-1 px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors rounded-md"
                        :class="megaMenuOpen === 'training' ? 'text-blue-600 dark:text-blue-400' : ''">
                    <span>Training</span>
                    <i class="fa-solid fa-chevron-down text-xs transition-transform duration-200" :class="megaMenuOpen === 'training' ? 'rotate-180' : ''"></i>
                </button>
                <div x-show="megaMenuOpen === 'training'"
                     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 top-full left-0 mt-0 w-[480px] bg-white/95 dark:bg-gray-800/95 backdrop-blur-lg rounded-xl shadow-xl border border-gray-200/50 dark:border-gray-700/50 p-5 z-50"
                     style="display:none;">
                    <div class="grid grid-cols-2 gap-6">
                        <div>
                            <h3 class="text-xs font-semibold uppercase tracking-wider text-blue-500 mb-3 flex items-center space-x-1">
                                <i class="fa-solid fa-chalkboard-teacher fa-fw"></i><span>Training</span>
                            </h3>
                            <ul class="space-y-1">
                                <li><a href="{{ route('public.training.index') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-list fa-fw text-blue-400 w-4"></i><span>Training Programmes</span></a></li>
                                <li><a href="{{ route('public.training.index') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-user-graduate fa-fw text-blue-400 w-4"></i><span>Apply for Training</span></a></li>
                                <li><a href="{{ url('/training/certificates/verify') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-certificate fa-fw text-blue-400 w-4"></i><span>Verify Certificate</span></a></li>
                            </ul>
                        </div>
                        <div class="border-l border-gray-200 dark:border-gray-700 pl-6">
                            <h3 class="text-xs font-semibold uppercase tracking-wider text-green-500 mb-3 flex items-center space-x-1">
                                <i class="fa-solid fa-people-arrows fa-fw"></i><span>Mentorship</span>
                            </h3>
                            <ul class="space-y-1">
                                <li><a href="{{ route('mentorship.public.index') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-green-600 dark:hover:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg transition-colors"><i class="fa-solid fa-list fa-fw text-green-400 w-4"></i><span>Mentorship Programmes</span></a></li>
                                <li><a href="{{ route('mentorship.public.apply') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-green-600 dark:hover:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg transition-colors"><i class="fa-solid fa-hand-holding-heart fa-fw text-green-400 w-4"></i><span>Apply for Mentorship</span></a></li>
                                <li><a href="{{ route('mentorship.public.check-status') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-green-600 dark:hover:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg transition-colors"><i class="fa-solid fa-magnifying-glass fa-fw text-green-400 w-4"></i><span>Check Status</span></a></li>
                                <li><a href="{{ route('mentorship.certificates.verify-page') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-green-600 dark:hover:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg transition-colors"><i class="fa-solid fa-certificate fa-fw text-green-400 w-4"></i><span>Verify Certificate</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ============================================================
                 MEGA MENU 5: RESEARCH & KNOWLEDGE
            ============================================================ --}}
            <div class="relative h-full flex items-center"
                 @mouseenter="openMegaMenu('research')"
                 @mouseleave="setTimeout(() => { if(megaMenuOpen === 'research') closeMegaMenu(); }, 200)">
                <button class="flex items-center space-x-1 px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors rounded-md"
                        :class="megaMenuOpen === 'research' ? 'text-blue-600 dark:text-blue-400' : ''">
                    <span>Research</span>
                    <i class="fa-solid fa-chevron-down text-xs transition-transform duration-200" :class="megaMenuOpen === 'research' ? 'rotate-180' : ''"></i>
                </button>
                <div x-show="megaMenuOpen === 'research'"
                     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 top-full left-0 mt-0 w-[480px] bg-white/95 dark:bg-gray-800/95 backdrop-blur-lg rounded-xl shadow-xl border border-gray-200/50 dark:border-gray-700/50 p-5 z-50"
                     style="display:none;">
                    <div class="grid grid-cols-2 gap-6">
                        <div>
                            <h3 class="text-xs font-semibold uppercase tracking-wider text-purple-500 mb-3 flex items-center space-x-1">
                                <i class="fa-solid fa-flask fa-fw"></i><span>Research</span>
                            </h3>
                            <ul class="space-y-1">
                                <li><a href="{{ route('research.public.index') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded-lg transition-colors"><i class="fa-solid fa-book-open fa-fw text-purple-400 w-4"></i><span>Research Publications</span></a></li>
                                <li><a href="{{ route('research.public.search') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded-lg transition-colors"><i class="fa-solid fa-magnifying-glass fa-fw text-purple-400 w-4"></i><span>Search Publications</span></a></li>
                                <li><a href="{{ route('research.public.featured') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded-lg transition-colors"><i class="fa-solid fa-star fa-fw text-purple-400 w-4"></i><span>Featured Research</span></a></li>
                            </ul>
                        </div>
                        <div class="border-l border-gray-200 dark:border-gray-700 pl-6">
                            <h3 class="text-xs font-semibold uppercase tracking-wider text-indigo-500 mb-3 flex items-center space-x-1">
                                <i class="fa-solid fa-lightbulb fa-fw"></i><span>Knowledge</span>
                            </h3>
                            <ul class="space-y-1">
                                <li><a href="{{ route('public.knowledge-base.index') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 rounded-lg transition-colors"><i class="fa-solid fa-database fa-fw text-indigo-400 w-4"></i><span>Knowledge Base</span></a></li>
                                <li><a href="{{ route('public.knowledge-base.search') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 rounded-lg transition-colors"><i class="fa-solid fa-magnifying-glass fa-fw text-indigo-400 w-4"></i><span>Search Knowledge Base</span></a></li>
                                <li><a href="{{ route('public.discussions.index') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 rounded-lg transition-colors"><i class="fa-solid fa-comments fa-fw text-indigo-400 w-4"></i><span>Browse Discussions</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ============================================================
                 MEGA MENU 6: ADVOCACY & PARTNERS — BLUE background, full height
            ============================================================ --}}
            <div class="relative h-full flex items-center"
                 @mouseenter="openMegaMenu('advocacy')"
                 @mouseleave="setTimeout(() => { if(megaMenuOpen === 'advocacy') closeMegaMenu(); }, 200)">
                <button class="flex items-center space-x-1 px-4 h-full text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 transition-colors"
                        :class="megaMenuOpen === 'advocacy' ? 'bg-blue-700' : ''">
                    <span>Advocacy</span>
                    <i class="fa-solid fa-chevron-down text-xs transition-transform duration-200" :class="megaMenuOpen === 'advocacy' ? 'rotate-180' : ''"></i>
                </button>
                <div x-show="megaMenuOpen === 'advocacy'"
                     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 top-full left-0 mt-0 w-[480px] bg-white/95 dark:bg-gray-800/95 backdrop-blur-lg rounded-xl shadow-xl border border-gray-200/50 dark:border-gray-700/50 p-5 z-50"
                     style="display:none;">
                    <div class="grid grid-cols-2 gap-6">
                        <div>
                            <h3 class="text-xs font-semibold uppercase tracking-wider text-rose-500 mb-3 flex items-center space-x-1">
                                <i class="fa-solid fa-bullhorn fa-fw"></i><span>Advocacy</span>
                            </h3>
                            <ul class="space-y-1">
                                <li><a href="{{ route('advocacy.public.index') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-900/20 rounded-lg transition-colors"><i class="fa-solid fa-flag fa-fw text-rose-400 w-4"></i><span>Advocacy Campaigns</span></a></li>
                                <li><a href="{{ route('advocacy.public.stories.index') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-900/20 rounded-lg transition-colors"><i class="fa-solid fa-heart-pulse fa-fw text-rose-400 w-4"></i><span>Health Stories</span></a></li>
                                <li><a href="{{ route('advocacy.public.polls.active') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-900/20 rounded-lg transition-colors"><i class="fa-solid fa-chart-bar fa-fw text-rose-400 w-4"></i><span>Polls &amp; Surveys</span></a></li>
                                <li><a href="{{ route('advocacy.public.stories.create') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-900/20 rounded-lg transition-colors"><i class="fa-solid fa-pen-to-square fa-fw text-rose-400 w-4"></i><span>Submit Your Story</span></a></li>
                            </ul>
                        </div>
                        <div class="border-l border-gray-200 dark:border-gray-700 pl-6">
                            <h3 class="text-xs font-semibold uppercase tracking-wider text-orange-500 mb-3 flex items-center space-x-1">
                                <i class="fa-solid fa-handshake fa-fw"></i><span>Partners</span>
                            </h3>
                            <ul class="space-y-1">
                                <li><a href="{{ route('partners.public.index') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 hover:bg-orange-50 dark:hover:bg-orange-900/20 rounded-lg transition-colors"><i class="fa-solid fa-building-user fa-fw text-orange-400 w-4"></i><span>Our Partners</span></a></li>
                                <li><a href="{{ route('partners.public.become-partner') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 hover:bg-orange-50 dark:hover:bg-orange-900/20 rounded-lg transition-colors"><i class="fa-solid fa-handshake-simple fa-fw text-orange-400 w-4"></i><span>Become a Partner</span></a></li>
                                @auth
                                <li><a href="{{ route('partners.forum.index') }}" class="flex items-center space-x-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 hover:bg-orange-50 dark:hover:bg-orange-900/20 rounded-lg transition-colors"><i class="fa-solid fa-comments fa-fw text-orange-400 w-4"></i><span>Partners Forum</span></a></li>
                                @endauth
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </nav>
        {{-- END DESKTOP NAV --}}


        {{-- ================================================================
             DESKTOP AUTH BUTTONS
        ================================================================ --}}
        <div class="hidden xl:flex items-center space-x-2 flex-shrink-0">
            @guest
                <a href="{{ route('login') }}"
                   class="flex items-center space-x-1.5 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors rounded-md">
                    <i class="fa-solid fa-right-to-bracket fa-fw"></i>
                    <span>Login</span>
                </a>
                <a href="{{ route('register') }}"
                   class="flex items-center space-x-1.5 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors shadow-sm">
                    <i class="fa-solid fa-user-plus fa-fw"></i>
                    <span>Register</span>
                </a>
            @else
                <a href="{{ route('dashboard') }}"
                   class="flex items-center space-x-2 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors shadow-sm">
                    <i class="fa-solid fa-gauge-high fa-fw"></i>
                    <span>Dashboard</span>
                </a>
            @endguest
        </div>

        {{-- ================================================================
             MOBILE HAMBURGER BUTTON
        ================================================================ --}}
        <button @click="toggleMobile()"
                class="xl:hidden flex items-center justify-center w-10 h-10 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
                aria-label="Toggle mobile menu">
            <i class="fa-solid fa-bars text-lg" x-show="!mobileMenuOpen"></i>
            <i class="fa-solid fa-xmark text-lg" x-show="mobileMenuOpen" style="display:none;"></i>
        </button>

    </div>
    {{-- END CONTAINER --}}


    {{-- ================================================================
         MOBILE NAVIGATION OVERLAY
    ================================================================ --}}
    <div x-show="mobileMenuOpen"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 -translate-y-4"
         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-4"
         class="xl:hidden fixed inset-0 top-16 z-40 bg-white dark:bg-gray-900 overflow-y-auto"
         style="display:none;">
        <div class="container mx-auto px-4 py-6 space-y-2">

            {{-- Home --}}
            <a href="{{ route('home') }}" @click="toggleMobile()"
               class="flex items-center space-x-3 px-4 py-3 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-xl transition-colors">
                <i class="fa-solid fa-house fa-fw text-blue-500 w-5"></i>
                <span>Home</span>
            </a>

            {{-- Mobile: About SSHIA --}}
            <div>
                <button @click="toggleSection('about')"
                        class="w-full flex items-center justify-between px-4 py-3 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl transition-colors">
                    <span class="flex items-center space-x-3"><i class="fa-solid fa-building fa-fw text-green-600 w-5"></i><span>About SSHIA</span></span>
                    <i class="fa-solid fa-chevron-down text-sm transition-transform duration-200" :class="mobileExpanded['about'] ? 'rotate-180' : ''"></i>
                </button>
                <div x-show="mobileExpanded['about']" x-transition class="mt-1 ml-8 space-y-1" style="display:none;">
                    <a href="{{ route('pages.show', 'about-sshia') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-building fa-fw text-blue-400 w-4"></i><span>About SSHIA</span></a>
                    <a href="{{ route('pages.show', 'vision') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-eye fa-fw text-blue-400 w-4"></i><span>Our Vision</span></a>
                    <a href="{{ route('pages.show', 'mission') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-bullseye fa-fw text-blue-400 w-4"></i><span>Our Mission</span></a>
                    <a href="{{ route('pages.show', 'what-we-do') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-briefcase fa-fw text-blue-400 w-4"></i><span>What We Do</span></a>
                    <a href="{{ route('pages.show', 'governance') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-landmark fa-fw text-blue-400 w-4"></i><span>Governance</span></a>
                    @auth
                    <a href="{{ route('organization.organogram.show') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-sitemap fa-fw text-blue-400 w-4"></i><span>Leadership &amp; Organogram</span></a>
                    @endauth
                    <a href="{{ route('pages.show', 'about-sshia') }}#contact" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-envelope fa-fw text-blue-400 w-4"></i><span>Contact Us</span></a>
                </div>
            </div>

            {{-- Mobile: Membership --}}
            <div>
                <button @click="toggleSection('membership')"
                        class="w-full flex items-center justify-between px-4 py-3 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl transition-colors">
                    <span class="flex items-center space-x-3"><i class="fa-solid fa-id-card fa-fw text-blue-500 w-5"></i><span>Membership</span></span>
                    <i class="fa-solid fa-chevron-down text-sm transition-transform duration-200" :class="mobileExpanded['membership'] ? 'rotate-180' : ''"></i>
                </button>
                <div x-show="mobileExpanded['membership']" x-transition class="mt-1 ml-8 space-y-1" style="display:none;">
                    <a href="{{ route('membership.categories.index') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-id-card fa-fw text-blue-400 w-4"></i><span>Membership Categories</span></a>
                    <a href="{{ route('membership.apply') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-user-plus fa-fw text-blue-400 w-4"></i><span>Apply for Membership</span></a>
                    <a href="{{ route('membership.check-status') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-magnifying-glass fa-fw text-blue-400 w-4"></i><span>Check Application Status</span></a>
                    <a href="{{ route('public.contributor.become') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-pen-nib fa-fw text-blue-400 w-4"></i><span>Become a Contributor</span></a>
                </div>
            </div>

            {{-- Mobile: Health Services --}}
            <div>
                <button @click="toggleSection('health')"
                        class="w-full flex items-center justify-between px-4 py-3 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl transition-colors">
                    <span class="flex items-center space-x-3"><i class="fa-solid fa-hospital fa-fw text-red-500 w-5"></i><span>Health Services</span></span>
                    <i class="fa-solid fa-chevron-down text-sm transition-transform duration-200" :class="mobileExpanded['health'] ? 'rotate-180' : ''"></i>
                </button>
                <div x-show="mobileExpanded['health']" x-transition class="mt-1 ml-8 space-y-1" style="display:none;">
                    <p class="px-3 py-1 text-xs font-semibold uppercase tracking-wider text-teal-500">Institutions</p>
                    <a href="{{ route('institutions.index') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-teal-600 dark:hover:text-teal-400 hover:bg-teal-50 dark:hover:bg-teal-900/20 rounded-lg transition-colors"><i class="fa-solid fa-list fa-fw text-teal-400 w-4"></i><span>Browse Directory</span></a>
                    <a href="{{ route('institutions.index') }}?search=1" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-teal-600 dark:hover:text-teal-400 hover:bg-teal-50 dark:hover:bg-teal-900/20 rounded-lg transition-colors"><i class="fa-solid fa-magnifying-glass fa-fw text-teal-400 w-4"></i><span>Find an Institution</span></a>
                    <a href="{{ route('institutions.register') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-teal-600 dark:hover:text-teal-400 hover:bg-teal-50 dark:hover:bg-teal-900/20 rounded-lg transition-colors"><i class="fa-solid fa-plus-circle fa-fw text-teal-400 w-4"></i><span>Register Your Institution</span></a>
                    <p class="px-3 py-1 text-xs font-semibold uppercase tracking-wider text-cyan-500 mt-2">Digital Machines</p>
                    <a href="{{ route('machines.index') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-cyan-600 dark:hover:text-cyan-400 hover:bg-cyan-50 dark:hover:bg-cyan-900/20 rounded-lg transition-colors"><i class="fa-solid fa-list fa-fw text-cyan-400 w-4"></i><span>Browse Machines</span></a>
                    <a href="{{ route('machines.index') }}?search=1" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-cyan-600 dark:hover:text-cyan-400 hover:bg-cyan-50 dark:hover:bg-cyan-900/20 rounded-lg transition-colors"><i class="fa-solid fa-magnifying-glass fa-fw text-cyan-400 w-4"></i><span>Find a Machine</span></a>
                    <a href="{{ route('machines.index') }}#featured" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-cyan-600 dark:hover:text-cyan-400 hover:bg-cyan-50 dark:hover:bg-cyan-900/20 rounded-lg transition-colors"><i class="fa-solid fa-star fa-fw text-cyan-400 w-4"></i><span>Featured Machines</span></a>
                </div>
            </div>

            {{-- Mobile: Training & Mentorship --}}
            <div>
                <button @click="toggleSection('training')"
                        class="w-full flex items-center justify-between px-4 py-3 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl transition-colors">
                    <span class="flex items-center space-x-3"><i class="fa-solid fa-chalkboard-teacher fa-fw text-blue-500 w-5"></i><span>Training &amp; Mentorship</span></span>
                    <i class="fa-solid fa-chevron-down text-sm transition-transform duration-200" :class="mobileExpanded['training'] ? 'rotate-180' : ''"></i>
                </button>
                <div x-show="mobileExpanded['training']" x-transition class="mt-1 ml-8 space-y-1" style="display:none;">
                    <p class="px-3 py-1 text-xs font-semibold uppercase tracking-wider text-blue-500">Training</p>
                    <a href="{{ route('public.training.index') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-list fa-fw text-blue-400 w-4"></i><span>Training Programmes</span></a>
                    <a href="{{ route('public.training.index') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-user-graduate fa-fw text-blue-400 w-4"></i><span>Apply for Training</span></a>
                    <a href="{{ url('/training/certificates/verify') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"><i class="fa-solid fa-certificate fa-fw text-blue-400 w-4"></i><span>Verify Certificate</span></a>
                    <p class="px-3 py-1 text-xs font-semibold uppercase tracking-wider text-green-500 mt-2">Mentorship</p>
                    <a href="{{ route('mentorship.public.index') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-green-600 dark:hover:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg transition-colors"><i class="fa-solid fa-list fa-fw text-green-400 w-4"></i><span>Mentorship Programmes</span></a>
                    <a href="{{ route('mentorship.public.apply') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-green-600 dark:hover:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg transition-colors"><i class="fa-solid fa-hand-holding-heart fa-fw text-green-400 w-4"></i><span>Apply for Mentorship</span></a>
                    <a href="{{ route('mentorship.public.check-status') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-green-600 dark:hover:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg transition-colors"><i class="fa-solid fa-magnifying-glass fa-fw text-green-400 w-4"></i><span>Check Status</span></a>
                    <a href="{{ route('mentorship.certificates.verify-page') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-green-600 dark:hover:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg transition-colors"><i class="fa-solid fa-certificate fa-fw text-green-400 w-4"></i><span>Verify Certificate</span></a>
                </div>
            </div>

            {{-- Mobile: Research & Knowledge --}}
            <div>
                <button @click="toggleSection('research')"
                        class="w-full flex items-center justify-between px-4 py-3 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl transition-colors">
                    <span class="flex items-center space-x-3"><i class="fa-solid fa-flask fa-fw text-purple-500 w-5"></i><span>Research &amp; Knowledge</span></span>
                    <i class="fa-solid fa-chevron-down text-sm transition-transform duration-200" :class="mobileExpanded['research'] ? 'rotate-180' : ''"></i>
                </button>
                <div x-show="mobileExpanded['research']" x-transition class="mt-1 ml-8 space-y-1" style="display:none;">
                    <p class="px-3 py-1 text-xs font-semibold uppercase tracking-wider text-purple-500">Research</p>
                    <a href="{{ route('research.public.index') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded-lg transition-colors"><i class="fa-solid fa-book-open fa-fw text-purple-400 w-4"></i><span>Research Publications</span></a>
                    <a href="{{ route('research.public.search') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded-lg transition-colors"><i class="fa-solid fa-magnifying-glass fa-fw text-purple-400 w-4"></i><span>Search Publications</span></a>
                    <a href="{{ route('research.public.featured') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded-lg transition-colors"><i class="fa-solid fa-star fa-fw text-purple-400 w-4"></i><span>Featured Research</span></a>
                    <p class="px-3 py-1 text-xs font-semibold uppercase tracking-wider text-indigo-500 mt-2">Knowledge</p>
                    <a href="{{ route('public.knowledge-base.index') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 rounded-lg transition-colors"><i class="fa-solid fa-database fa-fw text-indigo-400 w-4"></i><span>Knowledge Base</span></a>
                    <a href="{{ route('public.knowledge-base.search') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 rounded-lg transition-colors"><i class="fa-solid fa-magnifying-glass fa-fw text-indigo-400 w-4"></i><span>Search Knowledge Base</span></a>
                    <a href="{{ route('public.discussions.index') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 rounded-lg transition-colors"><i class="fa-solid fa-comments fa-fw text-indigo-400 w-4"></i><span>Browse Discussions</span></a>
                </div>
            </div>

            {{-- Mobile: Advocacy & Partners --}}
            <div>
                <button @click="toggleSection('advocacy')"
                        class="w-full flex items-center justify-between px-4 py-3 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl transition-colors">
                    <span class="flex items-center space-x-3"><i class="fa-solid fa-bullhorn fa-fw text-blue-600 w-5"></i><span>Advocacy &amp; Partners</span></span>
                    <i class="fa-solid fa-chevron-down text-sm transition-transform duration-200" :class="mobileExpanded['advocacy'] ? 'rotate-180' : ''"></i>
                </button>
                <div x-show="mobileExpanded['advocacy']" x-transition class="mt-1 ml-8 space-y-1" style="display:none;">
                    <p class="px-3 py-1 text-xs font-semibold uppercase tracking-wider text-rose-500">Advocacy</p>
                    <a href="{{ route('advocacy.public.index') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-900/20 rounded-lg transition-colors"><i class="fa-solid fa-flag fa-fw text-rose-400 w-4"></i><span>Advocacy Campaigns</span></a>
                    <a href="{{ route('advocacy.public.stories.index') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-900/20 rounded-lg transition-colors"><i class="fa-solid fa-heart-pulse fa-fw text-rose-400 w-4"></i><span>Health Stories</span></a>
                    <a href="{{ route('advocacy.public.polls.active') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-900/20 rounded-lg transition-colors"><i class="fa-solid fa-chart-bar fa-fw text-rose-400 w-4"></i><span>Polls &amp; Surveys</span></a>
                    <a href="{{ route('advocacy.public.stories.create') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-900/20 rounded-lg transition-colors"><i class="fa-solid fa-pen-to-square fa-fw text-rose-400 w-4"></i><span>Submit Your Story</span></a>
                    <p class="px-3 py-1 text-xs font-semibold uppercase tracking-wider text-orange-500 mt-2">Partners</p>
                    <a href="{{ route('partners.public.index') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 hover:bg-orange-50 dark:hover:bg-orange-900/20 rounded-lg transition-colors"><i class="fa-solid fa-building-user fa-fw text-orange-400 w-4"></i><span>Our Partners</span></a>
                    <a href="{{ route('partners.public.become-partner') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 hover:bg-orange-50 dark:hover:bg-orange-900/20 rounded-lg transition-colors"><i class="fa-solid fa-handshake-simple fa-fw text-orange-400 w-4"></i><span>Become a Partner</span></a>
                    @auth
                    <a href="{{ route('partners.forum.index') }}" @click="toggleMobile()" class="flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 hover:bg-orange-50 dark:hover:bg-orange-900/20 rounded-lg transition-colors"><i class="fa-solid fa-comments fa-fw text-orange-400 w-4"></i><span>Partners Forum</span></a>
                    @endauth
                </div>
            </div>

            {{-- Mobile: Auth Buttons --}}
            <div class="pt-4 border-t border-gray-200 dark:border-gray-700 space-y-2">
                @guest
                    <a href="{{ route('login') }}" @click="toggleMobile()"
                       class="flex items-center justify-center space-x-2 w-full px-4 py-3 text-base font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl transition-colors">
                        <i class="fa-solid fa-right-to-bracket fa-fw"></i>
                        <span>Login</span>
                    </a>
                    <a href="{{ route('register') }}" @click="toggleMobile()"
                       class="flex items-center justify-center space-x-2 w-full px-4 py-3 text-base font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-xl transition-colors shadow-sm">
                        <i class="fa-solid fa-user-plus fa-fw"></i>
                        <span>Register</span>
                    </a>
                @else
                    <a href="{{ route('dashboard') }}" @click="toggleMobile()"
                       class="flex items-center justify-center space-x-2 w-full px-4 py-3 text-base font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-xl transition-colors shadow-sm">
                        <i class="fa-solid fa-gauge-high fa-fw"></i>
                        <span>Go to Dashboard</span>
                    </a>
                @endguest
            </div>

        </div>
        {{-- END MOBILE MENU CONTAINER --}}
    </div>
    {{-- END MOBILE OVERLAY --}}

</header>
