@props([
    'release' => null,
])

@php
    $category = $release?->category?->translations?->firstWhere('locale', app()->getLocale())
        ?? $release?->category?->translations?->first();
    $categoryName = $category?->name;
    $image = $release?->images?->first();
    $imageUrl = $image?->variantUrl('card') ?? $image?->url();
    $teaser = (string) \Illuminate\Support\Str::of(strip_tags((string) ($release?->text ?? '')))->squish()->limit(180);
    $company = $release?->company?->name;
    $title = $release->title;
    $href = route('release.detail', ['slug' => $release->slug]);
    $time = $release?->published_at?->isToday()
        ? $release->published_at->format('H:i')
        : ($release?->published_at?->isYesterday() ? __('web.shared.yesterday') : $release?->published_at?->isoFormat('D. MMM'));
    $city = $release?->company?->city ?? null;
    $readTime = max(1, (int) round(str_word_count(strip_tags((string) ($release?->text ?? ''))) / 200));
@endphp

<article class="py-6 border-b border-bg-rule grid gap-6 grid-cols-1 md:grid-cols-[240px_1fr] group">
    <a href="{{ $href }}" class="relative overflow-hidden bg-feature-grad block cursor-pointer" style="width:100%; max-width:240px; height:160px;">
        @if ($imageUrl)
            <img src="{{ $imageUrl }}" alt="{{ $title }}" class="absolute inset-0 h-full w-full object-cover transition-transform group-hover:scale-105" loading="lazy">
        @else
            <svg width="100%" height="100%" viewBox="0 0 240 160" class="absolute inset-0" aria-hidden="true">
                <g opacity="0.5">
                    <line x1="40" y1="55" x2="40" y2="150" stroke="var(--color-feature-line)" stroke-width="1.8" />
                    <circle cx="40" cy="55" r="3" fill="var(--color-feature-dot)" />
                </g>
                <g opacity="0.65">
                    <line x1="100" y1="55" x2="100" y2="150" stroke="var(--color-feature-line)" stroke-width="1.8" />
                    <circle cx="100" cy="55" r="3" fill="var(--color-feature-dot)" />
                </g>
                <g opacity="0.8">
                    <line x1="160" y1="55" x2="160" y2="150" stroke="var(--color-feature-line)" stroke-width="1.8" />
                    <circle cx="160" cy="55" r="3" fill="var(--color-feature-dot)" />
                </g>
                <g opacity="0.95">
                    <line x1="210" y1="55" x2="210" y2="150" stroke="var(--color-feature-line)" stroke-width="1.8" />
                    <circle cx="210" cy="55" r="3" fill="var(--color-feature-dot)" />
                </g>
            </svg>
        @endif
        <span class="bp-tag absolute top-2.5 left-2.5">{{ __('web.hero.top_story') }}</span>
    </a>

    <div>
        <div class="flex justify-between items-baseline mb-2 flex-wrap gap-2">
            <span class="bp-cat">{{ $categoryName }}</span>
            <span class="font-mono text-[11.5px] text-ink-3">{{ $time }}</span>
        </div>
        <h3 class="font-serif text-[24px] leading-[1.2] m-0 font-semibold tracking-[-0.3px] text-ink">
            <a href="{{ $href }}" class="cursor-pointer hover:text-brand transition-colors">{{ $title }}</a>
        </h3>
        @if ($teaser)
            <p class="font-serif text-[14px] text-ink-2 leading-[1.5] mt-2.5">
                {{ $teaser }}
            </p>
        @endif
        <div class="mt-3 text-[11.5px] text-ink-3 flex items-center gap-1.5 flex-wrap">
            <svg width="11" height="11" 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>
            @if ($city)
                <span aria-hidden="true">·</span>
                <span>{{ $city }}</span>
            @endif
            <span aria-hidden="true">·</span>
            <span>{{ __('web.shared.read_time', ['minutes' => $readTime]) }}</span>
        </div>
    </div>
</article>