// Audit — observability section on a light surface: ledger + signed receipt
function Audit() {
  const rows = [
    {seq:"0042", phase:"execution", who:"agent:checkout", method:"POST", path:"/orders", outcome:"allow", cls:"pill-allow", icon:"badge-check"},
    {seq:"0041", phase:"decision", who:"agent:checkout", method:"POST", path:"/orders", outcome:"needs_approval", cls:"pill-appr", icon:"clock"},
    {seq:"0040", phase:"execution", who:"user:alice", method:"GET", path:"/accounts/me", outcome:"allow", cls:"pill-allow", icon:"badge-check"},
    {seq:"0039", phase:"decision", who:"agent:research", method:"POST", path:"/permissions", outcome:"deny", cls:"pill-deny", icon:"shield-x"},
  ];
  return (
    <section className="section on-light" id="audit">
      <div className="wrap">
        <div className="shead">
          <span className="eyebrow" style={{color:'var(--signal-700)'}}><span className="tick" style={{background:'var(--signal-700)'}}></span>Observability &amp; audit</span>
          <h2 style={{color:'var(--slate-700)'}}>A signed receipt for every access and every action.</h2>
          <p>Who or what did what, when, and under whose authority — a tamper-evident, hash-chained ledger you can verify and export as compliance evidence.</p>
        </div>

        <div style={{marginTop:40,display:'grid',gridTemplateColumns:'1.45fr 1fr',gap:20}}>
          {/* ledger */}
          <div style={{background:'#fff',border:'1px solid var(--line)',borderRadius:'var(--r-lg)',boxShadow:'var(--shadow-md)',overflow:'hidden'}}>
            <div style={{display:'flex',alignItems:'center',gap:10,padding:'14px 18px',borderBottom:'1px solid var(--line)'}}>
              <i data-lucide="scroll-text" style={{width:17,height:17,color:'var(--slate-500)'}}></i>
              <span style={{fontWeight:600,fontSize:14,color:'var(--slate-700)'}}>Audit ledger</span>
              <span style={{marginLeft:'auto',display:'inline-flex',alignItems:'center',gap:6,fontFamily:'var(--font-mono)',fontSize:12,color:'var(--signal-700)'}}>
                <i data-lucide="shield-check" style={{width:14,height:14}}></i>chain verified
              </span>
            </div>
            <div>
              {rows.map((r,i) =>
                <div key={i} style={{display:'grid',gridTemplateColumns:'52px 1fr auto',gap:12,alignItems:'center',
                  padding:'13px 18px',borderTop:i?'1px solid var(--line)':'none'}}>
                  <span style={{fontFamily:'var(--font-mono)',fontSize:12,color:'var(--slate-400)'}}>{r.seq}</span>
                  <div style={{display:'flex',flexDirection:'column',gap:3,minWidth:0}}>
                    <span style={{fontFamily:'var(--font-mono)',fontSize:12.5,color:'var(--slate-700)',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>
                      <span style={{color:'var(--indigo-600)'}}>{r.method}</span> {r.path}
                    </span>
                    <span style={{fontFamily:'var(--font-mono)',fontSize:11,color:'var(--slate-400)'}}>{r.phase} · {r.who}</span>
                  </div>
                  <span className={"pill " + r.cls}><i data-lucide={r.icon}></i>{r.outcome}</span>
                </div>)}
            </div>
          </div>

          {/* signed receipt */}
          <div style={{background:'var(--ink-950)',border:'1px solid var(--ink-700)',borderRadius:'var(--r-lg)',
            padding:'20px 22px',position:'relative',overflow:'hidden',boxShadow:'var(--shadow-lg)'}}>
            <div style={{position:'absolute',left:0,top:0,bottom:0,width:3,background:'linear-gradient(var(--signal-400),var(--signal-700))'}}></div>
            <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:16}}>
              <div style={{width:30,height:30,borderRadius:9,background:'rgba(6,201,140,.12)',border:'1px solid rgba(6,201,140,.34)',display:'grid',placeItems:'center',color:'var(--signal-400)'}}>
                <i data-lucide="badge-check" style={{width:16,height:16}}></i>
              </div>
              <span style={{fontFamily:'var(--font-mono)',fontSize:13,color:'#F3F5FA'}}>receipt · seq 0042</span>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'92px 1fr',gap:'7px 12px',fontFamily:'var(--font-mono)',fontSize:11.5}}>
              <span style={{color:'var(--ink-500)'}}>phase</span><span style={{color:'var(--ink-200)'}}>execution</span>
              <span style={{color:'var(--ink-500)'}}>outcome</span><span style={{color:'#3DEBB6'}}>allow</span>
              <span style={{color:'var(--ink-500)'}}>fingerprint</span><span style={{color:'#3DEBB6'}}>c70d4ee5…d4ed394</span>
              <span style={{color:'var(--ink-500)'}}>intent_hash</span><span style={{color:'var(--ink-200)'}}>ec949034…04af46</span>
              <span style={{color:'var(--ink-500)'}}>prev_hash</span><span style={{color:'var(--ink-200)'}}>a1f0…9c2b</span>
              <span style={{color:'var(--ink-500)'}}>signature</span><span style={{color:'var(--ink-200)'}}>Ed25519 ✓</span>
            </div>
            <div style={{marginTop:16,paddingTop:14,borderTop:'1px solid var(--ink-800)',display:'flex',gap:8}}>
              <button className="btn btn-secondary" style={{fontSize:12.5,padding:'8px 13px'}}><i data-lucide="download"></i> Export evidence</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Audit = Audit;