---
import Icon from "./Icon.astro";
import { empresa } from "../data/empresa";
---

<!-- ==================== SECCIÓN CTA (fondo rojo, medalla + headlines + testimonios) ==================== -->
<section class="relative overflow-hidden" style="background-color: rgba(228,32,40,0.9);">
  <div class="absolute inset-0 bg-stripes opacity-20"></div>
  <div class="container-x relative py-20 px-4 sm:px-8 lg:px-[130px] text-center">
    <!-- Icono medalla -->
    <div class="flex justify-center mb-6 text-white text-shadow-soft">
      <Icon name="medal" size={120} />
    </div>

    <!-- Headlines rotativos -->
    <div class="mb-8 min-h-[60px] flex items-center justify-center">
      <h3 id="cta-headline" class="font-display text-[30px] font-bold text-white text-shadow-soft transition-opacity duration-500">
        {empresa.headlinesCta[0]}
      </h3>
    </div>

    <!-- Testimonios rotativos -->
    <div class="max-w-3xl mx-auto min-h-[120px] flex items-center justify-center">
      <p id="cta-testimonio" class="text-white/95 italic text-lg leading-relaxed transition-opacity duration-500">
        "{empresa.testimonios[0]}"
      </p>
    </div>
  </div>
</section>

<script is:inline define:vars={{ hTexts: empresa.headlinesCta, tTexts: empresa.testimonios }}>
  const headlines = document.getElementById("cta-headline");
  const testimonios = document.getElementById("cta-testimonio");
  let idx = 0;

  function rotate() {
    idx = (idx + 1) % hTexts.length;
    if (headlines) {
      headlines.style.opacity = "0";
      setTimeout(() => {
        if (headlines) headlines.textContent = hTexts[idx];
        headlines.style.opacity = "1";
      }, 500);
    }
    if (testimonios) {
      testimonios.style.opacity = "0";
      setTimeout(() => {
        if (testimonios) testimonios.textContent = '"' + tTexts[idx] + '"';
        testimonios.style.opacity = "1";
      }, 500);
    }
  }

  if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
    setInterval(rotate, 7000);
  }
</script>