@inject('navigation', 'App\Domain\Content\Queries\NavigationQuery')
@inject('general', 'App\Domain\Site\Settings\GeneralSettings')
@inject('cta', 'App\Domain\Site\Settings\CtaSettings')
@inject('theme', 'App\Domain\Site\Theme\ThemeStylesheet')
@php
    $links = $navigation->menu(\App\Models\NavigationMenu::PRIMARY);
    $current = url()->current();
@endphp
<header class="sticky top-0 z-40 border-b border-line/70 bg-header/95 backdrop-blur-sm supports-[backdrop-filter]:bg-header/85">
    <div class="container-site flex min-h-16 items-center justify-between gap-4 py-3">
        <a href="{{ route('home') }}" class="flex min-h-11 items-center gap-3 text-ink no-underline hover:text-heading">
            @if ($general->logo_path)
                <img src="{{ Storage::disk('public')->url($general->logo_path) }}" alt="" class="h-9 w-auto" width="36" height="36">
            @endif
            <span class="font-heading text-lg font-semibold leading-tight">{{ $general->owner_name }}</span>
        </a>

        <nav aria-label="{{ __('portfolio.a11y.primary_navigation') }}" class="hidden lg:block">
            <ul class="flex items-center gap-1">
                @foreach ($links as $link)
                    <li>
                        <a href="{{ $link->url }}"
                           @if ($link->isActive($current)) aria-current="page" @endif
                           @if ($link->newTab) target="_blank" rel="noopener" @endif
                           @if ($link->analyticsKey) data-track="cta_click" data-track-props='{"cta":"{{ $link->analyticsKey }}","location":"header"}' @endif
                           @class([
                               'inline-flex min-h-11 items-center rounded-md px-3 text-[0.9375rem] font-medium no-underline transition-colors',
                               'text-ink underline decoration-focus decoration-2 underline-offset-8' => $link->isActive($current),
                               'text-muted hover:text-ink' => ! $link->isActive($current),
                           ])>{{ $link->label }}</a>
                    </li>
                @endforeach
            </ul>
        </nav>

        <div class="flex items-center gap-2">
            @if ($theme->visitorToggle())
                {{-- Hidden until the theme-toggle module runs: it needs JS (ADR-047). aria-pressed = dark mode on. --}}
                <button type="button" hidden data-module="theme-toggle" aria-pressed="false"
                        class="flex size-11 items-center justify-center rounded-md text-ink hover:bg-surface">
                    <span class="sr-only">{{ __('portfolio.a11y.dark_mode') }}</span>
                    <x-icon name="heroicon-o-moon" class="size-5" data-icon="moon" />
                    <x-icon name="heroicon-o-sun" class="hidden size-5" data-icon="sun" />
                </button>
            @endif
            {{-- PRD §6.2/§6.3: Download CV is a button, on every breakpoint, separate from the nav links. --}}
            <x-cv-button location="header" variant="secondary" class="!px-3 sm:!px-4" />
            <div class="hidden lg:block">
                <x-button :href="route('contact')" variant="primary" track="cta_click" :track-props="['cta' => 'header_connect', 'location' => 'header']">
                    {{ $cta->connect_label }}
                </x-button>
            </div>

            {{-- Mobile menu: a native disclosure that works without JS; the mobile-nav module adds Escape-to-close. --}}
            <details data-module="mobile-nav" class="group relative lg:hidden">
                <summary class="flex size-11 cursor-pointer list-none items-center justify-center rounded-md border border-ink text-ink [&::-webkit-details-marker]:hidden"
                         aria-label="{{ __('portfolio.a11y.open_menu') }}">
                    <x-icon name="heroicon-o-bars-3" class="size-6 group-open:hidden" />
                    <x-icon name="heroicon-o-x-mark" class="hidden size-6 group-open:block" />
                </summary>
                <nav aria-label="{{ __('portfolio.a11y.primary_navigation') }}"
                     class="absolute right-0 top-14 w-[min(20rem,calc(100vw-2rem))] rounded-[var(--radius-card)] border border-transparent bg-surface p-2 shadow-[var(--shadow-card-hover)]">
                    <ul>
                        @foreach ($links as $link)
                            <li>
                                <a href="{{ $link->url }}" @if ($link->isActive($current)) aria-current="page" @endif
                                   @if ($link->newTab) target="_blank" rel="noopener" @endif
                                   class="flex min-h-11 items-center rounded-md px-3 font-medium text-ink no-underline hover:bg-page aria-[current=page]:text-link">{{ $link->label }}</a>
                            </li>
                        @endforeach
                    </ul>
                </nav>
            </details>
        </div>
    </div>
</header>