window.Kit.Footer = function Footer({ onSubscribe }) {
  const { Button, Input, Eyebrow } = window.DS;
  const { Brand } = window.Kit;
  const [email, setEmail] = React.useState('');
  const cols = [
    ['Services', ['Domain', 'Website', 'Content', 'SEO', 'Social media', 'Google Ads', 'Reviews', 'Google listings', 'Analytics']],
    ['Company', ['Work', 'Pricing', 'About', 'Careers']],
    ['Contact', ['hello@l3v3l.com', 'Book an audit']],
  ];
  return (
    <footer data-theme="dark" className="band" style={{ background: 'var(--bg)', color: 'var(--text)', overflow: 'hidden' }}>
      <div className="container" style={{ paddingTop: 'var(--space-24)', paddingBottom: 'var(--space-8)', display: 'flex', flexDirection: 'column', gap: 'var(--space-20)' }}>
        <div className="grid grid-2" style={{ gap: 'var(--space-16)', alignItems: 'start' }}>
          <div className="stack reveal" style={{ gap: 'var(--space-6)' }}>
            <Eyebrow>Stay a level ahead</Eyebrow>
            <h2 className="h1"><Brand /> runs the whole thing so you can run the business.</h2>
            <form className="row" style={{ gap: 10, maxWidth: 520 }} onSubmit={(e) => { e.preventDefault(); onSubscribe && onSubscribe(email); setEmail(''); }}>
              <Input placeholder="you@company.com" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} style={{ flex: 1, minWidth: 220 }} trailing={<Button size="sm" type="submit" arrow>Get the monthly note</Button>} />
            </form>
          </div>
          <div className="grid grid-3 reveal" data-d="1" style={{ gap: 'var(--space-8)' }}>
            {cols.map(([h, items]) => (
              <div key={h} className="stack" style={{ gap: 14 }}>
                <Eyebrow tone="muted">{h}</Eyebrow>
                {items.map((it) => <a key={it} href={it.includes('@') ? 'mailto:' + it : it === 'Book an audit' ? '#/audit' : '#/services'} className="body-sm" style={{ color: 'var(--text)', textDecoration: 'none' }}>{it}</a>)}
              </div>
            ))}
          </div>
        </div>
        <div className="reveal"><div className="footer-mark" aria-hidden="true"><Brand /></div></div>
        <div className="row between" style={{ borderTop: '1px solid var(--border)', paddingTop: 'var(--space-6)' }}>
          <span className="caption">© 2026 <Brand />. All of it, handled. Subscription · no commitment · cancel anytime with 30 days’ notice.</span>
          <div className="row" style={{ gap: 20 }}>
            <a href="#/" className="caption" style={{ color: 'var(--text-subtle)', textDecoration: 'none' }}>Privacy</a>
            <a href="#/" className="caption" style={{ color: 'var(--text-subtle)', textDecoration: 'none' }}>Terms</a>
            <span className="caption mono">v1.0</span>
          </div>
        </div>
      </div>
    </footer>
  );
};