{{-- Bloque: Categorías Elegantes --}}
@props(['title' => 'Explora por categoría', 'limit' => 6])
@php
    $categories = \App\Models\Category::where('is_active', true)
        ->whereNull('parent_id')
        ->take((int) $limit)->get();
@endphp
<section class="py-14 px-4 max-w-7xl mx-auto">
    <h2 class="font-display text-3xl md:text-4xl text-olive text-center mb-10">{{ $title }}</h2>
    <div class="grid grid-cols-2 md:grid-cols-3 gap-6">
        @foreach($categories as $cat)
            <a href="{{ route('store.page', $cat->slug) }}" class="group relative rounded-2xl overflow-hidden aspect-[4/3] block">
                <img src="{{ $cat->image_url ?: 'https://placehold.co/600x450/4A5D4D/F7F3EE?text='.urlencode($cat->name) }}"
                     alt="{{ $cat->name }}"
                     class="w-full h-full object-cover group-hover:scale-105 transition">
                <div class="absolute inset-0 bg-olive/30 flex items-end p-5">
                    <span class="font-display text-xl text-beige">{{ $cat->name }}</span>
                </div>
            </a>
        @endforeach
    </div>
</section>
