@php
$settings = $section->settings ?? [];
$title = $settings['title'] ?? 'Featured Products';
$subtitle = $settings['subtitle'] ?? 'Curated selection of our best performing items.';
$limit = $settings['limit'] ?? 8;
$columns = $settings['columns'] ?? 4;

// Animation Settings
$animType = $settings['anim_type'] ?? 'fade-in-up';
$animDuration = $settings['anim_duration'] ?? '0.6s';
$animDelay = $settings['anim_delay'] ?? '0s';
$stagger = $settings['anim_stagger'] ?? true;
$hoverAnim = $settings['hover_anim'] ?? 'lift';

$paddingTop = $settings['padding_top'] ?? '48px';
$paddingBottom = $settings['padding_bottom'] ?? '24px';
$bgColor = $settings['bg_color'] ?? 'transparent';
$titleAlignment = $settings['title_alignment'] ?? 'left'; // Default to left for products grid

// Mock products for preview
// Fetch products with correct scopes
$products = \App\Modules\Product\Models\Product::with(['vendor', 'category'])
    ->published()
    ->visible()
    ->when(($settings['source'] ?? 'latest') === 'latest', fn($q) => $q->latest())
    ->when(($settings['source'] ?? 'latest') === 'featured', fn($q) => $q->where('is_featured', true)->latest())
    ->when(($settings['source'] ?? 'latest') === 'trending', fn($q) => $q->where('is_trending', true)->latest())
    ->when(($settings['source'] ?? 'latest') === 'top_sale', fn($q) => $q->where('is_top_sale', true)->latest())
    ->when(($settings['source'] ?? 'latest') === 'premium', fn($q) => $q->where('is_premium', true)->latest())
    ->when($settings['category_id'] ?? null, fn($q, $id) => $q->where('category_id', $id))
    ->limit($limit)
    ->get();

$gridCols = [
'2' => 'grid-cols-1 sm:grid-cols-2',
'3' => 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
'4' => 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
'5' => 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5',
][$columns] ?? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4';
@endphp

@php
    $ptStyle = "padding-top: $paddingTop;";
    $pbStyle = "padding-bottom: $paddingBottom;";
    $bgStyle = $bgColor !== 'transparent' ? "background-color: $bgColor;" : '';
@endphp

<section class="relative border-b border-border-subtle overflow-hidden"
    style="{{ $ptStyle }} {{ $pbStyle }} {{ $bgStyle }}"
    id="section-{{ $section->id }}" x-data="{ intersected: false }" x-intersect.once="intersected = true">

    <div class="container relative z-10 px-6 mx-auto">
        <div class="flex flex-col items-{{ $titleAlignment === 'center' ? 'center' : ($titleAlignment === 'right' ? 'end' : 'start') }} text-{{ $titleAlignment }} {{ $titleAlignment === 'center' ? 'mx-auto' : ($titleAlignment === 'right' ? 'ml-auto' : 'mr-auto') }} max-w-4xl mb-10 md:mb-14">
            <h2 class="reveal-item anim-{{ $animType }} text-3xl md:text-4xl lg:text-5xl font-display font-800 text-text-base mb-4 tracking-tight leading-tight"
                :class="{ 'active': intersected }"
                style="--anim-duration: {{ $animDuration }}; --anim-delay: {{ $animDelay }};">
                {{ $title }}
            </h2>
            <p class="reveal-item anim-{{ $animType }} text-text-muted/80 max-w-2xl {{ $titleAlignment === 'center' ? 'mx-auto' : ($titleAlignment === 'right' ? 'ml-auto mr-0' : 'mr-auto ml-0') }} font-500 text-base md:text-lg leading-relaxed"
                :class="{ 'active': intersected }"
                style="--anim-duration: {{ $animDuration }}; --anim-delay: calc({{ $animDelay }} + 0.1s);">
                {{ $subtitle }}
            </p>
        </div>

        <div class="grid {{ $gridCols }} gap-8 lg:gap-10">
            @foreach ($products as $product)
            @php
            $itemDelay = $stagger ? (float)$animDelay + ($loop->index * 0.1) : $animDelay;
            $hoverClass = $hoverAnim !== 'none' ? 'hover-' . $hoverAnim : '';
            @endphp
            <div class="reveal-item anim-{{ $animType }} {{ $hoverClass }} transition-all duration-500 active:scale-[0.98]" :class="{ 'active': intersected }"
                style="--anim-duration: {{ $animDuration }}; --anim-delay: {{ $itemDelay }}s;">

                @include('pages.storefront._product-card', ['product' => $product])
            </div>
            @endforeach
        </div>
    </div>
</section>