// Footer.jsx — site footer with newsletter + columns.
(function () {
  const COLS = [
    { h: 'Ovens', links: ['Verona', 'Napoli', 'Custom Build', 'Gas versions'] },
    { h: 'Explore', links: ['Gallery', 'About us', 'Our workshop', 'Press'] },
    { h: 'Support', links: ['Delivery & install', 'Warranty', 'Manuals', 'Contact'] },
  ];
  const OVEN_IDS = { 'Verona': 'verona', 'Napoli': 'napoli', 'Custom Build': 'custom', 'Gas versions': 'verona' };

  function Footer({ go }) {
    return (
      <footer className="tf-footer">
        {/* newsletter band */}
        <div style={{ borderBottom: '1px solid #2E2014' }}>
          <div className="tf-wrap" style={{ display: 'flex', flexWrap: 'wrap', gap: 32, alignItems: 'center', justifyContent: 'space-between', paddingBlock: 56 }}>
            <div style={{ maxWidth: 460 }}>
              <h3 className="tf-h3" style={{ color: '#F6ECDD', margin: 0 }}>Tend the fire with us.</h3>
              <p className="tf-body" style={{ color: '#C3B097', margin: '10px 0 0' }}>Recipes, firing tips, and first word on new ovens. No spam, ever.</p>
            </div>
            <form onSubmit={(e) => e.preventDefault()} style={{ display: 'flex', gap: 10, flex: '1 1 320px', maxWidth: 440 }}>
              <input type="email" placeholder="you@kitchen.com" required
                style={{ flex: 1, background: '#241810', border: '1px solid #3E2C1C', borderRadius: 'var(--r-pill)', padding: '14px 20px', color: '#F6ECDD', fontFamily: 'var(--font-body)', fontSize: 'var(--t-sm)', outline: 'none' }} />
              <TFButton variant="primary" arrow>Join</TFButton>
            </form>
          </div>
        </div>

        {/* columns */}
        <div className="tf-wrap" style={{ paddingBlock: 64, display: 'grid', gridTemplateColumns: '1.6fr repeat(3, 1fr)', gap: 40 }}>
          <div>
            <Logo light />
            <p className="tf-small" style={{ color: '#9C8A73', marginTop: 18, maxWidth: 240 }}>
              Hand-built wood-fired ovens, made and tested in Belgaum, Karnataka. Leaders in India.
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 20, color: '#C3B097' }}>
              <a aria-label="Instagram" href="https://www.instagram.com/terrafornoovens" target="_blank" rel="noopener"><Icon name="instagram" size={20} /></a>
              <a aria-label="YouTube" href="#"><Icon name="youtube" size={20} /></a>
            </div>
          </div>
          {COLS.map((c) => (
            <div key={c.h}>
              <div style={{ fontSize: 'var(--t-xs)', letterSpacing: '.16em', textTransform: 'uppercase', color: '#7E6E59', marginBottom: 16, fontWeight: 600 }}>{c.h}</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
                {c.links.map((l) => (
                  <li key={l}>
                    <a href="#" onClick={(e) => {
                      e.preventDefault();
                      if (OVEN_IDS[l]) go('product', OVEN_IDS[l]);
                      else if (l === 'About us' || l === 'Our workshop') go('about');
                      else if (l === 'Contact' || l === 'Delivery & install' || l === 'Warranty') go('contact');
                      else if (l === 'Gallery') go('gallery');
                    }}>{l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{ borderTop: '1px solid #2E2014' }}>
          <div className="tf-wrap" style={{ display: 'flex', flexWrap: 'wrap', gap: 16, justifyContent: 'space-between', paddingBlock: 24, fontSize: 'var(--t-xs)', color: '#7E6E59' }}>
            <span>© {new Date().getFullYear()} Terraforno Ovens — Made with fire in Belgaum, Karnataka, India.</span>
            <div style={{ display: 'flex', gap: 22 }}>
              <a href="#">Privacy</a><a href="#">Terms</a>
            </div>
          </div>
        </div>
      </footer>
    );
  }

  window.Footer = Footer;
})();