/* global React */
const { useState: useStateMod } = React;

const MODULES = [
  { n: '01', title: '¿Qué dice mi comunicación no verbal?',
    bullets: [
      '¿Qué ve el resto de las personas cuando hablamos y cómo cambiarlo?',
      'Cómo volvernos conscientes de nuestro lenguaje corporal.',
      'Técnica Alexander para volver al cuerpo neutro.',
      'Técnica "Lucid Body" para romper con nuestros patrones. El poder de las manos.',
      'Ejercicios prácticos de auto-observación y cuerpo neutral para cambiar los patrones y malos hábitos de la comunicación no verbal.',
    ] },
  { n: '02', title: '¿Cómo usar la voz a mi favor?',
    bullets: [
      'Mi caja de herramientas: cómo usar la voz a nuestro favor.',
      'Animales de imitación: por qué hablamos como hablamos y cómo romper con el condicionamiento social y cultural de mi voz.',
      'Cualidades de los mejores oradores: cómo modificar tu timbre, duración, intensidad y tono.',
      'Rutina de entrenamiento antes de hablar y ejercicios prácticos para hablar con tu voz natural.',
      'Ejercicios para modular y romper con las muletillas.',
    ] },
  { n: '03', title: '¿Cómo traducir mis ideas en palabras que quieran ser escuchadas?',
    bullets: [
      '¿Improvisación o discurso armado?',
      'Storytelling: cómo ser el mejor contando historias.',
      'Cómo vender algo (¡hasta mis ideas!) sin que se den cuenta.',
      '¿Persuadir o convencer? Por qué nos enfocamos en lo equivocado a la hora de hablar.',
      'Cómo practicar la empatía, elocuencia y autenticidad para hablar.',
      'El poder del contexto: cómo tenerle respeto a las palabras.',
      'Comunicación no violenta.',
      '¿Qué quiere la gente de nuestros contenidos, discursos y charlas?',
    ] },
  { n: '04', title: 'Bonus Track',
    bullets: [
      'Acceso incluido a workshops con expertos de distintas temáticas para potenciar las verticalidades de la comunicación.',
      'Workshop de Storytelling: "Cómo captar la atención a través de buenas historias".',
      'Workshop "Cómo tener conversaciones difíciles" con la Lic. Lu Petrocco: técnicas de asertividad.',
      'Workshop "Cómo amigarte con tu voz" con la locutora Eugenia Quibel.',
      'Workshop "Marca personal".',
      'Workshop con Claudio Brusca sobre producción de streaming y TV.',
      'Workshop con la agencia Medialab.',
      'Preguntas frecuentes.',
    ] },
];

function ModulesSection() {
  const [open, setOpen] = useStateMod(0);
  return (
    <section className="acmp-modules-wrap">
      <div className="acmp-modules-head">
        <div className="eyebrow">CONTENIDO DEL CURSO</div>
        <h2 className="tt-commons" style={{ lineHeight: "1.1", letterSpacing: "-0.02em", fontSize: "34px" }}>
          4 módulos para dominar <span className="kw">el arte de hablar</span>
        </h2>
        <p className="desc" style={{ fontSize: "14px" }}>Acceso a clases en video · Ejercicios prácticos · Workshops con expertos invitados.</p>
      </div>
      <div className="acmp-modules-list">
        {MODULES.map((m, i) => (
          <button
            key={m.n}
            className={'acmp-module' + (i === open ? ' is-open' : '')}
            onClick={() => setOpen(i === open ? -1 : i)}
            type="button">
            <div className="acmp-module-row">
              <div className="acmp-module-n">{m.n}</div>
              <div className="acmp-module-title">{m.title}</div>
              <div className="acmp-module-meta">
                <span>{m.bullets.length} temas</span>
              </div>
              <div className="acmp-module-chev" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="6 9 12 15 18 9"/>
                </svg>
              </div>
            </div>
            {i === open ? (
              <div className="acmp-module-body">
                <ul className="acmp-module-bullets">
                  {m.bullets.map((b, j) => <li key={j}>{b}</li>)}
                </ul>
              </div>
            ) : null}
          </button>
        ))}
      </div>
    </section>
  );
}
Object.assign(window, { ModulesSection });