@props([
    'leadRelease' => null,
    'sideReleases' => [],
    'advertisement' => null,
])

@php
    \Carbon\Carbon::setLocale('de');

    $leadCategory = $leadRelease?->category?->translations?->firstWhere('locale', 'de')
        ?? $leadRelease?->category?->translations?->first();
    $leadCategoryName = $leadCategory?->name ?? 'KI & Innovation';
    $leadImage = $leadRelease?->images?->first();
    $leadImageUrl = $leadImage?->variantUrl('card') ?? $leadImage?->url();
    $leadTitle = $leadRelease?->title ?? 'Die Zukunft der KI im deutschen Mittelstand';
    $leadTeaser = $leadRelease
        ? (string) \Illuminate\Support\Str::of(strip_tags((string) $leadRelease->text))->squish()->limit(200)
        : 'Im exklusiven Interview spricht Dr. Maria Schmidt, Leiterin des KI-Instituts München, über Chancen und Herausforderungen der KI für mittelständische Unternehmen.';
    $leadCompany = $leadRelease?->company?->name ?? 'KI-Institut München';
    $leadHref = $leadRelease ? route('release.detail', ['slug' => $leadRelease->slug]) : '#';
    $leadReadTime = max(1, (int) round(str_word_count(strip_tags((string) ($leadRelease?->text ?? ''))) / 200)) ?: 5;
    $leadPublishedAt = $leadRelease?->published_at;

    $sideReleases = collect($sideReleases)->take(4)->values();
@endphp

<section class="max-w-layout mx-auto px-8 pt-8">
    <header class="flex items-baseline justify-between mb-4 flex-wrap gap-2">
        <h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px] text-ink">
            Im Fokus
            <span class="text-[16px] text-ink-3 font-normal ml-2">· 🇩🇪 Deutschland</span>
        </h2>
        <div class="eyebrow muted">{{ ucfirst(now()->isoFormat('dddd, HH:mm')) }} Uhr · Auswahl der Redaktion</div>
    </header>
    <hr class="rule-strong mb-6">

    <div class="grid gap-9 lg:grid-cols-[1.7fr_1fr] grid-cols-1">
        {{-- HERO --}}
        <article>
            <div class="relative">
                <a href="{{ $leadHref }}" class="block group cursor-pointer">
                    <div class="relative overflow-hidden bg-hero-grad h-[500px]">
                        @if ($leadImageUrl)
                            <img src="{{ $leadImageUrl }}" alt="{{ $leadTitle }}"
                                class="absolute inset-0 h-full w-full object-cover opacity-90 transition-opacity group-hover:opacity-100"
                                loading="eager">
                            <div class="absolute inset-0 bg-black/10"></div>
                        @else
                            <svg width="100%" height="100%" viewBox="0 0 760 500" class="absolute inset-0 opacity-40" aria-hidden="true">
                                <defs>
                                    <pattern id="bp-hero-dots" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
                                        <circle cx="20" cy="20" r="1.5" fill="white" opacity="0.3" />
                                    </pattern>
                                </defs>
                                <rect width="760" height="500" fill="url(#bp-hero-dots)" />
                                <circle cx="600" cy="180" r="120" fill="white" opacity="0.05" />
                                <circle cx="160" cy="380" r="80" fill="white" opacity="0.06" />
                            </svg>
                        @endif
                    </div>

                    <div class="absolute top-6 left-6 flex gap-2">
                        <span class="bp-tag">TOP-MELDUNG</span>
                        <span class="bp-tag" style="background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);color:white;backdrop-filter:blur(4px);">
                            Audio · {{ $leadReadTime * 4 }} min
                        </span>
                    </div>

                    <div class="absolute left-0 right-0 bottom-0 px-9 pb-8 pt-[60px] text-white"
                         style="background:linear-gradient(180deg,transparent,rgba(0,0,0,0.92));">
                        <div class="eyebrow on-dark mb-3">{{ $leadCategoryName }}</div>
                        <h1 class="font-serif text-[38px] font-semibold m-0 leading-[1.1] tracking-[-0.7px] max-w-[680px]">
                            {{ $leadTitle }}
                        </h1>
                        <p class="font-serif text-[15px] leading-[1.5] mt-3.5 max-w-[580px] text-white/85">
                            {{ $leadTeaser }}
                        </p>
                        <div class="mt-4 flex items-center gap-3.5 text-[12px] text-white/65 flex-wrap">
                            <span>{{ $leadCompany }}</span>
                            <span aria-hidden="true">·</span>
                            @if ($leadPublishedAt)
                                <time datetime="{{ $leadPublishedAt->toIso8601String() }}" class="font-mono">
                                    {{ $leadPublishedAt->format('d.m.Y · H:i') }}
                                </time>
                                <span aria-hidden="true">·</span>
                            @endif
                            <span>{{ $leadReadTime }} Min. Lesezeit</span>
                        </div>
                    </div>
                </a>
            </div>

            <div class="flex items-center justify-between pt-3.5 px-1 gap-3">
                <div class="flex gap-2 items-center" aria-label="Top-Meldung Paginierung">
                    <span class="block h-[3px] w-9 bg-bg-rule-strong relative overflow-hidden">
                        <span class="absolute inset-y-0 left-0 bg-brand" style="width:35%;"></span>
                    </span>
                    <span class="block h-[3px] w-[18px] bg-bg-rule-strong"></span>
                    <span class="block h-[3px] w-[18px] bg-bg-rule-strong"></span>
                </div>
                <div class="text-[12px] text-ink-3">
                    <span class="text-ink font-semibold">1</span> von 3 Top-Meldungen
                </div>
            </div>
        </article>

        {{-- SIDEBAR: Was sonst zählt --}}
        <aside>
            <div class="eyebrow muted mb-3.5">Was sonst zählt</div>

            @if ($sideReleases->isNotEmpty())
                @foreach ($sideReleases as $index => $release)
                    <x-web.focus-side-item :release="$release" :index="$index + 1" :first="$loop->first" />
                @endforeach
            @else
                @foreach ([
                    ['n' => '01', 'cat' => 'Energie & Umwelt', 'time' => '10:42', 'title' => 'Energiewende beschleunigt sich: Neue Rekorde bei Erneuerbaren', 'company' => 'GreenPower Deutschland', 'gradient' => 'linear-gradient(135deg,#3A5A3A,#7BA876)'],
                    ['n' => '02', 'cat' => 'Finanzen', 'time' => '08:15', 'title' => 'FinTech-Startup PaymentFlow sichert sich 45 Mio. Euro', 'company' => 'PaymentFlow GmbH', 'gradient' => 'linear-gradient(135deg,#2A3548,#6B7C95)'],
                    ['n' => '03', 'cat' => 'Industrie', 'time' => '07:00', 'title' => 'Deutsche Unternehmen investieren 15 Mrd. in Automatisierung', 'company' => 'TechVision Analytics', 'gradient' => 'linear-gradient(135deg,#3A2A22,#9B6B52)'],
                    ['n' => '04', 'cat' => 'Mobilität', 'time' => 'Gestern', 'title' => 'VW eröffnet Batteriewerk in Salzgitter — 4.000 Arbeitsplätze', 'company' => 'Volkswagen AG', 'gradient' => 'linear-gradient(135deg,#1F2A3A,#5B7A99)'],
                ] as $idx => $mock)
                    <x-web.focus-side-item :mock="$mock" :first="$idx === 0" />
                @endforeach
            @endif

            <x-web.focus-ad :ad="$advertisement" />
        </aside>
    </div>
</section>