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

/* =====================================================================
   SECTION 2 — EL PUNTO DE QUIEBRE  (slides 05–08)
   ===================================================================== */

/* ---------- 05 — A11Y Ready (the secret) ---------- */
function Slide05A11yReady() {
  return (
    <Fragment>
      <Chrome section="EL SECRETO PARA ESCALAR" n={7} />
      <div className="frame" style={{ justifyContent: "center", gap: 48 }}>
        <Eyebrow>Tesis principal</Eyebrow>

        <h1 className="title" style={{ fontSize: 130, lineHeight: 0.95, maxWidth: 1700 }}>
          La única forma de escalar accesibilidad consistentemente
          es con un Design System <span className="green">"A11Y Ready"</span>.
        </h1>

        <div style={{ display: "flex", gap: 40, marginTop: 32, alignItems: "stretch" }}>
          <div style={{ flex: 1, padding: "32px 40px", border: "1px solid var(--border)", display: "flex", flexDirection: "column", gap: 12 }}>
            <span className="mono" style={{ fontSize: 24, color: "var(--fg-2)" }}>SIN DS A11Y READY</span>
            <span style={{ fontFamily: "var(--font-sans)", fontSize: 32, fontWeight: 500, color: "var(--fg-1)" }}>
              Cada equipo arregla lo mismo, distinto. <span className="muted">N veces.</span>
            </span>
          </div>
          <div style={{ flex: 1, padding: "32px 40px", background: "var(--primary)", color: "var(--primary-foreground)", display: "flex", flexDirection: "column", gap: 12 }}>
            <span className="mono" style={{ fontSize: 24, opacity: 0.85 }}>CON DS A11Y READY</span>
            <span style={{ fontFamily: "var(--font-sans)", fontSize: 32, fontWeight: 500 }}>
              Lo arreglas una vez. Lo heredan todos.
            </span>
          </div>
        </div>
      </div>
    </Fragment>
  );
}

/* ---------- 06 — Estamos saliendo de Figma ---------- */
function Slide06SaliendoFigma() {
  return (
    <Fragment>
      <Chrome section="CAMBIO DE PARADIGMA" n={8} />
      <div className="frame" style={{ justifyContent: "space-between" }}>
        <Eyebrow>Una observación incómoda</Eyebrow>

        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 40 }}>
          <div>
            <h1 className="title" style={{ fontSize: 160, lineHeight: 0.92 }}>
              Estamos<br/>
              saliendo<br/>
              de <span style={{ textDecoration: "line-through", textDecorationThickness: 8, color: "var(--fg-2)" }}>Figma</span>.
            </h1>
          </div>

          {/* Venn Diagram */}
          <div style={{ position: "relative", width: 600, height: 400, flexShrink: 0, marginTop: -40 }}>
            <svg viewBox="0 0 600 400" style={{ width: "100%", height: "100%", overflow: "visible" }}>
              <defs>
                <clipPath id="venn-clip-6">
                  <circle cx="220" cy="200" r="160" />
                </clipPath>
              </defs>
              
              {/* Circle Design */}
              <circle cx="220" cy="200" r="160" fill="none" stroke="var(--fg-1)" strokeWidth="3" />
              <text x="140" y="200" fontFamily="var(--font-mono)" fontSize="28" fontWeight="600" fill="var(--fg-1)" textAnchor="middle">DISEÑO</text>
              
              {/* Circle Code */}
              <circle cx="380" cy="200" r="160" fill="none" stroke="var(--fg-1)" strokeWidth="3" />
              <text x="460" y="200" fontFamily="var(--font-mono)" fontSize="28" fontWeight="600" fill="var(--fg-1)" textAnchor="middle">CÓDIGO</text>
              
              {/* Intersection */}
              <g clipPath="url(#venn-clip-6)">
                <circle cx="380" cy="200" r="160" fill="var(--primary)" opacity="0.2" />
              </g>
              
              {/* Intersection Label */}
              <g transform="translate(300, 200)">
                <rect x="-50" y="-25" width="100" height="50" fill="var(--primary)" />
                <text y="7" fontFamily="var(--font-mono)" fontSize="22" fontWeight="700" fill="var(--primary-foreground)" textAnchor="middle">A11Y</text>
              </g>
            </svg>
          </div>
        </div>

        <div style={{ display: "flex", gap: 80, alignItems: "flex-end", justifyContent: "space-between" }}>
          <p className="subtitle" style={{ maxWidth: 1100, fontSize: 38 }}>
            El código está hoy más cerca de los diseñadores —
            y el diseño, más cerca de los desarrolladores.
            <br/>
            <span className="green">Ambos mundos están colisionando.</span>
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-end" }}>
            <span className="mono" style={{ fontSize: 24, color: "var(--fg-2)" }}>2020 → 2026</span>
            <div style={{ display: "flex", gap: 12 }}>
              <span className="tag">DESIGN</span>
              <span className="tag">→</span>
              <span className="tag green">CODE</span>
            </div>
          </div>
        </div>
      </div>
    </Fragment>
  );
}

/* ---------- 07 — Un handoff mucho más real ---------- */
function Slide07HandoffReal() {
  return (
    <Fragment>
      <Chrome section="EL HANDOFF AHORA ES REAL" n={9} />
      <div className="frame" style={{ justifyContent: "center", gap: 56 }}>
        <Eyebrow>El handoff cambia de naturaleza</Eyebrow>

        <h1 className="title" style={{ fontSize: 96, maxWidth: 1700 }}>
          Ya no entregamos <span className="muted">reinterpretaciones visuales</span>.<br/>
          Entregamos <span className="green">código real</span>, hecho bajo estándares.
        </h1>

        <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: 0, marginTop: 16, alignItems: "stretch" }}>
          {/* Antes */}
          <div style={{ padding: 40, border: "1px solid var(--border)", display: "flex", flexDirection: "column", gap: 20 }}>
            <span className="mono" style={{ fontSize: 24, color: "var(--fg-2)" }}>ANTES</span>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 40, fontWeight: 600, lineHeight: 1.15 }}>
              Mockup en Figma →<br/>
              dev lo reinterpreta.
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: "auto" }}>
              <span className="mono" style={{ fontSize: 24, color: "var(--fg-3)" }}>FIDELIDAD</span>
              <div style={{ height: 12, background: "var(--bg-muted)" }}>
                <div style={{ height: "100%", width: "45%", background: "var(--fg-2)" }} />
              </div>
            </div>
          </div>

          {/* Arrow */}
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "0 32px", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 80, color: "var(--primary)", fontWeight: 300 }}>→</span>
          </div>

          {/* Ahora */}
          <div style={{ padding: 40, border: "1px solid var(--border)", borderLeft: "none", background: "var(--bg-subtle)", display: "flex", flexDirection: "column", gap: 20 }}>
            <span className="mono" style={{ fontSize: 24, color: "var(--primary)" }}>AHORA</span>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 40, fontWeight: 600, lineHeight: 1.15 }}>
              Componente en código →<br/>
              dev lo consume.
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: "auto" }}>
              <span className="mono" style={{ fontSize: 24, color: "var(--fg-3)" }}>FIDELIDAD</span>
              <div style={{ height: 12, background: "var(--bg-muted)" }}>
                <div style={{ height: "100%", width: "100%", background: "var(--primary)" }} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </Fragment>
  );
}

/* ---------- 08 — Source of truth ---------- */
function Slide08SourceOfTruth() {
  return (
    <Fragment>
      <Chrome section="LA FUENTE DE LA VERDAD" n={10} />
      <div className="frame" style={{ justifyContent: "center", gap: 60 }}>
        <Eyebrow>Reubiquemos la verdad</Eyebrow>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }}>
          {/* Figma side - intentions */}
          <div style={{ border: "1px solid var(--border)", padding: 56, display: "flex", flexDirection: "column", gap: 28, position: "relative" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span className="mono" style={{ fontSize: 24, color: "var(--fg-2)" }}>FIGMA</span>
              <span className="mono" style={{ fontSize: 24, color: "var(--fg-3)" }}>.fig</span>
            </div>
            <h2 style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 64, margin: 0, lineHeight: 1, letterSpacing: "-0.02em" }}>
              Intenciones<br/>de diseño.
            </h2>
            <p className="body" style={{ fontSize: 28, color: "var(--fg-2)", margin: 0 }}>
              Lo que <em>queremos</em> que el producto sea.
              Una hipótesis visual.
            </p>
            <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 6, background: "var(--fg-2)" }} />
          </div>

          {/* Repo side - reality */}
          <div style={{ border: "1px solid var(--primary)", padding: 56, display: "flex", flexDirection: "column", gap: 28, position: "relative", background: "var(--bg-subtle)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span className="mono" style={{ fontSize: 24, color: "var(--primary)" }}>GITHUB · REPO</span>
              <span className="mono" style={{ fontSize: 24, color: "var(--fg-3)" }}>main</span>
            </div>
            <h2 style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 64, margin: 0, lineHeight: 1, letterSpacing: "-0.02em" }}>
              La <span className="green">realidad</span>.
            </h2>
            <p className="body" style={{ fontSize: 28, color: "var(--fg-1)", margin: 0 }}>
              Lo que el usuario realmente recibe en el navegador.
              <br/>
              <strong>Aquí pasa la accesibilidad.</strong>
            </p>
            <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 6, background: "var(--primary)" }} />
          </div>
        </div>

        <div style={{ textAlign: "center", marginTop: 16 }}>
          <span className="mono" style={{ fontSize: 26, color: "var(--fg-2)" }}>
            SI VAS A AUDITAR ALGO, AUDITA <span className="green">EL REPO</span>.
          </span>
        </div>
      </div>
    </Fragment>
  );
}

window.Slide05A11yReady = Slide05A11yReady;

/* ---------- 05b — Scaling Impact ---------- */
function Slide05bScaling() {
  const diagramH = 420;
  const hubX = 260;
  const branchEndX = 920;
  const branchYs = Array.from({ length: 6 }, (_, i) => ((i + 0.5) * diagramH) / 6);
  const lineTipX = branchEndX - 8;

  return (
    <Fragment>
      <Chrome section="EL SECRETO PARA ESCALAR" n={6} />
      <div className="frame" style={{ justifyContent: "center", gap: 60 }}>
        <Eyebrow>Escalabilidad</Eyebrow>

        <h1 className="title" style={{ fontSize: 110, lineHeight: 0.95, maxWidth: 1700 }}>
          El sistema de diseño escala la interfaz<br/>
          del <span className="green">producto digital</span>.
        </h1>

        <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 }}>SCALE</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" }}>Core</span>
          </div>

          <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="slide05b-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(#slide05b-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>
      </div>
    </Fragment>
  );
}

window.Slide05bScaling = Slide05bScaling;
window.Slide06SaliendoFigma = Slide06SaliendoFigma;
window.Slide07HandoffReal = Slide07HandoffReal;
window.Slide08SourceOfTruth = Slide08SourceOfTruth;