@props([
    'date' => null,
    'siblingPortals' => [
        ['brand' => 'presseecho', 'url' => null],
        ['brand' => 'businessportal24', 'url' => null],
    ],
])

@php
    $displayDate = $date ?? now()->locale('de')->isoFormat('dddd, D. MMMM YYYY');

    $defaultUrls = [
        'presseecho' => config('domains.domain_presseecho_url'),
        'businessportal24' => config('domains.domain_businessportal_url'),
    ];
@endphp

<div class="bg-hub-grad text-ink-on-dark-2 border-b border-black/40">
    <div class="max-w-layout mx-auto px-8 flex items-stretch text-[11.5px] tracking-wide">

        <span class="flex items-center pr-4 py-2.5 whitespace-nowrap border-r border-white/10">
            {{ $displayDate }}
        </span>

        <span class="flex items-center gap-2.5 px-4 py-2.5 whitespace-nowrap text-white/70">
            <svg width="13" height="13" viewBox="0 0 16 16" fill="none" class="opacity-65">
                <rect x="2" y="2" width="5.5" height="5.5" stroke="currentColor" stroke-width="1.2" />
                <rect x="8.5" y="2" width="5.5" height="5.5" stroke="currentColor" stroke-width="1.2" />
                <rect x="2" y="8.5" width="12" height="5.5" stroke="currentColor" stroke-width="1.2" />
            </svg>
            <span>Publisher-Hub für</span>
            @foreach ($siblingPortals as $index => $portal)
                @php
                    $brandKey = $portal['brand'] ?? 'presseecho';
                    $portalUrl = $portal['url'] ?? ($defaultUrls[$brandKey] ?? '#');
                @endphp
                <a href="{{ $portalUrl }}" class="text-white font-semibold hover:underline">
                    <x-web.brand-mark :brand="$brandKey" variant="on-dark" :serif="false" />
                </a>
                @if (! $loop->last)
                    <span class="text-white/30">·</span>
                @endif
            @endforeach
        </span>

        <span class="flex-1"></span>

        <span class="flex items-center gap-4 py-2.5 whitespace-nowrap text-white/65">
            <a href="#" class="hover:text-white">Status</a>
            <a href="#" class="hover:text-white">Dokumentation</a>
            <a href="#" class="hover:text-white">Kontakt</a>
        </span>

    </div>
</div>