@php($nav = \App\Support\Settings::get('nav'))
<header class="sticky top-0 z-50 border-b border-white/10 bg-ink/95 text-ice backdrop-blur">
    <div class="wrap flex h-16 items-center justify-between gap-6">
        <a href="{{ route('home') }}" aria-label="Webnedrix home"><x-logo /></a>

        <nav class="hidden items-center gap-8 font-display text-[0.95rem] lg:flex" aria-label="Main">
            @foreach ($nav as $item)
                <a href="{{ route($item['route']) }}" class="transition-colors hover:text-lilac {{ request()->routeIs(\Illuminate\Support\Str::before($item['route'], '.') . '*') ? 'text-lilac' : 'text-ice/80' }}">{{ $item['label'] }}</a>
            @endforeach
        </nav>

        <div class="flex items-center gap-3">
            <a href="{{ route('search') }}" class="grid h-10 w-10 place-items-center rounded border border-white/20 hover:border-white/50" aria-label="Search the site">
                <svg viewBox="0 0 20 20" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="9" cy="9" r="5.5"/><path d="m13.5 13.5 4 4"/></svg>
            </a>
            <a href="{{ route('start-project.show') }}" data-track="cta:start-project:header" class="btn btn-primary hidden !min-h-[2.5rem] !px-5 sm:inline-flex">Start a Project</a>
            <button type="button" class="grid h-10 w-10 place-items-center rounded border border-white/20 lg:hidden" data-menu-toggle aria-expanded="false" aria-controls="mobile-menu" aria-label="Menu">
                <svg viewBox="0 0 20 20" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M3 6h14M3 10h14M3 14h14"/></svg>
            </button>
        </div>
    </div>

    <div id="mobile-menu" data-menu hidden class="fixed inset-x-0 top-16 bottom-0 overflow-y-auto bg-ink px-5 pb-10 pt-6 lg:hidden">
        <nav class="flex flex-col font-display text-2xl" aria-label="Mobile">
            @foreach ($nav as $item)
                <a href="{{ route($item['route']) }}" class="border-b border-white/10 py-4">{{ $item['label'] }}</a>
            @endforeach
        </nav>
        <a href="{{ route('search') }}" class="mt-6 block border-b border-white/10 py-4 font-display text-2xl">Search</a>
        <a href="{{ route('start-project.show') }}" data-track="cta:start-project:mobile-menu" class="btn btn-primary mt-8 w-full">Start a Project</a>
    </div>
</header>