@php
    $navItems = $siteNavigation ?? config('nh_trans.nav');
@endphp

<header data-site-header data-scrolled="false" class="site-header sticky top-0 z-50 border-b border-brand-border bg-brand-white/95 backdrop-blur">
    <div class="site-header__inner mx-auto flex max-w-6xl items-center justify-between px-6 py-4 transition-[padding]">
        <a href="{{ route('home') }}" class="flex shrink-0 items-center gap-3">
            <x-logo class="h-10 w-auto sm:h-11" />
        </a>

        <nav aria-label="Navigation principale" class="hidden items-center gap-8 lg:flex">
            @foreach ($navItems as $item)
                @php $routeName = $item['route_name'] ?? $item['route'] ?? null; $isActive = $routeName && request()->routeIs($routeName); @endphp
                <a
                    href="{{ $routeName ? route($routeName) : ($item['url'] ?? '#') }}"
                    @if ($isActive) aria-current="page" @endif
                    class="relative text-sm font-medium transition-colors {{ $isActive ? 'text-brand-primary' : 'text-brand-ink hover:text-brand-primary' }}"
                >
                    {{ $item['label'] }}
                    @if ($isActive)
                        <span class="absolute -bottom-2 left-0 right-0 h-0.5 rounded-full bg-brand-primary"></span>
                    @endif
                </a>
            @endforeach
        </nav>

        <div class="hidden shrink-0 lg:block">
            <a href="{{ route('contact') }}" class="btn btn-primary">Nous contacter</a>
        </div>

        <button
            type="button"
            data-mobile-menu-toggle
            aria-expanded="false"
            aria-controls="mobile-menu-panel"
            class="flex h-10 w-10 items-center justify-center rounded-lg border border-brand-border text-brand-ink lg:hidden"
        >
            <span class="sr-only">Ouvrir le menu</span>
            <x-icon name="menu" class="h-5 w-5" />
        </button>
    </div>

    <div id="mobile-menu-panel" data-mobile-menu-panel data-open="false" class="mobile-menu border-t border-brand-border lg:hidden">
        <nav aria-label="Navigation mobile" class="flex flex-col gap-1 px-6 py-4">
            @foreach ($navItems as $item)
                @php $routeName = $item['route_name'] ?? $item['route'] ?? null; $isActive = $routeName && request()->routeIs($routeName); @endphp
                <a
                    href="{{ $routeName ? route($routeName) : ($item['url'] ?? '#') }}"
                    @if ($isActive) aria-current="page" @endif
                    class="rounded-lg px-3 py-2.5 text-sm font-medium {{ $isActive ? 'bg-brand-primary/10 text-brand-primary' : 'text-brand-ink hover:bg-brand-surface' }}"
                >
                    {{ $item['label'] }}
                </a>
            @endforeach

            <a href="{{ route('contact') }}" class="btn btn-primary mt-3 w-full">Nous contacter</a>
        </nav>
    </div>
</header>
