$settings = $section->settings ?? [];
$mode = $settings['mode'] ?? 'dynamic';
$title = $settings['title'] ?? null;
$subtitle = $settings['subtitle'] ?? null;

if ($mode === 'dynamic') {
    $totalUsers = \App\Models\User::count();
    $totalProducts = \App\Modules\Product\Models\Product::published()->count();
    $totalDownloads = \Illuminate\Support\Facades\DB::table('order_items')->count(); 
    $totalVendors = \App\Modules\Vendor\Models\VendorProfile::where('status', 'approved')->count();
    
    $formatStat = function($num) {
        if ($num >= 1000000) return round($num / 1000000, 1) . 'M+';
        if ($num >= 1000) return round($num / 1000, 1) . 'K+';
        return $num;
    };
    
    $stats = [
        ['label' => 'Active Users', 'value' => $formatStat($totalUsers), 'icon' => 'users', 'color' => 'from-blue-400 to-indigo-600', 'glow' => 'rgba(99, 102, 241, 0.15)'],
        ['label' => 'Total Sales', 'value' => $formatStat($totalDownloads), 'icon' => 'trending-up', 'color' => 'from-emerald-400 to-teal-600', 'glow' => 'rgba(16, 185, 129, 0.15)'],
        ['label' => 'Premium Assets', 'value' => $formatStat($totalProducts), 'icon' => 'layers', 'color' => 'from-purple-400 to-fuchsia-600', 'glow' => 'rgba(168, 85, 247, 0.15)'],
        ['label' => 'Elite Authors', 'value' => $formatStat($totalVendors), 'icon' => 'award', 'color' => 'from-orange-400 to-red-600', 'glow' => 'rgba(249, 115, 22, 0.15)'],
    ];
} else {
    // Check if new array-based stats exist
    if (isset($settings['stats']) && is_array($settings['stats'])) {
        $stats = $settings['stats'];
    } else {
        // Fallback to legacy keys
        $stats = [
            ['label' => $settings['stat1_label'] ?? 'Creators', 'value' => $settings['stat1_val'] ?? '10K+', 'icon' => $settings['stat1_icon'] ?? 'users', 'color' => 'from-blue-400 to-indigo-600', 'glow' => 'rgba(99,102,241,0.15)'],
            ['label' => $settings['stat2_label'] ?? 'Downloads', 'value' => $settings['stat2_val'] ?? '1M+', 'icon' => $settings['stat2_icon'] ?? 'download-cloud', 'color' => 'from-emerald-400 to-teal-600', 'glow' => 'rgba(16,185,129,0.15)'],
            ['label' => $settings['stat3_label'] ?? 'Assets', 'value' => $settings['stat3_val'] ?? '50K+', 'icon' => $settings['stat3_icon'] ?? 'layers', 'color' => 'from-purple-400 to-fuchsia-600', 'glow' => 'rgba(168,85,247,0.15)'],
            ['label' => $settings['stat4_label'] ?? 'Vendors', 'value' => $settings['stat4_val'] ?? '5K+', 'icon' => $settings['stat4_icon'] ?? 'users', 'color' => 'from-orange-400 to-red-600', 'glow' => 'rgba(249,115,22,0.15)'],
        ];
    }
}

$pt = $settings['padding_top'] ?? '80px';
$pb = $settings['padding_bottom'] ?? '80px';
$bg = $settings['bg_color'] ?? 'transparent';
@endphp

$ptStyle = "padding-top: $pt;";
$pbStyle = "padding-bottom: $pb;";
$bgStyle = $bg !== 'transparent' ? "background-color: $bg;" : '';
@endphp

<section class="relative z-0 overflow-hidden"
    style="{{ $ptStyle }} {{ $pbStyle }} {{ $bgStyle }}"
    id="section-{{ $section->id }}" x-data="{ intersected: false }" x-intersect.once="intersected = true">
    
    {{-- Ambient Aesthetic Glows --}}
    <div class="absolute top-0 left-1/4 w-[600px] h-[600px] bg-brand-500/[0.03] blur-[150px] rounded-full pointer-events-none"></div>
    <div class="absolute bottom-0 right-1/4 w-[600px] h-[600px] bg-indigo-500/[0.03] blur-[150px] rounded-full pointer-events-none"></div>

    <div class="max-w-7xl mx-auto px-6 lg:px-8 relative z-10">
        @if($title || $subtitle)
        <div class="text-center mb-16 reveal-item anim-fade-in-up" :class="{ 'active': intersected }">
            @if($title)
            <h2 class="text-3xl md:text-5xl font-display font-900 text-text-base mb-6 tracking-tight">{{ $title }}</h2>
            @endif
            @if($subtitle)
            <p class="text-text-muted/80 text-lg max-w-2xl mx-auto font-500">{{ $subtitle }}</p>
            @endif
        </div>
        @endif

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
            @foreach($stats as $index => $stat)
                <div class="relative group p-8 pb-10 rounded-[2rem] bg-surface-primary/40 dark:bg-surface-secondary/30 backdrop-blur-3xl border border-border-subtle/50 dark:border-white/5 hover:border-brand-500/30 transition-all duration-700 hover:shadow-[0_30px_80px_-15px_rgba(0,0,0,0.08)] dark:hover:shadow-[0_30px_80px_-15px_rgba(0,0,0,0.5)] overflow-hidden active:scale-[0.98] reveal-item anim-fade-in-up"
                     :class="{ 'active': intersected }"
                     style="--anim-duration: 0.8s; --anim-delay: {{ $index * 0.15 }}s;">
                    
                    {{-- Interactive gradient on hover --}}
                    <div class="absolute inset-0 bg-gradient-to-br {{ $stat['color'] }} opacity-0 group-hover:opacity-[0.04] dark:group-hover:opacity-[0.03] transition-opacity duration-700"></div>

                    <div class="relative z-10 flex flex-col items-center text-center">
                        {{-- Icon (Clean, No Background, Larger) --}}
                        <div class="relative mb-7">
                            {{-- Glow behind icon --}}
                            <div class="absolute inset-0 blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-700 rounded-full" 
                                 style="background: {{ $stat['glow'] }}; transform: scale(3);"></div>
                            
                            <i :data-lucide="'{{ $stat['icon'] ?? 'circle' }}'" 
                                class="relative z-10 w-10 h-10 text-brand-500/70 group-hover:text-brand-500 group-hover:scale-110 group-hover:-translate-y-1 transition-all duration-700 drop-shadow-[0_0_15px_rgba(var(--primary-rgb),0.3)]">
                            </i>
                        </div>

                        {{-- Value --}}
                        <div class="text-5xl lg:text-6xl font-display font-900 text-text-base dark:text-white mb-3 tracking-tighter leading-none group-hover:scale-105 transition-transform duration-700">
                            {{ $stat['value'] }}
                        </div>

                        {{-- Label --}}
                        <div class="flex items-center gap-3">
                            <div class="h-px w-5 bg-gradient-to-r from-transparent to-border-subtle/40 dark:to-white/10"></div>
                            <span class="text-[10px] font-900 uppercase tracking-[0.25em] text-text-dim group-hover:text-text-base dark:group-hover:text-white transition-colors duration-500 whitespace-nowrap">
                                {{ $stat['label'] }}
                            </span>
                            <div class="h-px w-5 bg-gradient-to-l from-transparent to-border-subtle/40 dark:to-white/10"></div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>