@php
    $settings = $section->settings ?? [];
    $title = $settings['title'] ?? 'Explore Categories';
    $subtitle = $settings['subtitle'] ?? 'Browse our diverse ecosystem of high-performance digital assets.';
    $limit = $settings['limit'] ?? 6;

    $categories = \App\Modules\Product\Models\Category::active()
        ->withCount(['products' => fn($q) => $q->published()->visible()])
        ->orderByDesc('products_count')
        ->limit($limit)
        ->get();
@endphp

<section class="py-24 bg-[#0B0F19] relative">
    <div class="container mx-auto px-6">
        <div class="max-w-2xl mb-16 space-y-4">
            <div class="inline-flex items-center gap-2 px-3 py-1 bg-brand-500/10 border border-brand-500/20 rounded-full">
                <i data-lucide="layout-grid" class="w-3.5 h-3.5 text-brand-400"></i>
                <span class="text-[9px] font-black text-brand-400 uppercase tracking-[0.2em]">Architecture</span>
            </div>
            <h2 class="text-3xl md:text-5xl font-black text-white uppercase tracking-tight">{{ $title }}</h2>
            <p class="text-slate-500 font-medium leading-relaxed">{{ $subtitle }}</p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($categories as $category)
                <a href="/category/{{ $category->slug }}" class="group relative h-72 rounded-[2rem] overflow-hidden bg-[#111827] border border-white/5 transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_40px_80px_-20px_rgba(124,58,237,0.3)] hover:border-brand-500/40">
                    {{-- Background Image --}}
                    @if($category->image)
                        <img src="{{ Storage::url($category->image) }}" 
                             alt="{{ $category->name }}" 
                             class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 opacity-60">
                    @endif
                    
                    {{-- Overlay Gradient --}}
                    <div class="absolute inset-0 bg-gradient-to-t from-[#0B0F19] via-[#0B0F19]/20 to-transparent"></div>

                    {{-- Hover Glow --}}
                    <div class="absolute inset-0 bg-brand-500/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>

                    {{-- Content --}}
                    <div class="absolute inset-0 p-10 flex flex-col justify-end items-start space-y-2">
                        <div class="w-12 h-12 rounded-2xl bg-white/10 backdrop-blur-md border border-white/10 flex items-center justify-center text-white mb-auto transform -translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500">
                             <span class="text-2xl">{{ $category->icon ?? '📦' }}</span>
                        </div>

                        <h3 class="text-2xl font-black text-white uppercase tracking-tight group-hover:text-brand-400 transition-colors">
                            {{ $category->name }}
                        </h3>
                        
                        <div class="flex items-center gap-2">
                            <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">{{ $category->products_count }} Products</span>
                            <div class="w-1.5 h-1.5 rounded-full bg-brand-500 group-hover:scale-150 transition-transform"></div>
                        </div>
                    </div>

                    {{-- Pulse Interaction --}}
                    <div class="absolute top-8 right-8 w-10 h-10 rounded-full border border-white/10 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-500">
                        <i data-lucide="arrow-up-right" class="w-4 h-4 text-white"></i>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</section>