// Footer
const Footer = ({ setPage }) => (
  <footer style={{borderTop:'1px solid var(--line)', padding:'80px 0 40px', position:'relative', overflow:'hidden'}}>
    <div className="container">
      <div style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr 1fr', gap:48, marginBottom:80}}>
        <div>
          <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:18}}>
            <span style={{display:'inline-flex',alignItems:'center',justifyContent:'center',width:32,height:32,border:'1px solid var(--line-2)',borderRadius:8,color:'var(--accent)'}}>{Icon.atom()}</span>
            <span style={{fontWeight:600,fontSize:17,letterSpacing:'-0.01em'}}>SolidAtoms</span>
          </div>
          <p style={{fontSize:14,color:'var(--ink-3)',lineHeight:1.55,maxWidth:320,marginBottom:24}}>
            Engineering studio shipping marketing sites, web apps, and AI-native products since 2022.
          </p>
          <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>
            ⌖ KARACHI, PK ⇄ REMOTE<br/>
            REG. NO. 0099-XX-2022
          </div>
        </div>
        <FooterCol title="Studio" links={['Work','Services','Process','Team','Journal']}/>
        <FooterCol title="Tools" links={['Lighthouse Diff','Schema Composer','Prompt Diff','All tools →']}/>
        <FooterCol title="Company" links={['About','Careers','Press','Contact']}/>
        <FooterCol title="Legal" links={['Privacy','Terms','Cookies','Imprint']}/>
      </div>

      {/* Big wordmark */}
      <div style={{margin:'40px 0', position:'relative'}}>
        <div style={{
          fontSize:'clamp(80px,18vw,260px)', lineHeight:0.85, letterSpacing:'-0.05em',
          fontWeight:500, color:'transparent', WebkitTextStroke:'1px var(--line-2)',
          userSelect:'none', whiteSpace:'nowrap', overflow:'hidden'
        }}>
          SolidAtoms<span className="serif" style={{color:'var(--accent)',WebkitTextStroke:'0'}}>·</span>
        </div>
      </div>

      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',paddingTop:32,borderTop:'1px solid var(--line)',flexWrap:'wrap',gap:16}}>
        <div style={{display:'flex',gap:18,alignItems:'center'}}>
          <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>© 2026 SOLIDATOMS STUDIO</span>
          <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>·</span>
          <button onClick={()=>setPage('plan')} className="mono" style={{fontSize:11,color:'var(--ink-2)',letterSpacing:'0.06em',textDecoration:'underline',textUnderlineOffset:3}}>
            VIEW ROADMAP →
          </button>
        </div>
        <div style={{display:'flex',gap:12}}>
          {['GitHub','X','LinkedIn','Bluesky'].map(s => (
            <a key={s} className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em',padding:'4px 10px',border:'1px solid var(--line)',borderRadius:6}}>{s.toUpperCase()} ↗</a>
          ))}
        </div>
      </div>
    </div>
  </footer>
);

const FooterCol = ({ title, links }) => (
  <div>
    <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:18}}>{title.toUpperCase()}</div>
    <ul style={{listStyle:'none',display:'flex',flexDirection:'column',gap:10}}>
      {links.map(l => (
        <li key={l}><a style={{fontSize:14,color:'var(--ink-2)',transition:'color .15s ease'}} onMouseEnter={e=>e.target.style.color='var(--ink)'} onMouseLeave={e=>e.target.style.color='var(--ink-2)'}>{l}</a></li>
      ))}
    </ul>
  </div>
);

window.Footer = Footer;