/* global React */
const TESTIMONIOS = [
  {
    name: 'Marcela Gastaldi',
    text: 'Me gustó muchísimo el curso, muy bien explicado, con palabras sencillas y con todas las herramientas necesarias para aplicar en cada desafío que se presente a la hora de utilizar las técnicas mostradas. ¡Gracias!',
  },
  {
    name: 'Lucía Daiana Alegre',
    text: 'Excelente, me siento segura y con muchas herramientas para lograr mi objetivo que es crecer profesionalmente a través de la comunicación. Destaco que el formato de los módulos tiene una optimización del tiempo inmejorable. ¡Gracias!',
  },
  {
    name: 'Bárbara Rivarola',
    text: 'Sí, me encantó. Dan información de mucho valor, ahora queda ponerlo en práctica y siempre seguir actualizándonos. Gracias Mai por compartir tus conocimientos. ¡Lo súper recomiendo!',
  },
  {
    name: 'Tomás Fonseca',
    text: 'Pude aplicar muchas de las tácticas que se explicaron en los primeros módulos y el impacto en la forma de generar contenido y cómo reaccionó la gente fue increíble. Se brindó información y herramientas muy útiles; puedo dar fe de que usándolas se logran grandes resultados, pero lleva tiempo.',
  },
  {
    name: 'Agustina Silva',
    text: 'Llevo ya 3 cursos realizados en la Academia y sin dudas este ha sido uno de los más ricos en cuanto a información sobre cómo funcionan las redes y qué tener en cuenta en cada una de ellas. Me ha motivado muchísimo. Mai, una genia como siempre: súper clara y didáctica, es realmente agradable escucharla y aprender de ella.',
  },
  {
    name: 'Gustavo Aragón',
    text: 'Estoy muy feliz de haber completado el curso en redes. Me llevo muchísimas herramientas de gran valor que me actualizaron con las últimas tendencias en redes sociales. No solo aprendí mucho sino que también disfruté de la excelente comunicación de Mai, que se destaca por su sencillez y cercanía.',
  },
  {
    name: 'Leonardo Rodríguez',
    text: '¡Súper recomendable! Hay un montón de cosas que no estaba teniendo en cuenta en esta búsqueda de generar una audiencia y este curso me ayudó mucho a poder tener una visión más clara de lo que necesito.',
  },
  {
    name: 'Lucía Primo Brochiero',
    text: 'Excelente curso. Me llevo muchísima información valiosa y de calidad. Lo recomendaré en mis redes y seguiré estudiando en la academia. Muchas gracias.',
  },
  {
    name: 'Carla Riganti',
    text: '¡Muy buen curso! Cumplió con todas mis expectativas. Me voy súper motivada y con mucho contenido para seguir creciendo y aplicando en mi emprendimiento. ¡Muchas gracias!',
  },
];

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