/* global React, Fn */
// ============================================================
// Testimonials — carrusel continuo (marquee) de comentarios de
// clientes, en la misma familia visual que el carrusel de logos
// pero más lento y con tarjetas elegantes del design system.
//   · Auto-scroll infinito, se pausa al pasar el cursor.
//   · Tarjetas claras (borde + sombra de marca), cita en display,
//     estrellas, avatar con iniciales y badge de categoría.
// ============================================================
const TST_ITEMS = [
  {
    category: "Importadora",
    quote: "A diferencia de las instituciones tradicionales, Meefi está especializado en software. Todo se hace en 1–2 minutos, sin filas ni papeleo.",
    author: "Patricia Chora", role: "CFO", company: "Paccocsa",
  },
  {
    category: "Ecommerce",
    quote: "Construir una marca con miles de clientes implica cambio constante. Meefi es la única parte de nuestro stack que va a nuestro ritmo.",
    author: "Montse Martinez", role: "CEO", company: "Suunart",
  },
  {
    category: "Manufactura",
    quote: "Pagamos a proveedores en Asia y Europa el mismo día, con el tipo de cambio a la vista antes de confirmar. La operación dejó de depender de horarios y llamadas.",
    author: "Daniel Robles", role: "Director de Finanzas", company: "GAC",
  },
  {
    category: "Agencia",
    quote: "Amamos la interfaz. Los permisos integrados permiten que nuestro contador haga pagos en un solo clic, con total trazabilidad.",
    author: "Raul Fong", role: "CEO", company: "Fongtek",
  },
];

function initials(name) {
  return name.split(" ").map((p) => p[0]).slice(0, 2).join("");
}

function TestimonialsSection() {
  // Cuadruplicamos la lista: el track anima a -50%, así la segunda mitad
  // (idéntica a la primera) entra justo cuando la primera sale → loop sin
  // huecos. Con 4×4 tarjetas la "unidad de loop" supera el ancho de
  // cualquier pantalla, evitando que quede espacio vacío en monitores anchos.
  const track = [...TST_ITEMS, ...TST_ITEMS, ...TST_ITEMS, ...TST_ITEMS];

  return (
    <section id="testimonials" className="tstm-section" data-screen-label="Testimonios">
      <div className="wrap tstm-head reveal">
        <span className="tstm-badge">
          <span className="tstm-badge-dot" aria-hidden="true" /> Clientes
        </span>
        <h2 className="tstm-headline">
          Construyas lo que construyas,{" "}
          <span className="tstm-twist">estás en el lugar correcto.</span>
        </h2>
        <div className="tstm-rating">
          <span className="tstm-stars" aria-hidden="true">★★★★★</span>
          <span><strong>4.9 / 5</strong> · +100 empresas activas<Fn n={6}/></span>
        </div>
      </div>

      <div className="tstm-rail">
        <div className="tstm-rail-inner">
          <div className="tstm-track">
            {track.map((t, i) => (
              <article className="tstm-card" key={i} aria-hidden={i >= TST_ITEMS.length ? "true" : undefined}>
                <span className="tstm-stars tstm-stars-sm" aria-hidden="true">★★★★★</span>
                <blockquote className="tstm-quote">{t.quote}</blockquote>
                <div className="tstm-foot">
                  <span className="tstm-avatar">{initials(t.author)}</span>
                  <span className="tstm-foot-meta">
                    <span className="tstm-name">{t.author}</span>
                    <span className="tstm-role">{t.role}, {t.company}</span>
                  </span>
                  <span className="tstm-cat">{t.category}</span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>

      <style>{TSTM_CSS}</style>
    </section>
  );
}

const TSTM_CSS = `
.tstm-section{ position:relative; overflow:hidden; color:#EAF0FB;
  background:
    radial-gradient(900px 600px at 18% 28%, rgba(5,48,206,.16), transparent 64%),
    radial-gradient(700px 500px at 86% 78%, rgba(90,116,236,.12), transparent 60%),
    var(--blue-950); }

.tstm-head{ margin-bottom:52px; text-align:center; }
.tstm-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 12px;
  font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:#B7CCFB;
  background:rgba(90,116,236,.10); border:1px solid rgba(140,160,246,.28);
  border-radius:9999px; margin-bottom:20px; }
.tstm-badge-dot{ width:6px; height:6px; border-radius:9999px; background:#8CA0F6;
  box-shadow:0 0 0 4px rgba(140,160,246,.16), 0 0 12px rgba(140,160,246,.7);
  animation:pulse-dot var(--pulse-cycle) var(--ease-smooth) infinite; }
.tstm-headline{ margin:0 auto; font-family:var(--font-display); font-weight:600;
  font-size:clamp(30px,3vw + 0.5rem,46px); line-height:1.08; letter-spacing:-.028em;
  color:#FFFFFF; text-wrap:balance; max-width:24ch; }
.tstm-twist{ background:linear-gradient(90deg,#8CA0F6 0%,#B7CCFB 50%,#8CA0F6 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.tstm-rating{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px;
  font-size:14px; color:rgba(234,240,251,.6); }
.tstm-rating strong{ color:#fff; font-weight:600; }
.tstm-stars{ color:#8CA0F6; letter-spacing:2px; font-size:13px; }

/* Rail / marquee — slower than the logo rail, pauses on hover */
.tstm-rail{ position:relative; width:100%; }
.tstm-rail-inner{ overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%); }
.tstm-track{ display:flex; align-items:stretch; width:max-content;
  animation:marquee 150s linear infinite; }

.tstm-card{ flex:0 0 auto; width:452px; margin:0 14px;
  display:flex; flex-direction:column; gap:22px;
  background:linear-gradient(165deg, rgba(20,50,125,.5), rgba(4,10,34,.55));
  border:1px solid rgba(140,160,246,.22); border-radius:16px;
  padding:32px 34px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 22px 55px -24px rgba(2,6,28,.8), 0 0 44px -12px rgba(90,116,236,.22); }
.tstm-stars-sm{ font-size:14px; }
.tstm-quote{ margin:0; flex:1; font-family:var(--font-display); font-weight:500;
  font-size:18px; line-height:1.55; letter-spacing:-.01em; color:#F4F7FE; text-wrap:pretty; }
.tstm-foot{ display:flex; align-items:center; gap:12px; padding-top:20px;
  border-top:1px solid rgba(140,160,246,.16); }
.tstm-avatar{ width:42px; height:42px; flex:0 0 42px; border-radius:9999px;
  display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:13px;
  color:#DCE7FD; background:linear-gradient(135deg, rgba(90,116,236,.55), rgba(5,48,206,.32));
  border:1px solid rgba(140,160,246,.3); }
.tstm-foot-meta{ display:flex; flex-direction:column; gap:2px; margin-right:auto; min-width:0; }
.tstm-name{ font-size:14px; font-weight:600; color:#fff; }
.tstm-role{ font-size:12px; color:rgba(234,240,251,.55); }
.tstm-cat{ font-size:11px; font-weight:500; color:#8CA0F6; background:rgba(90,116,236,.12);
  border:1px solid rgba(140,160,246,.22); padding:4px 10px; border-radius:9999px; white-space:nowrap; }

@media (max-width:560px){
  .tstm-card{ width:300px; padding:26px 24px; gap:16px; }
  .tstm-quote{ font-size:16px; }
}
@media (prefers-reduced-motion: reduce){
  .tstm-track{ animation:none; }
}
`;

window.TestimonialsSection = TestimonialsSection;