/* global React, Chrome, Eyebrow, SectionDivider */
const { Fragment } = React;

/* =====================================================================
   SECTION 1 — CONTEXTO  (slides 01–04)
   ===================================================================== */

/* ---------- 01 — Cover ---------- */
function Slide01Cover() {
  return (
    <Fragment>
      {/* Top chrome — minimal on cover */}
      <div className="chrome-top">
        <span><span className="slash">/</span>KEYNOTE · 2026</span>
        <div className="chrome-brand-row">
          <span>INTERFACE SCHOOL</span>
          <span>@SHOVILLALBA</span>
        </div>
      </div>

      <div className="frame" style={{ justifyContent: "space-between", paddingBottom: 200 }}>
        <div>
          <Eyebrow>Charla — 30 min · @shovillalba</Eyebrow>
        </div>

        <div>
          <h1 className="title-display" style={{ fontSize: 200, lineHeight: 0.9 }}>
            Escalando<br/>
            <span style={{ color: "var(--primary)" }}>accesibilidad</span><br/>
            en el handoff.
          </h1>
          <p className="subtitle" style={{ marginTop: 32, maxWidth: 1500, fontSize: 40 }}>
            Cómo Design Systems, AI Tools y un nuevo handoff están moviendo
            la accesibilidad desde Figma hacia el repositorio.
          </p>
        </div>

        <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "flex-end" }}>
          <div style={{ display: "flex", gap: 12 }}>
            <span className="tag" style={{ fontSize: 26 }}><span className="dot" />A11Y READY</span>
            <span className="tag solid" style={{ fontSize: 26 }}>DESIGN × CODE</span>
          </div>
        </div>
      </div>

      <div className="chrome-bottom">
        <span>v1.0 · 2026</span>
      </div>
    </Fragment>
  );
}

/* ---------- 01b — Agents Cover ---------- */
function Slide01bAgents() {
  return (
    <Fragment>
      <div className="chrome-top">
        <span><span className="slash">/</span>KEYNOTE · 2026</span>
        <div className="chrome-brand-row">
          <span>INTERFACE SCHOOL</span>
          <span>@SHOVILLALBA</span>
        </div>
      </div>

      <div className="frame" style={{ justifyContent: "space-between", paddingBottom: 200 }}>
        <div>
          <Eyebrow>Charla — 30 min · @shovillalba</Eyebrow>
        </div>

        <div>
          <h1 className="title-display" style={{ fontSize: 200, lineHeight: 0.9 }}>
            Escalando<br/>
            <span style={{ color: "var(--primary)" }}>accesibilidad</span><br/>
            con agentes.
          </h1>
          <p className="subtitle" style={{ marginTop: 32, maxWidth: 1500, fontSize: 40 }}>
            Cómo Design Systems, AI Tools y un nuevo handoff están moviendo
            la accesibilidad desde Figma hacia el repositorio.
          </p>
        </div>

        <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "flex-end" }}>
          <div style={{ display: "flex", gap: 12 }}>
            <span className="tag" style={{ fontSize: 26 }}><span className="dot" />A11Y READY</span>
            <span className="tag solid" style={{ fontSize: 26 }}>DESIGN × CODE</span>
          </div>
        </div>
      </div>

      <div className="chrome-bottom">
        <span>v1.0 · 2026</span>
      </div>
    </Fragment>
  );
}

/* ---------- 02 — Hola, soy Sho ---------- */
function Slide02Sho() {
  return (
    <Fragment>
      <Chrome section="QUIÉN HABLA" n={3} />
      <div className="frame" style={{ justifyContent: "center", flexDirection: "row", gap: 100, alignItems: "center" }}>
        {/* Portrait placeholder — typographic, editorial */}
        <div style={{
          width: 560,
          height: 720,
          background: "var(--bg-muted)",
          border: "1px solid var(--border)",
          position: "relative",
          flexShrink: 0,
        }}>
          <div style={{ position: "absolute", top: 24, left: 24, right: 24, display: "flex", justifyContent: "space-between" }}>
            <span className="mono" style={{ fontSize: 24, color: "var(--fg-2)" }}>RETRATO</span>
            <span className="mono" style={{ fontSize: 24, color: "var(--fg-2)" }}>JV / 2026</span>
          </div>
          <div style={{
            position: "absolute", inset: 0,
            display: "flex", alignItems: "center", justifyContent: "center",
            padding: "72px 40px 88px",
            boxSizing: "border-box",
          }}>
            <img
              src="assets/sho-avatar.png"
              alt="Retrato de Johan Villalba (Sho)"
              style={{
                width: "min(480px, 100%)",
                aspectRatio: "1",
                objectFit: "cover",
                display: "block",
              }}
            />
          </div>
          <div style={{ position: "absolute", bottom: 24, left: 24, right: 24, display: "flex", justifyContent: "space-between" }}>
            <span className="mono" style={{ fontSize: 24, color: "var(--fg-2)" }}>@SHOVILLALBA</span>
            <span className="mono" style={{ fontSize: 24, color: "var(--fg-2)" }}>FOTO →</span>
          </div>
        </div>

        {/* Right column: name + role */}
        <div style={{ display: "flex", flexDirection: "column", gap: 36, maxWidth: 900 }}>
          <Eyebrow>Hola — encantado</Eyebrow>
          <h1 className="title" style={{ fontSize: 120, lineHeight: 0.95 }}>
            Johan Villalba<br/>
            <span className="muted" style={{ fontWeight: 400, fontStyle: "italic" }}>“Sho”</span>
          </h1>
          <div style={{ height: 1, background: "var(--border)" }} />
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <div className="mono" style={{ fontSize: 24, color: "var(--fg-2)" }}>ROLES</div>
            <div className="body" style={{ fontSize: 36, lineHeight: 1.35 }}>
              UX Builder · Director de <strong>Interface School</strong>.
            </div>
            <div className="body" style={{ fontSize: 30, color: "var(--fg-2)" }}>
              Creo que se aprende haciendo.
            </div>
          </div>
        </div>
      </div>
    </Fragment>
  );
}

/* ---------- 03 — 5 años en Mercado Libre ---------- */
function Slide03ML() {
  return (
    <Fragment>
      <Chrome section="EXPERIENCIA · CONTEXTO PREVIO" n={4} />
      <div className="frame" style={{ justifyContent: "center", gap: 64 }}>

        <div style={{ display: "flex", alignItems: "baseline", gap: 48 }}>
          <span style={{
            fontFamily: "var(--font-sans)",
            fontWeight: 700,
            fontSize: 480,
            lineHeight: 0.85,
            letterSpacing: "-0.05em",
            color: "var(--primary)",
          }}>5</span>
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <span className="mono" style={{ fontSize: 36, color: "var(--fg-1)" }}>AÑOS</span>
            <span className="mono" style={{ fontSize: 28, color: "var(--fg-2)" }}>2020-2026</span>
          </div>
        </div>

        <h1 className="title" style={{ fontSize: 80, maxWidth: 1500 }}>
          Construyendo el Design System<br/>
          de <span className="green">Mercado Libre</span>.
        </h1>

        <div className="grid-hairline" style={{ gridTemplateColumns: "1fr 1fr 1fr", marginTop: 16 }}>
          <div style={{ padding: 36, display: "flex", flexDirection: "column", gap: 8 }}>
            <span className="mono" style={{ fontSize: 24, color: "var(--fg-2)" }}>ALCANCE</span>
            <span style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 48 }}>18 países</span>
          </div>
          <div style={{ padding: 36, display: "flex", flexDirection: "column", gap: 8 }}>
            <span className="mono" style={{ fontSize: 24, color: "var(--fg-2)" }}>Plataformas</span>
            <span style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 48 }}>Web · iOS · Android</span>
          </div>
          <div style={{ padding: 36, display: "flex", flexDirection: "column", gap: 8 }}>
            <span className="mono" style={{ fontSize: 24, color: "var(--fg-2)" }}>FOCO</span>
            <span style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 48 }}>Componentes core</span>
          </div>
        </div>
      </div>
    </Fragment>
  );
}

/* ---------- 04 — Notas de Accesibilidad 2023 ---------- */
function Slide04Notas() {
  return (
    <Fragment>
      <Chrome section="ANTECEDENTE" n={5} />
      <div className="frame" style={{ justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
          <Eyebrow>Charla previa · 2023</Eyebrow>
          <span className="mono" style={{ fontSize: 24, color: "var(--fg-3)" }}>HACE 3 AÑOS</span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "start", justifyItems: "stretch" }}>
          <div style={{ textAlign: "left" }}>
            <h1 className="title" style={{ fontSize: 96 }}>
              Notas de<br/>
              <span style={{ textDecoration: "underline", textDecorationThickness: 6, textUnderlineOffset: 14 }}>
                accesibilidad
              </span>.
            </h1>
            <p className="subtitle" style={{ marginTop: 44, fontSize: 36, maxWidth: 800 }}>
              Un sistema visual para marcar componentes en el handoff y guiar
              al desarrollador desde Figma.
            </p>
          </div>

          {/* Visual: a Figma-style annotation diagram */}
          <FigmaAnnotationDiagram />
        </div>

        <div style={{ display: "flex", gap: 14 }}>
          <span className="tag"><span className="dot" />FIGMA</span>
          <span className="tag"><span className="dot" />HANDOFF VISUAL</span>
          <span className="tag"><span className="dot" />NOTAS A11Y</span>
        </div>
      </div>
    </Fragment>
  );
}

function FigmaAnnotationDiagram() {
  return (
    <div style={{
      background: "var(--bg-subtle)",
      border: "1px solid var(--border)",
      padding: 32,
      position: "relative",
      alignSelf: "stretch",
      display: "flex",
      flexDirection: "column",
      alignItems: "flex-start",
      textAlign: "left",
      minHeight: 0,
      overflow: "visible",
      boxSizing: "border-box",
    }}>
      <img
        src="assets/figma-a11y-accessibility-notes.png"
        alt="Kit Figma «Accessibility Notes»: etiquetas Label, Heading, Announcement, Button y Link con punteros; CustomAction; notas numeradas y bloque Comment; zona restringida; marcos estructurales Button y Group."
        style={{
          maxWidth: "100%",
          maxHeight: 720,
          width: "auto",
          height: "auto",
          display: "block",
          objectFit: "contain",
          objectPosition: "left top",
        }}
      />
    </div>
  );
}

window.Slide01Cover = Slide01Cover;
window.Slide01bAgents = Slide01bAgents;
window.Slide02Sho = Slide02Sho;
window.Slide03ML = Slide03ML;
window.Slide04Notas = Slide04Notas;