/* Mindburn Labs — Docs & email templates */

function DocsPattern() {
  return (
    <Spec label="Docs · long-form reading" code="pattern.docs" flush>
      <div style={{ display: "grid", gridTemplateColumns: "220px 1fr 200px", minHeight: 420, background: "var(--bg)" }}>
        <aside style={{ borderRight: "1px solid var(--line)", padding: "var(--space-5) var(--space-4)", display: "flex", flexDirection: "column", gap: 4 }}>
          <div className="t-label" style={{ marginBottom: 6 }}>HELM · v1.4</div>
          {[["Getting started", false], ["Install", false], ["Quickstart", true], ["Concepts", false], ["Policies", false], ["Receipts", false], ["Verify offline", false], ["SDK reference", false]].map(([t, a]) => (
            <div key={t} style={{ fontSize: 13, padding: "5px 8px", borderRadius: "var(--radius-2)", background: a ? "var(--surface)" : "transparent", color: a ? "var(--ink)" : "var(--ink-2)", fontWeight: a ? 500 : 400 }}>{t}</div>
          ))}
        </aside>
        <article style={{ padding: "var(--space-7) var(--space-8)", maxWidth: 680 }}>
          <div className="t-label">QUICKSTART · 5 MIN</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: 44, letterSpacing: "-0.02em", lineHeight: 1.05, margin: "6px 0 10px", fontWeight: 400 }}>Your first signed receipt.</h1>
          <p className="t-body-lg" style={{ color: "var(--ink-2)", marginBottom: 16 }}>Wrap an OpenAI-compatible client with HELM. Every action passes through the boundary and emits a receipt.</p>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: 22, letterSpacing: "-0.01em", margin: "20px 0 8px" }}>Install</h2>
          <pre className="codeblock" style={{ fontSize: 12 }}><code><span className="c-com">$</span> npm install @mindburn/helm</code></pre>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: 22, letterSpacing: "-0.01em", margin: "20px 0 8px" }}>Wrap your client</h2>
          <pre className="codeblock" style={{ fontSize: 12 }}><code>
<span className="c-key">import</span> {"{"} helm {"}"} <span className="c-key">from</span> <span className="c-str">"@mindburn/helm"</span>;{"\n"}
<span className="c-key">const</span> client = helm(openai, {"{"} policy: <span className="c-str">"./policies"</span> {"}"});
          </code></pre>
          <div className="callout callout--accent" style={{ marginTop: 16 }}>
            <Icon name="shield" />
            <div><div className="callout__title">Fail-closed</div><div className="callout__body">If the boundary can't verify, the action does not run. This is the default.</div></div>
          </div>
        </article>
        <aside style={{ borderLeft: "1px solid var(--line)", padding: "var(--space-5) var(--space-4)" }}>
          <div className="t-label" style={{ marginBottom: 8 }}>ON THIS PAGE</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 5, fontSize: 12 }}>
            <span style={{ color: "var(--ink)", borderLeft: "1.5px solid var(--accent)", paddingLeft: 8 }}>Install</span>
            <span style={{ color: "var(--ink-3)", paddingLeft: 10 }}>Wrap your client</span>
            <span style={{ color: "var(--ink-3)", paddingLeft: 10 }}>Write a policy</span>
            <span style={{ color: "var(--ink-3)", paddingLeft: 10 }}>Verify the receipt</span>
          </div>
        </aside>
      </div>
    </Spec>
  );
}

function EmailPattern() {
  return (
    <Spec label="Email · daily digest" code="pattern.email" flush>
      <div style={{ padding: "var(--space-7)", background: "var(--bg-2)", display: "flex", justifyContent: "center" }}>
        <div style={{ width: 520, background: "var(--surface)", border: "1px solid var(--line)", borderRadius: "var(--radius-4)", overflow: "hidden" }}>
          <div style={{ padding: "var(--space-5)", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <Lockup size={28} />
            <span className="t-mono-xs" style={{ color: "var(--ink-3)" }}>APR 18 · 09:00</span>
          </div>
          <div style={{ padding: "var(--space-5)" }}>
            <div className="t-label">DAILY DIGEST</div>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: 28, letterSpacing: "-0.02em", lineHeight: 1.1, margin: "4px 0 12px", fontWeight: 400 }}>
              3,441 blocks. <em style={{ color: "var(--ink-3)" }}>No incidents.</em>
            </h2>
            <p className="t-body" style={{ color: "var(--ink-2)", marginBottom: 14 }}>Your boundary held. Here's what happened in the last 24 hours.</p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 0, border: "1px solid var(--line)", borderRadius: "var(--radius-3)", overflow: "hidden", marginBottom: 14 }}>
              {[["128,402", "ACTIONS"], ["3,441", "BLOCKED"], ["14", "TO REVIEW"]].map(([v, l], i) => (
                <div key={l} style={{ padding: "12px 14px", borderLeft: i === 0 ? 0 : "1px solid var(--line)" }}>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 22, letterSpacing: "-0.01em", lineHeight: 1 }}>{v}</div>
                  <div className="t-label" style={{ marginTop: 4 }}>{l}</div>
                </div>
              ))}
            </div>
            <div style={{ display: "flex", gap: 8 }}>
              <Button variant="primary" size="sm" iconRight="arrow-right">Open dashboard</Button>
              <Button variant="ghost" size="sm">Review queue</Button>
            </div>
          </div>
          <div style={{ padding: "12px var(--space-5)", borderTop: "1px dashed var(--line-2)", fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-3)", display: "flex", justifyContent: "space-between" }}>
            <span>mindburn.dev/helm</span>
            <span>Signed · ed25519</span>
          </div>
        </div>
      </div>
    </Spec>
  );
}

function SurfacesSection() {
  return (
    <section className="ds-section" id="surfaces">
      <div className="ds-section__head">
        <div className="ds-section__num">06 · Surfaces</div>
        <div>
          <h2 className="ds-section__title">Docs & email.</h2>
          <p className="ds-section__lead">Long-form reading and transactional email — the quiet surfaces where the system earns its trust.</p>
        </div>
      </div>
      <div className="ds-section__body" style={{ display: "flex", flexDirection: "column", gap: 24 }}>
        <DocsPattern />
        <EmailPattern />
      </div>
    </section>
  );
}

Object.assign(window, { SurfacesSection });