/* 6ix Mela — footer with newsletter (→ GoHighLevel) + socials */
function Footer({ onNav }) {
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (email.includes('@') && email.includes('.')) {
      fetch('/wp-json/6ixmela/v1/ghl', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ hook: 'subscribers', email, source: 'footer' }),
      }).catch(() => {});
      setDone(true);
    }
  };
  return (
    <footer className="footer">
      <img className="ornament" src="assets/logo-v2.png" alt="" />
      <div className="maxw footer-grid">
        <div>
          <div className="foot-logo"><img src="assets/logo-v2.png" alt="6ix Mela" /></div>
          <p className="mela-body" style={{ maxWidth: 280, marginTop: 16, fontSize: 14 }}>Toronto's largest South Asian music festival. The 6ix meets the mela.</p>
          <div className="socials">
            <a aria-label="Instagram"><Icon name="instagram" size={20} /></a>
            <a aria-label="YouTube"><Icon name="youtube" size={20} /></a>
            <a aria-label="TikTok"><Icon name="tiktok" size={20} /></a>
            <a aria-label="Music"><Icon name="music" size={20} /></a>
          </div>
        </div>
        <div>
          <h4>Festival</h4>
          <a className="fl" onClick={() => onNav('lineup')}>Lineup</a>
          <a className="fl" onClick={() => onNav('tickets')}>Tickets</a>
          <a className="fl" onClick={() => onNav('venue')}>Venue & Travel</a>
          <a className="fl" onClick={() => onNav('faq')}>FAQ</a>
        </div>
        <div>
          <h4>Work With Us</h4>
          <a className="fl" onClick={() => onNav('connect')} data-comment-anchor="d31f0be797-a-33-11">VIP & Box Suite</a>
          <a className="fl" onClick={() => onNav('connect')}>Sponsorship</a>
          <a className="fl" onClick={() => onNav('connect')}>Partners & Creators</a>
          <a className="fl" href="/waitlist/">Waitlist</a>
        </div>
        <div className="foot-news">
          <h4>Join the list</h4>
          {done ?
          <p className="mela-body" style={{ color: 'var(--lime)', fontSize: 14, display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="check" size={18} /> You're on the list. See you in the 6ix.</p> :

          <form onSubmit={submit}>
              <input type="email" placeholder="your@email.ca" value={email} onChange={(e) => setEmail(e.target.value)} />
              <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }}>Notify Me <Icon name="arrow-up-right" size={16} /></button>
            </form>
          }
        </div>
      </div>
      <div className="maxw foot-bottom">
        <span>© 2026 6IX MELA · SOBEYS STADIUM, TORONTO</span>
        <span className="foot-legal">
          <a href="/privacy-policy/">PRIVACY POLICY</a>
          <a href="/privacy-policy/#terms">TERMS</a>
          <a className="fl-inline" onClick={() => onNav('faq')}>ACCESSIBILITY</a>
        </span>
      </div>
    </footer>);

}
window.Footer = Footer;