/* Mindburn Labs — Patterns: hero, pipeline, dashboard, policy editor, receipt */

function HeroPattern() {
  return (
    <Spec label="Marketing · hero" code="pattern.hero" flush gridded>
      <div style={{ padding: "48px 40px", display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 40, alignItems: "end" }}>
        <div>
          <Eyebrow>HELM by Mindburn Labs</Eyebrow>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: 78, lineHeight: 0.98, letterSpacing: "-0.03em", fontWeight: 400, margin: "16px 0 20px", color: "var(--ink)" }}>
            The execution<br /><em style={{ fontStyle: "italic", color: "var(--ink-3)" }}>boundary</em> for<br />AI agents.
          </h1>
          <p className="t-body-lg" style={{ color: "var(--ink-2)", maxWidth: "46ch", marginBottom: 20 }}>HELM sits between an agent and a real system. It checks the action, decides if it can run, and signs a receipt that anyone can verify — offline, forever.</p>
          <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 12 }}>
            <Button variant="primary" iconRight="arrow-right">Install HELM OSS</Button>
            <Button variant="ghost" iconRight="arrow-up-right">Request platform access</Button>
          </div>
          <div className="t-caption">OpenAI-compatible transport · Fail-closed on the action path · MIT + commercial</div>
        </div>
        <HeroReceiptCluster />
      </div>
    </Spec>
  );
}

function HeroReceiptCluster() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
        <Tag>Low-risk CRM update</Tag>
        <Tag variant="solid">Large wire transfer</Tag>
        <Tag>Exception payout</Tag>
      </div>
      <Receipt
        rows={[
          { k: "PROPOSED ACTION", v: <span className="t-mono">wire_transfer(42,500.00 USD)</span> },
          { k: "POLICY CHECK", v: "Blocked when the amount exceeds policy or approval is missing." },
          { k: "BOUNDARY DECISION", v: <Tag variant="block" dot>BLOCK</Tag> },
          { k: "RECEIPT OUTPUT", v: "Records the denied action, rule match, and hash root." },
        ]}
      />
    </div>
  );
}

function Receipt({ rows, title = "Receipt", serial = "HLM-2026-04-18-00042", perf = false }) {
  return (
    <div className={"receipt" + (perf ? " receipt--perf" : "")}>
      <div className="receipt__head">
        <div className="receipt__title">{title}</div>
        <div className="receipt__serial">№ {serial}</div>
      </div>
      {rows.map((r, i) => (
        <div key={i} className="receipt__row">
          <div className="k">{r.k}</div>
          <div className="v">{r.v}</div>
        </div>
      ))}
      <div className="receipt__foot">
        <span>sha256 · 3f2a9c…e18b</span>
        <span>signed · ed25519</span>
      </div>
    </div>
  );
}

function PipelinePattern() {
  const steps = [
    { num: "01", title: "Intent", sub: "Agent proposes", body: "wire_transfer(42,500)", tone: "ink" },
    { num: "02", title: "Match", sub: "Rule hits", body: "over_10k", tone: "info" },
    { num: "03", title: "Check", sub: "Approvals + scope", body: "cfo.approval = missing", tone: "warn" },
    { num: "04", title: "Decide", sub: "Boundary verdict", body: "BLOCK", tone: "accent" },
    { num: "05", title: "Sign", sub: "Receipt issued", body: "sha256 · ed25519", tone: "ok" },
  ];
  return (
    <Spec label="Mechanism · HELM pipeline" code="pattern.pipeline">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 0, border: "1px solid var(--line)", borderRadius: "var(--radius-4)", overflow: "hidden" }}>
        {steps.map((s, i) => (
          <div key={s.num} style={{ padding: "var(--space-5)", borderLeft: i === 0 ? 0 : "1px solid var(--line)", background: "var(--surface)", minHeight: 180, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
            <div>
              <div className="t-label" style={{ marginBottom: 8 }}>{s.num}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 28, letterSpacing: "-0.01em", lineHeight: 1 }}>{s.title}</div>
              <div className="t-caption" style={{ marginTop: 4 }}>{s.sub}</div>
            </div>
            <div>
              <div className="rule--dashed" style={{ margin: "12px 0" }} />
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: s.tone === "accent" ? "var(--accent)" : s.tone === "ok" ? "var(--ok)" : s.tone === "warn" ? "var(--warn)" : s.tone === "info" ? "var(--info)" : "var(--ink-2)" }}>{s.body}</div>
            </div>
          </div>
        ))}
      </div>
    </Spec>
  );
}

function DashboardPattern() {
  const sparkPath = "M0,22 L10,18 L22,20 L34,14 L46,16 L58,10 L70,12 L82,6 L94,8 L106,4";
  return (
    <Spec label="Platform · dashboard" code="pattern.dashboard" flush>
      <div style={{ padding: "var(--space-5)", background: "var(--bg)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 16 }}>
          <div>
            <Eyebrow>OPERATIONS · LAST 24H</Eyebrow>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 28, letterSpacing: "-0.01em", marginTop: 4 }}>Boundary activity</div>
          </div>
          <div style={{ display: "flex", gap: 6 }}>
            <Button variant="secondary" size="sm">24h</Button>
            <Button variant="ghost" size="sm">7d</Button>
            <Button variant="ghost" size="sm">30d</Button>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, border: "1px solid var(--line)", borderRadius: "var(--radius-3)", background: "var(--surface)", overflow: "hidden", marginBottom: 16 }}>
          {[
            { l: "ACTIONS", v: "128,402", d: "+6.2%" },
            { l: "ALLOWED", v: "96.1%", d: "+0.3%" },
            { l: "BLOCKED", v: "3,441", d: "+12%", warn: true },
            { l: "P50 LATENCY", v: "4", unit: "ms", d: "−0.4ms" },
          ].map((s, i) => (
            <div key={s.l} style={{ padding: "var(--space-4) var(--space-5)", borderLeft: i === 0 ? 0 : "1px solid var(--line)" }}>
              <div className="stat__label">{s.l}</div>
              <div className="stat__value" style={{ fontSize: 36 }}>{s.v}{s.unit && <span className="stat__unit">{s.unit}</span>}</div>
              <div className={"stat__delta" + (s.warn ? " stat__delta--down" : "")}>{s.d}</div>
            </div>
          ))}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 16 }}>
          <div className="card">
            <div className="card__header"><span className="t-label">Decisions · per minute</span><span className="t-caption">updated 12s ago</span></div>
            <div style={{ padding: "var(--space-4) var(--space-5)" }}>
              <svg viewBox="0 0 106 32" style={{ width: "100%", height: 80 }}>
                <defs>
                  <linearGradient id="sg" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stopColor="var(--ink)" stopOpacity="0.18" /><stop offset="1" stopColor="var(--ink)" stopOpacity="0" /></linearGradient>
                </defs>
                <path d={sparkPath + " L106,32 L0,32 Z"} fill="url(#sg)" />
                <path d={sparkPath} fill="none" stroke="var(--ink)" strokeWidth="0.8" />
                {Array.from({ length: 11 }).map((_, i) => (
                  <line key={i} x1={i * 10.6} y1="32" x2={i * 10.6} y2="30" stroke="var(--ink-3)" strokeWidth="0.3" />
                ))}
              </svg>
            </div>
            <div className="card__footer"><span className="t-mono-xs">00:00</span><span className="t-mono-xs">24:00</span></div>
          </div>
          <div className="card">
            <div className="card__header"><span className="t-label">Top blocked policies</span></div>
            <div>
              {[
                ["wire_transfer.over_10k", 842, "block"],
                ["pii.exfiltration", 411, "block"],
                ["refund.auto_issue", 204, "review"],
                ["crm.mass_update", 98, "review"],
              ].map(([name, n, tone]) => (
                <div key={name} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px var(--space-5)", borderTop: "1px solid var(--line)" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <Tag variant={tone} dot>{tone}</Tag>
                    <span className="t-mono" style={{ fontSize: 12 }}>{name}</span>
                  </div>
                  <span className="num t-mono">{n}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </Spec>
  );
}

function PolicyEditorPattern() {
  return (
    <Spec label="Platform · policy editor" code="pattern.policy" flush>
      <div style={{ display: "grid", gridTemplateColumns: "220px 1fr 280px", minHeight: 360, background: "var(--bg)" }}>
        <div style={{ borderRight: "1px solid var(--line)", padding: "var(--space-4)", display: "flex", flexDirection: "column", gap: 2 }}>
          <div className="t-label" style={{ marginBottom: 8 }}>Policies · 24</div>
          {["wire_transfer.over_10k", "pii.exfiltration", "refund.auto_issue", "crm.mass_update", "ticket.bulk_close", "tool.shell_exec"].map((p, i) => (
            <div key={p} style={{ padding: "6px 8px", borderRadius: "var(--radius-2)", background: i === 0 ? "var(--surface)" : "transparent", fontFamily: "var(--font-mono)", fontSize: 12, color: i === 0 ? "var(--ink)" : "var(--ink-2)", display: "flex", justifyContent: "space-between" }}>
              <span>{p}</span>
              {i === 0 && <Icon name="lock" size={12} />}
            </div>
          ))}
        </div>
        <div style={{ padding: "var(--space-5)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <div>
              <div className="t-label">EDITING</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 24, letterSpacing: "-0.01em" }}>wire_transfer.over_10k</div>
            </div>
            <div style={{ display: "flex", gap: 6 }}>
              <Button variant="ghost" size="sm">Dry-run</Button>
              <Button variant="primary" size="sm" iconRight="arrow-right">Publish</Button>
            </div>
          </div>
          <div style={{ marginTop: 14 }}>
            <pre className="codeblock" style={{ fontSize: 12 }}><code>
<span className="c-key">policy</span>(<span className="c-str">"wire_transfer.over_10k"</span>, {"{"}{"\n"}
{"  "}<span className="c-key">match</span>: {"{"} action: <span className="c-str">"wire_transfer"</span>, amount: {"{"} gte: <span className="c-num">10000</span> {"}"} {"}"},{"\n"}
{"  "}<span className="c-key">require</span>: [<span className="c-str">"approval.cfo"</span>, <span className="c-str">"ledger.sign"</span>],{"\n"}
{"  "}<span className="c-key">on_fail</span>: <span className="c-str">"block"</span>,{"\n"}
{"  "}<span className="c-key">receipt</span>: {"{"} include: [<span className="c-str">"amount"</span>, <span className="c-str">"counterparty"</span>] {"}"},{"\n"}
{"}"});
            </code></pre>
          </div>
        </div>
        <div style={{ borderLeft: "1px solid var(--line)", padding: "var(--space-4)", display: "flex", flexDirection: "column", gap: 14 }}>
          <div>
            <div className="t-label" style={{ marginBottom: 8 }}>Dry-run · last 1,000 requests</div>
            <div style={{ display: "flex", gap: 6 }}>
              <Tag variant="allow" dot>Allow 912</Tag>
              <Tag variant="block" dot>Block 74</Tag>
              <Tag variant="review" dot>Review 14</Tag>
            </div>
          </div>
          <div>
            <div className="t-label" style={{ marginBottom: 6 }}>Would-block examples</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {["42,500.00 → CP: Acme", "18,900.00 → CP: Globex", "11,020.00 → CP: Initech"].map((x) => (
                <div key={x} className="t-mono" style={{ fontSize: 11, padding: "6px 8px", background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 4, color: "var(--ink-2)" }}>{x}</div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </Spec>
  );
}

function ReceiptPattern() {
  return (
    <Spec label="Signed receipt · pattern.receipt" code="emitted per decision">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
        <Receipt
          title="Receipt · BLOCK"
          serial="HLM-2026-04-18-00042"
          rows={[
            { k: "ACTION", v: <span className="t-mono">wire_transfer</span> },
            { k: "AGENT", v: "ops-copilot/v4" },
            { k: "AMOUNT", v: "42,500.00 USD" },
            { k: "RULE MATCH", v: "wire_transfer.over_10k" },
            { k: "REASON", v: "approval.cfo missing" },
            { k: "DECISION", v: <Tag variant="block" dot>BLOCK</Tag> },
          ]}
        />
        <Receipt
          title="Receipt · ALLOW"
          serial="HLM-2026-04-18-00041"
          rows={[
            { k: "ACTION", v: <span className="t-mono">crm.update</span> },
            { k: "AGENT", v: "sales-assist/v2" },
            { k: "SCOPE", v: "account:acme-42" },
            { k: "RULE MATCH", v: "crm.update.bounded" },
            { k: "DECISION", v: <Tag variant="allow" dot>ALLOW</Tag> },
            { k: "LATENCY", v: "4ms" },
          ]}
        />
      </div>
    </Spec>
  );
}

function PatternsSection() {
  return (
    <section className="ds-section" id="patterns">
      <div className="ds-section__head">
        <div className="ds-section__num">03 · Patterns</div>
        <div>
          <h2 className="ds-section__title">Compositions.</h2>
          <p className="ds-section__lead">Patterns assemble components into the repeated compositions users will actually see — hero, pipeline, dashboard, editor, receipt.</p>
        </div>
      </div>
      <div className="ds-section__body" style={{ display: "flex", flexDirection: "column", gap: 24 }}>
        <HeroPattern />
        <PipelinePattern />
        <DashboardPattern />
        <PolicyEditorPattern />
        <ReceiptPattern />
      </div>
    </section>
  );
}

Object.assign(window, { PatternsSection, Receipt });