@php
$settings = $section->settings ?? [];
$title = $settings['title'] ?? 'Community Insights';
$subtitle = $settings['subtitle'] ?? 'Trusted by elite engineers and designers globally.';
$testimonials = $settings['testimonials'] ?? [];

if (empty($testimonials) || !is_array($testimonials)) {
    $testimonials = [
        [
            'name' => 'Alexandre Dubois', 'role' => 'Senior Tech Lead @ Vercel', 'avatar' => '',
            'content' => 'The absolute definitive marketplace for premium code. I\'ve deployed 4 major SaaS platforms using architectures sourced exclusively from here.',
            'rating' => 5
        ],
        [
            'name' => 'Sarah Jenkins', 'role' => 'Principal Product Designer', 'avatar' => '',
            'content' => 'Finally, a platform that understands exactly what modern creators need. The UI kits available are lightyears ahead of any other marketplace.',
            'rating' => 5
        ],
        [
            'name' => 'Marcus Chen', 'role' => 'Indie Hacker', 'avatar' => '',
            'content' => 'The vendor ecosystem is incredibly strict on quality control, meaning every asset I buy actually works out of the box.',
            'rating' => 5
        ]
    ];
}
@endphp

<section class="pb-24 md:pb-32 pt-12 md:pt-16 bg-bg-main relative overflow-hidden">
    {{-- Ambient Backgrounds --}}
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full bg-[radial-gradient(circle_at_50%_0%,rgba(var(--brand-rgb),0.12),transparent_60%)] pointer-events-none"></div>

    <div class="max-w-7xl mx-auto px-6 relative z-10">
        <div class="text-center max-w-3xl mx-auto mb-20 md:mb-24" x-data="{ intersected: false }" x-intersect.once="intersected = true">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-500/10 border border-brand-500/20 mb-6" :class="intersected ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'" style="transition: all 0.8s ease;">
                <span class="text-[9px] font-black text-brand-500 uppercase tracking-[0.3em]">Recognition</span>
            </div>
            <h2 class="text-3xl md:text-5xl font-display font-900 text-white uppercase tracking-tight mb-6" :class="intersected ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'" style="transition: all 1s ease 0.1s;">
                {{ $title }}
            </h2>
            <p class="text-sm md:text-base text-white/40 font-medium uppercase tracking-widest max-w-xl mx-auto leading-relaxed" :class="intersected ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'" style="transition: all 1s ease 0.2s;">
                {{ $subtitle }}
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
            @foreach($testimonials as $review)
                <div class="group relative bg-white/[0.03] border border-white/5 rounded-[2.5rem] p-7 md:p-8 flex flex-col h-full transition-all duration-500 hover:bg-white/[0.05] hover:border-brand-500/20 hover:-translate-y-2">
                    {{-- Rating Stars --}}
                    <div class="flex gap-1 mb-6">
                        @for($i = 0; $i < ($review['rating'] ?? 5); $i++)
                            <svg class="w-3.5 h-3.5 text-brand-500 fill-brand-500" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                            </svg>
                        @endfor
                    </div>

                    <div class="relative mb-8 flex-1">
                        <p class="text-white/70 text-sm md:text-base leading-relaxed font-medium italic relative z-10">
                            "{{ $review['content'] ?? '' }}"
                        </p>
                    </div>

                    <div class="flex items-center gap-3.5 pt-6 border-t border-white/5 mt-auto">
                        <div class="w-10 h-10 rounded-xl overflow-hidden border border-white/10 p-0.5 bg-white/5">
                            @php
                                $avatarUrl = !empty($review['avatar']) ? $review['avatar'] : 'https://ui-avatars.com/api/?name=' . urlencode($review['name'] ?? 'User') . '&background=020205&color=fff';
                            @endphp
                            <img src="{{ $avatarUrl }}" 
                                 alt="{{ $review['name'] ?? 'User' }}" 
                                 class="w-full h-full rounded-[8px] object-cover opacity-80 group-hover:opacity-100 transition-opacity">
                        </div>
                        <div>
                            <div class="text-white font-bold text-[12px] uppercase tracking-tight">{{ $review['name'] ?? 'Anonymous' }}</div>
                            <div class="text-brand-500/60 text-[8px] font-bold uppercase tracking-widest mt-1">{{ $review['role'] ?? 'Verified Customer' }}</div>
                        </div>
                        <div class="ml-auto opacity-[0.03] group-hover:opacity-[0.08] transition-opacity">
                            <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11H12.017V9C12.017 7.34315 13.3601 6 15.017 6H19.017C20.6739 6 22.017 7.34315 22.017 9V15C22.017 16.6569 20.6739 18 19.017 18H17.017L17.017 21H14.017ZM3.017 21L3.017 18C3.017 16.8954 3.91243 16 5.017 16H8.017C8.56928 16 9.017 15.5523 9.017 15V9C9.017 8.44772 8.56928 8 8.017 8H4.017C3.46472 8 3.017 8.44772 3.017 9V11H1.017V9C1.017 7.34315 2.36015 6 4.017 6H8.017C9.67386 6 11.017 7.34315 11.017 9V15C11.017 16.6569 9.67386 18 8.017 18H6.017L6.017 21H3.017Z" />
                            </svg>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>