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

@php
    $sideReleases = collect($sideReleases)->take(4)->values();
    $boostedIds = collect($boostedIds)->all();

    if ($leadRelease) {
        $leadCategoryName = $leadRelease->localizedCategoryName();
        $leadImageUrl = $leadRelease->cardImageUrl();
        $leadPlaceholderUrl = $leadImageUrl ? null : $leadRelease->chosenPlaceholderUrl();
        $leadTitle = $leadRelease->title;
        $leadTeaser = $leadRelease->teaserText(200);
        $leadCompany = $leadRelease->company?->name;
        $leadHref = route('release.detail', ['slug' => $leadRelease->slug]);
        $leadReadTime = $leadRelease->readTimeMinutes();
        $leadPublishedAt = $leadRelease->published_at;
        $leadImageCredit = $leadImageUrl ? $leadRelease->cardImageCredit() : null;
    }
@endphp

@if ($leadRelease)
<section class="max-w-layout mx-auto px-4 sm:px-6 lg: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">
            {{ __('web.hero.title') }}
        </h2>
        <div class="eyebrow muted">{{ ucfirst(now()->isoFormat(__('web.hero.clock_format'))) }} · {{ __('web.hero.editorial_pick') }}</div>
    </header>
    <hr class="rule-strong mb-6">

    <div class="grid gap-9 lg:grid-cols-[1.7fr_1fr] grid-cols-1">
        {{-- HERO: Text im Flow (min-h + flex), damit lange Titel auf Mobile nicht nach oben überlaufen --}}
        <article>
            <a href="{{ $leadHref }}" class="block group cursor-pointer">
                <div class="relative overflow-hidden bg-hero-grad min-h-[320px] sm:min-h-[420px] lg:min-h-[500px] flex flex-col justify-end">
                    @if ($leadImageUrl)
                        <img src="{{ $leadImageUrl }}" alt="{{ $leadImageCredit ? $leadTitle.' · '.$leadImageCredit : $leadTitle }}" @if ($leadImageCredit) title="{{ $leadImageCredit }}" @endif
                            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>
                        @if ($leadImageCredit)
                            <span class="absolute top-2 right-3 z-10 text-[10.5px] text-white/85 bg-black/35 px-1.5 py-0.5" data-image-credit-teaser>{{ $leadImageCredit }}</span>
                        @endif
                    @elseif ($leadPlaceholderUrl)
                        <img src="{{ $leadPlaceholderUrl }}" alt="" aria-hidden="true"
                            class="absolute inset-0 h-full w-full object-cover" loading="eager">
                    @else
                        <x-web.hero-fallback />
                    @endif

                    <div class="absolute top-4 left-4 sm:top-6 sm:left-6 z-10 flex gap-2">
                        <span class="bp-tag">{{ __('web.hero.top_story') }}</span>
                        @if (in_array($leadRelease->id, $boostedIds, true))
                            <span class="bp-tag">{{ __('web.shared.boosted_placement') }}</span>
                        @endif
                    </div>

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

        {{-- SIDEBAR: Was sonst zählt --}}
        <aside>
            <div class="eyebrow muted mb-3.5">{{ __('web.hero.sidebar_title') }}</div>

            @foreach ($sideReleases as $index => $release)
                <x-web.focus-side-item :release="$release" :index="$index + 1" :first="$loop->first"
                    :boosted="in_array($release->id, $boostedIds, true)" />
            @endforeach

            <x-web.ad-slot variant="sidebar" />
        </aside>
    </div>
</section>
@endif