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

/* =====================================================================
   SECTION 3 — LA ERA DE LAS AI TOOLS  (slides 09–16)
   ===================================================================== */

/* ---------- 09 — AI Tools ---------- */
function Slide09AITools() {
  return (
    <Fragment>
      <Chrome section="LA ERA DE LAS AI TOOLS" n={11} />
      <div className="frame" style={{ justifyContent: "center", gap: 56 }}>
        <Eyebrow>Lo que cambia el juego</Eyebrow>

        <h1 className="title" style={{ fontSize: 120, lineHeight: 0.95, maxWidth: 1700 }}>
          Herramientas y agentes que <span className="green">amplifican</span> nuestro impacto.
        </h1>

        <div className="grid-hairline" style={{ gridTemplateColumns: "1fr 1fr 1fr", marginTop: 24 }}>
          {[
            ["01", "CURSOR", "Editor con IA. Refactor con contexto."],
            ["02", "CLAUDE CODE", "Agente CLI. Lee tu repo, propone cambios."],
            ["03", "CODEX", "Tareas automatizadas. PRs sin abandonar el chat."],
          ].map(([n, name, desc]) => (
            <div key={n} style={{ padding: 48, display: "flex", flexDirection: "column", gap: 20, minHeight: 360 }}>
              <span className="mono" style={{ fontSize: 24, color: "var(--fg-2)" }}>{n}</span>
              <div style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 64, letterSpacing: "-0.02em" }}>
                {name}
              </div>
              <p className="body" style={{ fontSize: 28, color: "var(--fg-2)", margin: 0, marginTop: "auto" }}>{desc}</p>
            </div>
          ))}
        </div>

        <p className="subtitle" style={{ fontSize: 32, color: "var(--fg-2)", maxWidth: 1500 }}>
          Automatizan lo rutinario. Liberan tiempo para lo que sí requiere criterio humano.
        </p>
      </div>
    </Fragment>
  );
}

/* ---------- 10 — Skills ---------- */
function Slide10Skills() {
  return (
    <Fragment>
      <Chrome section="SKILLS" n={12} />
      <div className="frame" style={{ justifyContent: "space-between" }}>
        <div>
          <Eyebrow>Habilidad #1 — Skills</Eyebrow>
          <h1 className="title" style={{ fontSize: 100, marginTop: 24, lineHeight: 0.95 }}>
            Enseñarle a la IA<br/>
            lo que <span className="green">siempre revisamos</span>.
          </h1>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56, alignItems: "stretch", marginTop: 40 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <p className="body" style={{ fontSize: 32, maxWidth: 800 }}>
              Una <strong>Skill</strong> es una rutina de revisión empaquetada:
              instrucciones claras que estandarizan cómo se evalúa algo.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <span className="tag"><span className="dot" />CONTRASTE DE TEXTO (4.5:1)</span>
              <div className="tag" style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "stretch",
                width: "100%",
                boxSizing: "border-box",
                gap: 10,
                whiteSpace: "normal",
              }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
                  <span className="dot" />
                  CONTRAST MASTER
                </span>
                <span style={{
                  display: "block",
                  fontSize: 21,
                  fontWeight: 400,
                  letterSpacing: "0.02em",
                  textTransform: "none",
                  color: "var(--fg-2)",
                  lineHeight: 1.4,
                }}>
                  Especialista en contraste de color y accesibilidad visual. Asegura el cumplimiento de WCAG AA en todas las decisiones de color, temas y estados de foco.
                </span>
              </div>
              <span className="tag"><span className="dot" />CONTRASTE NO TEXTUAL (3:1)</span>
              <span className="tag"><span className="dot" />APARIENCIA DE FOCO</span>
            </div>
          </div>

          {/* Mock agent file */}
          <div style={{ background: "var(--fg-1)", color: "var(--bg-base)", padding: 32, fontFamily: "var(--font-mono)", fontSize: 20, lineHeight: 1.4, overflow: "auto" }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 20, color: "var(--fg-3)", fontSize: 22 }}>
              <span>contrast-master.md</span>
              <span>· AGENT</span>
            </div>
            <div><span style={{ color: "#7ec699" }}>---</span></div>
            <div>name: <span style={{ color: "#f8d49b" }}>"contrast-master"</span></div>
            <div style={{ marginTop: 4 }}>description: <span style={{ color: "#f8d49b" }}>"Color contrast and visual accessibility specialist. Ensures WCAG AA compliance..."</span></div>
            <div><span style={{ color: "#7ec699" }}>---</span></div>
            
            <div style={{ marginTop: 16, color: "var(--fg-3)" }}># Authoritative Sources</div>
            <div style={{ fontSize: 18, marginTop: 8 }}>
              <div>- WCAG 1.4.3 Contrast Minimum</div>
              <div>- WCAG 1.4.11 Non-text Contrast</div>
              <div>- WCAG 2.4.13 Focus Appearance</div>
              <div>- WebAIM Contrast Checker</div>
              <div>- CSS Color Module Level 4</div>
            </div>

            <div style={{ marginTop: 16, color: "var(--fg-3)" }}># WCAG AA Requirements</div>
            <div style={{ fontSize: 18, marginTop: 4 }}>
              <div>• Normal text: 4.5:1 minimum</div>
              <div>• Large text: 3:1 minimum</div>
              <div>• UI Components: 3:1 minimum</div>
            </div>
          </div>
        </div>
      </div>
    </Fragment>
  );
}

/* ---------- 11 — MCPs ---------- */
function Slide11MCPs() {
  const mcpBranchW = 280;
  const mcpBranchH = 340;
  const mcpHubY = mcpBranchH / 2;
  const mcpHubX = 22;
  const mcpTipX = mcpBranchW - 10;
  const mcpRowCenters = [mcpBranchH / 6, mcpBranchH / 2, (mcpBranchH * 5) / 6];

  return (
    <Fragment>
      <Chrome section="MCP · MODEL CONTEXT PROTOCOL" n={13} />
      <div className="frame" style={{ justifyContent: "flex-start", gap: 48 }}>
        <h1 className="title" style={{ fontSize: 100, lineHeight: 0.95 }}>
          Un protocolo seguro para que los agentes<br/>
          actúen como <span className="green">especialistas</span>.
        </h1>

        {/* MCP topology — puentes flex 1 pegan caja a caja; MCP → 3 herramientas con ramas SVG */}
        <div style={{ display: "flex", alignItems: "center", gap: 0, width: "100%", marginTop: 24 }}>
          <DiagramNode label="AGENTE" sub="Claude / Cursor" big />
          <div style={{
            flex: "1 1 0%",
            minWidth: 28,
            alignSelf: "stretch",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
          }}>
            <svg viewBox="0 0 320 40" preserveAspectRatio="none" style={{ width: "100%", height: 40, display: "block" }}>
              <path d="M 0 20 L 320 20" stroke="var(--fg-2)" strokeWidth="2" fill="none" strokeLinecap="round" />
            </svg>
          </div>

          <div style={{ display: "flex", alignItems: "stretch", gap: 0, flex: "1 1 0%", minWidth: 0 }}>
            <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", flexShrink: 0 }}>
              <div style={{
                display: "flex",
                flexDirection: "column",
                gap: 16,
                padding: "24px 32px",
                border: "2px solid var(--primary)",
                background: "var(--bg-subtle)",
              }}>
                <span className="mono" style={{ fontSize: 24, color: "var(--primary)" }}>MCP</span>
                <span className="mono" style={{ fontSize: 24, color: "var(--fg-2)" }}>PROTOCOL</span>
              </div>
            </div>

            <div style={{ flex: "1 1 0%", minWidth: 36, position: "relative" }}>
              <svg
                viewBox={`0 0 ${mcpBranchW} ${mcpBranchH}`}
                preserveAspectRatio="none"
                style={{ position: "absolute", inset: 0, width: "100%", height: "100%", display: "block" }}
              >
                <defs>
                  <marker
                    id="slide11-mcp-branch-arrow"
                    markerUnits="userSpaceOnUse"
                    markerWidth="10"
                    markerHeight="10"
                    refX="9"
                    refY="5"
                    orient="auto"
                  >
                    <path d="M 0 0 L 10 5 L 0 10 Z" fill="var(--fg-2)" />
                  </marker>
                </defs>
                <path
                  d={`M 0 ${mcpHubY} L ${mcpHubX} ${mcpHubY}`}
                  stroke="var(--fg-2)"
                  strokeWidth="2"
                  fill="none"
                  strokeLinecap="round"
                />
                <circle cx={mcpHubX} cy={mcpHubY} r="4" fill="var(--fg-2)" />
                {mcpRowCenters.map((y, i) => (
                  <path
                    key={i}
                    d={`M ${mcpHubX} ${mcpHubY} C ${mcpBranchW * 0.36} ${mcpHubY}, ${mcpTipX - 72} ${y}, ${mcpTipX} ${y}`}
                    stroke="var(--fg-2)"
                    strokeWidth="2"
                    fill="none"
                    strokeLinejoin="round"
                    strokeLinecap="round"
                    markerEnd="url(#slide11-mcp-branch-arrow)"
                  />
                ))}
              </svg>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 14, justifyContent: "center", flexShrink: 0 }}>
              <DiagramNode label="A11Y SCANNER" sub="lighthouse / axe" />
              <DiagramNode label="GITHUB" sub="repo / PRs" />
              <DiagramNode label="FIGMA" sub="files / vars" />
            </div>
          </div>
        </div>

        <p className="subtitle" style={{ fontSize: 32, color: "var(--fg-2)", textAlign: "center", marginTop: 16 }}>
          Cada MCP es una herramienta especializada que el agente puede invocar.
        </p>
      </div>
    </Fragment>
  );
}

function DiagramNode({ label, sub, big }) {
  return (
    <div style={{
      border: "1px solid var(--border)",
      background: "var(--surface)",
      padding: big ? "32px 48px" : "20px 28px",
      display: "flex",
      flexDirection: "column",
      gap: 8,
      minWidth: big ? 260 : 240,
    }}>
      <span className="mono" style={{ fontSize: big ? 26 : 24, fontWeight: 700 }}>{label}</span>
      <span className="mono" style={{ fontSize: 24, color: "var(--fg-2)", textTransform: "none", letterSpacing: 0 }}>{sub}</span>
    </div>
  );
}

/* ---------- 12 — Open Source projects ---------- */
function Slide12OpenSource() {
  return (
    <Fragment>
      <Chrome section="OPEN SOURCE CLAVE" n={14} />
      <div className="frame" style={{ justifyContent: "center", gap: 56 }}>
        <Eyebrow>Proyectos para mirar de cerca</Eyebrow>

        <h1 className="title" style={{ fontSize: 110, lineHeight: 0.95 }}>
          Dos proyectos open source<br/>
          que conviene <span className="green">tener en el radar</span>.
        </h1>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, marginTop: 16 }}>
          <ProjectCard
            tag="01"
            name="A11Y AGENTS"
            repo="Community-Access/accessibility-agents"
            desc="Conjunto de agentes pre-armados para auditar accesibilidad en repositorios. Detectan, proponen y abren PRs."
            stack={["Open Source", "Multi-modelo", "PR-ready"]}
          />
          <ProjectCard
            tag="02"
            name="A11Y SCANNER"
            repo="github.com/github/a11y-scanner"
            desc="Scanner de accesibilidad. Iniciativa directa de GitHub, integrable en CI."
            stack={["Por GitHub", "CI / CD", "Reportes"]}
            highlight
          />
        </div>
      </div>
    </Fragment>
  );
}

function ProjectCard({ tag, name, repo, desc, stack, highlight }) {
  return (
    <div style={{
      border: highlight ? "1px solid var(--primary)" : "1px solid var(--border)",
      background: highlight ? "var(--bg-subtle)" : "var(--surface)",
      padding: 48,
      display: "flex",
      flexDirection: "column",
      gap: 20,
      minHeight: 480,
      position: "relative",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span className="mono" style={{ fontSize: 24, color: highlight ? "var(--primary)" : "var(--fg-2)" }}>{tag}</span>
        <span className="mono" style={{ fontSize: 24, color: "var(--fg-3)", textTransform: "none", letterSpacing: 0 }}>{repo}</span>
      </div>
      <div style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 76, letterSpacing: "-0.02em", lineHeight: 0.95 }}>
        {name}
      </div>
      <p className="body" style={{ fontSize: 28, color: "var(--fg-2)", margin: 0 }}>{desc}</p>
      <div style={{ display: "flex", gap: 10, marginTop: "auto", flexWrap: "wrap" }}>
        {stack.map(s => <span key={s} className="tag" style={{ fontSize: 24, padding: "8px 14px" }}>{s}</span>)}
      </div>
    </div>
  );
}

/* ---------- 12b — accessibility-agents (repo en detalle) ---------- */
function Slide12bAccessibilityAgents() {
  return (
    <Fragment>
      <Chrome section="ACCESSIBILITY AGENTS" n={15} />
      <div className="frame" style={{ justifyContent: "flex-start", gap: 36 }}>
        <Eyebrow>Repo oficial · Community-Access</Eyebrow>

        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <h1 className="title" style={{ fontSize: 84, lineHeight: 0.95, maxWidth: 1700 }}>
            <span className="green">accessibility-agents</span>
          </h1>
          <span className="mono" style={{ fontSize: 22, color: "var(--fg-2)", textTransform: "none", letterSpacing: 0 }}>
            github.com/Community-Access/accessibility-agents · MIT · WCAG 2.2 AA
          </span>
        </div>

        <div className="grid-hairline" style={{ gridTemplateColumns: "1fr 1fr 1fr", marginTop: 8 }}>
          {[
            ["79", "agentes especializados", "Organizados en 8 equipos temáticos"],
            ["5", "superficies de ejecución", "Claude Code · Copilot · Gemini CLI · Codex · MCP"],
            ["+", "comunidad abierta", "Contribuciones vía PR · issues · releases"],
          ].map(([num, label, sub]) => (
            <div key={label} style={{ padding: 28, display: "flex", flexDirection: "column", gap: 10, minHeight: 140 }}>
              <span style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 52, letterSpacing: "-0.03em", color: "var(--primary)" }}>{num}</span>
              <span className="mono" style={{ fontSize: 22, color: "var(--fg-1)" }}>{label}</span>
              <p className="body" style={{ fontSize: 24, color: "var(--fg-2)", margin: 0, lineHeight: 1.35 }}>{sub}</p>
            </div>
          ))}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28, alignItems: "stretch", marginTop: 8 }}>
          <div style={{
            border: "1px solid var(--border)",
            background: "var(--surface)",
            padding: 36,
            display: "flex",
            flexDirection: "column",
            gap: 16,
            minHeight: 280,
          }}>
            <span className="mono" style={{ fontSize: 22, color: "var(--fg-2)" }}>QUÉ CONTIENE</span>
            <p className="body" style={{ fontSize: 26, color: "var(--fg-1)", margin: 0, lineHeight: 1.45 }}>
              Equipos por dominio: <strong>web</strong> (WCAG, i18n/RTL, medios, rendimiento…),
              <strong> documentos</strong> (Office, PDF, EPUB, Markdown),
              <strong> flujos en GitHub</strong> (PRs, boards, CI, security),
              <strong> herramientas de desarrollo</strong>, <strong>educación / estándares</strong> y piezas <strong>transversales</strong> (pipelines a11y, compliance, orquestadores).
              Incluye skills, instrucciones, prompts y servidor <strong>MCP</strong> con herramientas de escaneo para clientes compatibles.
            </p>
          </div>
          <div style={{
            border: "1px solid var(--border)",
            background: "var(--surface)",
            padding: 36,
            display: "flex",
            flexDirection: "column",
            gap: 16,
            minHeight: 280,
          }}>
            <span className="mono" style={{ fontSize: 22, color: "var(--fg-2)" }}>CÓMO SE DEFINE</span>
            <p className="body" style={{ fontSize: 26, color: "var(--fg-1)", margin: 0, lineHeight: 1.45 }}>
              No es un modelo entrenado con datasets propios: son <strong>agentes regladores</strong> empaquetados como skills e instrucciones,
              alineados con <strong>WCAG 2.2</strong> y <strong>documentación oficial</strong> (W3C, VS Code, GitHub Copilot, etc.).
              El repo exige citar fuentes cuando se documentan comportamientos ligados a una versión de producto.
            </p>
          </div>
          <div style={{
            border: "1px solid var(--primary)",
            background: "var(--bg-subtle)",
            padding: 36,
            display: "flex",
            flexDirection: "column",
            gap: 16,
            gridColumn: "1 / -1",
          }}>
            <span className="mono" style={{ fontSize: 22, color: "var(--primary)" }}>CÓMO SE MANTIENE</span>
            <p className="body" style={{ fontSize: 26, color: "var(--fg-1)", margin: 0, lineHeight: 1.45 }}>
              Proyecto <strong>comunitario</strong>: mejoras por PR, guías en <span className="mono" style={{ fontSize: 22 }}>CONTRIBUTING.md</span>,
              flujos CI (p. ej. readiness de skills, build del CLI en Go).
              Instalación y actualización orientadas a <strong>GitHub Skills</strong> (<span className="mono" style={{ fontSize: 22 }}>gh skill install/setup/health/repair</span>) y <strong>git pull</strong>; el README insiste en mantener <strong>IDE, CLI y extensiones al día</strong> porque los cambios de plataforma afectan directamente al comportamiento de los agentes.
            </p>
          </div>
        </div>
      </div>
    </Fragment>
  );
}

/* ---------- 13 — Agentes que abren PRs ---------- */
function Slide13Agentes() {
  return (
    <Fragment>
      <Chrome section="AGENTES EN ACCIÓN" n={16} />
      <div className="frame" style={{ justifyContent: "center", gap: 56 }}>
        <Eyebrow>Cómo trabaja un agente de accesibilidad</Eyebrow>

        <h1 className="title" style={{ fontSize: 96, lineHeight: 0.98 }}>
          Evalúan, detectan y proponen.<br/>
          Después abren un <span className="green">Pull Request</span>.
        </h1>

        {/* 4-step flow */}
        <div className="grid-hairline" style={{ gridTemplateColumns: "1fr 1fr 1fr 1fr", marginTop: 16 }}>
          {[
            ["01", "EVALÚA", "Recorre el repo. Lee componentes y rutas."],
            ["02", "DETECTA", "Marca contrastes, ARIA faltante, tab order roto."],
            ["03", "PROPONE", "Genera fixes específicos por archivo + línea."],
            ["04", "ABRE PR", "Commit + descripción + checklist WCAG."],
          ].map(([n, t, d]) => (
            <div key={n} style={{ padding: 36, display: "flex", flexDirection: "column", gap: 16, minHeight: 320 }}>
              <span className="num" style={{ fontSize: 28 }}>{n}</span>
              <span style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 44, letterSpacing: "-0.02em" }}>{t}</span>
              <p className="body" style={{ fontSize: 24, color: "var(--fg-2)", margin: 0 }}>{d}</p>
            </div>
          ))}
        </div>

        {/* fake PR strip */}
        <div style={{
          border: "1px solid var(--border)",
          background: "var(--bg-subtle)",
          padding: "24px 32px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          fontFamily: "var(--font-mono)",
          fontSize: 24,
        }}>
          <span><span className="green">●</span> PR #182 — fix(a11y): improve contrast and focus-visible on Button/Primary</span>
          <span style={{ color: "var(--fg-2)" }}>+12 −4 · OPEN</span>
        </div>
      </div>
    </Fragment>
  );
}

/* ---------- 14 — Repo amplifies impact ---------- */
function Slide14RepoImpact() {
  const diagramH = 420;
  const hubX = 260;
  const branchEndX = 920;
  /* Centros exactos de 6 filas iguales — alineados con la rejilla de cajas */
  const branchYs = Array.from({ length: 6 }, (_, i) => ((i + 0.5) * diagramH) / 6);
  /* Termina antes del borde derecho del viewBox (= borde izquierdo de las cajas); la punta marca el encuentro */
  const lineTipX = branchEndX - 8;

  return (
    <Fragment>
      <Chrome section="EVALUAR EN EL REPO" n={17} />
      <div className="frame" style={{ justifyContent: "center", gap: 60 }}>
        <Eyebrow>Por qué corregir el DS amplifica</Eyebrow>

        <h1 className="title" style={{ fontSize: 120, lineHeight: 0.95, maxWidth: 1700 }}>
          Un fix en el Design System<br/>
          se hereda <span className="green">exponencialmente</span>.
        </h1>

        {/* branching diagram — SVG + rejilla comparten mismos centros verticales; flechas llegan horizontal a cada caja */}
        <div style={{ display: "flex", alignItems: "center", gap: 60, marginTop: 24, width: "100%" }}>
          <div style={{
            border: "1px solid var(--primary)",
            background: "var(--primary)",
            color: "var(--primary-foreground)",
            padding: "28px 36px",
            display: "flex",
            flexDirection: "column",
            gap: 8,
            minWidth: 320,
            position: "relative",
            zIndex: 2,
          }}>
            <span className="mono" style={{ fontSize: 24, opacity: 0.9 }}>FIX</span>
            <span style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 38, letterSpacing: "-0.01em" }}>Design System</span>
            <span className="mono" style={{ fontSize: 24, opacity: 0.8, textTransform: "none" }}>1 PR</span>
          </div>

          {/* Fila interior: SVG solo en el hueco DS→cajas; las cajas en columna hermana → el borde derecho del trazo = borde izq. del chip */}
          <div style={{
            flex: 1,
            display: "flex",
            flexDirection: "row",
            alignItems: "stretch",
            minWidth: 0,
            minHeight: diagramH,
          }}>
            <div style={{ flex: "1 1 0%", position: "relative", minWidth: 0, height: diagramH }}>
              <svg
                viewBox={`0 0 ${branchEndX} ${diagramH}`}
                preserveAspectRatio="none"
                style={{
                  position: "absolute",
                  left: -60,
                  width: "calc(100% + 60px)",
                  height: diagramH,
                  top: 0,
                  pointerEvents: "none",
                }}
              >
                <defs>
                  <marker
                    id="slide14-branch-arrow"
                    markerUnits="userSpaceOnUse"
                    markerWidth="10"
                    markerHeight="10"
                    refX="9"
                    refY="5"
                    orient="auto"
                  >
                    <path d="M 0 0 L 10 5 L 0 10 Z" fill="var(--fg-2)" />
                  </marker>
                </defs>
                <path
                  d={`M 0 ${diagramH / 2} L ${hubX} ${diagramH / 2}`}
                  stroke="var(--fg-2)"
                  strokeWidth="2"
                  fill="none"
                  strokeLinecap="round"
                />
                <circle cx={hubX} cy={diagramH / 2} r="4" fill="var(--fg-2)" />
                {branchYs.map((y, i) => (
                  <path
                    key={i}
                    d={`M ${hubX} ${diagramH / 2} C ${hubX + 200} ${diagramH / 2}, ${lineTipX - 110} ${y}, ${lineTipX} ${y}`}
                    stroke="var(--fg-2)"
                    strokeWidth="2"
                    fill="none"
                    strokeLinejoin="round"
                    strokeLinecap="round"
                    markerEnd="url(#slide14-branch-arrow)"
                  />
                ))}
              </svg>
            </div>
            <div style={{
              flex: "0 0 auto",
              position: "relative",
              zIndex: 2,
              display: "grid",
              gridTemplateRows: "repeat(6, 1fr)",
              alignSelf: "stretch",
              minHeight: diagramH,
              boxSizing: "border-box",
            }}>
              {["Producto A", "Producto B", "Producto C", "Producto D", "Producto E", "Producto F"].map(p => (
                <div
                  key={p}
                  style={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "flex-end",
                    minHeight: 0,
                  }}
                >
                  <div style={{
                    padding: "12px 20px",
                    border: "1px solid var(--border)",
                    background: "var(--surface)",
                    fontFamily: "var(--font-mono)",
                    fontSize: 24,
                    fontWeight: 500,
                    textAlign: "right",
                    minWidth: 300,
                    boxSizing: "border-box",
                  }}>
                    {p} <span style={{ color: "var(--primary)" }}>✓</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <p className="subtitle" style={{ fontSize: 30, color: "var(--fg-2)", maxWidth: 1500 }}>
          Cada producto que consume el DS recibe el fix sin tocar una línea.
        </p>
      </div>
    </Fragment>
  );
}

/* ---------- 15 — Auditorías con impacto ---------- */
function Slide15AuditoriasImpacto() {
  return (
    <Fragment>
      <Chrome section="AUDITORÍAS QUE TOCAN CÓDIGO" n={18} />
      <div className="frame" style={{ justifyContent: "space-between" }}>
        <Eyebrow>El nuevo rol del diseñador</Eyebrow>

        <div>
          <h1 className="title" style={{ fontSize: 130, lineHeight: 0.95 }}>
            Como diseñadores<br/>
            <span className="muted" style={{ fontWeight: 400 }}>también</span> podemos<br/>
            <span className="green">tocar el código</span>.
          </h1>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <p className="body" style={{ fontSize: 36, lineHeight: 1.4, maxWidth: 750 }}>
            Hacer un PR para indicarle al desarrollador
            <strong> el punto exacto</strong> donde corregir
            es 10× más rápido que un comentario en Figma.
          </p>

          {/* code diff sample */}
          <div style={{ background: "var(--fg-1)", color: "var(--bg-base)", padding: 28, fontFamily: "var(--font-mono)", fontSize: 24, lineHeight: 1.5 }}>
            <div style={{ color: "var(--fg-3)", fontSize: 24, marginBottom: 14 }}>Button.tsx · L24</div>
            <div style={{ background: "rgba(255,80,80,0.18)", padding: "0 6px" }}>
              <span style={{ color: "#ff8b8b" }}>−</span> &lt;button className="text-zinc-400"&gt;
            </div>
            <div style={{ background: "rgba(80,255,140,0.18)", padding: "0 6px" }}>
              <span style={{ color: "#7ec699" }}>+</span> &lt;button className="text-zinc-950
            </div>
            <div style={{ background: "rgba(80,255,140,0.18)", padding: "0 6px" }}>
              <span style={{ color: "#7ec699" }}>+</span> &nbsp;&nbsp;focus-visible:ring-2"&gt;
            </div>
          </div>
        </div>
      </div>
    </Fragment>
  );
}

/* ---------- 16 — Bypass para Figma ---------- */
function Slide16BypassFigma() {
  return (
    <Fragment>
      <Chrome section="¿AÚN DISEÑAS EN FIGMA?" n={19} />
      <div className="frame" style={{ justifyContent: "center", gap: 56 }}>
        <Eyebrow>Un puente, no un castigo</Eyebrow>

        <h1 className="title" style={{ fontSize: 110, lineHeight: 0.95 }}>
          El <span className="green">"bypass"</span> para Figma:<br/>
          evaluar interfaces en su entorno visual.
        </h1>

        {/* equation */}
        <div style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          gap: 32,
          padding: "48px 32px",
          border: "1px solid var(--border)",
          background: "var(--bg-subtle)",
          marginTop: 24,
        }}>
          <FormulaPill label="FIGMA CLI" sub="export · vars" />
          <FormulaOp>+</FormulaOp>
          <FormulaPill label="AGENTES" sub="Claude / Codex" />
          <FormulaOp>+</FormulaOp>
          <FormulaPill label="MCP" sub="conectores" />
          <FormulaOp>=</FormulaOp>
          <FormulaPill label="AUDITORÍA" sub="visual + a11y" highlight />
        </div>

        <p className="subtitle" style={{ fontSize: 32, color: "var(--fg-2)", maxWidth: 1600 }}>
          Si el equipo aún vive en Figma, no hay que migrar el martes.
          Hay un camino intermedio donde la accesibilidad ya funciona.
        </p>
      </div>
    </Fragment>
  );
}

function FormulaPill({ label, sub, highlight }) {
  return (
    <div style={{
      padding: "20px 28px",
      border: highlight ? "2px solid var(--primary)" : "1px solid var(--border)",
      background: highlight ? "var(--primary)" : "var(--surface)",
      color: highlight ? "var(--primary-foreground)" : "var(--fg-1)",
      display: "flex", flexDirection: "column", gap: 6, minWidth: 200,
    }}>
      <span className="mono" style={{ fontSize: 24, fontWeight: 700 }}>{label}</span>
      <span className="mono" style={{ fontSize: 24, opacity: 0.75, textTransform: "none", letterSpacing: 0 }}>{sub}</span>
    </div>
  );
}
function FormulaOp({ children }) {
  return <span style={{ fontFamily: "var(--font-mono)", fontSize: 56, fontWeight: 300, color: "var(--fg-2)" }}>{children}</span>;
}

window.Slide09AITools = Slide09AITools;
window.Slide10Skills = Slide10Skills;
window.Slide11MCPs = Slide11MCPs;
window.Slide12OpenSource = Slide12OpenSource;
window.Slide12bAccessibilityAgents = Slide12bAccessibilityAgents;
window.Slide13Agentes = Slide13Agentes;
window.Slide14RepoImpact = Slide14RepoImpact;
window.Slide15AuditoriasImpacto = Slide15AuditoriasImpacto;
window.Slide16BypassFigma = Slide16BypassFigma;