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

@if($testimonials->count())
<div class="site-section site-section--alt" 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-gray-500 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-gray-600 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)]/10 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-gray-900 font-medium">{{ $testimonial->name }}</span>
                            @if($testimonial->role)
                                <span class="block text-gray-400 text-sm">{{ $testimonial->role }}</span>
                            @endif
                        </div>

                        <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-gray-200' }}" 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

            <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-gray-300 hover:bg-gray-400'"
                            aria-label="شهادة {{ $loop->iteration }}">
                    </button>
                @endforeach
            </div>
        </div>
    </div>
</div>
@else
<div class="site-section site-section--alt">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="section-title mx-auto">{{ $section->title ?? 'آراء عملائنا' }}</h2>
        </div>
        <div class="max-w-3xl mx-auto">
            <div class="skeleton-card p-8 space-y-4">
                <div class="skeleton-block h-4 w-full"></div>
                <div class="skeleton-block h-4 w-3/4"></div>
                <div class="flex items-center gap-3 mt-6">
                    <div class="skeleton-block w-12 h-12 !rounded-full"></div>
                    <div class="space-y-2">
                        <div class="skeleton-block h-4 w-24"></div>
                        <div class="skeleton-block h-3 w-16"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="empty-state mt-4">
            <p class="text-sm">لم تُضف آراء عملاء بعد</p>
        </div>
    </div>
</div>
@endif
