// Split — for humans / for agents, the duality
function Split() {
  return (
    <section className="section" id="duality">
      <div className="wrap">
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:20}}>
          <SplitCol
            tone="indigo" icon="user-round" eb="For humans"
            title="Sessions, SSO, and approvals that fit how people already work"
            rows={[
              ["log-in","Drop-in sessions, OAuth & SSO, passkeys"],
              ["user-check","Approve sensitive actions from CLI, Slack, or web"],
              ["eye","See exactly what an agent did on your behalf"],
            ]}/>
          <SplitCol
            tone="mint" icon="bot" eb="For agents"
            title="First-class identity with scoped, revocable, per-action authority"
            rows={[
              ["fingerprint","Every agent is its own principal, not a shared key"],
              ["shield-check","Authority granted per action, bound to intent"],
              ["ban","Revoke an agent's reach without touching the human's"],
            ]}/>
        </div>
      </div>
    </section>
  );
}

function SplitCol({tone, icon, eb, title, rows}) {
  const c = {indigo:['#9A90FA','rgba(75,61,245,.12)','rgba(106,95,246,.3)'],
             mint:['#3DEBB6','rgba(6,201,140,.12)','rgba(6,201,140,.3)']}[tone];
  return (
    <div className="card" style={{padding:'30px 28px',display:'flex',flexDirection:'column',gap:18,
      background:tone==='indigo'?'linear-gradient(180deg,rgba(75,61,245,.06),var(--ink-850))':'linear-gradient(180deg,rgba(6,201,140,.05),var(--ink-850))'}}>
      <div style={{display:'flex',alignItems:'center',gap:12}}>
        <div style={{width:44,height:44,borderRadius:12,display:'grid',placeItems:'center',color:c[0],background:c[1],border:'1px solid '+c[2]}}>
          <i data-lucide={icon} style={{width:22,height:22}}></i>
        </div>
        <span className="eyebrow" style={{color:c[0]}}>{eb}</span>
      </div>
      <h3 style={{fontSize:'var(--t-h3)',fontWeight:600,letterSpacing:'-.018em',margin:0,lineHeight:1.2}}>{title}</h3>
      <div style={{display:'flex',flexDirection:'column',gap:2,marginTop:4}}>
        {rows.map(([ic,txt],i) =>
          <div key={i} style={{display:'flex',gap:12,alignItems:'center',padding:'12px 0',borderTop:i?'1px solid var(--ink-800)':'none'}}>
            <i data-lucide={ic} style={{width:18,height:18,color:c[0],flexShrink:0}}></i>
            <span style={{fontSize:14.5,color:'var(--fg-2)'}}>{txt}</span>
          </div>)}
      </div>
    </div>
  );
}
window.Split = Split;