/* Mindburn Labs — Foundations section (color, type, space, radius, motion, grid) */

function FoundationColor() {
  const surfaces = [
    { name: "bg", varName: "--bg" },
    { name: "bg-2", varName: "--bg-2" },
    { name: "surface", varName: "--surface" },
    { name: "surface-2", varName: "--surface-2" },
    { name: "surface-sunk", varName: "--surface-sunk" },
  ];
  const ink = [
    { name: "ink", varName: "--ink" },
    { name: "ink-2", varName: "--ink-2" },
    { name: "ink-3", varName: "--ink-3" },
    { name: "ink-4", varName: "--ink-4" },
    { name: "line", varName: "--line" },
    { name: "line-2", varName: "--line-2" },
  ];
  const semantic = [
    { name: "accent / ember", varName: "--accent" },
    { name: "ok / sage", varName: "--ok" },
    { name: "warn / amber", varName: "--warn" },
    { name: "info / ink-blue", varName: "--info" },
  ];
  const emberRamp = [50, 100, 200, 300, 400, 500, 600, 700];

  const SwatchVar = ({ name, varName }) => (
    <div className="swatch">
      <div className="swatch__color" style={{ background: `var(${varName})` }} />
      <div className="swatch__meta">
        <span className="swatch__name">{name}</span>
        <span className="swatch__val">{varName}</span>
      </div>
    </div>
  );

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-6)" }}>
      <Spec label="Surface stack" code="--bg · --surface · --surface-sunk">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
          {surfaces.map((s) => <SwatchVar key={s.name} {...s} />)}
        </div>
      </Spec>
      <Spec label="Ink + lines" code="--ink · --line">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 12 }}>
          {ink.map((s) => <SwatchVar key={s.name} {...s} />)}
        </div>
      </Spec>
      <Spec label="Semantic signals" code="--accent · --ok · --warn · --info">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
          {semantic.map((s) => <SwatchVar key={s.name} {...s} />)}
        </div>
      </Spec>
      <Spec label="Ember ramp" code="signal for BLOCK / denial">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: 0, border: "1px solid var(--line)", borderRadius: "var(--radius-3)", overflow: "hidden" }}>
          {emberRamp.map((n) => (
            <div key={n} style={{ background: `var(--ember-${n})`, aspectRatio: "1/1", display: "flex", flexDirection: "column", justifyContent: "flex-end", padding: 10, color: n >= 400 ? "#fff" : "var(--ember-700)" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.14em", opacity: 0.8 }}>ember</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 13 }}>{n}</div>
            </div>
          ))}
        </div>
      </Spec>
    </div>
  );
}

function FoundationType() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
      <Spec label="Display · Fraunces" code="var(--font-display)">
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <div>
            <div className="t-label" style={{ marginBottom: 4 }}>Display / XXL · 120</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 96, lineHeight: 0.98, letterSpacing: "-0.03em" }}>Boundary</div>
          </div>
          <div>
            <div className="t-label" style={{ marginBottom: 4 }}>Display / LG · 60</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 60, lineHeight: 1.05, letterSpacing: "-0.02em" }}>Every action passes.</div>
          </div>
          <div>
            <div className="t-label" style={{ marginBottom: 4 }}>Display / SM · 32</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 32, lineHeight: 1.15, letterSpacing: "-0.01em" }}>The execution boundary for AI agents.</div>
          </div>
        </div>
      </Spec>
      <Spec label="UI + Body · Inter Tight" code="var(--font-sans)">
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <div>
            <div className="t-label" style={{ marginBottom: 4 }}>Body / LG · 17</div>
            <p className="t-body-lg" style={{ maxWidth: "50ch" }}>HELM sits between an agent and a real system. It checks the action, decides if it can run, and stores the signed proof record.</p>
          </div>
          <div>
            <div className="t-label" style={{ marginBottom: 4 }}>Body · 15</div>
            <p className="t-body" style={{ color: "var(--ink-2)", maxWidth: "54ch" }}>Policies live as code. Decisions land in the ledger. Receipts are cryptographically signed and verifiable offline.</p>
          </div>
          <div>
            <div className="t-label" style={{ marginBottom: 4 }}>Body / SM · 13</div>
            <p className="t-body-sm" style={{ color: "var(--ink-3)" }}>OpenAI-compatible at the transport layer. Fail-closed on the action path.</p>
          </div>
          <div>
            <div className="t-label" style={{ marginBottom: 4 }}>Mono · JetBrains Mono</div>
            <div className="t-mono">POLICY_CHECK · wire_transfer · amount=42500.00</div>
            <div className="t-mono-xs" style={{ color: "var(--ink-3)", marginTop: 4 }}>HELM-2026-04-18T16:22:11Z · sha256:3f2a…</div>
          </div>
        </div>
      </Spec>
    </div>
  );
}

function FoundationSpace() {
  const steps = [1,2,3,4,5,6,7,8,9,10,11,12];
  return (
    <Spec label="Spacing · 4px base" code="--space-1 … --space-12">
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {steps.map((s) => (
          <div key={s} style={{ display: "grid", gridTemplateColumns: "60px 60px 1fr", alignItems: "center", gap: 16, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-2)" }}>
            <span style={{ color: "var(--ink-3)" }}>--{s}</span>
            <span>{ [0,4,8,12,16,20,24,32,40,56,72,96,128][s] }px</span>
            <div style={{ height: 8, background: "var(--ink)", width: `var(--space-${s})` }} />
          </div>
        ))}
      </div>
    </Spec>
  );
}

function FoundationRadius() {
  const r = [ ["0","--radius-0"], ["1","--radius-1"], ["2","--radius-2"], ["3","--radius-3"], ["4","--radius-4"], ["5","--radius-5"], ["full","--radius-full"] ];
  return (
    <Spec label="Radius scale" code="--radius-*">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 12 }}>
        {r.map(([name, varName]) => (
          <div key={name} style={{ display: "flex", flexDirection: "column", gap: 8, alignItems: "flex-start" }}>
            <div style={{ width: "100%", aspectRatio: "1/1", background: "var(--surface-sunk)", border: "1px solid var(--line)", borderRadius: `var(${varName})` }} />
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>{varName}</div>
          </div>
        ))}
      </div>
    </Spec>
  );
}

function FoundationMotion() {
  return (
    <Spec label="Motion" code="fast · mid · slow">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
        {[
          { label: "fast · 120ms", dur: 120, note: "Micro-interactions, hover" },
          { label: "mid · 220ms", dur: 220, note: "Standard transitions" },
          { label: "slow · 420ms", dur: 420, note: "Panels, page motion" },
        ].map((m) => (
          <div key={m.label}>
            <div className="t-label" style={{ marginBottom: 8 }}>{m.label}</div>
            <MotionBar duration={m.dur} />
            <div className="t-caption" style={{ marginTop: 8 }}>{m.note}</div>
          </div>
        ))}
      </div>
    </Spec>
  );
}

function MotionBar({ duration }) {
  const [on, setOn] = React.useState(false);
  React.useEffect(() => {
    const id = setInterval(() => setOn((v) => !v), duration + 600);
    return () => clearInterval(id);
  }, [duration]);
  return (
    <div style={{ height: 8, border: "1px solid var(--line)", borderRadius: 999, overflow: "hidden", background: "var(--surface-sunk)" }}>
      <div style={{ height: "100%", width: on ? "100%" : "0%", background: "var(--ink)", transition: `width ${duration}ms cubic-bezier(.2,.7,.2,1)` }} />
    </div>
  );
}

function FoundationGrid() {
  return (
    <Spec label="Grid paper · signature texture" code="24px × 24px" flush gridded>
      <div style={{ padding: "var(--space-6)", minHeight: 180, display: "flex", alignItems: "center", gap: 18 }}>
        <div style={{ width: 72, height: 72, border: "1.25px solid var(--ink)", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <MindburnMark size={44} />
        </div>
        <div>
          <div className="t-label">Substrate</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 28, letterSpacing: "-0.01em", lineHeight: 1.1 }}>Everything is measured.</div>
          <div className="t-caption" style={{ marginTop: 6, maxWidth: "50ch" }}>The grid is our substrate. It appears on hero surfaces, empty states, and marketing — never on dense UI.</div>
        </div>
      </div>
    </Spec>
  );
}

function FoundationsSection() {
  return (
    <section className="ds-section" id="foundations">
      <div className="ds-section__head">
        <div className="ds-section__num">01 · Foundations</div>
        <div>
          <h2 className="ds-section__title">The substrate.</h2>
          <p className="ds-section__lead">Tokens are the contract. Color, type, space, radius, motion — each is a named variable. Light and dark themes simply remap the same semantic names onto different values.</p>
        </div>
      </div>
      <div className="ds-section__body" style={{ display: "flex", flexDirection: "column", gap: 24 }}>
        <FoundationColor />
        <FoundationType />
        <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 20 }}>
          <FoundationSpace />
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            <FoundationRadius />
            <FoundationMotion />
          </div>
        </div>
        <FoundationGrid />
      </div>
    </section>
  );
}

Object.assign(window, { FoundationsSection });