/* global React */
const TESTIMONIOS = [
  {
    name: 'Florencia Beatriz Loto',
    text: '¡Me encantó! Me pareció súper útil tener estas herramientas tanto para la vida cotidiana como para lo laboral. Saber expresarse es muy importante, no solamente para que la otra persona te entienda, sino para poder darse a entender uno mismo. Lo voy a recomendar.',
  },
  {
    name: 'Marcela Morelo',
    text: 'Hola Mai, me gustó mucho el curso. Me sentí identificada en varias ocasiones. Me sirvió para poder observarme y reconocerme más. No quiero poner que lo terminé porque quiero volver a ver algunos videos. Gracias por utilizar un vocabulario que nos permite aplicar y conectar con lo real y cotidiano. Buena pedagogía.',
  },
  {
    name: 'Julieta Kennedy',
    text: 'Muy buen curso, súper útil y con muchísimas herramientas que podré utilizar tanto en el ámbito profesional como en el día a día. Mai es excelente comunicadora y los módulos son súper interactivos y fáciles de comprender. Sin dudas, voy a realizar más cursos de la academia.',
  },
  {
    name: 'Gastón Marón',
    text: 'Si recién empezás, este curso te brinda una base clara; si ya tenés conocimientos, te ayuda a profundizar; y si contás con experiencia, te invita a dar el siguiente paso. Felicitaciones a Mai y a todo el equipo por una propuesta inmersiva y auténtica, fiel al estilo que los distingue.',
  },
  {
    name: 'María Ugrina',
    text: 'Me encanta la claridad con la que explicás todos los temas, Mai, y cómo hacés énfasis en lo importante. Que vos te equivocás igual y seguís, que tenés tus truquitos y en vez de muletillas usás espacios o gestualizás con la cara. Sos humana y te sincerás en que el miedo no desaparece, pero se domina con la práctica. ¡Un 1000!',
  },
  {
    name: 'Rocío Orellana',
    text: 'Me encantó el curso. Mai logró que sea atractivo y fácil de hacer. Me sentí identificada en muchos ejemplos: ahora observo y escucho con mayor atención. Gracias a las herramientas que nos brindan, estoy mejorando mi manera de comunicarme. Definitivamente lo recomendaré.',
  },
];

function Stars() {
  return (
    <div className="acmp-test-stars" aria-label="5 estrellas">
      {Array.from({ length: 5 }).map((_, i) => (
        <svg key={i} width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.8 6.1 20.6l1.2-6.5L2.5 9.5l6.6-.9z"/>
        </svg>
      ))}
    </div>
  );
}

function TestimonialCard({ t }) {
  const initial = t.name.charAt(0);
  return (
    <article className="acmp-test-card">
      <Stars />
      <p className="acmp-test-text">{t.text}</p>
      <div className="acmp-test-who">
        <div className="acmp-test-avatar" aria-hidden="true">{initial}</div>
        <div className="acmp-test-name">{t.name}</div>
      </div>
    </article>
  );
}

function TestimonialVideo() {
  React.useEffect(() => {
    if (document.getElementById('vturb-loader-68ee7716')) return;
    const s = document.createElement('script');
    s.id = 'vturb-loader-68ee7716';
    s.src = 'https://scripts.converteai.net/0bf49cf9-bc76-4c5b-b454-b699ff3da4d2/players/68ee7716925aa03221935458/v4/player.js';
    s.async = true;
    document.head.appendChild(s);
  }, []);
  return (
    <div
      className="acmp-test-video"
      style={{ margin: '0 auto 40px', maxWidth: 400, width: '100%' }}
      dangerouslySetInnerHTML={{
        __html: '<vturb-smartplayer id="vid-68ee7716925aa03221935458" style="display:block;margin:0 auto;width:100%;max-width:400px;"></vturb-smartplayer>'
      }}
    />
  );
}

function Testimonial() {
  return (
    <section className="acmp-testimonial-wrap">
      <div className="acmp-test-head">
        <div className="eyebrow">RESEÑAS DE ALUMNOS</div>
        <h2 className="tt-commons" style={{ lineHeight: "1.1", letterSpacing: "-0.02em", fontSize: "34px", margin: 0 }}>
          Testimonios
        </h2>
      </div>
      <TestimonialVideo />
      <div className="acmp-test-grid">
        {TESTIMONIOS.map((t, i) => <TestimonialCard key={i} t={t} />)}
      </div>
    </section>
  );
}
Object.assign(window, { Testimonial });