@php
    $service = app(\App\Services\TestimonialService::class);
    $testimonials = $service->published();
    $aggregate = $service->aggregateRating($testimonials);
@endphp

@if ($testimonials->isNotEmpty())
    <x-section data-section="testimonials" tone="light" class="relative isolate overflow-hidden">
        {{-- Overscanned photo with a strong scrim: clear parallax while the
             testimonials keep AA contrast. --}}
        <div data-parallax data-parallax-strength="8" class="absolute inset-0 -z-10" aria-hidden="true">
            <x-image
                :src="asset('images/real/galeria/obras/9.jpg')"
                alt=""
                :width="1920"
                :height="1280"
                wrapper-class="h-full w-full"
                img-class="h-full w-full scale-125 object-cover"
            />
            <div class="absolute inset-0 bg-brand-50"></div>
        </div>

        <x-container>
            <x-section-heading
                eyebrow="Testimonios"
                title="Lo que dicen constructoras y arquitectos"
                subtitle="Obras entregadas con trazabilidad, factura y acompañamiento técnico."
                align="center"
                data-animate
                data-animate-type="up"
            />

            <div class="mt-12 flex flex-wrap justify-center gap-6" data-animate-group>
                @foreach ($testimonials as $testimonial)
                    <x-card class="flex w-full flex-col gap-4 sm:w-[calc(50%-0.75rem)] lg:w-[calc(33.333%-1rem)]">
                        @if ($testimonial->rating)
                            <div class="flex items-center gap-1" role="img"
                                 aria-label="{{ $testimonial->rating }} de 5 estrellas">
                                @for ($star = 1; $star <= 5; $star++)
                                    <x-icon name="star" :size="16"
                                            class="{{ $star <= $testimonial->rating ? 'text-ochre-text' : 'text-on-surface-muted/40' }}" />
                                @endfor
                            </div>
                        @endif

                        <blockquote class="font-sans text-body leading-relaxed text-on-surface-muted">
                            “{{ $testimonial->quote }}”
                        </blockquote>

                        <div class="mt-auto flex items-center gap-3 border-t border-line pt-4">
                            @if ($testimonial->logo_url)
                                <img src="{{ $testimonial->logo_url }}" alt="{{ $testimonial->company }}"
                                     width="48" height="48" loading="lazy"
                                     class="h-10 w-auto object-contain">
                            @else
                                <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-none bg-surface-hover font-mono text-sm text-on-surface"
                                      aria-hidden="true">{{ $testimonial->initials }}</span>
                            @endif

                            <div>
                        <p class="font-sans text-base font-medium text-on-surface">{{ $testimonial->name }}</p>
                        <p class="font-sans text-base text-on-surface-muted">
                                    {{ $testimonial->role }}@if ($testimonial->role && $testimonial->company) · @endif{{ $testimonial->company }}
                                </p>
                            </div>
                        </div>
                    </x-card>
                @endforeach
            </div>
        </x-container>
    </x-section>

    @if ($aggregate)
        <x-json-ld type="testimonials" :data="['testimonials' => $testimonials, 'aggregate' => $aggregate]" />
    @endif
@endif