@props(['insight'])

<article class="card card-hover group flex h-full flex-col overflow-hidden">
    <a href="{{ route('insights.show', $insight) }}" class="block aspect-[16/10] overflow-hidden bg-navy-900">
        @if ($insight->featured_image)
            <img src="{{ \Illuminate\Support\Facades\Storage::url($insight->featured_image) }}" alt="{{ $insight->title }}" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105">
        @else
            <div class="flex h-full w-full items-center justify-center bg-gradient-to-br from-navy-700 to-navy-950"><x-ui.icon name="heroicon-o-newspaper" class="h-12 w-12 text-teal-400/60" /></div>
        @endif
    </a>
    <div class="flex flex-1 flex-col p-6">
        <div class="flex items-center gap-3 text-xs">
            @if ($insight->category)<span class="rounded-full bg-teal-500/10 px-2.5 py-1 font-semibold text-teal-700">{{ $insight->category }}</span>@endif
            @if ($insight->published_at)<time datetime="{{ $insight->published_at->toDateString() }}" class="text-muted">{{ $insight->published_at->format('j M Y') }}</time>@endif
        </div>
        <h3 class="mt-3 font-display text-lg font-bold leading-snug text-ink"><a href="{{ route('insights.show', $insight) }}" class="transition-colors hover:text-teal-700">{{ $insight->title }}</a></h3>
        @if ($insight->excerpt)<p class="mt-2 line-clamp-3 flex-1 text-sm leading-relaxed text-muted">{{ $insight->excerpt }}</p>@endif
        <a href="{{ route('insights.show', $insight) }}" class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-teal-700">Read more <x-ui.icon name="heroicon-o-arrow-right" class="h-4 w-4 transition-transform group-hover:translate-x-1" /></a>
    </div>
</article>