// Hero — headline + subhead + CTAs + a live "decision" panel on the right
function DecisionPanel() {
  // tiny cycling demo: propose -> allow / needs_approval
  const states = [
    { instr: "read my account details", method: "GET", path: "/accounts/me",
      outcome: "allow", rule: "read-accounts", cls: "pill-allow", icon: "badge-check", label: "allow" },
    { instr: "place a small order", method: "POST", path: "/orders",
      outcome: "needs_approval", rule: "place-order", cls: "pill-appr", icon: "clock", label: "needs_approval" },
    { instr: "change account permissions", method: "POST", path: "/accounts/me/permissions",
      outcome: "deny", rule: "forbidden", cls: "pill-deny", icon: "shield-x", label: "deny" },
  ];
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI(p => (p + 1) % states.length), 2600);
    return () => clearInterval(t);
  }, []);
  React.useEffect(() => { window.lucide && lucide.createIcons(); }, [i]);
  const s = states[i];
  return (
    <div className="panel" aria-hidden="true">
      <div className="panel-bar">
        <span className="dot" style={{background:'#F0556A'}}></span>
        <span className="dot" style={{background:'#F5A524'}}></span>
        <span className="dot" style={{background:'#06C98C'}}></span>
        <span className="fn">delego · decision</span>
        <span style={{marginLeft:'auto',fontFamily:'var(--font-mono)',fontSize:11,color:'var(--fg-muted)'}}>no LLM in path</span>
      </div>
      <div style={{padding:'18px 20px'}}>
        <div style={{fontFamily:'var(--font-mono)',fontSize:11,letterSpacing:'.12em',textTransform:'uppercase',color:'var(--fg-muted)',marginBottom:10}}>proposed action</div>
        <div className="mono" style={{fontSize:13.5,color:'var(--fg)',lineHeight:1.7}}>
          <div><span style={{color:'var(--fg-muted)'}}>instruction</span>  “{s.instr}”</div>
          <div><span style={{color:'#9A90FA'}}>{s.method}</span> <span style={{color:'var(--fg-2)'}}>api.acme.com{s.path}</span></div>
        </div>
        <div style={{height:1,background:'var(--ink-800)',margin:'16px 0'}}></div>
        <div style={{display:'flex',alignItems:'center',gap:10}}>
          <span style={{fontFamily:'var(--font-mono)',fontSize:11,color:'var(--fg-muted)'}}>decision</span>
          <span className={"pill " + s.cls}><i data-lucide={s.icon}></i>{s.label}</span>
          <span style={{marginLeft:'auto',fontFamily:'var(--font-mono)',fontSize:11,color:'var(--fg-faint)'}}>rule: {s.rule}</span>
        </div>
        <div style={{marginTop:14,display:'flex',alignItems:'center',gap:8,fontFamily:'var(--font-mono)',fontSize:11,color:'var(--fg-muted)'}}>
          <i data-lucide="git-commit-horizontal" style={{width:14,height:14}}></i>
          receipt seq 0042 · <span style={{color:'#3DEBB6'}}>signed</span> · fpr c70d4ee5…
        </div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <header className="hero" id="top">
      <div className="hero-glow"></div>
      <div className="hero-grid"></div>
      <div className="wrap hero-cols">
        <div className="rise">
          <span className="eyebrow"><span className="tick"></span>The access layer for the agent era</span>
          <h1>Auth for humans<br/>and <span className="mint">agents.</span></h1>
          <p className="hero-sub">Authentication, authorization, and audit for every principal — human or agent. Authorize the action, not just the session, and keep signed proof of all of it.</p>
          <div className="hero-cta">
            <a className="btn btn-primary btn-lg" href="#">Start building <i data-lucide="arrow-right"></i></a>
            <a className="btn btn-secondary btn-lg" href="#code"><i data-lucide="book-text"></i> Read the docs</a>
          </div>
          <div className="hero-install">
            <span className="dollar">$</span><span>pip install delego</span>
            <span className="copy"><i data-lucide="copy" style={{width:14,height:14}}></i></span>
          </div>
        </div>
        <div className="rise" style={{animationDelay:'.1s'}}>
          <DecisionPanel/>
        </div>
      </div>
    </header>
  );
}
window.Hero = Hero;