{{-- Client voices / partner testimonials (SOW 1.15). --}}
<section class="section bg-surface-muted/60"
         x-data="{
             index: 0,
             total: {{ $testimonials->count() }},
             next() { this.index = (this.index + 1) % this.total },
             prev() { this.index = (this.index - 1 + this.total) % this.total },
         }">

    <div class="container-page">
        <x-section-heading align="center" :eyebrow="__('Client voices')"
                           :title="__('What our clients and partners say')" />

        <div class="relative mx-auto mt-8 max-w-3xl" data-reveal>
            @foreach ($testimonials as $i => $testimonial)
                <figure x-show="index === {{ $i }}" @if ($i > 0) x-cloak @endif
                        x-transition:enter="transition duration-400 ease-out"
                        x-transition:enter-start="opacity-0 translate-y-2"
                        x-transition:enter-end="opacity-100 translate-y-0"
                        class="rounded-2xl border border-border bg-surface p-8 text-center sm:p-10">

                    <x-icon name="quote" class="mx-auto size-8 text-primary-200" />

                    <blockquote class="mt-5 font-display text-xl leading-relaxed text-text">
                        {{ $testimonial->quote }}
                    </blockquote>

                    <figcaption class="mt-6 flex flex-col items-center gap-2">
                        @if ($testimonial->photo)
                            <img src="{{ thumb_url($testimonial->photo) }}" alt="" loading="lazy" decoding="async"
                                 class="size-14 rounded-full object-cover">
                        @endif

                        <p class="font-semibold text-text">{{ $testimonial->author_name }}</p>

                        @if ($attribution = $testimonial->attribution())
                            <p class="text-sm text-text-secondary">{{ $attribution }}</p>
                        @endif

                        @if ($testimonial->logo)
                            <img src="{{ image_url($testimonial->logo) }}" alt="" loading="lazy" decoding="async"
                                 class="mt-2 h-7 w-auto opacity-60">
                        @endif
                    </figcaption>
                </figure>
            @endforeach

            @if ($testimonials->count() > 1)
                <div class="mt-6 flex items-center justify-center gap-2">
                    @foreach ($testimonials as $i => $testimonial)
                        <button type="button" @click="index = {{ $i }}"
                                aria-label="{{ __('Show testimonial :n', ['n' => $i + 1]) }}"
                                :aria-current="index === {{ $i }}"
                                class="h-1.5 rounded-full transition-all duration-300"
                                :class="index === {{ $i }} ? 'w-8 bg-primary' : 'w-1.5 bg-border hover:bg-primary-300'"></button>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</section>