@php
    $testimonials = $data['testimonials'] ?? collect();
@endphp

@if($testimonials->count())
<div class="site-section" x-data="{ current: 0, total: {{ $testimonials->count() }} }" x-init="setInterval(() => current = (current + 1) % total, 5000)">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12 reveal">
            <h2 class="section-title mx-auto">{{ $section->title ?? 'آراء عملائنا' }}</h2>
            @if($section->subtitle)
                <p class="mt-4 text-white/60 text-lg">{{ $section->subtitle }}</p>
            @endif
        </div>

        <div class="max-w-3xl mx-auto relative reveal">
            @foreach($testimonials as $testimonial)
                <div class="testimonial-card transition-all duration-500"
                     x-show="current === {{ $loop->index }}"
                     x-transition:enter="transition ease-out duration-500"
                     x-transition:enter-start="opacity-0 translate-y-4"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     x-transition:leave="transition ease-in duration-300"
                     x-transition:leave-start="opacity-100"
                     x-transition:leave-end="opacity-0">
                    <p class="text-white/80 text-lg leading-relaxed italic relative z-10">
                        {{ $testimonial->content }}
                    </p>

                    <div class="mt-6 flex items-center gap-3">
                        @if($testimonial->avatar)
                            <img src="{{ $testimonial->avatar->url }}"
                                 alt="{{ $testimonial->name }}"
                                 class="w-12 h-12 rounded-full object-cover border-2 border-[var(--site-accent)]">
                        @else
                            <div class="w-12 h-12 rounded-full bg-[var(--site-accent)]/20 flex items-center justify-center">
                                <span class="text-[var(--site-accent)] font-bold">{{ mb_substr($testimonial->name, 0, 1) }}</span>
                            </div>
                        @endif
                        <div>
                            <span class="block text-white font-medium">{{ $testimonial->name }}</span>
                            @if($testimonial->role)
                                <span class="block text-white/40 text-sm">{{ $testimonial->role }}</span>
                            @endif
                        </div>

                        {{-- Stars --}}
                        <div class="ms-auto flex gap-0.5">
                            @for($i = 1; $i <= 5; $i++)
                                <svg class="w-4 h-4 {{ $i <= $testimonial->rating ? 'text-amber-400' : 'text-white/20' }}" fill="currentColor" 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>
                </div>
            @endforeach

            {{-- Dots Navigation --}}
            <div class="flex items-center justify-center gap-2 mt-8">
                @foreach($testimonials as $testimonial)
                    <button @click="current = {{ $loop->index }}"
                            class="w-2.5 h-2.5 rounded-full transition-all duration-300"
                            :class="current === {{ $loop->index }} ? 'bg-[var(--site-accent)] w-6' : 'bg-white/20 hover:bg-white/40'"
                            aria-label="شهادة {{ $loop->iteration }}">
                    </button>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endif
