@props(['navLinks', 'reglage', 'locale'])

<header>
    <div id="scroll-progress" class="fixed left-0 right-0 top-0 z-[60] h-[2px]" style="background: linear-gradient(90deg, transparent, #C9963A 30%, #F5E5B8 60%, transparent);"></div>

    {{-- Sélecteur de langue (desktop) : hors de la pill du nav, en haut à droite de la page --}}
    <div class="hidden lg:flex fixed right-4 top-7 z-[70] items-center gap-1 rounded-full border border-gold/20 bg-navy-deep/60 px-3 py-1.5 text-xs uppercase tracking-widest text-cream/60 backdrop-blur">
        <a href="{{ route('home', ['locale' => 'fr']) }}" @if($locale === 'fr') aria-current="true" @endif class="{{ $locale === 'fr' ? 'text-gold' : 'hover:text-gold' }} px-1">FR</a>
        <span class="text-cream/30">/</span>
        <a href="{{ route('home', ['locale' => 'en']) }}" @if($locale === 'en') aria-current="true" @endif class="{{ $locale === 'en' ? 'text-gold' : 'hover:text-gold' }} px-1">EN</a>
        <span class="text-cream/30">/</span>
        <a href="{{ route('home', ['locale' => 'de']) }}" @if($locale === 'de') aria-current="true" @endif class="{{ $locale === 'de' ? 'text-gold' : 'hover:text-gold' }} px-1">DE</a>
    </div>

    <nav id="navbar" class="fixed left-0 right-0 top-0 z-50 px-4 pt-4" style="transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);">
        <div id="nav-inner" class="mx-auto flex max-w-7xl items-center justify-between rounded-full px-5 py-3 border border-transparent bg-transparent transition-all duration-500">
            <a href="{{ route('home', ['locale' => $locale]) }}#top" class="group -ml-8 flex items-center">
                <img src="{{ asset('assets/logo.png') }}" alt="Obvious Way" class="h-22 w-auto -my-5 object-contain transition-transform duration-500 group-hover:rotate-[-8deg]" width="88" height="88" />
                <span class="-ml-8 font-serif text-lg tracking-tight text-cream">
                    Obvious <em class="text-gradient-gold not-italic">Way</em>
                </span>
            </a>

            <ul class="hidden items-center gap-1 lg:flex">
                @foreach ($navLinks as $link)
                    <li>
                        <a href="{{ $link->nav_ancre }}" class="relative rounded-full px-3 py-2 text-xs uppercase tracking-[0.15em] text-cream/70 transition-colors hover:text-gold">
                            <span class="animated-underline">{{ $link->trad('label') }}</span>
                        </a>
                    </li>
                @endforeach
            </ul>

            <div class="flex items-center gap-2">
                <a href="https://calendly.com/catherine-obvious-way/30min" target="_blank" rel="noopener" class="hidden shimmer btn-primary-gold lg:inline-flex">{{ lpick('Appel découverte', 'Discovery call', 'Kennenlerngespräch') }}</a>
                <button id="menu-btn" aria-label="Menu" class="grid h-10 w-10 place-items-center rounded-full border border-gold/30 text-gold lg:hidden">
                    <svg id="menu-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
                    <svg id="close-icon" class="hidden" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
            </div>
        </div>

        <div id="mobile-menu" class="mobile-menu glass-strong mx-auto mt-3 max-w-7xl rounded-3xl p-4 lg:hidden">
            <ul class="flex flex-col gap-1">
                @foreach ($navLinks as $link)
                    <li><a href="{{ $link->nav_ancre }}" class="block rounded-2xl px-4 py-3 text-sm text-cream/80 transition-colors hover:bg-gold/10 hover:text-gold">{{ $link->trad('label') }}</a></li>
                @endforeach
                <li class="flex gap-3 px-4 py-2 text-sm uppercase tracking-widest text-cream/60">
                    <a href="{{ route('home', ['locale' => 'fr']) }}" @if($locale === 'fr') aria-current="true" @endif class="{{ $locale === 'fr' ? 'text-gold' : '' }}">FR</a>
                    <a href="{{ route('home', ['locale' => 'en']) }}" @if($locale === 'en') aria-current="true" @endif class="{{ $locale === 'en' ? 'text-gold' : '' }}">EN</a>
                    <a href="{{ route('home', ['locale' => 'de']) }}" @if($locale === 'de') aria-current="true" @endif class="{{ $locale === 'de' ? 'text-gold' : '' }}">DE</a>
                </li>
                <li class="mt-2"><a href="https://calendly.com/catherine-obvious-way/30min" target="_blank" rel="noopener" class="btn-primary-gold w-full">{{ lpick('Appel découverte', 'Discovery call', 'Kennenlerngespräch') }}</a></li>
            </ul>
        </div>
    </nav>
</header>