@props([
    'organization' => null,
    'notifications' => collect([]),
])

@php
    // Prepare organization data with fallbacks
    $orgName    = $organization?->name    ?? 'SSHIA';
    $orgEmail   = $organization?->email   ?? 'info@sshia.org';
    $orgHotline = $organization?->hotline ?? '';
    $socialLinks = is_array($organization?->social_media_links) ? $organization->social_media_links : [];

    // Prepare notifications JSON for Alpine.js.
    // Use JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP to safely
    // embed JSON inside an HTML attribute regardless of quote style or content.
    $notificationsJson = $notifications->map(fn($n) => [
        'id'      => $n->id            ?? 0,
        'content' => $n->content       ?? '',
        'label'   => $n->button_label  ?? 'Learn More',
        'url'     => $n->button_url    ?? route('topbar-notifications.show', ['topbarNotification' => $n->id]),
    ])->toJson(JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);
@endphp

<header x-data="siteHeader()"
        data-notifications="{{ $notificationsJson }}"
        class="w-full"
        role="banner">

    {{-- =================================================================
         TOPBAR — Live notifications | social links | auth buttons
    ================================================================= --}}
    <div class="bg-gray-900 text-white" style="height:40px;overflow:visible;position:relative;z-index:100;" role="complementary" aria-label="Top bar">
        <div class="h-full flex items-stretch" style="overflow:visible;">

            {{-- ── Live Notification label (full-height, flush-left) ── --}}
            @if($notifications->isNotEmpty())
            <div class="flex-shrink-0 flex items-center gap-1.5 px-3 bg-red-600 text-white text-xs font-bold uppercase tracking-wide select-none"
                 aria-hidden="true">
                <i class="fas fa-circle text-[6px] animate-pulse"></i>
                <span class="hidden sm:inline">Live Notification</span>
                <span class="sm:hidden">Live</span>
            </div>

            {{-- diagonal dividers: white then red --}}
            <div class="flex-shrink-0 flex items-stretch" aria-hidden="true">
                {{-- white thick diagonal --}}
                <svg width="18" height="40" viewBox="0 0 18 40" preserveAspectRatio="none" class="block">
                    <polygon points="0,0 18,0 18,40 6,40" fill="#dc2626"/>
                    <polygon points="6,0 18,0 18,40 12,40" fill="#ffffff"/>
                </svg>
                {{-- red thick diagonal --}}
                <svg width="14" height="40" viewBox="0 0 14 40" preserveAspectRatio="none" class="block">
                    <polygon points="0,0 14,0 14,40 6,40" fill="#111827"/>
                    <polygon points="0,0 8,0 8,40 0,40" fill="#dc2626"/>
                </svg>
            </div>

            {{-- Ticker text --}}
            <div class="flex-1 min-w-0 flex items-stretch px-3 gap-3"
                 @mouseenter="pauseNotificationRotation()"
                 @mouseleave="resumeNotificationRotation()"
                 role="region" aria-label="Live notifications" aria-live="polite">
                <template x-if="getCurrentNotification()">
                    <div class="flex items-stretch gap-3 min-w-0 w-full">
                        <p class="text-sm text-white truncate flex-1 self-center"
                           x-text="truncateText(getCurrentNotification().content, 30)"></p>
                        <a :href="getCurrentNotification().url"
                           class="flex-shrink-0 self-stretch flex items-center px-3 bg-green-600 hover:bg-green-500 border border-green-400 text-white text-xs font-semibold transition"
                           style="border-radius:0;"
                           x-text="getCurrentNotification().label"
                           :aria-label="'View: ' + getCurrentNotification().content"></a>
                    </div>
                </template>
            </div>
            @else
            {{-- No notifications: just a spacer --}}
            <div class="flex-1"></div>
            @endif

            {{-- ── Right side: social icons | divider | auth buttons ── --}}
            <div class="flex-shrink-0 flex items-center gap-2 px-3">

                {{-- Social icons --}}
                @if(!empty($socialLinks))
                <nav class="hidden md:flex items-center gap-1.5" aria-label="Social media links">
                    @foreach($socialLinks as $platform => $url)
                        @if($url)
                        <a href="{{ $url }}"
                           target="_blank" rel="noopener noreferrer"
                           class="w-7 h-7 rounded-full flex items-center justify-center transition hover:scale-110 focus:outline-none focus:ring-2 focus:ring-white
                                  @if($platform==='whatsapp')  bg-[#25D366]/20 text-[#25D366] hover:bg-[#25D366]/40
                                  @elseif($platform==='facebook') bg-[#1877F2]/20 text-[#1877F2] hover:bg-[#1877F2]/40
                                  @elseif($platform==='twitter'||$platform==='x') bg-white/20 text-white hover:bg-white/30
                                  @elseif($platform==='tiktok') bg-[#ff0050]/20 text-[#ff0050] hover:bg-[#ff0050]/40
                                  @elseif($platform==='linkedin') bg-[#0A66C2]/20 text-[#0A66C2] hover:bg-[#0A66C2]/40
                                  @elseif($platform==='instagram') bg-[#E4405F]/20 text-[#E4405F] hover:bg-[#E4405F]/40
                                  @elseif($platform==='youtube') bg-[#FF0000]/20 text-[#FF0000] hover:bg-[#FF0000]/40
                                  @else bg-white/20 text-white hover:bg-white/30 @endif"
                           aria-label="{{ ucfirst($platform) }}">
                            <i class="fab fa-{{ $platform==='x' ? 'x-twitter' : $platform }} text-xs" aria-hidden="true"></i>
                        </a>
                        @endif
                    @endforeach
                </nav>
                <div class="hidden md:block w-px h-5 bg-white/30 mx-1" aria-hidden="true"></div>
                @endif

                {{-- Auth buttons — each in its own column, no wrapping --}}
                @guest
                <div class="flex items-center gap-2 flex-nowrap">
                    {{-- Get Involved dropdown --}}
                    <div x-data="{
                            open: false,
                            btnRect: null,
                            updateRect() { this.btnRect = this.$refs.btn.getBoundingClientRect(); },
                            toggle() { this.updateRect(); this.open = !this.open; }
                         }"
                         class="relative flex-shrink-0"
                         @keydown.escape.window="open = false">
                        <button x-ref="btn"
                                @click="toggle()"
                                class="inline-flex items-center gap-1 px-2.5 py-1 bg-white text-red-700 rounded text-xs font-bold transition hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-white whitespace-nowrap"
                                :aria-expanded="open.toString()"
                                aria-haspopup="true"
                                aria-label="Get involved options">
                            <span>Get Involved</span>
                            <i class="fas fa-chevron-down text-[9px] transition-transform" :class="{'rotate-180': open}" aria-hidden="true"></i>
                        </button>
                        {{-- Fixed-position dropdown — escapes every stacking context --}}
                        <div x-show="open"
                             @click.outside="open = false"
                             x-transition
                             :style="btnRect ? 'position:fixed;top:' + (btnRect.bottom + 4) + 'px;right:' + (window.innerWidth - btnRect.right) + 'px;' : 'position:fixed;top:44px;right:8px;'"
                             class="w-56 bg-white rounded-lg shadow-2xl border border-gray-200 py-1"
                             style="z-index:2147483647;"
                             role="menu" aria-label="Get involved options">
                            <a href="{{ route('register.role.member') }}"          class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition" role="menuitem"><i class="fas fa-user-plus w-4 text-blue-500"></i> Become a Member</a>
                            <a href="{{ route('register.role.contributor') }}"     class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition" role="menuitem"><i class="fas fa-pen-nib w-4 text-green-500"></i> Become a Contributor</a>
                            <a href="{{ route('register.role.trainee') }}"         class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition" role="menuitem"><i class="fas fa-graduation-cap w-4 text-yellow-500"></i> Become a Trainee</a>
                            <a href="{{ route('register.role.trainer') }}"         class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition" role="menuitem"><i class="fas fa-chalkboard-teacher w-4 text-purple-500"></i> Become a Trainer</a>
                            <a href="{{ route('register.role.mentor') }}"          class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition" role="menuitem"><i class="fas fa-user-tie w-4 text-indigo-500"></i> Become a Mentor</a>
                            <a href="{{ route('register.role.mentee') }}"          class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition" role="menuitem"><i class="fas fa-user-graduate w-4 text-cyan-500"></i> Become a Mentee</a>
                            <a href="{{ route('register.role.partner') }}"         class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition" role="menuitem"><i class="fas fa-handshake w-4 text-teal-500"></i> Become a Partner</a>
                            <a href="{{ route('register.role.health-marketor') }}" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition" role="menuitem"><i class="fas fa-heartbeat w-4 text-pink-500"></i> Health Marketor</a>
                        </div>
                    </div>

                    {{-- Login button --}}
                    <a href="{{ route('login') }}"
                       class="flex-shrink-0 hidden sm:inline-flex items-center gap-1 px-2.5 py-1 border border-white/40 rounded text-xs font-medium text-white hover:bg-white/10 transition focus:outline-none focus:ring-2 focus:ring-white whitespace-nowrap"
                       aria-label="Login to your account">
                        <i class="fas fa-sign-in-alt" aria-hidden="true"></i>
                        <span>Login</span>
                    </a>
                </div>
                @else
                <a href="{{ route('dashboard') }}"
                   class="inline-flex items-center gap-1 px-2.5 py-1 bg-green-600 hover:bg-green-700 rounded text-xs font-medium transition focus:outline-none focus:ring-2 focus:ring-green-500 whitespace-nowrap"
                   aria-label="Go to dashboard">
                    <i class="fas fa-th-large" aria-hidden="true"></i>
                    <span>Dashboard</span>
                </a>
                @endguest
            </div>
        </div>
    </div>

    {{-- =================================================================
         MIDDLEBAR — Logo | Contact info | Newsletter subscription
         Desktop/tablet (md+): single horizontal row, items side-by-side.
         Mobile (<md): stacked vertically.
    ================================================================= --}}
    <div class="bg-white border-b border-gray-200">
        <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
            {{-- Horizontal from md (768 px) upward; stacked only on mobile --}}
            <div class="flex flex-col md:flex-row md:items-center gap-4 py-3 md:py-0 md:h-28 overflow-hidden">

                {{-- ── Column 1: Logo ── --}}
                <div class="flex-shrink-0 flex items-center justify-center md:justify-start md:self-center py-1">
                    <a href="{{ route('home') }}"
                       class="inline-flex items-center h-full focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 rounded-lg"
                       aria-label="Go to homepage">
                        @if(file_exists(public_path('assets/img/logo.png')))
                            <img src="{{ asset('assets/img/logo.png') }}"
                                 alt="{{ $orgName }} logo"
                                 class="h-20 md:h-24 w-auto max-w-[220px] object-contain drop-shadow-sm">
                        @elseif(file_exists(public_path('storage/organization/logo.png')))
                            <img src="{{ asset('storage/organization/logo.png') }}"
                                 alt="{{ $orgName }} logo"
                                 class="h-20 md:h-24 w-auto max-w-[220px] object-contain drop-shadow-sm">
                        @else
                            <div class="h-20 md:h-24 w-20 md:w-24 bg-gradient-to-br from-green-600 to-green-800 rounded-xl flex items-center justify-center shadow-md">
                                <span class="text-white font-extrabold text-3xl md:text-4xl" aria-hidden="true">{{ substr($orgName,0,1) }}</span>
                            </div>
                        @endif
                    </a>
                </div>

                {{-- ── Column 2: Contact info cards ── --}}
                {{-- flex-1 takes all space between logo and newsletter card.             --}}
                {{-- justify-center keeps the cards centred in that space on md+,        --}}
                {{-- producing equal gaps: logo ↔ cards ↔ newsletter.                   --}}
                <div class="flex flex-row flex-wrap items-center justify-center md:self-center gap-4 md:py-4 min-w-0 flex-1">
                    {{-- Email --}}
                    <a href="mailto:{{ $orgEmail }}"
                       class="group flex items-center gap-3 px-4 py-2.5 rounded-xl bg-gradient-to-r from-red-50 to-rose-50 border border-red-100 hover:border-red-300 hover:shadow-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 min-w-0"
                       aria-label="Email us at {{ $orgEmail }}">
                        <div class="flex-shrink-0 w-9 h-9 bg-gradient-to-br from-red-500 to-rose-600 rounded-full flex items-center justify-center shadow-sm group-hover:scale-110 transition-transform">
                            <i class="fas fa-envelope text-white text-sm" aria-hidden="true"></i>
                        </div>
                        <div class="min-w-0">
                            <p class="text-[10px] font-semibold text-red-400 uppercase tracking-wider leading-none mb-0.5">Email Us</p>
                            <p class="text-sm font-semibold text-gray-800 truncate">{{ $orgEmail }}</p>
                        </div>
                    </a>

                    {{-- Phone — always shown; displays hotline or a "not yet set" label --}}
                    @if($orgHotline)
                    <a href="tel:{{ $orgHotline }}"
                       class="group flex items-center gap-3 px-4 py-2.5 rounded-xl bg-gradient-to-r from-green-50 to-emerald-50 border border-green-100 hover:border-green-300 hover:shadow-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 min-w-0"
                       aria-label="Call us at {{ $orgHotline }}">
                        <div class="flex-shrink-0 w-9 h-9 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full flex items-center justify-center shadow-sm group-hover:scale-110 transition-transform">
                            <i class="fas fa-phone text-white text-sm" aria-hidden="true"></i>
                        </div>
                        <div class="min-w-0">
                            <p class="text-[10px] font-semibold text-green-500 uppercase tracking-wider leading-none mb-0.5">Call Us</p>
                            <p class="text-sm font-semibold text-gray-800 truncate">{{ $orgHotline }}</p>
                        </div>
                    </a>
                    @else
                    <div class="group flex items-center gap-3 px-4 py-2.5 rounded-xl bg-gradient-to-r from-green-50 to-emerald-50 border border-green-100 min-w-0 opacity-60"
                         title="Hotline not yet configured">
                        <div class="flex-shrink-0 w-9 h-9 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full flex items-center justify-center shadow-sm">
                            <i class="fas fa-phone text-white text-sm" aria-hidden="true"></i>
                        </div>
                        <div class="min-w-0">
                            <p class="text-[10px] font-semibold text-green-500 uppercase tracking-wider leading-none mb-0.5">Call Us</p>
                            <p class="text-sm font-semibold text-gray-500 truncate">Coming soon</p>
                        </div>
                    </div>
                    @endif
                </div>

                {{-- ── Column 3: Newsletter subscription ── --}}
                {{-- Fixed width on md+; full-width on mobile. flex-shrink-0 keeps it    --}}
                {{-- from collapsing while the contact cards take the remaining space.   --}}
                <div x-data="newsletterForm()"
                     class="w-full md:w-72 lg:w-80 flex-shrink-0 flex items-center md:self-center">
                    <div class="w-full flex flex-col justify-center
                                bg-white border border-gray-200 rounded-xl
                                px-4 py-3 shadow-sm">

                        {{-- Form row: icon cap + email input + subscribe button --}}
                        <form @submit.prevent="submit()"
                              class="flex items-stretch h-10"
                              role="form"
                              aria-label="Newsletter subscription">

                            {{-- Icon cap (left) --}}
                            <div class="flex-shrink-0 flex items-center justify-center
                                        w-10 bg-gray-100 border border-r-0 border-gray-300
                                        rounded-l-lg"
                                 aria-hidden="true">
                                <i class="fas fa-paper-plane text-red-600 text-sm"></i>
                            </div>

                            {{-- Email input --}}
                            <label for="newsletter-email" class="sr-only">Email address for newsletter</label>
                            <input type="email"
                                   id="newsletter-email"
                                   x-model="email"
                                   placeholder="Your email address"
                                   required
                                   aria-required="true"
                                   aria-describedby="newsletter-status"
                                   class="flex-1 min-w-0 px-3
                                          bg-white border-y border-gray-300
                                          text-gray-800 placeholder-gray-400 text-sm
                                          focus:outline-none focus:ring-0 focus:border-red-400
                                          transition rounded-none">

                            {{-- Subscribe button (right cap) --}}
                            <button type="submit"
                                    :disabled="loading"
                                    class="flex-shrink-0 flex items-center gap-1.5
                                           px-3 lg:px-4
                                           bg-red-600 hover:bg-red-700
                                           text-white font-semibold text-sm
                                           border border-l-0 border-red-600 hover:border-red-700
                                           rounded-r-lg
                                           transition disabled:opacity-50 disabled:cursor-not-allowed
                                           focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-1
                                           whitespace-nowrap"
                                    aria-label="Subscribe to newsletter">
                                <span x-show="!loading" class="flex items-center gap-1.5">
                                    <i class="fas fa-bell text-xs" aria-hidden="true"></i>
                                    <span>Subscribe</span>
                                </span>
                                <span x-show="loading" class="flex items-center gap-1.5">
                                    <i class="fas fa-spinner fa-spin text-xs" aria-hidden="true"></i>
                                    <span class="sr-only">Subscribing...</span>
                                </span>
                            </button>
                        </form>

                        {{-- Status messages --}}
                        <div id="newsletter-status" role="status" aria-live="polite" class="mt-1.5 min-h-[16px]">
                            <div x-show="success" x-transition
                                 class="flex items-center gap-1.5 text-xs text-green-600">
                                <i class="fas fa-check-circle" aria-hidden="true"></i>
                                <span>Subscribed! Check your email to confirm.</span>
                            </div>
                            <div x-show="error" x-transition
                                 class="flex items-center gap-1.5 text-xs text-red-500"
                                 x-text="error"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    {{-- =================================================================
         NAVBAR — Non-sticky navigation bar with mega-menus
    ================================================================= --}}
    <nav class="relative bg-gray-900 text-white z-[200] border-b border-gray-800 shadow-lg"
         data-navbar
         role="navigation"
         aria-label="Main navigation">
        <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-14">

                {{-- Desktop nav items --}}
                <div class="hidden xl:flex items-center gap-0.5 flex-1 overflow-x-clip scrollbar-none">

                    {{-- Home --}}
                    <a href="{{ route('home') }}"
                       class="flex items-center gap-1 px-3 py-2 rounded-lg hover:bg-gray-800 transition text-sm font-medium whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-gray-900">
                        <i class="fas fa-home text-green-400 text-xs" aria-hidden="true"></i>
                        <span>Home</span>
                    </a>

                    @foreach([
                        ['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'],
                    ] as $menu)
                    <div class="relative flex-shrink-0">
                        <button @click="toggleMegaMenu('{{ $menu['key'] }}')"
                                class="flex items-center gap-1 px-3 py-2 rounded-lg hover:bg-gray-800 transition text-sm font-medium whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-gray-900"
                                :class="{ 'bg-gray-800 text-green-400': megaMenuOpen === '{{ $menu['key'] }}' }"
                                :aria-expanded="(megaMenuOpen === '{{ $menu['key'] }}').toString()"
                                aria-haspopup="true"
                                aria-label="{{ $menu['label'] }} menu">
                            <i class="fas {{ $menu['icon'] }} {{ $menu['color'] }} text-xs" aria-hidden="true"></i>
                            <span>{{ $menu['label'] }}</span>
                            <i class="fas fa-chevron-down text-[9px] transition-transform"
                               :class="{ 'rotate-180': megaMenuOpen === '{{ $menu['key'] }}' }"
                               aria-hidden="true"></i>
                        </button>
                    </div>
                    @endforeach

                    {{-- SSHIA Academy --}}
                    <a href="{{ route('self-paced.public.index') }}"
                       class="flex-shrink-0 flex items-center gap-1 px-3 py-2 rounded-lg bg-yellow-500/10 hover:bg-yellow-500/20 text-yellow-400 transition text-sm font-medium whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 focus:ring-offset-gray-900"
                       aria-label="SSHIA Academy">
                        <i class="fas fa-graduation-cap text-xs" aria-hidden="true"></i>
                        <span>Academy</span>
                    </a>
                </div>

                {{-- Mobile: show only logo + hamburger --}}
                <div class="xl:hidden flex items-center justify-between w-full">
                    {{-- Logo (mobile) --}}
                    <a href="{{ route('home') }}" class="flex items-center focus:outline-none focus:ring-2 focus:ring-green-500 rounded" aria-label="Home">
                        @if(file_exists(public_path('assets/img/logo.png')))
                            <img src="{{ asset('assets/img/logo.png') }}" alt="{{ $orgName }}" class="h-9 w-auto object-contain">
                        @elseif(file_exists(public_path('storage/organization/logo.png')))
                            <img src="{{ asset('storage/organization/logo.png') }}" alt="{{ $orgName }}" class="h-9 w-auto object-contain">
                        @else
                            <span class="text-white font-bold text-lg">{{ $orgName }}</span>
                        @endif
                    </a>

                    {{-- Mobile right: email icon + social + hamburger --}}
                    <div class="flex items-center gap-2">
                        <a href="mailto:{{ $orgEmail }}" class="text-gray-300 hover:text-white transition" aria-label="Email us">
                            <i class="fas fa-envelope text-sm" aria-hidden="true"></i>
                        </a>
                        @if(!empty($socialLinks))
                            @foreach(array_slice($socialLinks, 0, 3, true) as $platform => $url)
                                @if($url)
                                <a href="{{ $url }}" target="_blank" rel="noopener noreferrer"
                                   class="text-gray-300 hover:text-white transition text-sm"
                                   aria-label="{{ ucfirst($platform) }}">
                                    <i class="fab fa-{{ $platform==='x' ? 'x-twitter' : $platform }}" aria-hidden="true"></i>
                                </a>
                                @endif
                            @endforeach
                        @endif
                        <button @click="$store.siteLayout.toggleMobileMenu()"
                                class="p-2 rounded-lg hover:bg-gray-800 transition focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-gray-900"
                                aria-label="Toggle mobile menu"
                                :aria-expanded="$store.siteLayout.mobileMenuOpen.toString()">
                            {{-- bars: visible by default; hidden once Alpine opens the menu --}}
                            <i class="fas fa-bars text-xl" :class="{ 'hidden': $store.siteLayout.mobileMenuOpen }" aria-hidden="true"></i>
                            {{-- times: hidden by default; shown once Alpine opens the menu --}}
                            <i class="fas fa-times text-xl hidden" :class="{ 'hidden': !$store.siteLayout.mobileMenuOpen, 'block': $store.siteLayout.mobileMenuOpen }" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>

            </div>
        </div>

    </nav>

    {{-- Mega Menu Panels — rendered outside <nav> so position:fixed top is
         computed from the navbar bottom edge without the panels themselves
         inflating the navbar height. z-[201] sits above the navbar (z-[200]). --}}
    @include('components.site-navigation-menus')

    {{-- Mobile Menu Overlay --}}
    @include('components.site-mobile-menu')

</header>
