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

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

    $navigation = $navigation ?? [
        ['label' => 'Tarife', 'href' => '#tarife'],
        ['label' => 'So funktioniert es', 'href' => '#funktion'],
        ['label' => 'Plattform-Familie', 'href' => '#familie'],
        ['label' => 'FAQ', 'href' => '#faq'],
        ['label' => 'Dokumentation', 'href' => '#'],
    ];
@endphp

<header class="bg-bg-elev border-b border-bg-rule">
    <div class="max-w-layout mx-auto px-8 py-[18px] grid items-center gap-6" style="grid-template-columns:auto 1fr auto;">

        <a href="{{ route('home') }}" class="flex items-baseline gap-2.5 cursor-pointer group"
            aria-label="presseportale Startseite">
            <span class="text-[24px] font-bold tracking-[-0.5px] leading-none text-hub">
                <x-web.brand-mark brand="presseportale" :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]">{{ $brandTagline }}</span>
        </a>

        <nav class="hidden lg:flex 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>

        <div class="flex items-center gap-2">
            <a href="{{ route('login') }}"
                class="inline-flex items-center gap-2 px-4 py-2.5 text-[13px] font-semibold text-ink rounded-[4px] hover:bg-bg transition-colors">
                Anmelden
            </a>
            <a href="{{ route('register') }}"
                class="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">
                    <path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
            </a>
        </div>
    </div>
</header>