@php
$title = $section->settings['title'] ?? 'Elite Consensus';
$subtitle = $section->settings['subtitle'] ?? 'Trusted by 10k+ senior engineers and premium agencies.';
$reviewsInput = $section->settings['reviews'] ?? '';

$reviews = is_string($reviewsInput) ? json_decode($reviewsInput, true) : $reviewsInput;

if (empty($reviews) || !is_array($reviews)) {
    $reviews = [
        ['name' => 'Alexandre Dubois', 'role' => 'Senior Tech Lead @ Vercel', 'avatar' => '', 'text' => 'Deploying architectures sourced exclusively from this marketplace. Unrivaled quality control.', 'rating' => 5],
        ['name' => 'Sarah Jenkins', 'role' => 'Principal Product Designer', 'avatar' => '', 'text' => 'The UI kits and Framer templates available are lightyears ahead of any other marketplace.', 'rating' => 5],
        ['name' => 'Marcus Chen', 'role' => 'Indie Hacker', 'avatar' => '', 'text' => 'Every asset I buy actually works out of the box. Essential resource for my stack.', 'rating' => 5],
    ];
}
@endphp

<section class="py-16 md:py-20 bg-[#050816] relative overflow-hidden mb-0!" id="section-{{ $section->id }}">
    <div class="absolute right-0 top-0 w-[500px] h-[500px] bg-brand-500/5 blur-[120px] rounded-full pointer-events-none opacity-40"></div>

    <div class="max-w-7xl mx-auto px-6 relative z-10">
        <div class="text-center max-w-4xl mx-auto mb-12 flex flex-col items-center">
            <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/05 border border-white/10 text-brand-400 text-[10px] font-black tracking-[0.2em] uppercase mb-6">
                <i data-lucide="award" class="w-3.5 h-3.5"></i>
                Verified Social Proof
            </div>
            <h2 class="text-4xl md:text-5xl lg:text-7xl font-display font-black text-white tracking-tighter mb-6 leading-[0.95]">{{ $title }}</h2>
            <p class="text-lg md:text-xl text-white/40 font-bold uppercase tracking-widest max-w-3xl mx-auto">{{ $subtitle }}</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
            @foreach($reviews as $review)
                <div class="bg-white/[0.02] backdrop-blur-3xl border border-white/05 rounded-[3rem] p-10 hover:border-brand-500/30 transition-all duration-700 shadow-2xl group flex flex-col h-full relative">
                    <i data-lucide="quote" class="absolute top-10 right-10 w-20 h-20 text-brand-500/5 group-hover:text-brand-500/10 transition-all duration-700"></i>

                    <div class="flex items-center gap-1.5 mb-8">
                        @for($i=0; $i<5; $i++)
                            <i data-lucide="star" class="w-4 h-4 text-brand-500 fill-brand-500 shadow-[0_0_15px_rgba(var(--primary-rgb),0.3)]"></i>
                        @endfor
                    </div>

                    <p class="text-white/60 font-bold leading-relaxed mb-10 relative z-10 text-[16px] tracking-tight italic flex-1">
                        "{{ $review['text'] }}"
                    </p>

                    <div class="flex items-center gap-6 mt-auto pt-8 border-t border-white/05">
                        <div class="w-14 h-14 rounded-2xl overflow-hidden border border-white/10 p-1 group-hover:scale-110 transition-transform duration-700">
                            <img src="{{ $review['avatar'] ?: 'https://ui-avatars.com/api/?name=' . urlencode($review['name'] ?? 'User') . '&background=0a0b1e&color=fff' }}" 
                                 class="w-full h-full rounded-[14px] object-cover">
                        </div>
                        <div>
                            <div class="text-white font-black text-[14px] tracking-tight uppercase group-hover:text-brand-500 transition-colors">{{ $review['name'] ?? 'Anonymous' }}</div>
                            <div class="text-brand-500 text-[9px] font-black uppercase tracking-[0.2em] mt-1">{{ $review['role'] ?? 'Customer' }}</div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>