<p class="leading-normal font-bold text-lg text-neutral-800 dark:text-white">
    {{ __('home.categories') }}
</p>

@php
    $categories = [
        'Uncensored' => 'uncensored',
        'Milf' => 'milf',
        'Maid' => 'maid',
        'School Girl' => 'school-girl',
        'Succubus' => 'succubus',
        'Tentacle' => 'tentacle',
        'Big Boobs' => 'big-boobs',
        'BDSM' => 'bdsm',
        'Elf' => 'elf',
        '4k 48fps' => '4k-48fps',
    ];
@endphp

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-5 2xl:grid-cols-5 gap-2">
    @foreach ($categories as $name => $slug)
        @php
            $cacheKey = 'category_' . $slug;

            $collection = \cache()->remember(
                $cacheKey,
                900,
                fn() => \App\Models\Episode::withAllTags([$slug])
                    ->inRandomOrder()
                    ->limit(3)
                    ->get(),
            );

            $count = $collection->count();

        @endphp
        <a href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'tags[0]' => $slug]) }}"
            class="relative mx-auto w-96 sm:w-full h-56 bg-white dark:bg-neutral-800 text-black dark:text-white rounded-lg overflow-hidden shadow-lg mt-4 transition ease-in-out hover:-translate-y-1 hover:scale-110 duration-300">
            <h2 class="text-lg font-semibold text-center pt-2">{{ $name }}</h2>
            <div class="relative w-full h-full flex justify-center">
                <!-- Left Image -->
                @if ($count > 0)
                    <img src="{{ $collection->first()->cover_url }}"
                        class="absolute w-32 h-44 rounded-lg object-cover shadow-md left-4 top-4 rotate-[-15deg] z-0">
                @endif

                <!-- Center Image -->
                @if ($count > 1)
                    <img src="{{ $collection->skip(1)->first()->cover_url }}"
                        class="absolute w-32 h-44 rounded-lg object-cover shadow-lg top-4 z-10">
                @endif

                <!-- Right Image -->
                @if ($count > 2)
                    <img src="{{ $collection->skip(2)->first()->cover_url }}"
                        class="absolute w-32 h-44 rounded-lg object-cover shadow-lg right-4 top-14 z-20 rotate-[15deg]">
                @endif
            </div>
        </a>
    @endforeach
</div>
