// TrustStrip + Pricing teaser
function TrustStrip() {
  const items = [
    ["cpu","No LLM in the decision path"],
    ["lock-keyhole","Fail-closed by default"],
    ["git-commit-horizontal","Ed25519-signed audit chain"],
    ["target","Intent- & action-bound approvals"],
    ["scale","Apache-2.0, open spec"],
  ];
  return (
    <section style={{padding:'34px 0',borderTop:'1px solid var(--ink-800)',borderBottom:'1px solid var(--ink-800)',background:'var(--ink-950)'}}>
      <div className="wrap" style={{display:'flex',flexWrap:'wrap',gap:'18px 34px',justifyContent:'center',alignItems:'center'}}>
        {items.map(([ic,txt],i) =>
          <div key={i} style={{display:'flex',alignItems:'center',gap:9,fontSize:13.5,color:'var(--fg-2)'}}>
            <i data-lucide={ic} style={{width:17,height:17,color:'var(--signal-400)'}}></i>{txt}
          </div>)}
      </div>
    </section>
  );
}

function Pricing() {
  const tiers = [
    { name:"Open source", price:"Free", sub:"Self-host the firewall & spec", cta:"pip install delego", primary:false,
      feats:["Deterministic policy engine","Signed, hash-chained audit","CLI + MCP server","Apache-2.0"] },
    { name:"Team", price:"$0.00", unit:"/ decision after free tier", sub:"Hosted authorizer & audit", cta:"Start building", primary:true,
      feats:["Hosted PDP & approval queue","Slack / web approvals","Dashboard & exports","SSO for your team"] },
    { name:"Enterprise", price:"Let's talk", sub:"Regulated & high-assurance", cta:"Contact sales", primary:false,
      feats:["HSM / KMS signing keys","External head anchoring","SOC 2 evidence exports","SLA & support"] },
  ];
  return (
    <section className="section" id="pricing">
      <div className="wrap">
        <div className="shead center">
          <span className="eyebrow"><span className="tick"></span>Pricing</span>
          <h2>Start free. Pay as agents act.</h2>
          <p>The firewall and the spec are open source forever. Bring the hosted control plane when you're ready.</p>
        </div>
        <div style={{marginTop:46,display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:20,alignItems:'start'}}>
          {tiers.map((t,i) => <PriceCard key={i} {...t}/>)}
        </div>
      </div>
    </section>
  );
}

function PriceCard({name, price, unit, sub, feats, cta, primary}) {
  return (
    <div className="card" style={{padding:'28px 26px',display:'flex',flexDirection:'column',gap:16,
      border:primary?'1px solid var(--indigo-500)':'1px solid var(--ink-700)',
      background:primary?'linear-gradient(180deg,rgba(75,61,245,.08),var(--ink-850))':'var(--ink-850)',
      boxShadow:primary?'0 24px 60px -28px var(--indigo-glow)':'none',position:'relative'}}>
      {primary && <span style={{position:'absolute',top:18,right:18,fontFamily:'var(--font-mono)',fontSize:10.5,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--signal-400)'}}>Popular</span>}
      <div>
        <div style={{fontSize:15,fontWeight:600,color:'var(--fg)'}}>{name}</div>
        <div style={{fontSize:13,color:'var(--fg-muted)',marginTop:4}}>{sub}</div>
      </div>
      <div style={{display:'flex',alignItems:'baseline',gap:7}}>
        <span style={{fontSize:34,fontWeight:600,letterSpacing:'-.03em',color:'#F3F5FA'}}>{price}</span>
        {unit && <span style={{fontSize:12.5,color:'var(--fg-muted)'}}>{unit}</span>}
      </div>
      <a className={"btn " + (primary?"btn-primary":"btn-secondary")} href="#" style={{justifyContent:'center'}}>
        {primary && <i data-lucide="arrow-right"></i>}{cta}
      </a>
      <div style={{height:1,background:'var(--ink-800)'}}></div>
      <ul style={{listStyle:'none',margin:0,padding:0,display:'flex',flexDirection:'column',gap:10}}>
        {feats.map((f,i) =>
          <li key={i} style={{display:'flex',gap:10,alignItems:'flex-start',fontSize:13.5,color:'var(--fg-2)'}}>
            <i data-lucide="check" style={{width:15,height:15,color:'var(--signal-400)',flexShrink:0,marginTop:2}}></i>{f}
          </li>)}
      </ul>
    </div>
  );
}
window.TrustStrip = TrustStrip;
window.Pricing = Pricing;