@props([
    'navigation' => null,
    'brand' => null,
])

@php
    $themeKey = config('app.theme', 'pressekonto');
    $brand =
        $brand ??
        config('domains.domains.' . $themeKey . '.brand', [
            'name' => 'presse',
            'accent' => 'konto',
            'tagline_short' => 'Publisher · Hub',
        ]);
    $brandTagline = $brand['tagline_short'] ?? 'Publisher · Hub';

    // Absolute Anker auf die Landing, damit die Navigation auch von den
    // statischen Unterseiten (Impressum, AGB, API …) aus funktioniert.
    $navigation = $navigation ?? [
        ['label' => 'Tarife', 'href' => route('home').'#tarife'],
        ['label' => 'So funktioniert es', 'href' => route('home').'#funktion'],
        ['label' => 'Plattform-Familie', 'href' => route('home').'#familie'],
        ['label' => 'FAQ', 'href' => route('home').'#faq'],
    ];
@endphp

<header class="bg-bg-elev border-b border-bg-rule" x-data="{ menuOpen: false }" @keydown.escape.window="menuOpen = false">
    <div class="max-w-layout mx-auto px-3 sm:px-6 lg:px-8 py-3 sm:py-[18px] flex items-center gap-2 sm:gap-4">

        <a href="{{ route('home') }}" class="flex items-baseline gap-2.5 cursor-pointer group min-w-0 flex-shrink-0"
            aria-label="pressekonto Startseite">
            <span class="text-[19px] sm:text-[24px] font-bold tracking-[-0.5px] leading-none text-hub">
                <x-web.brand-mark brand="pressekonto" :serif="false" />
            </span>
            <span class="hidden md:inline-block w-px h-[18px] bg-bg-rule"></span>
            <span class="eyebrow muted text-[9.5px] tracking-[0.22em] hidden md:inline">{{ $brandTagline }}</span>
        </a>

        <nav class="hidden lg:flex flex-1 items-center justify-center gap-1 text-[13.5px] font-medium">
            @foreach ($navigation as $item)
                <a href="{{ $item['href'] }}"
                    class="px-3.5 py-2 text-ink-2 hover:text-hub transition-colors">{{ $item['label'] }}</a>
            @endforeach
        </nav>

        <span class="flex-1 lg:hidden"></span>

        <div class="flex items-center gap-1.5 sm:gap-2 flex-shrink-0">
            @auth
                <a href="{{ \App\Support\LoginRedirect::homeFor(auth()->user()) }}"
                    class="inline-flex items-center gap-2 px-3 sm:px-[18px] py-2 sm:py-2.5 text-[12.5px] sm:text-[13px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] transition-colors">
                    <span class="sm:hidden">Konto</span>
                    <span class="hidden sm:inline">Zum pressekonto</span>
                    <svg width="11" height="11" viewBox="0 0 12 12" fill="none" class="hidden sm:inline" aria-hidden="true">
                        <path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>
                </a>
            @else
                {{-- Auf Mobile in das Burger-Panel verlagert, damit die Kopfzeile bei 320px nicht überläuft. --}}
                <a href="{{ route('login') }}"
                    class="hidden sm:inline-flex items-center gap-2 px-2.5 sm:px-4 py-2 sm:py-2.5 text-[12.5px] sm:text-[13px] font-semibold text-ink rounded-[4px] hover:bg-bg transition-colors">
                    Anmelden
                </a>
                <a href="{{ route('register') }}"
                    class="hidden sm:inline-flex items-center gap-2 px-[18px] py-2.5 text-[13px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] transition-colors">
                    Konto erstellen
                    <svg width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden="true">
                        <path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>
                </a>
                <a href="{{ route('register') }}"
                    class="sm:hidden inline-flex items-center justify-center px-3 py-2 text-[12.5px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] transition-colors">
                    Registrieren
                </a>
            @endauth

            <button type="button"
                class="lg:hidden inline-flex items-center justify-center w-10 h-10 text-ink rounded-[4px] hover:bg-bg transition-colors cursor-pointer"
                @click="menuOpen = !menuOpen"
                :aria-expanded="menuOpen.toString()"
                aria-controls="hub-mobile-nav"
                aria-label="Menü öffnen">
                <svg x-show="!menuOpen" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                    <path d="M3 5h14M3 10h14M3 15h14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
                </svg>
                <svg x-show="menuOpen" x-cloak width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                    <path d="M5 5l10 10M15 5L5 15" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
                </svg>
            </button>
        </div>
    </div>

    <div id="hub-mobile-nav"
         x-show="menuOpen"
         x-cloak
         x-transition.opacity.duration.150ms
         class="lg:hidden border-t border-bg-rule bg-bg-elev">
        <nav class="max-w-layout mx-auto px-4 sm:px-6 py-3 flex flex-col gap-0.5 text-[14px] font-medium" aria-label="Hauptnavigation">
            @foreach ($navigation as $item)
                <a href="{{ $item['href'] }}"
                   @click="menuOpen = false"
                   class="px-3 py-3 text-ink-2 hover:text-hub hover:bg-bg rounded-[4px] transition-colors">
                    {{ $item['label'] }}
                </a>
            @endforeach

            {{-- Auth-Einstiege für Mobile (auf sm+ liegen sie in der Kopfzeile). --}}
            <div class="mt-2 pt-2 border-t border-bg-rule flex flex-col gap-0.5">
                @auth
                    <a href="{{ \App\Support\LoginRedirect::homeFor(auth()->user()) }}"
                       @click="menuOpen = false"
                       class="px-3 py-3 font-semibold text-hub hover:bg-bg rounded-[4px] transition-colors">
                        Zum pressekonto
                    </a>
                @else
                    <a href="{{ route('login') }}"
                       @click="menuOpen = false"
                       class="px-3 py-3 text-ink-2 hover:text-hub hover:bg-bg rounded-[4px] transition-colors">
                        Anmelden
                    </a>
                    <a href="{{ route('register') }}"
                       @click="menuOpen = false"
                       class="px-3 py-3 font-semibold text-hub hover:bg-bg rounded-[4px] transition-colors">
                        Konto erstellen
                    </a>
                @endauth
            </div>
        </nav>
    </div>
</header>