/* global React */
function LearningOutcomes() {
  const items = [
    '5 horas de duración divididas en videos cortos de 20 minutos máximo.',
    '4 módulos con más de 10 ejercicios prácticos con un antes y después.',
    '100% subtitulado con posibilidad de modificar velocidad de reproducción.',
    'Nueva edición en formato HD.',
    '100% online a tu ritmo, con posibilidad de repetir el curso las veces que quieras.',
    'Certificado de finalización del curso.',
    'Soporte ilimitado para consultas a nuestro email academia@maipistiner.com.',
    'Tu instructora: Mai Pistiner lleva más de 10 años trabajando en comunicación.',
    'Workshops gratuitos con expertos de distintas áreas.',
    'Ebook gratuito con ejercicios y herramientas adicionales.',
  ];
  const left = items.filter((_, i) => i % 2 === 0);
  const right = items.filter((_, i) => i % 2 === 1);
  const Bullet = ({ t }) => (
    <li>
      <span className="acmp-outcomes-check" aria-hidden="true">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <path d="M2.5 7.2 L5.5 10.2 L11.5 3.8" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </span>
      <span>{t}</span>
    </li>
  );
  return (
    <section className="acmp-outcomes">
      <div className="acmp-outcomes-wrap">
        <div className="acmp-outcomes-head">
          <div className="eyebrow">EDICIÓN 2026</div>
          <h2>¿Qué <span className="kw">incluye</span> este curso?</h2>
        </div>
        <div className="acmp-outcomes-grid">
          <ul className="acmp-outcomes-list">
            {left.map((t, i) => <Bullet key={i} t={t} />)}
          </ul>
          <div className="acmp-outcomes-media">
            <div className="acmp-outcomes-photo">
              <img src={window.__r('outcomesMai','outcomes-mai.avif')} alt="Mai Pistiner" />
            </div>
          </div>
          <ul className="acmp-outcomes-list">
            {right.map((t, i) => <Bullet key={i} t={t} />)}
          </ul>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { LearningOutcomes });