@php
$title = $section->settings['title'] ?? 'Top Bestsellers';
$subtitle = $section->settings['subtitle'] ?? 'The most sought-after assets in our ecosystem.';
$limit = $section->settings['limit'] ?? 8; // Grid usually has more items
$columns = $section->settings['columns'] ?? 4;
$titleAlignment = $section->settings['title_alignment'] ?? 'left';

$products = \App\Modules\Product\Models\Product::with(['category', 'vendor', 'images'])
    ->published()
    ->visible()
    ->orderByDesc('sales_count')
    ->take($limit)
    ->get();

$gridCols = match((int)$columns) {
    2 => 'grid-cols-1 md:grid-cols-2',
    3 => 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
    6 => 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
    default => 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
};
@endphp

<section class="py-12 md:py-16 bg-bg-main relative overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex {{ $titleAlignment === 'center' ? 'flex-col items-center text-center' : 'flex-col md:flex-row md:items-end justify-between text-left' }} mb-10 gap-6">
            <div class="space-y-4">
                <h2 class="text-3xl md:text-5xl font-display font-black text-text-base tracking-tighter uppercase leading-none">
                    {{ $title }}
                </h2>
                <p class="text-text-muted text-base md:text-lg font-500 max-w-xl">
                    {{ $subtitle }}
                </p>
            </div>
        </div>

        <div class="grid {{ $gridCols }} gap-6 md:gap-8">
            @forelse ($products as $product)
                @include('pages.storefront._product-card', ['product' => $product])
            @empty
            <div class="col-span-full py-16 text-center bg-surface-secondary rounded-[2.5rem] border-2 border-dashed border-border-subtle">
                <p class="text-text-muted font-900 uppercase tracking-widest text-[10px]">No sales data found</p>
            </div>
            @endforelse
        </div>
    </div>
</section>