@php
$settings = $section->settings ?? [];
$title = $settings['title'] ?? 'Featured Masterpieces';
$subtitle = $settings['subtitle'] ?? 'Our most prestigious and high-performing digital assets.';
$limit = $settings['featured_count'] ?? 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'] ?? '64px';
$paddingBottom = $settings['padding_bottom'] ?? '64px';
$bgColor = $settings['bg_color'] ?? 'transparent';
$titleAlignment = $settings['title_alignment'] ?? 'center';

// Force source to featured for this specific section type
$products = \App\Modules\Product\Models\Product::with(['vendor', 'category'])
    ->published()
    ->visible()
    ->where('is_featured', true)
    ->latest()
    ->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

<section class="relative overflow-hidden"
    style="padding-top: {{ $paddingTop }}; padding-bottom: {{ $paddingBottom }}; background-color: {{ $bgColor }};"
    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-12 md:mb-16">
            <h2 class="reveal-item anim-{{ $animType }} text-3xl md:text-5xl font-display font-900 text-text-base mb-4 tracking-tight leading-tight uppercase"
                :class="{ 'active': intersected }"
                style="--anim-duration: {{ $animDuration }}; --anim-delay: {{ $animDelay }};">
                {{ $title }}
            </h2>
            @if($subtitle)
            <p class="reveal-item anim-{{ $animType }} text-text-muted/60 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>
            @endif
        </div>

        @if($products->isEmpty())
            <div class="text-center py-20 bg-white/5 rounded-3xl border border-dashed border-white/10">
                <p class="text-text-muted">No featured products found. Please mark products as featured in the admin panel.</p>
            </div>
        @else
            <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>
        @endif
    </div>
</section>