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

@php
    $items = collect($releases)->take(4)->values()->map(fn ($release) => [
        'title' => \Illuminate\Support\Str::limit($release->title, 70),
        'hits' => (int) ($release->hits ?? 0),
        'href' => route('release.detail', ['slug' => $release->slug]),
    ]);

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

@if ($items->isNotEmpty())
<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">{{ __('web.most_read.title') }}</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>
@endif