@php
    $name = data_get($category, 'name', 'Untitled');
    $slug = data_get($category, 'slug');
    $categoryUrl = !empty($slug) ? route('forum.category.show', ['category' => $slug]) : '#';
    $threads = (int) data_get($category, 'thread_count', 0);
    $posts = (int) data_get($category, 'post_count', 0);
    $lastActivity = data_get($category, 'last_activity_at');
    $preview = data_get($category, 'preview_image', config('forum.preview_images.default'));
@endphp

<a
    href="{{ $categoryUrl }}"
    aria-label="Open {{ $name }} category"
    role="listitem"
    class="group relative block overflow-hidden rounded-xl border border-white/5 bg-slate-900/80 shadow-xl backdrop-blur transition-all duration-300 hover:shadow-cyan-500/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
>
    <div class="relative aspect-[4/3] sm:aspect-[16/9]">
        <img
            src="{{ $preview }}"
            alt="{{ $name }} preview"
            loading="lazy"
            decoding="async"
            class="h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-[1.02]"
        />
        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>

        <div class="absolute inset-x-0 bottom-0 p-4">
            <div class="mb-2 inline-flex h-8 w-8 items-center justify-center rounded-lg bg-cyan-400/15 text-cyan-300">
                <i class="fa-solid fa-comments" aria-hidden="true"></i>
            </div>

            <h3 class="text-lg font-semibold text-white">{{ $name }}</h3>
            <p class="mt-1 text-xs text-white/60">
                Last activity:
                @if ($lastActivity)
                    <time datetime="{{ \Illuminate\Support\Carbon::parse($lastActivity)->toIso8601String() }}">
                        {{ \Illuminate\Support\Carbon::parse($lastActivity)->diffForHumans() }}
                    </time>
                @else
                    No activity yet
                @endif
            </p>

            <div class="mt-3 flex items-center gap-4 text-sm text-cyan-300">
                <span>{{ number_format($posts) }} posts</span>
                <span>{{ number_format($threads) }} topics</span>
            </div>
        </div>
    </div>
</a>