@props(['category'])

<a href="{{ route('products.category', ['locale' => app()->getLocale(), 'category' => $category->slug]) }}"
   data-reveal
   class="card group relative flex flex-col overflow-hidden transition-transform hover:-translate-y-1"
   {{ $attributes }}>
    <div class="relative flex h-44 items-center justify-center overflow-hidden" style="background-color: {{ $category->color }}1A">
        @if ($category->imageUrl())
            <img src="{{ $category->imageUrl() }}" alt="{{ $category->name }}" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
        @else
            <div class="flex h-20 w-20 items-center justify-center rounded-full" style="background-color: {{ $category->color }}33">
                <span class="text-3xl">🌿</span>
            </div>
        @endif
        <span class="absolute right-3 top-3 rounded-full px-3 py-1 text-xs font-bold text-white shadow" style="background-color: {{ $category->color }}">
            {{ $category->active_products_count ?? $category->products_count ?? '' }}
        </span>
    </div>
    <div class="flex flex-1 flex-col p-5">
        <h3 class="text-lg font-bold text-brand-ink group-hover:text-brand-green-800">{{ $category->name }}</h3>
        @if ($category->description)
            <p class="mt-1.5 line-clamp-2 text-sm text-brand-ink/60">{{ $category->description }}</p>
        @endif
        <span class="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-brand-green-800">
            {{ __('site.btn_view_details') }}
            <svg class="h-4 w-4 transition group-hover:translate-x-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M12.293 4.293a1 1 0 011.414 0l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414-1.414L15.586 11H4a1 1 0 110-2h11.586l-3.293-3.293a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
        </span>
    </div>
</a>