// Footer.jsx — site footer with newsletter + columns.
(function () {
  const { useState } = React;

  // Newsletter signups are emailed to the same inbox as contact enquiries.
  const CONTACT_EMAIL = 'info@difab.co.in';
  const FORM_ENDPOINT = 'https://formsubmit.co/ajax/' + CONTACT_EMAIL;

  // Only links that resolve to a real page. Add more back as pages are built.
  const COLS = [
    { h: 'Ovens', links: ['Verona', 'Napoli', 'Custom Build'] },
    { h: 'Explore', links: ['Gallery', 'About us'] },
    { h: 'Support', links: ['Delivery & install', 'Contact'] },
  ];
  const OVEN_IDS = { 'Verona': 'verona', 'Napoli': 'napoli', 'Custom Build': 'custom' };

  function Footer({ go }) {
    const [joined, setJoined] = useState(false);
    const [joining, setJoining] = useState(false);

    const joinNewsletter = async (e) => {
      e.preventDefault();
      const form = e.target;
      const email = new FormData(form).get('Email');
      setJoining(true);
      try {
        const res = await fetch(FORM_ENDPOINT, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
          body: JSON.stringify({ _subject: 'Newsletter signup', _template: 'table', Email: email }),
        });
        if (!res.ok) throw new Error('send failed');
        setJoined(true);
        form.reset();
      } catch (err) {
        window.location.href = 'mailto:' + CONTACT_EMAIL + '?subject=Newsletter signup&body=' + encodeURIComponent('Please add me to the newsletter: ' + email);
      } finally {
        setJoining(false);
      }
    };

    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 }}>Stay in the loop.</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>
            {joined ? (
              <p className="tf-body" style={{ color: '#F6ECDD', margin: 0, flex: '1 1 320px', maxWidth: 440 }}>Thanks — you're on the list.</p>
            ) : (
              <form onSubmit={joinNewsletter} style={{ display: 'flex', gap: 10, flex: '1 1 320px', maxWidth: 440 }}>
                <input name="Email" 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 type="submit" variant="primary" arrow disabled={joining}>{joining ? '…' : '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>
            </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') go('about');
                      else if (l === 'Contact' || l === 'Delivery & install') 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>
        </div>
      </footer>
    );
  }

  window.Footer = Footer;
})();