@props([
  'reviews' => [],
  'googleReviewsUrl' => '#',
])

@php
  // Swiper deshabilita el loop si no hay suficientes slides para el slidesPerView
  // máximo (3 en desktop). Duplicamos el set para que el período de repetición
  // quede > 3 y nunca se vea una reseña repetida dentro de la misma ventana visible.
  $slides = count($reviews) >= 6 ? $reviews : array_merge($reviews, $reviews);
@endphp

{{-- Migración fiel de Reviews.astro + ReviewsCarousel.tsx: slot para el heading,
     carrusel Swiper (swipe + autoplay + pausa offscreen vía reviews-carousel.js)
     con cards que muestran ícono de Google + estrellas dinámicas por rating.
     El botón a Google no está en el .astro/.tsx de referencia, pero se mantiene
     aquí como link-out marcado nofollow para no gastar crawl budget del bot. --}}
<section class="bg-surface py-12 lg:py-20">
  <div class="container">
    {{ $slot }}

    <div class="mt-12">
      <div class="swiper" data-reviews-swiper>
        <div class="swiper-wrapper">
          @foreach ($slides as $review)
            <div class="swiper-slide h-auto">
              <x-home.review-card
                :quote="$review['quote']"
                :initials="$review['initials']"
                :name="$review['name']"
                :meta="$review['meta']"
                :rating="$review['rating'] ?? 5"
              />
            </div>
          @endforeach
        </div>
      </div>
    </div>

    <div class="mt-8 md:mt-10 lg:mt-12 flex justify-center">
      <a
        href="{{ $googleReviewsUrl }}"
        target="_blank"
        rel="nofollow noopener noreferrer"
        class="text-fg inline-flex items-center gap-2 normal-case hover:underline underline-offset-4"
      >
        Check Out Our Reviews On Google
        <x-lucide-external-link class="size-4" />
      </a>
    </div>
  </div>
</section>