@props([
    'release' => null,
    'index' => 1,
    'first' => false,
])

@php
    $category = $release?->category?->translations?->firstWhere('locale', app()->getLocale())
        ?? $release?->category?->translations?->first();
    $categoryName = $category?->name;
    $time = $release?->published_at?->isToday()
        ? $release->published_at->format('H:i')
        : ($release?->published_at?->isYesterday() ? __('web.shared.yesterday') : $release?->published_at?->isoFormat('D. MMM'));
    $title = $release->title;
    $company = $release?->company?->name;
    $href = route('release.detail', ['slug' => $release->slug]);
    $image = $release?->images?->first();
    $imageUrl = $image?->variantUrl('card') ?? $image?->url();
    $gradient = 'linear-gradient(135deg,#3A4A5A,#6B7C95)';
    $number = str_pad((string) $index, 2, '0', STR_PAD_LEFT);
@endphp

<article class="px-3.5 py-4 border-b border-bg-rule cursor-pointer transition-colors hover:bg-bg-elev group {{ $first ? 'border-t border-bg-rule-strong' : '' }}">
    <a href="{{ $href }}" class="block cursor-pointer">
        <div class="grid items-baseline gap-3 mb-2.5" style="grid-template-columns: 32px 1fr auto;">
            <div class="font-serif text-[18px] text-brand font-medium leading-none tabular-nums">{{ $number }}</div>
            <span class="bp-cat">{{ $categoryName }}</span>
            <span class="font-mono text-[11px] text-ink-3">{{ $time }}</span>
        </div>

        <div class="grid items-start gap-3" style="grid-template-columns: 32px 64px 1fr;">
            <div></div>

            <div class="w-16 h-16 flex-shrink-0 relative overflow-hidden" style="background: {{ $gradient }};">
                @if ($imageUrl)
                    <img src="{{ $imageUrl }}" alt="" class="absolute inset-0 h-full w-full object-cover transition-transform group-hover:scale-105" loading="lazy">
                @else
                    <svg width="64" height="64" viewBox="0 0 64 64" class="absolute inset-0" aria-hidden="true">
                        <circle cx="48" cy="20" r="18" fill="rgba(255,255,255,0.08)" />
                        <rect x="6" y="40" width="36" height="2" fill="rgba(255,255,255,0.18)" />
                        <rect x="6" y="46" width="24" height="2" fill="rgba(255,255,255,0.12)" />
                    </svg>
                @endif
            </div>

            <div>
                <h3 class="font-serif text-[15.5px] leading-[1.3] m-0 font-medium tracking-[-0.1px] text-ink group-hover:text-brand transition-colors">
                    {{ $title }}
                </h3>
                <div class="text-[11.5px] text-ink-3 mt-1.5 flex items-center gap-1.5">
                    <svg width="10" height="10" viewBox="0 0 11 11" class="text-ok flex-shrink-0" aria-hidden="true">
                        <circle cx="5.5" cy="5.5" r="5" fill="currentColor" />
                        <path d="M3 5.5l1.8 1.8L8 4" stroke="white" stroke-width="1.4" fill="none" stroke-linecap="round" />
                    </svg>
                    <span>{{ $company }}</span>
                </div>
            </div>
        </div>
    </a>
</article>