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

/* =====================================================================
   SECTION 4 — DEMO  (slide 17)
   ===================================================================== */

/* ---------- 17 — Let's build · Demo en Cursor ---------- */
function Slide17Demo() {
  return (
    <Fragment>
      <Chrome section="DEMO EN VIVO" n={20} />
      <div className="frame" style={{ justifyContent: "space-between" }}>
        <Eyebrow>Cierre — manos en el teclado</Eyebrow>

        <div>
          <span className="mono" style={{ fontSize: 32, color: "var(--primary)" }}>$ LET'S BUILD</span>
          <h1 className="title-display" style={{ fontSize: 280, lineHeight: 0.88, marginTop: 24 }}>
            Demo<br/>en Cursor.
          </h1>
        </div>

        {/* Cursor-style window mock */}
        <div style={{
          border: "1px solid var(--border)",
          background: "var(--fg-1)",
          color: "var(--bg-base)",
          fontFamily: "var(--font-mono)",
          fontSize: 24,
          padding: "20px 28px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 24,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
            <span style={{ color: "var(--primary)" }}>●</span>
            <span style={{ color: "var(--fg-3)" }}>cursor —</span>
            <span>design-system / Button.tsx</span>
          </div>
          <div style={{ display: "flex", gap: 18, color: "var(--fg-3)", fontSize: 24 }}>
            <span>⌘ K</span>
            <span>·</span>
            <span>AGENT MODE</span>
            <span>·</span>
            <span style={{ color: "var(--primary)" }}>READY</span>
          </div>
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
          <p className="subtitle" style={{ fontSize: 36, maxWidth: 1100 }}>
            Gracias. <span className="muted">Conversemos en</span> <strong>@shovillalba</strong>.
          </p>
          <span className="mono" style={{ fontSize: 24, color: "var(--fg-3)" }}>FIN</span>
        </div>
      </div>
    </Fragment>
  );
}

window.Slide17Demo = Slide17Demo;