@php
    $navLinks = [
        ['label' => 'Features', 'route' => 'features'],
        ['label' => 'How It Works', 'route' => 'how-it-works'],
        ['label' => 'Pricing', 'route' => 'pricing'],
        ['label' => 'Blog', 'route' => 'blog.index'],
        ['label' => 'About', 'route' => 'about'],
        ['label' => 'Contact', 'route' => 'contact'],
    ];
@endphp

<header x-data="{ open: false }" class="sticky top-0 z-50 border-b border-gray-200 bg-white/90 backdrop-blur dark:border-gray-800 dark:bg-gray-900/90">
    <nav class="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8">
        {{-- Logo --}}
        <a href="{{ url('/') }}" class="flex items-center gap-2">
            <x-application-logo class="h-8 w-8" />
            <span class="text-lg font-bold text-gray-900 dark:text-white">{{ config('app.name') }}</span>
        </a>

        {{-- Desktop nav --}}
        <div class="hidden items-center gap-1 lg:flex">
            @foreach ($navLinks as $link)
                @php $href = \Illuminate\Support\Facades\Route::has($link['route']) ? route($link['route']) : '#'; @endphp
                <a href="{{ $href }}" class="rounded-lg px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white">{{ $link['label'] }}</a>
            @endforeach
        </div>

        {{-- Right side --}}
        <div class="hidden items-center gap-2 lg:flex">
            <x-theme-toggle />
            @auth
                <a href="{{ route('dashboard') }}" class="rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Dashboard</a>
            @else
                <a href="{{ route('login') }}" class="rounded-lg px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800">Log in</a>
                <a href="{{ route('register') }}" class="rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Get started</a>
            @endauth
        </div>

        {{-- Mobile toggle --}}
        <div class="flex items-center gap-2 lg:hidden">
            <x-theme-toggle />
            <button @click="open = !open" class="rounded-lg p-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800" aria-label="Toggle menu">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
            </button>
        </div>
    </nav>

    {{-- Mobile menu --}}
    <div x-show="open" x-cloak class="border-t border-gray-200 bg-white px-4 py-3 dark:border-gray-800 dark:bg-gray-900 lg:hidden">
        @foreach ($navLinks as $link)
            @php $href = \Illuminate\Support\Facades\Route::has($link['route']) ? route($link['route']) : '#'; @endphp
            <a href="{{ $href }}" class="block rounded-lg px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800">{{ $link['label'] }}</a>
        @endforeach
        <div class="mt-3 flex flex-col gap-2 border-t border-gray-200 pt-3 dark:border-gray-800">
            @auth
                <a href="{{ route('dashboard') }}" class="rounded-lg bg-brand-600 px-4 py-2 text-center text-sm font-semibold text-white">Dashboard</a>
            @else
                <a href="{{ route('login') }}" class="rounded-lg border border-gray-300 px-4 py-2 text-center text-sm font-semibold text-gray-700 dark:border-gray-700 dark:text-gray-200">Log in</a>
                <a href="{{ route('register') }}" class="rounded-lg bg-brand-600 px-4 py-2 text-center text-sm font-semibold text-white">Get started</a>
            @endauth
        </div>
    </div>
</header>