@php
$settings = $section->settings ?? [];
$title = $settings['title'] ?? 'What Our Users Say';
$subtitle = $settings['subtitle'] ?? 'Trusted by over 150,000 developers worldwide.';
$layout = $settings['layout'] ?? 'grid';
$items = $settings['items'] ?? [];

// 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;

$paddingTop = $settings['padding_top'] ?? '48px';
$paddingBottom = $settings['padding_bottom'] ?? '48px';
$bgColor = $settings['bg_color'] ?? 'transparent';
$titleAlignment = $settings['title_alignment'] ?? 'center';
@endphp

@php
    $ptStyle = "padding-top: $paddingTop;";
    $pbStyle = "padding-bottom: $paddingBottom;";
    $bgStyle = $bgColor !== 'transparent' ? "background-color: $bgColor;" : '';
@endphp

<section class="relative overflow-hidden"
    style="{{ $ptStyle }} {{ $pbStyle }} {{ $bgStyle }}"
    id="section-{{ $section->id }}" x-data="{ intersected: false }" x-intersect.once="intersected = true">
    
    {{-- Refined Background Effect --}}
    <div class="absolute left-0 bottom-0 w-[600px] h-[600px] bg-brand-500/[0.02] blur-[150px] rounded-full pointer-events-none"></div>

    <div class="container px-6 mx-auto relative z-10">
        <div class="text-{{ $titleAlignment }} {{ $titleAlignment === 'center' ? 'mx-auto' : ($titleAlignment === 'right' ? 'ml-auto' : 'mr-auto') }} max-w-3xl mb-16">
            <h2 class="reveal-item anim-{{ $animType }} text-3xl md:text-4xl lg:text-5xl font-display font-800 text-text-base mb-6 tracking-tight"
                :class="{ 'active': intersected }"
                style="--anim-duration: {{ $animDuration }}; --anim-delay: {{ $animDelay }};">
                {{ $title }}
            </h2>
            <p class="reveal-item anim-{{ $animType }} text-text-muted/80 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>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach ($items as $item)
            @php $itemDelay = $stagger ? (float)$animDelay + ($loop->index * 0.1) : $animDelay; @endphp
            <div class="reveal-item anim-{{ $animType }} group p-8 bg-surface-secondary/40 backdrop-blur-xl border border-border-subtle rounded-2xl relative hover:bg-surface-primary hover:border-brand-500/30 transition-all duration-500 shadow-sm active:scale-[0.98] flex flex-col justify-between h-full"
                :class="{ 'active': intersected }"
                style="--anim-duration: {{ $animDuration }}; --anim-delay: {{ $itemDelay }}s;">

                <div>
                    <div class="flex items-center gap-4 mb-8">
                        <div
                            class="w-12 h-12 rounded-xl overflow-hidden border border-border-subtle group-hover:scale-105 transition-transform duration-700 shadow-md bg-surface-primary p-0.5">
                            @if($item['avatar'] ?? false)
                            <img src="{{ $item['avatar'] }}" class="w-full h-full object-cover rounded-[0.5rem]">
                            @else
                            <div class="w-full h-full flex items-center justify-center text-brand-500 shadow-inner">
                                <i data-lucide="user" class="w-6 h-6 stroke-[2.5]"></i>
                            </div>
                            @endif
                        </div>
                        <div>
                            <div class="font-800 text-text-base tracking-tight text-[13px] group-hover:text-brand-500 transition-colors">{{ $item['name'] }}</div>
                            <div class="text-[10px] text-text-dim/60 font-600 mt-1 uppercase tracking-widest">{{ $item['role'] }}
                            </div>
                        </div>
                    </div>

                    <div class="relative">
                        <i data-lucide="quote" class="absolute -left-2 -top-2 w-8 h-8 text-brand-500/5 -rotate-12 transition-transform group-hover:rotate-0 duration-700"></i>
                        <p class="text-text-muted/80 text-sm md:text-base leading-relaxed italic relative z-10 font-500 transition-colors group-hover:text-text-base duration-500">"{{ $item['content'] }}"
                        </p>
                    </div>
                </div>

                {{-- Stars --}}
                <div class="flex gap-1 mt-8 pt-6 border-t border-border-subtle">
                    @for($i=0; $i<5; $i++) 
                        <i data-lucide="star" class="w-3.5 h-3.5 fill-brand-500/80 text-brand-500/80"></i>
                    @endfor
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>