@props(['category'])
@php
    $shopRoute = Route::has('shop.index') ? route('shop.index', ['category' => $category->slug]) : '#';
@endphp

<a href="{{ $shopRoute }}" class="hover-lift group relative block overflow-hidden rounded-2xl shadow-[var(--shadow-soft)]" data-reveal-self>
    <div class="relative aspect-square bg-cream">
        @if ($category->image)
            <img src="{{ Storage::url($category->image) }}" alt="{{ $category->name }}" class="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-110" loading="lazy" decoding="async">
        @else
            <div class="flex h-full w-full items-center justify-center">
                <x-icon name="layout-grid" class="h-8 w-8 text-ink/10" :stroke-width="1.5" />
            </div>
        @endif
        <div class="absolute inset-0 bg-gradient-to-t from-ink/60 via-ink/10 to-transparent transition-opacity duration-500 group-hover:from-ink/75"></div>
    </div>
    <div class="absolute inset-x-0 bottom-0 p-4">
        <p class="font-display text-lg text-ivory transition-transform duration-300 group-hover:-translate-y-1">{{ $category->name }}</p>
        <span class="mt-1 flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-champagne-light opacity-0 transition-opacity duration-300 group-hover:opacity-100">
            Shop Now <x-icon name="arrow-right" class="h-2.5 w-2.5" />
        </span>
    </div>
</a>
