const ACAD_SITS = ["Quieres empezar a invertir y no sabes por dónde.", "Inviertes en fondos o en bolsa y quieres entender lo que pagas.", "Quieres capacitar a tu equipo comercial para vender de forma responsable."];

const FORMATS = [
  ["presentation", "Webinars gratuitos", "Eventos en línea sin costo donde explicamos temas del mercado de valores.", "webinars"],
  ["users", "Clases individuales o grupales", "Clases programadas sobre un tema, solo para ti o en grupo.", "clases"],
  ["layers", "Programas", "Cursos grabados por módulos, para avanzar a tu ritmo.", "programas"],
  ["building-2", "In-company", "Capacitación para equipos de empresas, incluida la formación del equipo comercial en venta responsable.", "in-company"]
];

// Webinars: fecha ("12 nov") y hora ("19:00") se muestran cuando se completen.
const WEBINARS = [
  { t: "Cómo empezar a invertir en bolsa", fecha: "", hora: "" },
  { t: "Fondos mutuos: cómo elegir y cuánto pagas", fecha: "", hora: "" },
  { t: "Tus derechos como inversionista y cómo reclamar", fecha: "", hora: "" }
];
const CLASSES = [
  { t: "Tu primera inversión en bolsa", m: "Individual" },
  { t: "Fondos mutuos: comisiones y rescates", m: "Grupal" },
  { t: "Cómo leer el estado de cuenta de tu SAB", m: "Individual o grupal" }
];
// Programas: dur, fecha y precio se muestran cuando se completen. Precio en soles, incluye IGV.
const PROGRAMS = [
  { t: "Empieza a invertir", tipo: "Curso grabado", para: "Personas que quieren empezar a invertir y no saben por dónde.", mods: ["Qué es invertir y qué riesgos hay.", "SAB, SAF y fondos: quién es quién.", "Tus primeros pasos y qué revisar antes de firmar."], mod: "Grabado, en línea", dur: "", fecha: "", precio: "" },
  { t: "Fondos mutuos y fondos de inversión: lo que debes saber", tipo: "Curso grabado por módulos", para: "Personas que ya invierten en fondos o están por hacerlo.", mods: ["Cómo funciona un fondo.", "Comisiones: lo que pagas y por qué.", "Cómo salir de un fondo y qué hacer si no te pagan."], mod: "Grabado, en línea", dur: "", fecha: "", precio: "" },
  { t: "Cómo se financia una empresa en el mercado de valores", tipo: "Curso grabado por módulos · también in-company", para: "Equipos de finanzas, gerentes y fundadores.", mods: ["Deuda, capital y sus diferencias.", "Emisión de bonos por oferta privada.", "Qué evalúa el inversionista."], mod: "Grabado, en línea", dur: "", fecha: "", precio: "" }
];

const reserve = (t) => window.open(waT("Hola, quiero reservar un cupo en " + t), "_blank");
const signup = (t) => window.open(waT("Hola, quiero inscribirme en el webinar gratuito «" + t + "» de Lex Securities Academia"), "_blank");

function Soon({ name, text = "Estamos preparando esta sección.", children }) {
  return <div className="soon">
    <div className="soon-c" aria-hidden="true" inert="">{children}</div>
    <div className="soon-seal"><div className="soon-card">
      <img className="soon-m" src={A + "/character/06-seated-thinking.png"} alt="" aria-hidden="true" />
      <div className="soon-b">
        <p className="soon-k">Lex Securities</p>
        <p className="soon-t">Próximamente</p>
        <p className="soon-d">{text}</p>
        {name && <Button variant="accent" size="sm" iconStart={<Icon name="message-circle" size={16} />} onClick={() => window.open(waT("Hola, quiero que me avisen cuando abra " + name + " de Lex Securities Academia"), "_blank")}>Avísame cuando abra</Button>}
      </div>
    </div></div>
  </div>;
}

function WebinarPopup() {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => { if (sessionStorage.getItem("lex-webinar")) return; const t = setTimeout(() => setOpen(true), 2500); return () => clearTimeout(t); }, []);
  const close = () => { sessionStorage.setItem("lex-webinar", "1"); setOpen(false); };
  React.useEffect(() => { if (!open) return; const f = (ev) => { if (ev.key === "Escape") close(); }; addEventListener("keydown", f); return () => removeEventListener("keydown", f); }, [open]);
  if (!open) return null;
  const w = WEBINARS[0];
  return <aside className="wslide" role="dialog" aria-label="Próximo webinar">
    <button className="wslide-x" aria-label="Cerrar" onClick={close}><Icon name="x" size={16} /></button>
    <div className="wslide-m"><img src={A + "/character/04-presenting.png"} alt="La mascota de Lex, un toro con traje, de pie y presentando" /></div>
    <div className="wslide-b">
      <p className="k">Webinar gratuito</p>
      <p className="wslide-t">{w.t}</p>
      <p className="wslide-d">{w.fecha ? w.fecha + (w.hora ? " · " + w.hora : "") + " · En línea" : "En línea · Inscríbete y te avisamos la fecha."}</p>
      <Button variant="accent" size="sm" onClick={() => { close(); go("/academia/webinars"); }}>Inscríbete</Button>
    </div>
  </aside>;
}

function AcademiaPage() {
  const scrollTo = (id) => (e) => { e.preventDefault(); go("/academia/" + id); };
  return <>
    <PageHero label="Lex Securities Academia" title="Aprende a invertir con criterio." lead="Webinars, clases y programas sobre inversión, finanzas y mercado de valores, explicados de forma fácil y sencilla.">
      <div className="btns" style={{ marginTop: 28 }}>
        <Button variant="accent" size="lg" iconEnd={<Icon name="arrow-down" size={16} />} onClick={() => go("/academia/programas")}>Ver programas</Button>
        <Button variant="outline-inverse" size="lg" iconStart={<Icon name="message-circle" size={18} />} onClick={() => openWA("academia")}>Escríbenos por WhatsApp</Button>
      </div>
    </PageHero>

    <section className="ivory sec">
      <div className="wrap">
        <Label>Para quién es</Label>
        <CheckList items={ACAD_SITS} />
      </div>
    </section>

    <section className="white sec" id="formatos">
      <div className="wrap">
        <div className="pub-head2">
          <div><Label>Formatos</Label><h2 className="h2 rv">Elige cómo quieres aprender.</h2></div>
          <img className="mascot sm rv d2" src={A + "/character/04-presenting.png"} alt="La mascota de Lex, un toro con traje, de pie y presentando" />
        </div>
        <div className="fmts four">{FORMATS.map(([ic, t, d, id], i) => <a className="fmt rv" key={t} href={"#/academia/" + id} onClick={scrollTo(id)}>
          <div className="fmt-top"><Icon name={ic} size={32} strokeWidth={1.1} color="var(--lex-bronze)" /><span className="area-n">{"0" + (i + 1)}</span></div>
          {i > 0 && <span className="soon-tag">Próximamente</span>}
          <h3>{t}</h3><p>{d}</p>
          <span className="more">Ver <Icon name="arrow-down" size={14} /></span>
        </a>)}</div>
      </div>
    </section>

    <section className="ivory sec" id="webinars">
      <div className="wrap">
        <div className="pub-head2 web-head">
          <div><Label n="01">Webinars gratuitos</Label><h2 className="h2 rv">Próximos webinars</h2>
            <p className="lead" style={{ marginTop: 16 }}>Eventos en línea sin costo donde explicamos temas del mercado de valores. Inscríbete y te enviamos la fecha y el enlace.</p></div>
          <img className="mascot web rv d2" src={A + "/character/15-pointing-up.png"} alt="La mascota de Lex, un toro con traje, señalando hacia arriba mientras enseña" />
        </div>
        <ol className="wcal">{WEBINARS.map((w) => <li className={"rv" + (w.fecha ? "" : " nodate")} key={w.t}>
          {w.fecha ? <div className="wcal-d"><b>{w.fecha.split(" ")[0]}</b><span>{w.fecha.split(" ")[1]}</span></div> : <div className="wcal-d ic"><Icon name="video" size={24} strokeWidth={1.2} color="var(--lex-bronze)" /></div>}
          <div className="wcal-t"><h3>{w.t}</h3><p>{w.hora ? w.hora + " · " : ""}En línea · Gratuito</p></div>
          <Button variant="accent" size="sm" onClick={() => signup(w.t)}>Inscríbete</Button>
        </li>)}</ol>
      </div>
    </section>

    <section className="white sec" id="clases">
      <div className="wrap">
        <Label n="02">Clases individuales o grupales</Label>
        <h2 className="h2 rv">Clases programadas</h2>
        <Soon name="Clases individuales o grupales"><div className="progs">{CLASSES.map((c) => <article className="prog rv" key={c.t}>
          <p className="ig-t">Clase</p>
          <h3>{c.t}</h3>
          <dl className="prog-dl">
            <dt>Modalidad</dt><dd>{c.m}</dd>
            <dt>Día y hora</dt><dd>Los coordinamos contigo.</dd>
          </dl>
          <Button variant="accent" fullWidth iconStart={<Icon name="message-circle" size={18} />} onClick={() => window.open(waT("Hola, quiero reservar la clase " + c.t), "_blank")}>Reserva tu clase</Button>
        </article>)}</div></Soon>
      </div>
    </section>

    <section className="ivory2 sec" id="programas">
      <div className="wrap">
        <Label n="03">Programas</Label>
        <h2 className="h2 rv">Programas</h2>
        <p className="lead" style={{ marginTop: 16 }}>Cursos grabados por módulos, para avanzar a tu ritmo.</p>
        <Soon name="Programas"><div className="progs">{PROGRAMS.map((p) => <article className="prog rv" key={p.t}>
          <p className="ig-t">{p.tipo}</p>
          <h3>{p.t}</h3>
          <dl className="prog-dl">
            <dt>Para quién es</dt><dd>{p.para}</dd>
            <dt>Módulos</dt><dd><ol>{p.mods.map((m) => <li key={m}>{m}</li>)}</ol></dd>
            <dt>Docente</dt><dd>Carlos Huarcaya Villafana</dd>
            {p.dur && <><dt>Duración</dt><dd>{p.dur}</dd></>}
            <dt>Modalidad</dt><dd>{p.mod}</dd>
            {p.fecha && <><dt>Próxima fecha</dt><dd>{p.fecha}</dd></>}
          </dl>
          {p.precio && <p className="prog-price">Precio: S/ {p.precio} (incluye IGV)</p>}
          <Button variant="accent" fullWidth iconStart={<Icon name="message-circle" size={18} />} onClick={() => reserve(p.t)}>Reserva tu cupo</Button>
        </article>)}</div></Soon>
      </div>
    </section>

    <section className="white sec" id="in-company">
      <div className="wrap">
        <Label n="04">In-company</Label>
        <h2 className="h2 rv">Capacitación para equipos de empresas</h2>
        <Soon name="In-company"><div style={{ marginTop: 20 }}><CheckList items={["Talleres sobre mercado de valores, fondos y financiamiento para tu equipo.", "Formación del equipo comercial en venta responsable: qué ofrecer, a quién y con qué información.", "Contenido adaptado a tu empresa, en línea o presencial."]} /></div>
        <div className="btns" style={{ marginTop: 28 }}><Button variant="accent" iconStart={<Icon name="message-circle" size={18} />} onClick={() => openWA("incompany")}>Escríbenos por WhatsApp</Button></div></Soon>
      </div>
    </section>

    <Testimonials kind="alumnos" />

    <section className="ivory sec acad-disc"><div className="wrap"><p className="fine dark">Contenido educativo. No es asesoría de inversión ni una recomendación para comprar o vender valores.</p></div></section>
  </>;
}

Object.assign(window, { Soon, WebinarPopup, AcademiaPage });