@props(['active' => null])

<header class="sticky top-0 z-20 border-b border-white/5 bg-black/70 backdrop-blur">
    <div class="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
        <a href="{{ route('home') }}" class="flex items-center gap-2">
            <x-logo-mark class="h-8 w-auto" />
            <span class="font-semibold tracking-widest text-white">DARKNESS</span>
        </a>
        <nav class="hidden items-center gap-8 text-sm md:flex">
            <a
                href="{{ route('fonctionnalites') }}"
                class="transition hover:text-white {{ $active === 'fonctionnalites' ? 'text-white' : 'text-zinc-400' }}"
            >{{ __('site.nav.features') }}</a>
            <a href="{{ route('home') }}#securite" class="transition hover:text-white text-zinc-400">{{ __('site.nav.security') }}</a>
            <a href="{{ route('home') }}#telechargement" class="transition hover:text-white text-zinc-400">{{ __('site.nav.download') }}</a>
        </nav>
        <div class="flex items-center gap-4">
            <div class="flex items-center gap-1 text-xs font-medium text-zinc-500">
                <a href="{{ route('locale.switch', 'fr') }}" class="rounded px-1.5 py-1 transition hover:text-white {{ app()->getLocale() === 'fr' ? 'text-white' : '' }}">FR</a>
                <span aria-hidden="true">/</span>
                <a href="{{ route('locale.switch', 'en') }}" class="rounded px-1.5 py-1 transition hover:text-white {{ app()->getLocale() === 'en' ? 'text-white' : '' }}">EN</a>
            </div>
            <a href="{{ route('home') }}#telechargement" class="inline-flex items-center gap-2 rounded-full bg-violet-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-violet-500">
                {{ __('site.nav.waitlist') }}
            </a>
        </div>
    </div>
</header>