/* Mindburn Labs — Core component gallery */

function ComponentsSection() {
  const [switchOn, setSwitchOn] = React.useState(true);
  const [checked, setChecked] = React.useState(true);
  const [activeChip, setActiveChip] = React.useState("All");

  return (
    <section className="ds-section" id="components">
      <div className="ds-section__head">
        <div className="ds-section__num">02 · Components</div>
        <div>
          <h2 className="ds-section__title">Well-tempered instruments.</h2>
          <p className="ds-section__lead">Every component is token-driven and theme-agnostic. These are the same atoms used across platform, website, docs, and decks.</p>
        </div>
      </div>
      <div className="ds-section__body" style={{ display: "flex", flexDirection: "column", gap: 24 }}>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
          <Spec label="Buttons" code="btn · btn--*">
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                <Button variant="primary" iconRight="arrow-right">Install HELM OSS</Button>
                <Button variant="secondary" iconRight="arrow-up-right">Request access</Button>
                <Button variant="ghost">Read docs</Button>
                <Button variant="accent" iconLeft="bolt">Try Platform</Button>
              </div>
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                <Button variant="primary" size="sm">Approve</Button>
                <Button variant="secondary" size="sm" iconLeft="copy">Copy hash</Button>
                <Button variant="danger" size="sm" iconLeft="close">Revoke</Button>
                <Button variant="secondary" size="sm" iconLeft="search">Search</Button>
                <Button variant="secondary" size="sm">⌘K</Button>
              </div>
              <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
                <Button variant="primary" size="lg" iconRight="arrow-right">Get started</Button>
                <Button variant="secondary" size="lg">Contact sales</Button>
              </div>
            </div>
          </Spec>

          <Spec label="Inputs & forms" code="input · field">
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <div className="field">
                <label>Policy name</label>
                <input className="input" defaultValue="wire_transfer.over_10k" />
                <span className="hint">Used in the receipt and audit log.</span>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <div className="field">
                  <label>Threshold</label>
                  <input className="input" defaultValue="10,000 USD" />
                </div>
                <div className="field">
                  <label>Enforcement</label>
                  <div className="select">Fail-closed<span style={{ marginLeft: "auto", color: "var(--ink-3)" }}><Icon name="chevron-down" /></span></div>
                </div>
              </div>
              <div style={{ display: "flex", gap: 18, alignItems: "center" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }} onClick={() => setSwitchOn(v => !v)}>
                  <div className="switch" data-on={String(switchOn)} />
                  <span className="t-body-sm">Signed receipts</span>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }} onClick={() => setChecked(v => !v)}>
                  <div className="checkbox" data-on={String(checked)}><Icon name="check" size={10} /></div>
                  <span className="t-body-sm">Emit to webhook</span>
                </div>
              </div>
            </div>
          </Spec>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 20 }}>
          <Spec label="Tags" code="tag · tag--*">
            <div style={{ display: "flex", flexDirection: "column", gap: 10, alignItems: "flex-start" }}>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                <Tag>Default</Tag>
                <Tag variant="solid">Solid</Tag>
                <Tag variant="allow" dot>Allow</Tag>
                <Tag variant="block" dot>Block</Tag>
                <Tag variant="review" dot>Review</Tag>
                <Tag variant="info" dot>Info</Tag>
              </div>
              <div className="t-caption">Semantic variants map directly onto policy decisions.</div>
            </div>
          </Spec>
          <Spec label="Chips / filters" code="chip">
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {["All", "Allowed", "Blocked", "Review", "Last 24h"].map((c) => (
                <button key={c} className="chip" data-active={String(activeChip === c)} onClick={() => setActiveChip(c)}>{c}</button>
              ))}
            </div>
          </Spec>
          <Spec label="Kbd / code" code="inline typography">
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <div className="t-body-sm">Press <kbd>⌘</kbd>+<kbd>K</kbd> to search receipts.</div>
              <div className="t-body-sm">Configure <code>HELM_MODE=fail-closed</code> in your env.</div>
              <div className="t-body-sm">Run <code>helm verify ./receipt.json</code> offline.</div>
            </div>
          </Spec>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
          <Spec label="Callouts" code="callout · callout--*">
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <div className="callout">
                <Icon name="shield" />
                <div><div className="callout__title">Fail-closed by default</div><div className="callout__body">If the boundary can't verify, the action does not run.</div></div>
              </div>
              <div className="callout callout--accent">
                <Icon name="bolt" />
                <div><div className="callout__title">Block · exceeds policy</div><div className="callout__body">wire_transfer of 42,500 USD exceeded the 10,000 threshold.</div></div>
              </div>
              <div className="callout callout--ok">
                <Icon name="check" />
                <div><div className="callout__title">Allowed · within scope</div><div className="callout__body">CRM update passed policy and was signed.</div></div>
              </div>
              <div className="callout callout--warn">
                <Icon name="dot" />
                <div><div className="callout__title">Review · exception payout</div><div className="callout__body">Queued to the human-in-loop reviewer.</div></div>
              </div>
            </div>
          </Spec>
          <Spec label="Data table" code="table">
            <table className="table">
              <thead>
                <tr>
                  <th>Action</th>
                  <th>Agent</th>
                  <th>Decision</th>
                  <th style={{ textAlign: "right" }}>Latency</th>
                </tr>
              </thead>
              <tbody>
                <tr><td>wire_transfer</td><td>ops-copilot/v4</td><td><Tag variant="block" dot>Block</Tag></td><td className="num" style={{ textAlign: "right" }}>12ms</td></tr>
                <tr><td>crm.update</td><td>sales-assist/v2</td><td><Tag variant="allow" dot>Allow</Tag></td><td className="num" style={{ textAlign: "right" }}>4ms</td></tr>
                <tr><td>refund.issue</td><td>support-copilot</td><td><Tag variant="review" dot>Review</Tag></td><td className="num" style={{ textAlign: "right" }}>9ms</td></tr>
                <tr><td>ticket.close</td><td>support-copilot</td><td><Tag variant="allow" dot>Allow</Tag></td><td className="num" style={{ textAlign: "right" }}>3ms</td></tr>
              </tbody>
            </table>
          </Spec>
        </div>

        <Spec label="Code block" code="syntax · JetBrains Mono">
          <pre className="codeblock"><code>
<span className="c-com">{`// helm policy — minimum viable`}</span>{"\n"}
<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"}
{"}"});
          </code></pre>
        </Spec>
      </div>
    </section>
  );
}

Object.assign(window, { ComponentsSection });