{{-- Generic content card. Title, optional image (lazy-loaded), optional icon slot, optional link; body goes in the slot. --}}
@props(['title' => null, 'href' => null, 'linkLabel' => 'Learn more', 'image' => null, 'eyebrow' => null, 'external' => false, 'contain' => false])

<div class="flex h-full flex-col overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
    @if ($image)
        <img src="{{ asset($image) }}" alt="" loading="lazy" decoding="async" width="640" height="360" @class(["aspect-video w-full", "bg-slate-50 object-contain" => $contain, "object-cover" => ! $contain])>
    @endif

    <div class="flex flex-1 flex-col p-5">
        @isset($icon)
            <div class="mb-4">{{ $icon }}</div>
        @endisset

        @if ($eyebrow)
            <p class="text-xs font-semibold uppercase tracking-wide text-brand-700">{{ $eyebrow }}</p>
        @endif

        @if ($title)
            <h3 class="text-lg font-semibold">{{ $title }}</h3>
        @endif

        <div class="mt-2 flex-1 text-sm text-slate-600">{{ $slot }}</div>

        @if ($href)
            <a href="{{ $href }}" @if ($external) target="_blank" rel="noopener" @endif class="mt-4 text-sm font-semibold text-brand-700 hover:underline">{{ $linkLabel }} &rarr;</a>
        @endif
    </div>
</div>