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

@php
    $categoryName = $release?->localizedCategoryName();
    $time = $release?->compactPublishedLabel();
    $title = $release->title;
    $company = $release?->company?->name;
    $href = route('release.detail', ['slug' => $release->slug]);
    $imageUrl = $release?->cardImageUrl();
    $imageCredit = $imageUrl ? $release?->cardImageCredit() : null;
    $placeholderUrl = $imageUrl ? null : $release?->chosenPlaceholderUrl();
    $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="" @if ($imageCredit) title="{{ $imageCredit }}" @endif class="absolute inset-0 h-full w-full object-cover transition-transform group-hover:scale-105" loading="lazy">
                @elseif ($placeholderUrl)
                    <img src="{{ $placeholderUrl }}" alt="" aria-hidden="true" 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 }}
                    @if ($boosted)
                        <x-web.boosted-label />
                    @endif
                </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>