// Pillars — the three-up spine: AuthN / AuthZ / Audit
function Pillars() {
  const data = [
    { eb:"AuthN", icon:"fingerprint", tone:"indigo", title:"Identity for humans and agents",
      body:"Human auth — sessions, OAuth/SSO, passkeys — plus agent identity, where every agent is a first-class principal with its own scoped, revocable credentials.",
      points:["Sessions · OAuth · SSO · passkeys","Agents as first-class principals","Scoped, revocable credentials"] },
    { eb:"AuthZ", icon:"shield-check", tone:"mint", title:"Authority to act",
      body:"Fine-grained, policy-based authorization down to the individual action — with constraints, intent-binding, and human approval for sensitive operations.",
      points:["Per-action, not per-session","Constraints, caps & allow-lists","Action-bound human approval"] },
    { eb:"Audit", icon:"scroll-text", tone:"amber", title:"Observability & proof",
      body:"Full-stack visibility and tamper-evident proof of every access and action — who or what did what, when, and under whose authority — exportable as evidence.",
      points:["Signed, hash-chained receipts","Who · what · when · whose authority","Export as compliance evidence"] },
  ];
  return (
    <section className="section" id="pillars">
      <div className="wrap">
        <div className="shead center">
          <span className="eyebrow"><span className="tick"></span>Three pillars</span>
          <h2>Who can act. What they can do.<br/>Proof of everything.</h2>
        </div>
        <div style={{marginTop:48,display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:20}}>
          {data.map((p,i) => <PillarCard key={i} {...p}/>)}
        </div>
      </div>
    </section>
  );
}

function PillarCard({eb, icon, tone, title, body, points}) {
  const c = {indigo:['#9A90FA','rgba(75,61,245,.14)','rgba(106,95,246,.3)'],
             mint:['#3DEBB6','rgba(6,201,140,.12)','rgba(6,201,140,.3)'],
             amber:['#F5B53F','rgba(245,165,36,.12)','rgba(245,165,36,.3)']}[tone];
  return (
    <div className="card card-hover" style={{padding:'26px 24px',display:'flex',flexDirection:'column',gap:14}}>
      <div style={{width:46,height:46,borderRadius:13,display:'grid',placeItems:'center',color:c[0],background:c[1],border:'1px solid '+c[2]}}>
        <i data-lucide={icon} style={{width:23,height:23}}></i>
      </div>
      <span className="eyebrow" style={{color:c[0]}}>{eb}</span>
      <h3 style={{fontSize:'var(--t-h3)',fontWeight:600,letterSpacing:'-.018em',margin:0,lineHeight:1.15}}>{title}</h3>
      <p style={{fontSize:14.5,lineHeight:1.6,color:'var(--fg-2)',margin:0}}>{body}</p>
      <div style={{height:1,background:'var(--ink-800)',margin:'4px 0'}}></div>
      <ul style={{listStyle:'none',margin:0,padding:0,display:'flex',flexDirection:'column',gap:9}}>
        {points.map((pt,i) =>
          <li key={i} style={{display:'flex',gap:9,alignItems:'flex-start',fontSize:13.5,color:'var(--fg-2)'}}>
            <i data-lucide="check" style={{width:15,height:15,color:c[0],flexShrink:0,marginTop:2}}></i>{pt}
          </li>)}
      </ul>
    </div>
  );
}
window.Pillars = Pillars;