// Footer — final CTA band + link columns
function Footer() {
  const cols = [
    ["Product", ["Authentication","Authorization","Audit","Pricing","Changelog"]],
    ["Developers", ["Docs","Wire spec","Python SDK","MCP server","Sample app"]],
    ["Company", ["About","Security","Blog","Careers","Contact"]],
  ];
  return (
    <footer style={{borderTop:'1px solid var(--ink-800)',background:'var(--ink-1000)'}}>
      {/* final CTA */}
      <div className="wrap" style={{padding:'72px 28px 64px',textAlign:'center'}}>
        <div className="eyebrow" style={{justifyContent:'center'}}><span className="tick"></span>Delegate with confidence</div>
        <h2 style={{fontWeight:600,fontSize:'var(--t-h1)',letterSpacing:'-.03em',margin:'16px auto 0',maxWidth:'18ch',lineHeight:1.05,textWrap:'balance'}}>
          Identity, authorization, and audit — for humans and agents.
        </h2>
        <div style={{display:'flex',gap:12,justifyContent:'center',marginTop:28,flexWrap:'wrap'}}>
          <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="#"><i data-lucide="book-text"></i> Read the docs</a>
        </div>
      </div>

      <div className="divider"></div>

      <div className="wrap" style={{padding:'48px 28px',display:'grid',gridTemplateColumns:'1.4fr 1fr 1fr 1fr',gap:32}}>
        <div>
          <a className="brand" href="#top" style={{fontSize:20}}>
            <img src="../../assets/logo-mark.svg" alt="" />delego
          </a>
          <p style={{fontSize:13.5,color:'var(--fg-muted)',lineHeight:1.6,marginTop:14,maxWidth:'30ch'}}>
            The access layer for the agent era. Authenticate and authorize humans and agents — with proof of everything.
          </p>
          <div style={{display:'flex',gap:10,marginTop:18}}>
            <a href="#" style={{width:34,height:34,borderRadius:9,border:'1px solid var(--ink-700)',display:'grid',placeItems:'center',color:'var(--fg-muted)'}}><i data-lucide="git-branch" style={{width:16,height:16}}></i></a>
            <a href="#" style={{width:34,height:34,borderRadius:9,border:'1px solid var(--ink-700)',display:'grid',placeItems:'center',color:'var(--fg-muted)'}}><i data-lucide="book-text" style={{width:16,height:16}}></i></a>
            <a href="#" style={{width:34,height:34,borderRadius:9,border:'1px solid var(--ink-700)',display:'grid',placeItems:'center',color:'var(--fg-muted)'}}><i data-lucide="terminal" style={{width:16,height:16}}></i></a>
          </div>
        </div>
        {cols.map(([title,links],i) =>
          <div key={i}>
            <div style={{fontFamily:'var(--font-mono)',fontSize:11,letterSpacing:'.12em',textTransform:'uppercase',color:'var(--fg-muted)',marginBottom:14}}>{title}</div>
            <div style={{display:'flex',flexDirection:'column',gap:11}}>
              {links.map((l,j) => <a key={j} href="#" style={{fontSize:13.5,color:'var(--fg-2)'}} className="foot-link">{l}</a>)}
            </div>
          </div>)}
      </div>

      <div className="divider"></div>
      <div className="wrap" style={{padding:'20px 28px',display:'flex',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap',gap:10}}>
        <span style={{fontSize:12.5,color:'var(--fg-faint)'}}>© 2026 Delego, Inc. · Apache-2.0 firewall &amp; open spec</span>
        <span style={{fontFamily:'var(--font-mono)',fontSize:11.5,color:'var(--fg-faint)'}}>delego is Latin: <span style={{color:'var(--fg-muted)'}}>“I delegate / entrust”</span></span>
      </div>
    </footer>
  );
}
window.Footer = Footer;