<section class="bg-home-foreground py-16 lg:py-24 px-4 md:px-8 lg:px-24 xl:px-32 relative overflow-hidden">

    <div class="max-w-7xl mx-auto">

        <header class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-home-background leading-tight mb-4">
                Temukan Aroma yang <br class="hidden sm:block">
                Cocok dengan Kepribadianmu.
            </h2>
            <p class="text-gray-500 text-lg max-w-2xl mx-auto">
                Pilih kategori aroma yang paling menggambarkan dirimu dan ciptakan kesan tak terlupakan.
            </p>
        </header>

        <div class="relative">

            <div id="category-container" class="fade-enter-active">
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
                    @foreach ($categories as $category)
                        <article
                            class="category-item group flex flex-col items-center justify-center py-10 px-4 bg-white rounded-2xl border border-gray-100 hover:border-home-primary hover:shadow-xl hover:shadow-home-primary/5 hover:-translate-y-1 transition-all duration-300 cursor-pointer h-full"
                            wire:key="category-{{ $category['id'] }}">

                            <div
                                class="w-24 h-24 mb-4 rounded-full bg-gray-50 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300 overflow-hidden">
                                <img src="{{ $category['image'] }}" alt="{{ $category['name'] }}"
                                    class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                            </div>

                            <h3
                                class="text-[11px] md:text-xs font-bold tracking-widest text-gray-400 uppercase group-hover:text-home-primary transition-colors duration-300 text-center">
                                {{ $category['name'] }}
                            </h3>
                        </article>
                    @endforeach
                </div>
            </div>

            <nav class="mt-12 flex flex-col items-center space-y-4 lg:hidden" aria-label="Pagination Mobile">
                <div class="flex items-center gap-2">
                    @for ($i = 1; $i <= $categories->lastPage(); $i++)
                        <a href="?page={{ $i }}" aria-label="Halaman {{ $i }}"
                            class="pagination-link w-2 h-2 rounded-full transition-all duration-300 {{ $i == $categories->currentPage() ? 'bg-home-primary w-8' : 'bg-gray-300 hover:bg-gray-400' }}"></a>
                    @endfor
                </div>
            </nav>

            <nav class="hidden lg:flex absolute top-0 -right-16 h-full items-center" aria-label="Pagination Desktop">
                <div class="flex flex-col gap-3">
                    @for ($i = 1; $i <= $categories->lastPage(); $i++)
                        <a href="{{ $categories->url($i) }}"
                            class="pagination-link w-1 rounded-full transition-all duration-300 {{ $i == $categories->currentPage() ? 'bg-home-primary h-12' : 'bg-gray-200 h-6 hover:bg-gray-300' }}"></a>
                    @endfor
                </div>
            </nav>

        </div>
    </div>
</section>
