<x-layouts.frontend title="Categories">
    <section class="mx-auto max-w-7xl px-6 py-14">
        <div class="mb-10 text-center" data-reveal-self>
            <p class="text-xs font-semibold uppercase tracking-[0.15em] text-champagne-light">Explore</p>
            <h1 class="mt-2 font-display text-3xl text-ink sm:text-4xl">Shop by Category</h1>
        </div>

        @if ($categories->isEmpty())
            <div class="flex flex-col items-center justify-center py-20 text-center">
                <div class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-cream text-ink/25">
                    <x-icon name="layout-grid" class="h-7 w-7" :stroke-width="1.5" />
                </div>
                <p class="text-sm text-ink/50">Categories are coming soon.</p>
            </div>
        @else
            <div class="grid grid-cols-2 gap-5 sm:grid-cols-3 lg:grid-cols-4" data-reveal>
                @foreach ($categories as $category)
                    <div>
                        <x-frontend.category-card :category="$category" />
                        @if ($category->children->isNotEmpty())
                            <ul class="mt-3 space-y-1 px-1 text-sm text-ink/55">
                                @foreach ($category->children as $child)
                                    <li>
                                        <a href="{{ Route::has('shop.index') ? route('shop.index', ['category' => $child->slug]) : '#' }}" class="group inline-flex items-center gap-1 transition-colors duration-200 hover:text-champagne-light">
                                            <span class="h-px w-2 bg-current opacity-0 transition-all duration-200 group-hover:w-3 group-hover:opacity-60"></span>
                                            {{ $child->name }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </div>
                @endforeach
            </div>
        @endif
    </section>
</x-layouts.frontend>
