@php
    $settings = $section->settings ?? [];
    $title = $settings['title'] ?? 'Top Sellers';
    $subtitle = $settings['subtitle'] ?? 'The most popular protocols and assets in the matrix right now.';
    
    $products = \App\Modules\Product\Models\Product::with(['category', 'vendor'])
        ->published()->visible()
        ->where('is_top_sale', true)
        ->orderByDesc('sales_count')
        ->limit($settings['limit'] ?? 4)
        ->get();
@endphp

@if($products->count() > 0)
<section class="py-20 bg-[#0B0F19]">
    <div class="container mx-auto px-6">
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
            <div class="space-y-3">
                <div class="inline-flex items-center gap-2 px-3 py-1 bg-brand-500/10 border border-brand-500/20 rounded-full">
                    <span class="w-1.5 h-1.5 rounded-full bg-brand-500 animate-pulse"></span>
                    <span class="text-[9px] font-black text-brand-400 uppercase tracking-[0.2em]">High Performance</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 max-w-xl">{{ $subtitle }}</p>
            </div>
            <a href="/products?sort=sales" class="inline-flex items-center text-sm font-black text-brand-400 hover:text-brand-300 transition-colors group">
                Exploration Hub
                <i data-lucide="chevron-right" class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform"></i>
            </a>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            @foreach($products as $product)
                @include('themes.ecommerce_digital.components.product-card', ['product' => $product, 'badge' => 'Top Seller'])
            @endforeach
        </div>
    </div>
</section>
@endif