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

@php
    \Carbon\Carbon::setLocale('de');

    if ($release) {
        $category = $release?->category?->translations?->firstWhere('locale', 'de')
            ?? $release?->category?->translations?->first();
        $categoryName = $category?->name ?? 'Wirtschaft';
        $company = $release?->company?->name ?? 'Unternehmen';
        $city = $release?->company?->city ?? null;
        $title = $release->title;
        $href = route('release.detail', ['slug' => $release->slug]);
        $recommended = $recommended;

        $published = $release->published_at;
        if ($published) {
            $timeLine = $published->format('H:i');
            if ($published->isToday()) {
                $dateLine = $published->translatedFormat('j. MMM');
            } elseif ($published->isYesterday()) {
                $dateLine = 'Gestern';
            } else {
                $dateLine = $published->translatedFormat('j. MMM');
            }
            $datetimeAttr = $published->toIso8601String();
        } else {
            $timeLine = '—';
            $dateLine = '';
            $datetimeAttr = null;
        }
    } else {
        $mock ??= [];
        $categoryName = $mock['category'] ?? 'Wirtschaft';
        $company = $mock['company'] ?? '';
        $city = $mock['city'] ?? null;
        $title = $mock['title'] ?? '';
        $href = $mock['href'] ?? '#';
        $timeLine = $mock['time'] ?? '';
        $dateLine = $mock['date'] ?? '';
        $datetimeAttr = null;
        $recommended = $recommended || ($mock['recommended'] ?? false);
    }

    $bpCatClass = 'bp-cat self-start whitespace-nowrap leading-snug max-md:mt-1 max-md:text-[9px] max-md:tracking-[0.1em]';
@endphp

<a href="{{ $href }}" @class([
    'grid items-start py-3.5 border-b border-bg-rule cursor-pointer',
    'hover:bg-bg-elev transition-colors group',
    'pl-1.5 pr-2 sm:pl-2',
    // <md: 2 Spalten — links Zeit/Datum/Rubrik, rechts Inhalt
    'max-md:grid-cols-[auto_minmax(0,1fr)] max-md:gap-x-3',
    // md+: 3 Spalten wie Desktop-Mockup
    'md:grid-cols-[3.75rem_6.25rem_minmax(0,1fr)] md:gap-x-4',
])>
    <div class="flex min-w-0 shrink-0 flex-col gap-0.5 tabular-nums pt-0.5">
        @if ($datetimeAttr)
            <time datetime="{{ $datetimeAttr }}" class="font-mono text-[11px] leading-none text-ink-3 sm:text-[12px]">{{ $timeLine }}</time>
        @else
            <span class="font-mono text-[11px] leading-none text-ink-3 sm:text-[12px]">{{ $timeLine }}</span>
        @endif
        @if ($dateLine !== '')
            <span class="text-[9px] leading-tight text-ink-4 sm:text-[10px]">{{ $dateLine }}</span>
        @endif
        {{-- Mobil: Rubrik unter dem Datum in derselben Spalte --}}
        <span class="{{ $bpCatClass }} md:hidden">{{ $categoryName }}</span>
    </div>
    {{-- Desktop: Rubrik in eigener Spalte -- span nur sichtbar ab md, um Tab-Reihenfolge / SR konsistent zu halten --}}
    <span class="{{ $bpCatClass }} hidden md:inline">{{ $categoryName }}</span>
    <div class="min-w-0">
        <div class="font-serif text-[15.5px] leading-[1.3] font-medium text-ink transition-colors group-hover:text-brand flex flex-wrap items-baseline gap-2">
            <span>{{ $title }}</span>
            @if ($recommended)
                <span class="inline-flex items-center gap-1 whitespace-nowrap border border-brand/30 bg-brand/[0.04] px-1.5 py-px font-mono text-[9.5px] font-bold uppercase tracking-[0.1em] text-brand">
                    <svg width="9" height="9" viewBox="0 0 12 12" class="flex-shrink-0" aria-hidden="true">
                        <path d="M6 1l1.5 3.2 3.5.4-2.6 2.4.7 3.5L6 8.8l-3.1 1.7.7-3.5L1 4.6l3.5-.4z" fill="currentColor" />
                    </svg>
                    Empfehlung
                </span>
            @endif
        </div>
        @if ($company)
            <div class="mt-1 text-[11px] text-ink-3">
                {{ $company }}@if ($city) · {{ $city }} @endif
            </div>
        @endif
    </div>
</a>