@php
$title = $section->settings['title'] ?? 'Trending Now';
$subtitle = $section->settings['subtitle'] ?? 'The most viral digital assets today.';
$limit = $section->settings['limit'] ?? 4;
$titleAlignment = $section->settings['title_alignment'] ?? 'left';

$products = \App\Modules\Product\Models\Product::with(['category', 'vendor', 'images'])
    ->published()
    ->visible()
    ->orderByDesc('views_count') // Trending usually means most viewed or recently popular
    ->take($limit)
    ->get();
@endphp

<section class="py-12 md:py-16 bg-bg-main relative overflow-hidden">
    {{-- Refined Background glow --}}
    <div class="absolute top-0 right-0 w-[400px] h-[400px] bg-rose-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' }} gap-6 mb-10">
            <div class="space-y-4">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-rose-500/10 border border-rose-500/20 text-rose-500 text-[9px] font-900 tracking-[0.2em] uppercase">
                    <i data-lucide="flame" class="w-3.5 h-3.5"></i>
                    Viral Performance
                </div>
                <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>

            <a href="{{ route('storefront.products', ['sort' => 'trending']) }}"
                class="inline-flex items-center gap-3 h-12 px-6 rounded-2xl bg-surface-secondary border border-border-subtle text-text-muted hover:text-text-base hover:border-rose-500/30 transition-all font-900 text-[10px] uppercase tracking-widest group shadow-sm">
                Explore Trending
                <i data-lucide="chevron-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
            </a>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            @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 trending data currently available</p>
            </div>
            @endforelse
        </div>
    </div>
</section>