@php
    $settings = $section->settings ?? [];
    $title = $settings['title'] ?? 'Global Recognition';
    $subtitle = $settings['subtitle'] ?? 'Thousands of independent architects rely on our matrix for their daily operations.';
    
    $stats = [
        ['label' => 'Total Downloads', 'value' => '942k+'],
        ['label' => 'Verified Architects', 'value' => '25k+'],
        ['label' => 'Expert Nodes', 'value' => '1.2k+'],
        ['label' => 'Success Rate', 'value' => '99.9%'],
    ];
@endphp

<section class="py-24 bg-[#0B0F19] relative overflow-hidden">
    <div class="container mx-auto px-6">
        <div class="grid lg:grid-cols-2 gap-20 items-center">
            <div class="space-y-8">
                <div class="inline-flex items-center gap-2 px-3 py-1 bg-brand-500/10 border border-brand-500/20 rounded-full">
                    <i data-lucide="users" class="w-3.5 h-3.5 text-brand-400"></i>
                    <span class="text-[9px] font-black text-brand-400 uppercase tracking-[0.2em]">Network Scale</span>
                </div>
                <h2 class="text-3xl md:text-5xl font-black text-white uppercase tracking-tight leading-tight">
                    Trusted by the Next Generation of <span class="text-brand-400 text-gradient-purple">Digital Builders</span>.
                </h2>
                <p class="text-slate-500 font-medium leading-relaxed max-w-xl">{{ $subtitle }}</p>
                
                <div class="grid grid-cols-2 gap-8 pt-4">
                    @foreach($stats as $s)
                        <div class="space-y-1">
                            <div class="text-3xl font-black text-white tracking-tighter">{{ $s['value'] }}</div>
                            <div class="text-[10px] text-slate-500 font-black uppercase tracking-widest">{{ $s['label'] }}</div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="relative">
                <div class="p-1 overflow-hidden rounded-[2.5rem] bg-gradient-to-br from-brand-500/50 to-emerald-500/50">
                    <div class="bg-[#111827] rounded-[2.3rem] p-10 space-y-8">
                        <div class="flex items-center gap-4">
                            <img src="https://i.pravatar.cc/100?u=ceo" class="w-16 h-16 rounded-2xl border-2 border-brand-500/50 p-0.5">
                            <div>
                                <div class="text-lg font-black text-white">Alex Volkov</div>
                                <div class="text-[10px] text-brand-400 font-black uppercase tracking-widest">Lead Architect, CyberDyne</div>
                            </div>
                        </div>
                        <i data-lucide="quote" class="w-10 h-10 text-white/5 opacity-50 absolute top-10 right-10"></i>
                        <p class="text-xl text-slate-300 font-medium leading-relaxed italic">
                            "The E-Commerce Digital theme didn't just redesign our storefront; it completely transformed our conversion protocol. High-performance design at its best."
                        </p>
                        <div class="flex items-center gap-1 text-yellow-500">
                            @for($i=0;$i<5;$i++) <i data-lucide="star" class="w-4 h-4 fill-current"></i> @endfor
                        </div>
                    </div>
                </div>
                {{-- Decorative Glow --}}
                <div class="absolute -z-10 -bottom-10 -right-10 w-64 h-64 bg-brand-500/20 blur-[100px] rounded-full"></div>
            </div>
        </div>
    </div>
</section>