/* global React */

const SOCIAL_ICONS = {
  instagram: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="18" height="18" rx="5"/>
      <circle cx="12" cy="12" r="4"/>
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor"/>
    </svg>
  ),
  linkedin: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="18" height="18" rx="3"/>
      <path d="M8 10v7M8 7v.01M12 17v-4a2 2 0 0 1 4 0v4M12 17v-7"/>
    </svg>
  ),
  tiktok: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
      <path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.3 6.3 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.72a8.18 8.18 0 004.78 1.52V6.79a4.85 4.85 0 01-1.01-.1z"/>
    </svg>
  ),
};

function HomeBio({ onCta }) {
  return (
    <section className="acmp-bio-section-home" id="mai">
      <div className="acmp-bio-wrap">
        <div className="acmp-bio-head">
          <div className="eyebrow">FORMÁ PARTE DE LA ACADEMIA</div>
          <h2 className="acmp-bio-section-title">
            Aprendé de la mano de <span className="kw">Mai Pistiner</span><br />
            y equipo de expertos
          </h2>
        </div>
        <article className="acmp-bio acmp-bio-home-card">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="acmp-bio-photo">
              <img
                src={R("assets/instructor-mai.png")}
                alt="Mai Pistiner — fundadora de Academia Comunica de Mai Pistiner"
                style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
              />
            </div>
            <div className="acmp-bio-socials" style={{ flexDirection: 'row', justifyContent: 'space-between', gap: 8, marginTop: 0 }}>
              <a className="acmp-bio-chip" href="#" aria-label="Instagram">
                {SOCIAL_ICONS.instagram}<span>@maipistiner</span>
              </a>
              <a className="acmp-bio-chip" href="#" aria-label="LinkedIn">
                {SOCIAL_ICONS.linkedin}<span>in/maipistiner</span>
              </a>
              <a className="acmp-bio-chip" href="#" aria-label="TikTok">
                {SOCIAL_ICONS.tiktok}<span>@maipistiner</span>
              </a>
            </div>
          </div>
          <div className="acmp-bio-text">
            <h3 className="acmp-bio-name">
              Mai <span>Pistiner</span>
            </h3>
            <p className="acmp-bio-role" style={{ fontFamily: 'var(--font-long-form)' }}>
              Lic. en Comunicación Social · Magíster en Psicología General · Doctorando en Comunicación Social (UCA)
            </p>
            <p className="acmp-bio-lead">
              Mai Pistiner es Licenciada en Comunicación Social, Magíster en Psicología General y actualmente se encuentra realizando un doctorado en Comunicación Social (UCA).
            </p>
            <p className="acmp-bio-lead">
              Inició su formación antes de la licenciatura en el Conservatorio de Artes Dramáticas Stella Adler, en Los Ángeles, California, donde se especializó en distintas técnicas vinculadas a la comunicación, la voz, el cuerpo y la expresión interpersonal. Entre ellas: movimiento corporal y expresión no verbal con Kennedy Brown (técnica Lucid Body), entrenamiento vocal con la técnica de Kirstin Linklater, trabajo corporal a través de la Alexander Technique, comunicación no violenta con la metodología de Marshall Rosenberg, y uso del discurso y la dicción con la técnica de Edith Skinner.
            </p>
            <p className="acmp-bio-lead">
              Es fundadora de una academia de comunicación, una comunidad con más de 200 mil alumnos, donde brinda capacitaciones en comunicación efectiva, expresión, oratoria, liderazgo y habilidades blandas. Capacita a líderes y equipos de empresas como Google, Mercado Libre, Danone y Roche, y se desempeña como conferencista en eventos organizados por Endeavor, IDEA y FOPEA.
            </p>
            <p className="acmp-bio-lead">
              Cuenta con más de diez años de trayectoria en medios digitales y tradicionales, habiendo trabajado en Infobae, La Nación, América TV y Luzu TV. Su podcast de salud mental, <em>"Un Pensamiento de Mai Pistiner"</em>, alcanzó el puesto número uno en Argentina.
            </p>
            <p className="acmp-bio-lead">
              Además, es creadora de contenido en sus redes personales y desarrolla branded content para marcas líderes como Mercado Libre, Eucerin y L'Oréal Paris, entre otras.
            </p>
          </div>
        </article>
      </div>
    </section>
  );
}

Object.assign(window, { HomeBio });