function Footer() {
  const { IconX, IconGithub } = window.Icons;
  return (
    <footer style={{ padding: '64px 0 32px', borderTop: '1px solid rgba(0,0,0,.06)', marginTop: 96 }}>
      <div className="container" style={{ display: 'flex', gap: 48, flexWrap: 'wrap', alignItems: 'flex-start' }}>
        <div style={{ flex: 1, minWidth: 280 }}>
          <img src="assets/domino-logo-dark.svg" alt="Domino" style={{ height: 22 }} />
          <p style={{ fontSize: 13, color: 'var(--olive-700)', marginTop: 16, maxWidth: '38ch', lineHeight: 1.7 }}>Booth Blueprint is a free resource by Domino — the community incentives platform powering quests, points, and leaderboards for Web3 teams.</p>
        </div>
        {[
          { h: 'Read', links: [['Breakpoint case study', 'https://domino.run/campaigns/breakpoint'], ['Booth Gamification Playbook', 'playbook.html'], ['ROI calculator', 'roi-calculator.html']] },
          { h: 'Domino', links: [['Quests', 'https://domino.run'], ['Pricing', 'https://domino.run#pricing'], ['Docs', 'https://domino.run/docs']] },
        ].map(col => (
          <div key={col.h} style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 160 }}>
            <div style={{ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.04em', color: 'var(--olive-500)' }}>{col.h}</div>
            {col.links.map(([label, href]) => <a key={label} href={href} style={{ fontSize: 13, color: 'var(--olive-700)' }}>{label}</a>)}
          </div>
        ))}
        <div style={{ display: 'flex', gap: 12 }}>
          <a href="https://x.com/get_domino" style={{ width: 36, height: 36, borderRadius: 9999, background: 'rgba(0,0,0,.05)', display: 'flex', alignItems: 'center', justifyContent: 'center' }} aria-label="X"><IconX /></a>
          <a href="https://github.com/GetDomino" style={{ width: 36, height: 36, borderRadius: 9999, background: 'rgba(0,0,0,.05)', display: 'flex', alignItems: 'center', justifyContent: 'center' }} aria-label="GitHub"><IconGithub /></a>
        </div>
      </div>
      <div className="container" style={{ marginTop: 32, paddingTop: 16, borderTop: '1px solid rgba(0,0,0,.06)', fontSize: 12, color: 'var(--olive-500)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
        <span>© 2026 Domino · Built for teams who run booths.</span>
        <span>Web · PDF · Markdown — no signup required</span>
      </div>
    </footer>
  );
}
window.Footer = Footer;