@props(['image', 'imageAlt', 'category', 'title', 'description', 'href' => null])

<article class="group relative overflow-hidden rounded-2xl bg-card shadow-sm ring-1 ring-border transition hover:shadow-xl">
    <div class="aspect-[4/3] overflow-hidden">
        <img src="{{ asset('images/' . $image) }}" alt="{{ $imageAlt }}" loading="lazy"
             class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"/>
    </div>
    <div class="p-6">
        <span class="text-xs font-semibold uppercase tracking-widest text-secondary-foreground/60">{{ $category }}</span>
        <h3 class="mt-2 text-2xl">{{ $title }}</h3>
        <p class="mt-2 text-sm text-muted-foreground leading-relaxed">{{ $description }}</p>
        @if($href)
        <a href="{{ $href }}" class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-primary">Discover
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" aria-hidden="true">
                <path d="M7 7h10v10"/><path d="M7 17 17 7"/>
            </svg>
        </a>
        @else
        <div class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-primary">Discover
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" aria-hidden="true">
                <path d="M7 7h10v10"/><path d="M7 17 17 7"/>
            </svg>
        </div>
        @endif
    </div>
</article>