@props([
    'releases' => [],
])

@php
    $releases = collect($releases)->take(4)->values();

    $fallback = collect([
        ['title' => 'FinTech-Startup PaymentFlow sichert sich 45 Mio. Euro', 'hits' => 12428],
        ['title' => 'Energiewende: Neue Rekorde bei Erneuerbaren', 'hits' => 9831],
        ['title' => 'Immobilienmarkt 2025: Trendwende bei Kaufpreisen', 'hits' => 7104],
        ['title' => 'Telemedizin-Boom: 3 Mio. Online-Sprechstunden', 'hits' => 5298],
    ]);

    $items = $releases->isNotEmpty()
        ? $releases->map(fn ($release) => [
            'title' => \Illuminate\Support\Str::limit($release->title, 70),
            'hits' => (int) ($release->hits ?? 0),
            'href' => route('release.detail', ['slug' => $release->slug]),
        ])
        : $fallback->map(fn ($mock) => array_merge($mock, ['href' => '#']));

    $maxHits = max(1, $items->max('hits'));
@endphp

<section>
    <header class="flex items-baseline justify-between mb-4 min-h-[34px]">
        <h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px] leading-[1.2] text-ink">Meistgelesen</h2>
    </header>
    <hr class="rule-strong mb-1">

    @foreach ($items as $index => $item)
        @php
            $percent = max(15, (int) round($item['hits'] / $maxHits * 100));
            $isLast = $loop->last;
        @endphp
        <a href="{{ $item['href'] }}" class="block py-3.5 {{ $isLast ? '' : 'border-b border-bg-rule' }} cursor-pointer hover:bg-bg-elev transition-colors group">
            <div class="grid gap-2.5 items-baseline mb-1.5" style="grid-template-columns: 32px 1fr auto;">
                <div class="font-serif text-[18px] text-brand font-semibold leading-none tabular-nums">{{ $index + 1 }}</div>
                <div class="font-serif text-[14px] leading-[1.3] font-medium text-ink group-hover:text-brand transition-colors">{{ $item['title'] }}</div>
                <span class="font-mono text-[11px] text-ink-3">{{ number_format((int) $item['hits'], 0, ',', '.') }}</span>
            </div>
            <div class="ml-[42px] h-[3px] bg-bg-rule">
                <div class="h-full bg-brand" style="width: {{ $percent }}%;"></div>
            </div>
        </a>
    @endforeach
</section>