// Code — tabbed SDK showcase: a few lines to add auth + agent identity + audit
function Code() {
  const tabs = [
    { id:"policy", label:"policy.yaml", icon:"scroll-text", body:
`<span class="tc"># first match wins · fail-closed</span>
<span class="tkey">rules</span>:
  - <span class="tkey">name</span>: <span class="ts">place-order</span>
    <span class="tkey">decision</span>: <span class="tn">needs_approval</span>
    <span class="tkey">match</span>: { <span class="tkey">method</span>: POST, <span class="tkey">path</span>: <span class="ts">/orders</span> }
    <span class="tkey">constraints</span>:
      <span class="tkey">amount</span>:     { <span class="tkey">field</span>: amount, <span class="tkey">max</span>: <span class="tn">5000</span>, <span class="tkey">currency</span>: USD }
      <span class="tkey">allow_list</span>: { <span class="tkey">field</span>: destination, <span class="tkey">in</span>: [internal] }
<span class="tkey">default</span>: <span class="tn">deny</span>   <span class="tc"># anything not allowed is refused</span>` },
    { id:"propose", label:"propose.py", icon:"send", body:
`<span class="tk">from</span> delego <span class="tk">import</span> ProposedAction, build_firewall

fw = build_firewall(paths)

<span class="tc"># the agent proposes — it never holds the secret</span>
decision = fw.<span class="tk">propose</span>(ProposedAction(
    instruction=<span class="ts">"place a small order"</span>,
    method=<span class="ts">"POST"</span>,
    url=<span class="ts">"https://api.acme.com/orders"</span>,
    params={<span class="ts">"amount"</span>: <span class="tn">2400</span>, <span class="ts">"destination"</span>: <span class="ts">"internal"</span>},
))

decision.outcome   <span class="tc"># -> 'needs_approval'</span>
decision.approval_id` },
    { id:"resolve", label:"resolve.py", icon:"user-check", body:
`<span class="tc"># a human approves out-of-band (CLI / Slack / web)</span>
<span class="tc"># $ delego approve apr_7f3c</span>

<span class="tc"># the agent resolves the SAME action — fingerprint must match</span>
result = fw.<span class="tk">resolve</span>(approval_id, order)

result.outcome     <span class="tc"># -> 'allow', executed exactly once</span>

<span class="tc"># a substituted action is refused — confused-deputy guard</span>
fw.<span class="tk">resolve</span>(approval_id, tampered).outcome  <span class="tc"># -> 'deny'</span>` },
    { id:"verify", label:"verify.py", icon:"badge-check", body:
`<span class="tc"># every decision left a signed, hash-chained receipt</span>
ok, problems = fw.audit.<span class="tk">verify</span>()

ok                 <span class="tc"># -> True  (Ed25519 chain intact)</span>

<span class="tc"># editing, reordering, or dropping a receipt breaks it</span>
<span class="tk">for</span> r <span class="tk">in</span> fw.audit.<span class="tk">tail</span>(<span class="tn">20</span>):
    print(r.seq, r.outcome, r.action_fingerprint)
<span class="tc"># 41 allow   497e0260…</span>
<span class="tc"># 42 allow   c70d4ee5…  &lt;- exportable as evidence</span>` },
  ];
  const [active, setActive] = React.useState("policy");
  React.useEffect(() => { window.lucide && lucide.createIcons(); }, [active]);
  const tab = tabs.find(t => t.id === active);
  return (
    <section className="section" id="code">
      <div className="wrap">
        <div style={{display:'grid',gridTemplateColumns:'.9fr 1.1fr',gap:48,alignItems:'center'}}>
          <div className="shead">
            <span className="eyebrow"><span className="tick"></span>Code-forward</span>
            <h2>Add auth, agent identity, and an audit trail in a few lines.</h2>
            <p>One small, deterministic, Apache-2.0 library. No LLM in the decision path, no credential custody — it rides your existing broker instead of replacing it.</p>
            <div style={{marginTop:24,display:'flex',gap:12,flexWrap:'wrap'}}>
              <a className="btn btn-primary" href="#">Read the docs <i data-lucide="arrow-right"></i></a>
              <a className="btn btn-secondary" href="#"><i data-lucide="git-branch"></i> View the spec</a>
            </div>
          </div>
          <div className="code">
            <div style={{display:'flex',gap:2,padding:'8px 8px 0',borderBottom:'1px solid var(--ink-800)',background:'var(--ink-900)'}}>
              {tabs.map(t =>
                <button key={t.id} onClick={() => setActive(t.id)}
                  style={{display:'flex',alignItems:'center',gap:7,fontFamily:'var(--font-mono)',fontSize:12,
                    padding:'9px 13px',borderRadius:'8px 8px 0 0',border:'none',cursor:'pointer',
                    background:active===t.id?'var(--ink-950)':'transparent',
                    color:active===t.id?'var(--fg)':'var(--fg-muted)',
                    borderBottom:active===t.id?'2px solid var(--indigo-400)':'2px solid transparent',
                    marginBottom:-1,transition:'all .15s'}}>
                  <i data-lucide={t.icon} style={{width:14,height:14}}></i>{t.label}
                </button>)}
            </div>
            <pre dangerouslySetInnerHTML={{__html: tab.body}}></pre>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Code = Code;
