// Problem — auth wasn't built for agents; the confused-deputy story
function Problem() {
  return (
    <section className="section" id="problem">
      <div className="wrap">
        <div className="shead">
          <span className="eyebrow"><span className="tick"></span>Why now</span>
          <h2>Auth was built for humans and static apps.<br/>Agents broke the model.</h2>
          <p>Agents act on people's behalf <em>and</em> autonomously. Login-plus-coarse-scopes was never meant for software that takes actions — and the credential is the wrong place to catch a redirected one.</p>
        </div>

        <div style={{marginTop:44,display:'grid',gridTemplateColumns:'1fr 1fr',gap:20}}>
          {/* the confused deputy, illustrated */}
          <div className="card" style={{padding:'24px 26px',gridColumn:'1 / -1'}}>
            <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:18}}>
              <span className="pill pill-deny"><i data-lucide="bug"></i>the confused deputy</span>
              <span style={{fontFamily:'var(--font-mono)',fontSize:12,color:'var(--fg-muted)'}}>a valid credential, pointed at the wrong action</span>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'1fr auto 1fr auto 1fr',gap:14,alignItems:'center'}}>
              <Step icon="syringe" tone="deny" title="Prompt injection" sub="redirects the agent mid-task"/>
              <Arrow/>
              <Step icon="key-round" tone="neutral" title="Credential is valid" sub="scope covers the action"/>
              <Arrow/>
              <Step icon="shield-check" tone="indigo" title="delego checks the action" sub="fingerprint ≠ what was approved → deny"/>
            </div>
            <div style={{marginTop:20,paddingTop:18,borderTop:'1px solid var(--ink-800)',fontFamily:'var(--font-mono)',fontSize:12.5,color:'var(--fg-2)',lineHeight:1.7}}>
              <span style={{color:'var(--fg-muted)'}}>// OAuth tokens carry no commitment to the original instruction.</span><br/>
              order <span style={{color:'#F5B53F'}}>&#123;amount:2400, destination:internal&#125;</span> → fpr <span style={{color:'#3DEBB6'}}>c70d4ee5…</span>  <span className="pill pill-appr" style={{transform:'scale(.85)'}}><i data-lucide="clock"></i>approved</span><br/>
              order <span style={{color:'#F5B53F'}}>&#123;…, recipient:"attacker"&#125;</span> → fpr <span style={{color:'#F0728A'}}>dabddc8f…</span>  <span className="pill pill-deny" style={{transform:'scale(.85)'}}><i data-lucide="shield-x"></i>deny</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Step({icon, title, sub, tone}) {
  const map = {deny:'#F0728A', indigo:'#9A90FA', neutral:'var(--fg-2)'};
  const bg = {deny:'rgba(240,85,106,.10)', indigo:'rgba(75,61,245,.12)', neutral:'var(--ink-800)'};
  const bd = {deny:'rgba(240,85,106,.3)', indigo:'rgba(106,95,246,.34)', neutral:'var(--ink-700)'};
  return (
    <div style={{display:'flex',flexDirection:'column',gap:9,alignItems:'flex-start'}}>
      <div style={{width:40,height:40,borderRadius:11,display:'grid',placeItems:'center',color:map[tone],background:bg[tone],border:'1px solid '+bd[tone]}}>
        <i data-lucide={icon} style={{width:20,height:20}}></i>
      </div>
      <div style={{fontSize:14,fontWeight:600,letterSpacing:'-.01em'}}>{title}</div>
      <div style={{fontSize:12.5,color:'var(--fg-muted)',lineHeight:1.45}}>{sub}</div>
    </div>
  );
}
function Arrow() {
  return <div style={{color:'var(--ink-500)',display:'grid',placeItems:'center'}}><i data-lucide="arrow-right" style={{width:18,height:18}}></i></div>;
}
window.Problem = Problem;