@php
$title = $section->settings['title'] ?? 'Top Bestsellers';
$subtitle = $section->settings['subtitle'] ?? 'The most sought-after assets in our ecosystem.';
$limit = $section->settings['limit'] ?? 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();
@endphp

<section class="py-20 md:py-28 bg-bg-main relative overflow-hidden">
    {{-- Ambient Ambient Glows --}}
    <div
        class="absolute top-0 left-0 w-[500px] h-[500px] bg-brand-500/5 rounded-full blur-[120px] -z-10 pointer-events-none">
    </div>
    <div
        class="absolute bottom-0 right-0 w-[400px] h-[400px] bg-indigo-500/5 rounded-full blur-[100px] -z-10 pointer-events-none">
    </div>

    <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' }} {{ $titleAlignment === 'right' ? 'md:flex-row-reverse text-right' : '' }} gap-8 mb-16">
            <div class="space-y-6 flex flex-col {{ $titleAlignment === 'center' ? 'items-center' : ($titleAlignment === 'right' ? 'items-end' : 'items-start') }}">
                <div
                    class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-brand-500/10 border border-brand-500/20 text-brand-500 text-[10px] font-900 tracking-[0.2em] uppercase">
                    <i data-lucide="trending-up" class="w-3.5 h-3.5"></i>
                    Market Performance
                </div>
                <h2
                    class="text-4xl md:text-5xl font-display font-black text-text-base tracking-tighter uppercase leading-none">
                    {{ $title }}
                </h2>
                <p class="text-text-muted text-lg font-500 max-w-xl {{ $titleAlignment === 'center' ? 'mx-auto' : ($titleAlignment === 'right' ? 'ml-auto mr-0' : 'mr-auto ml-0') }}">
                    {{ $subtitle }}
                </p>
            </div>

            <div class="{{ $titleAlignment === 'center' ? 'w-full flex justify-center' : '' }}">
                <a href="{{ route('storefront.products', ['sort' => 'sales']) }}"
                    class="inline-flex items-center gap-3 h-14 px-8 rounded-2xl bg-surface-secondary border border-border-subtle text-text-muted hover:text-text-base hover:border-brand-500/30 transition-all font-900 text-[10px] uppercase tracking-widest group shadow-sm">
                    Browse Best Sellers
                    <i data-lucide="chevron-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
                </a>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            @forelse ($products as $index => $product)
                @include('pages.storefront._product-card', ['product' => $product])
            @empty
            <div class="col-span-full py-20 text-center bg-surface-secondary rounded-[3rem] border-2 border-dashed border-border-subtle">
                <i data-lucide="package-search" class="w-12 h-12 text-text-dim mx-auto mb-4"></i>
                <p class="text-text-muted font-900 uppercase tracking-widest text-[11px]">No volume data found</p>
            </div>
            @endforelse
        </div>
    </div>
</section>