// HowItWorks — the propose → decide → execute flow with the approval branch
function HowItWorks() {
  const nodes = [
    {icon:"user-round", label:"principal", sub:"human or agent", tone:"indigo"},
    {icon:"send", label:"propose", sub:"action + instruction", tone:"neutral"},
    {icon:"shield-check", label:"delego", sub:"policy · approval · audit", tone:"brand"},
    {icon:"key-round", label:"broker", sub:"injects credential", tone:"neutral"},
    {icon:"server", label:"service", sub:"the upstream API", tone:"mint"},
  ];
  return (
    <section className="section" id="how" style={{background:'var(--ink-950)',borderTop:'1px solid var(--ink-800)',borderBottom:'1px solid var(--ink-800)'}}>
      <div className="wrap">
        <div className="shead center">
          <span className="eyebrow"><span className="tick"></span>How it works</span>
          <h2>One decision point. Every action accounted for.</h2>
          <p>The agent proposes; delego decides — deterministically, with no model in the path — parks sensitive actions for a human, and signs a receipt either way.</p>
        </div>

        <div style={{marginTop:50,position:'relative'}}>
          <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:0,alignItems:'stretch'}}>
            {nodes.map((n,i) => (
              <React.Fragment key={i}>
                <FlowNode {...n}/>
              </React.Fragment>
            ))}
          </div>
          {/* connecting line */}
          <div style={{position:'absolute',top:33,left:'10%',right:'10%',height:2,
            background:'linear-gradient(90deg,var(--indigo-600),var(--indigo-400) 50%,var(--signal-500))',opacity:.5,zIndex:0}}></div>

          {/* approval branch */}
          <div style={{marginTop:30,display:'flex',justifyContent:'center'}}>
            <div className="card" style={{padding:'14px 20px',display:'flex',alignItems:'center',gap:14,maxWidth:560}}>
              <span className="pill pill-appr"><i data-lucide="clock"></i>needs_approval</span>
              <i data-lucide="arrow-right" style={{width:16,height:16,color:'var(--ink-500)'}}></i>
              <span style={{display:'flex',alignItems:'center',gap:8,fontSize:13.5,color:'var(--fg-2)'}}>
                <i data-lucide="user-check" style={{width:17,height:17,color:'#9A90FA'}}></i>
                a human approves out-of-band — bound to one exact fingerprint, used once
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FlowNode({icon, label, sub, tone}) {
  const c = {indigo:['#9A90FA','rgba(75,61,245,.12)','rgba(106,95,246,.32)'],
             mint:['#3DEBB6','rgba(6,201,140,.12)','rgba(6,201,140,.32)'],
             neutral:['var(--fg-2)','var(--ink-850)','var(--ink-700)'],
             brand:['#fff','var(--indigo-500)','var(--indigo-400)']}[tone];
  const glow = tone==='brand' ? {boxShadow:'0 16px 44px -16px var(--indigo-glow)'} : {};
  return (
    <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:10,position:'relative',zIndex:1,padding:'0 8px'}}>
      <div style={{width:66,height:66,borderRadius:18,display:'grid',placeItems:'center',color:c[0],
        background:c[1],border:'1px solid '+c[2],...glow}}>
        <i data-lucide={icon} style={{width:26,height:26}}></i>
      </div>
      <div style={{fontFamily:'var(--font-mono)',fontSize:13,color:'var(--fg)',fontWeight:500}}>{label}</div>
      <div style={{fontSize:11.5,color:'var(--fg-muted)',textAlign:'center',lineHeight:1.4,maxWidth:120}}>{sub}</div>
    </div>
  );
}
window.HowItWorks = HowItWorks;