@php
    $testimonials = $data['testimonials'] ?? collect();
    $layout = $section->getSetting('layout', 'carousel');
    $showRating = $section->getSetting('show_rating', true);
    $autoRotate = $section->getSetting('auto_rotate', true);
    $rotateSpeed = $section->getSetting('rotate_speed', 5000);
@endphp

@if($testimonials->count())
<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 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>

        @if($layout === 'grid')
            {{-- Grid Layout --}}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($testimonials as $testimonial)
                    <div class="site-card p-6 reveal reveal--delay-{{ ($loop->index % 4) + 1 }}">
                        @if($showRating)
                            <div class="flex gap-0.5 mb-3">
                                @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>
                        @endif
                        <p class="text-gray-600 leading-relaxed line-clamp-4">{{ $testimonial->content }}</p>
                        <div class="mt-4 pt-4 border-t border-gray-100 flex items-center gap-3">
                            @if($testimonial->avatar)
                                <img src="{{ $testimonial->avatar->url }}" alt="{{ $testimonial->name }}" class="w-10 h-10 rounded-full object-cover border-2 border-[var(--site-accent)]">
                            @else
                                <div class="w-10 h-10 rounded-full bg-[var(--site-accent)]/10 flex items-center justify-center">
                                    <span class="text-[var(--site-accent)] font-bold text-sm">{{ mb_substr($testimonial->name, 0, 1) }}</span>
                                </div>
                            @endif
                            <div>
                                <span class="block text-gray-900 font-medium text-sm">{{ $testimonial->name }}</span>
                                @if($testimonial->role)
                                    <span class="block text-gray-400 text-xs">{{ $testimonial->role }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

        @elseif($layout === 'wall_of_love')
            {{-- Masonry Wall --}}
            <div class="columns-1 md:columns-2 lg:columns-3 gap-4 space-y-4">
                @foreach($testimonials as $testimonial)
                    <div class="break-inside-avoid site-card p-5 reveal reveal--delay-{{ ($loop->index % 4) + 1 }}">
                        <p class="text-gray-600 leading-relaxed text-sm">{{ $testimonial->content }}</p>
                        <div class="mt-3 flex items-center gap-2">
                            @if($testimonial->avatar)
                                <img src="{{ $testimonial->avatar->url }}" alt="{{ $testimonial->name }}" class="w-8 h-8 rounded-full object-cover">
                            @else
                                <div class="w-8 h-8 rounded-full bg-[var(--site-accent)]/10 flex items-center justify-center">
                                    <span class="text-[var(--site-accent)] font-bold text-xs">{{ mb_substr($testimonial->name, 0, 1) }}</span>
                                </div>
                            @endif
                            <div>
                                <span class="text-gray-900 font-medium text-xs">{{ $testimonial->name }}</span>
                                @if($testimonial->role)
                                    <span class="text-gray-400 text-xs ms-1">{{ $testimonial->role }}</span>
                                @endif
                            </div>
                            @if($showRating)
                                <div class="ms-auto flex gap-0.5">
                                    @for($i = 1; $i <= 5; $i++)
                                        <svg class="w-3 h-3 {{ $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>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>

        @elseif($layout === 'featured_quote')
            {{-- Featured + Small --}}
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 reveal">
                @if($testimonials->first())
                    @php $featured = $testimonials->first(); @endphp
                    <div class="site-card p-8 flex flex-col justify-center">
                        <svg class="w-10 h-10 text-[var(--site-accent)]/30 mb-4" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10H14.017zM0 21v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10H0z"/>
                        </svg>
                        <p class="text-xl text-gray-800 leading-relaxed font-medium">{{ $featured->content }}</p>
                        <div class="mt-6 flex items-center gap-3">
                            @if($featured->avatar)
                                <img src="{{ $featured->avatar->url }}" alt="{{ $featured->name }}" class="w-14 h-14 rounded-full object-cover border-3 border-[var(--site-accent)]">
                            @else
                                <div class="w-14 h-14 rounded-full bg-[var(--site-accent)]/10 flex items-center justify-center">
                                    <span class="text-[var(--site-accent)] font-bold text-lg">{{ mb_substr($featured->name, 0, 1) }}</span>
                                </div>
                            @endif
                            <div>
                                <span class="block text-gray-900 font-bold">{{ $featured->name }}</span>
                                @if($featured->role)
                                    <span class="block text-[var(--site-accent)] text-sm">{{ $featured->role }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif
                <div class="space-y-4">
                    @foreach($testimonials->skip(1)->take(4) as $testimonial)
                        <div class="site-card p-4 flex items-start gap-3">
                            @if($testimonial->avatar)
                                <img src="{{ $testimonial->avatar->url }}" alt="{{ $testimonial->name }}" class="w-9 h-9 rounded-full object-cover shrink-0">
                            @else
                                <div class="w-9 h-9 rounded-full bg-[var(--site-accent)]/10 flex items-center justify-center shrink-0">
                                    <span class="text-[var(--site-accent)] font-bold text-xs">{{ mb_substr($testimonial->name, 0, 1) }}</span>
                                </div>
                            @endif
                            <div class="flex-1 min-w-0">
                                <p class="text-gray-600 text-sm line-clamp-2">{{ $testimonial->content }}</p>
                                <div class="mt-1.5 flex items-center gap-2">
                                    <span class="text-gray-900 font-medium text-xs">{{ $testimonial->name }}</span>
                                    @if($showRating)
                                        <div class="flex gap-0.5">
                                            @for($i = 1; $i <= 5; $i++)
                                                <svg class="w-3 h-3 {{ $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>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

        @else
            {{-- Carousel (default) --}}
            <div class="max-w-3xl mx-auto relative reveal"
                 x-data="{ current: 0, total: {{ $testimonials->count() }} }"
                 @if($autoRotate) x-init="setInterval(() => current = (current + 1) % total, {{ $rotateSpeed }})" @endif>
                @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">
                        @if($testimonial->video_url)
                            <div class="relative aspect-video rounded-lg overflow-hidden mb-4">
                                @php $embedUrl = function_exists('video_embed_url') ? video_embed_url($testimonial->video_url) : null; @endphp
                                @if($embedUrl)
                                    <iframe src="{{ $embedUrl }}" class="absolute inset-0 w-full h-full" frameborder="0" allowfullscreen loading="lazy"></iframe>
                                @endif
                            </div>
                        @endif

                        <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>
                            @if($showRating)
                                <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>
                            @endif
                        </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>
        @endif
    </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
