@php
    $lang = $lang ?? request('lang', 'bn');
    $langQuery = $lang === 'en' ? ['lang' => 'en'] : [];
    $label = fn ($bn, $en) => $lang === 'en' ? $en : $bn;
    $nav = [
        ['href' => route('home', $langQuery), 'bn' => 'প্রধান', 'en' => 'Home'],
        ['href' => route('home', $langQuery) . '#vision', 'bn' => 'দৃষ্টিভঙ্গি', 'en' => 'Vision'],
        ['href' => route('home', $langQuery) . '#leadership', 'bn' => 'নেতৃত্ব', 'en' => 'Leadership'],
        ['href' => route('programs', $langQuery), 'bn' => 'কর্মসূচি', 'en' => 'Programs'],
        ['href' => route('home', $langQuery) . '#achievements', 'bn' => 'অর্জন', 'en' => 'Achievements'],
        ['href' => route('blog', $langQuery), 'bn' => 'ব্লগ', 'en' => 'Blog'],
        ['href' => route('home', $langQuery) . '#donation', 'bn' => 'দান করুন', 'en' => 'Donate'],
    ];
@endphp
<nav class="sticky top-0 z-50 bg-white/95 backdrop-blur-md shadow-md">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center py-4">
            <a href="{{ route('home', $langQuery) }}" class="flex items-center gap-4" aria-label="{{ $label('নওজোয়ান প্রধান পাতা', 'NowJoan home') }}">
                <img src="{{ asset('assets/nowjoan-logo.png') }}" alt="{{ $label('নওজোয়ান', 'NowJoan') }}" class="site-logo site-logo-nav">
            </a>

            <div class="hidden lg:flex items-center gap-8">
                @foreach($nav as $item)
                    <a href="{{ $item['href'] }}" class="text-[var(--dark-text)] hover:text-[var(--primary-green)] smooth-transition">
                        {{ $label($item['bn'], $item['en']) }}
                    </a>
                @endforeach
                <a href="{{ request()->fullUrlWithQuery(['lang' => $lang === 'en' ? 'bn' : 'en']) }}" class="flex items-center gap-2 px-4 py-2 border-2 border-[var(--primary-green)] text-[var(--primary-green)] hover:bg-[var(--primary-green)]/5 rounded-full smooth-transition">
                    @include('partials.icon', ['name' => 'globe', 'class' => 'w-4 h-4'])
                    <span>{{ $lang === 'en' ? 'বাংলা' : 'English' }}</span>
                </a>
                <a href="{{ route('join', $langQuery) }}" class="px-6 py-2 bg-[var(--primary-green)] hover:bg-[var(--primary-green)]/90 text-white rounded-full smooth-transition">
                    {{ $label('যোগ দিন', 'Join Us') }}
                </a>
                <a href="{{ route('home', $langQuery) }}#donation" class="px-6 py-2 bg-[var(--primary-red)] hover:bg-[var(--primary-red)]/90 text-white rounded-full smooth-transition">
                    {{ $label('দান করুন', 'Donate Now') }}
                </a>
            </div>

            <div class="lg:hidden flex items-center gap-2">
                <a href="{{ route('join', $langQuery) }}" class="px-3 py-1.5 text-sm bg-[var(--primary-green)] text-white rounded-full smooth-transition">{{ $label('যোগদান', 'Join') }}</a>
                <a href="{{ route('home', $langQuery) }}#donation" class="px-3 py-1.5 text-sm bg-[var(--primary-red)] text-white rounded-full smooth-transition">{{ $label('দান করুন', 'Donate') }}</a>
                <button type="button" class="js-mobile-menu-button p-2 text-[var(--primary-green)]" aria-label="Toggle menu">
                    @include('partials.icon', ['name' => 'menu', 'class' => 'w-6 h-6'])
                </button>
            </div>
        </div>

        <div class="js-mobile-menu hidden lg:hidden py-4 border-t">
            <div class="space-y-4">
                @foreach($nav as $item)
                    <a href="{{ $item['href'] }}" class="block py-2 text-[var(--dark-text)] hover:text-[var(--primary-green)] smooth-transition">
                        {{ $label($item['bn'], $item['en']) }}
                    </a>
                @endforeach
                <a href="{{ request()->fullUrlWithQuery(['lang' => $lang === 'en' ? 'bn' : 'en']) }}" class="block py-2 text-[var(--primary-green)]">
                    {{ $lang === 'en' ? 'বাংলা' : 'English' }}
                </a>
            </div>
        </div>
    </div>
</nav>