<?php $attributes ??= new \Illuminate\View\ComponentAttributeBag;

$__newAttributes = [];
$__propNames = \Illuminate\View\ComponentAttributeBag::extractPropNames(([
    'organization' => null,
    'notifications' => collect([]),
]));

foreach ($attributes->all() as $__key => $__value) {
    if (in_array($__key, $__propNames)) {
        $$__key = $$__key ?? $__value;
    } else {
        $__newAttributes[$__key] = $__value;
    }
}

$attributes = new \Illuminate\View\ComponentAttributeBag($__newAttributes);

unset($__propNames);
unset($__newAttributes);

foreach (array_filter(([
    'organization' => null,
    'notifications' => collect([]),
]), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
    $$__key = $$__key ?? $__value;
}

$__defined_vars = get_defined_vars();

foreach ($attributes->all() as $__key => $__value) {
    if (array_key_exists($__key, $__defined_vars)) unset($$__key);
}

unset($__defined_vars, $__key, $__value); ?>

<?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) => [
        'content' => $n->content       ?? '',
        'label'   => $n->button_label  ?? 'Learn More',
        'url'     => $n->button_url    ?? '#',
    ])->toJson(JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);
?>

<header x-data="siteHeader()"
        data-notifications="<?php echo e($notificationsJson); ?>"
        class="w-full overflow-x-hidden"
        role="banner">

    
    <div class="bg-gray-900 text-white overflow-hidden" style="height:40px;" role="complementary" aria-label="Top bar">
        <div class="h-full flex items-stretch">

            
            <?php 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>

            
            <div class="flex-shrink-0 flex items-stretch" aria-hidden="true">
                
                <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>
                
                <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>

            
            <div class="flex-1 min-w-0 flex items-center 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-center gap-3 min-w-0 w-full">
                        <p class="text-sm text-white truncate flex-1"
                           x-text="truncateText(getCurrentNotification().content, 30)"></p>
                        <a :href="getCurrentNotification().url"
                           class="flex-shrink-0 px-2.5 py-0.5 bg-green-600 hover:bg-green-500 rounded text-xs font-semibold transition"
                           x-text="getCurrentNotification().label"
                           :aria-label="'View: ' + getCurrentNotification().content"></a>
                    </div>
                </template>
            </div>
            <?php else: ?>
            
            <div class="flex-1"></div>
            <?php endif; ?>

            
            <div class="flex-shrink-0 flex items-center gap-2 px-3">

                
                <?php if(!empty($socialLinks)): ?>
                <nav class="hidden md:flex items-center gap-1.5" aria-label="Social media links">
                    <?php $__currentLoopData = $socialLinks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $platform => $url): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php if($url): ?>
                        <a href="<?php echo e($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
                                  <?php if($platform==='whatsapp'): ?>  bg-[#25D366]/20 text-[#25D366] hover:bg-[#25D366]/40
                                  <?php elseif($platform==='facebook'): ?> bg-[#1877F2]/20 text-[#1877F2] hover:bg-[#1877F2]/40
                                  <?php elseif($platform==='twitter'||$platform==='x'): ?> bg-white/20 text-white hover:bg-white/30
                                  <?php elseif($platform==='tiktok'): ?> bg-[#ff0050]/20 text-[#ff0050] hover:bg-[#ff0050]/40
                                  <?php elseif($platform==='linkedin'): ?> bg-[#0A66C2]/20 text-[#0A66C2] hover:bg-[#0A66C2]/40
                                  <?php elseif($platform==='instagram'): ?> bg-[#E4405F]/20 text-[#E4405F] hover:bg-[#E4405F]/40
                                  <?php elseif($platform==='youtube'): ?> bg-[#FF0000]/20 text-[#FF0000] hover:bg-[#FF0000]/40
                                  <?php else: ?> bg-white/20 text-white hover:bg-white/30 <?php endif; ?>"
                           aria-label="<?php echo e(ucfirst($platform)); ?>">
                            <i class="fab fa-<?php echo e($platform==='x' ? 'x-twitter' : $platform); ?> text-xs" aria-hidden="true"></i>
                        </a>
                        <?php endif; ?>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </nav>
                <div class="hidden md:block w-px h-5 bg-white/30 mx-1" aria-hidden="true"></div>
                <?php endif; ?>

                
                <?php if(auth()->guard()->guest()): ?>
                <div class="flex items-center gap-2 flex-nowrap">
                    
                    <div x-data="{ open: false }" class="relative flex-shrink-0">
                        <button @click="open = !open"
                                @keydown.escape="open = false"
                                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>
                        <div x-show="open"
                             @click.outside="open = false"
                             @keydown.escape="open = false"
                             x-transition
                             class="absolute right-0 mt-1 w-56 bg-white rounded-lg shadow-xl border border-gray-200 py-1 z-[200]"
                             role="menu" aria-label="Get involved options">
                            <a href="<?php echo e(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="<?php echo e(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="<?php echo e(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="<?php echo e(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="<?php echo e(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="<?php echo e(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="<?php echo e(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="<?php echo e(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>

                    
                    <a href="<?php echo e(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>
                <?php else: ?>
                <a href="<?php echo e(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>
                <?php endif; ?>
            </div>
        </div>
    </div>

    
    <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">
            
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 py-3 md:py-0 md:h-28">

                
                <div class="flex-shrink-0 flex items-center justify-center md:justify-start md:h-full py-1">
                    <a href="<?php echo e(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">
                        <?php if(file_exists(public_path('assets/img/logo.png'))): ?>
                            <img src="<?php echo e(asset('assets/img/logo.png')); ?>"
                                 alt="<?php echo e($orgName); ?> logo"
                                 class="h-20 md:h-24 w-auto max-w-[220px] object-contain drop-shadow-sm">
                        <?php elseif(file_exists(public_path('storage/organization/logo.png'))): ?>
                            <img src="<?php echo e(asset('storage/organization/logo.png')); ?>"
                                 alt="<?php echo e($orgName); ?> logo"
                                 class="h-20 md:h-24 w-auto max-w-[220px] object-contain drop-shadow-sm">
                        <?php 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"><?php echo e(substr($orgName,0,1)); ?></span>
                            </div>
                        <?php endif; ?>
                    </a>
                </div>

                
                
                <div class="flex flex-row flex-wrap items-center justify-center md:justify-start gap-3 md:gap-4 md:h-full md:py-4">
                    
                    <a href="mailto:<?php echo e($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 <?php echo e($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"><?php echo e($orgEmail); ?></p>
                        </div>
                    </a>

                    
                    <?php if($orgHotline): ?>
                    <a href="tel:<?php echo e($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 <?php echo e($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"><?php echo e($orgHotline); ?></p>
                        </div>
                    </a>
                    <?php 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>
                    <?php endif; ?>
                </div>

                
                <div x-data="newsletterForm()"
                     class="flex-shrink-0 w-full md:w-72 lg:w-80 md:h-full md:flex md:items-center md:py-4">
                    <div class="w-full bg-gradient-to-br from-green-700 via-green-800 to-emerald-900 rounded-2xl p-4 shadow-lg border border-green-600/30">
                        
                        <div class="flex items-center gap-2 mb-3">
                            <div class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-paper-plane text-white text-xs" aria-hidden="true"></i>
                            </div>
                            <div>
                                <p class="text-white font-bold text-sm leading-tight">Stay Updated</p>
                                <p class="text-green-200 text-[10px] leading-tight">Get the latest news &amp; updates</p>
                            </div>
                        </div>

                        
                        <form @submit.prevent="submit()"
                              class="flex gap-2"
                              role="form"
                              aria-label="Newsletter subscription">
                            <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 py-2 bg-white/10 border border-white/30 rounded-lg text-white placeholder-green-200/70 text-sm focus:outline-none focus:ring-2 focus:ring-white/60 focus:border-white/60 transition">
                            <button type="submit"
                                    :disabled="loading"
                                    class="flex-shrink-0 px-3 py-2 bg-white text-green-800 font-bold rounded-lg text-sm hover:bg-green-50 transition disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-white shadow-sm"
                                    aria-label="Subscribe to newsletter">
                                <span x-show="!loading" class="flex items-center gap-1">
                                    <i class="fas fa-bell text-xs" aria-hidden="true"></i>
                                    <span class="hidden sm:inline">Subscribe</span>
                                </span>
                                <i x-show="loading" class="fas fa-spinner fa-spin text-xs" aria-hidden="true"></i>
                                <span x-show="loading" class="sr-only">Subscribing...</span>
                            </button>
                        </form>

                        
                        <div id="newsletter-status" role="status" aria-live="polite" class="mt-2 min-h-[18px]">
                            <div x-show="success" x-transition
                                 class="flex items-center gap-1.5 text-xs text-green-200">
                                <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-300"
                                 x-text="error"></div>
                        </div>
                    </div>
                </div>

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

    
    <nav class="relative bg-gray-900 text-white sticky top-0 z-40 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">

                
                <div class="hidden xl:flex items-center gap-0.5 flex-1 overflow-x-auto scrollbar-none">

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

                    <?php $__currentLoopData = [
                        ['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'],
                    ]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $menu): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="relative flex-shrink-0">
                        <button @click="toggleMegaMenu('<?php echo e($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 === '<?php echo e($menu['key']); ?>' }"
                                :aria-expanded="(megaMenuOpen === '<?php echo e($menu['key']); ?>').toString()"
                                aria-haspopup="true"
                                aria-label="<?php echo e($menu['label']); ?> menu">
                            <i class="fas <?php echo e($menu['icon']); ?> <?php echo e($menu['color']); ?> text-xs" aria-hidden="true"></i>
                            <span><?php echo e($menu['label']); ?></span>
                            <i class="fas fa-chevron-down text-[9px] transition-transform"
                               :class="{ 'rotate-180': megaMenuOpen === '<?php echo e($menu['key']); ?>' }"
                               aria-hidden="true"></i>
                        </button>
                    </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

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

                
                <div class="xl:hidden flex items-center justify-between w-full">
                    
                    <a href="<?php echo e(route('home')); ?>" class="flex items-center focus:outline-none focus:ring-2 focus:ring-green-500 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="<?php echo e($orgName); ?>" class="h-9 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="<?php echo e($orgName); ?>" class="h-9 w-auto object-contain">
                        <?php else: ?>
                            <span class="text-white font-bold text-lg"><?php echo e($orgName); ?></span>
                        <?php endif; ?>
                    </a>

                    
                    <div class="flex items-center gap-2">
                        <a href="mailto:<?php echo e($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>
                        <?php if(!empty($socialLinks)): ?>
                            <?php $__currentLoopData = array_slice($socialLinks, 0, 3, true); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $platform => $url): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?php if($url): ?>
                                <a href="<?php echo e($url); ?>" target="_blank" rel="noopener noreferrer"
                                   class="text-gray-300 hover:text-white transition text-sm"
                                   aria-label="<?php echo e(ucfirst($platform)); ?>">
                                    <i class="fab fa-<?php echo e($platform==='x' ? 'x-twitter' : $platform); ?>" aria-hidden="true"></i>
                                </a>
                                <?php endif; ?>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        <?php 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()">
                            
                            <i class="fas fa-bars text-xl" :class="{ 'hidden': $store.siteLayout.mobileMenuOpen }" aria-hidden="true"></i>
                            
                            <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>

        
        <?php echo $__env->make('components.site-navigation-menus', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
    </nav>

    
    <?php echo $__env->make('components.site-mobile-menu', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

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