@php
    $navLinks = [
        ['label' => __('Home'), 'url' => route('home'), 'active' => request()->routeIs('home')],
        ['label' => __('About AMM'), 'url' => route('about'), 'active' => request()->routeIs('about')],
        ['label' => __('Our Philosophy'), 'url' => route('our-philosophy'), 'active' => request()->routeIs('our-philosophy')],
        ['label' => __('Our Model'), 'url' => route('our-model'), 'active' => request()->routeIs('our-model')],
        ['label' => __('Activities'), 'url' => route('activities'), 'active' => request()->routeIs('activities')],
        ['label' => __('Resources'), 'url' => route('resources'), 'active' => request()->routeIs('resources')],
        ['label' => __('Articles'), 'url' => route('blog'), 'active' => request()->routeIs('blog', 'blog.show')],
        ['label' => __('Contact'), 'url' => route('contact'), 'active' => request()->routeIs('contact')],
    ];
@endphp

<header class="sticky top-0 z-50 bg-background dark:bg-background shadow-sm" x-data="{ mobileOpen: false }">
    <nav
        class="flex justify-between items-center gap-4 2xl:gap-6 h-20 px-margin-mobile md:px-margin-desktop max-w-[1440px] mx-auto transition-all duration-200 ease-in-out">
        <a href="{{ route('home') }}" wire:navigate.hover class="flex items-center shrink-0">
            <img src="{{ site_logo_url() }}" alt="Adarsh Masjid Mission"
                class="h-14 2xl:h-18 w-auto object-contain">
        </a>
        <div class="hidden xl:flex items-center gap-2.5 2xl:gap-5">
            @foreach ($navLinks as $link)
                <a href="{{ $link['url'] }}" wire:navigate.hover
                    class="font-body-md text-sm 2xl:text-body-md whitespace-nowrap transition-colors {{ $link['active'] ? 'text-primary font-bold border-b-2 border-primary pb-1' : 'text-on-surface-variant hover:text-primary' }}">{{ $link['label'] }}</a>
            @endforeach
        </div>
        <div class="flex items-center gap-2 shrink-0">
            <button type="button" @click="$dispatch('open-get-involved')"
                class="hidden sm:block bg-secondary-container text-on-secondary-container px-6 py-2 rounded-full font-label-md hover:opacity-90 transition-opacity whitespace-nowrap">{{ __('Get Involved') }}</button>
            <div class="hidden sm:flex items-center ps-2 ms-1 border-s border-outline-variant">
                <x-language-switcher />
            </div>
            <button type="button"
                class="xl:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg text-primary hover:bg-primary/10 transition-colors"
                @click="mobileOpen = !mobileOpen" :aria-expanded="mobileOpen" aria-label="Toggle navigation menu">
                <span class="material-symbols-outlined" x-show="!mobileOpen">menu</span>
                <span class="material-symbols-outlined" x-show="mobileOpen" x-cloak>close</span>
            </button>
        </div>
    </nav>
    <!-- Mobile menu -->
    <div class="xl:hidden border-t border-outline-variant bg-background" x-show="mobileOpen" x-cloak
        x-transition.origin.top @click.outside="mobileOpen = false">
        <div class="flex flex-col px-margin-mobile py-4 space-y-1">
            @foreach ($navLinks as $link)
                <a href="{{ $link['url'] }}" wire:navigate.hover @click="mobileOpen = false"
                    class="py-2 font-body-md text-body-md transition-colors {{ $link['active'] ? 'text-primary font-bold' : 'text-on-surface-variant hover:text-primary' }}">{{ $link['label'] }}</a>
            @endforeach
            <button type="button" @click="mobileOpen = false; $dispatch('open-get-involved')"
                class="sm:hidden mt-3 w-full text-center bg-secondary-container text-on-secondary-container px-6 py-3 rounded-full font-label-md hover:opacity-90 transition-opacity">{{ __('Get Involved') }}</button>
            <div class="mt-3 pt-3 border-t border-outline-variant flex justify-end">
                <x-language-switcher />
            </div>
        </div>
    </div>
</header>