@php
    $categories = [
        ['label' => 'Wallpapers', 'description' => 'Desktop & mobile backgrounds', 'href' => '/wallpapers', 'mascot' => '/gfx/mascot_wallpapers.webp', 'color' => 'from-sky-500/20 to-sky-900/40'],
        ['label' => 'Photography', 'description' => 'Real-world captures & edits', 'href' => '/photography', 'mascot' => '/gfx/mascot_photography.webp', 'color' => 'from-emerald-500/20 to-emerald-900/40'],
        ['label' => 'Skins', 'description' => 'App & game skins', 'href' => '/skins', 'mascot' => '/gfx/mascot_skins.webp', 'color' => 'from-purple-500/20 to-purple-900/40'],
        ['label' => 'Digital Art', 'description' => 'Illustrations & concept art', 'href' => '/digital-art', 'mascot' => '/gfx/mascot_other.webp', 'color' => 'from-rose-500/20 to-rose-900/40'],
        ['label' => 'Tags Hub', 'description' => 'Browse by theme or style', 'href' => '/tags', 'mascot' => '/gfx/mascot_other.webp', 'color' => 'from-amber-500/20 to-amber-900/40'],
    ];
@endphp

<section class="mt-14 px-4 sm:px-6 lg:px-8">
    <div class="mb-5 flex items-center justify-between">
        <h2 class="text-xl font-bold text-white">Explore Categories</h2>
        <a href="/browse" class="text-sm text-nova-300 transition hover:text-white">Browse all →</a>
    </div>

    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
        @foreach ($categories as $category)
            <a
                href="{{ $category['href'] }}"
                class="group relative flex min-h-[7rem] flex-col justify-end overflow-hidden rounded-2xl bg-gradient-to-br {{ $category['color'] }} ring-1 ring-white/5 transition hover:-translate-y-1 hover:ring-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70"
            >
                <div class="pointer-events-none absolute inset-0 bg-nova-900/20 transition group-hover:bg-nova-900/10"></div>
                <img src="{{ $category['mascot'] }}" alt="" aria-hidden="true" class="pointer-events-none absolute bottom-0 right-0 h-24 w-auto translate-y-2 object-contain drop-shadow-xl transition-transform duration-300 group-hover:-translate-y-1 group-hover:scale-105" loading="lazy">
                <div class="relative z-10 p-3 pr-24">
                    <p class="font-semibold leading-tight text-white">{{ $category['label'] }}</p>
                    <p class="mt-0.5 text-xs text-nova-300">{{ $category['description'] }}</p>
                </div>
            </a>
        @endforeach
    </div>
</section>