/* 6ix Mela — entry subscribe popup. Shows once per browser (localStorage),
   a short beat after landing. Email → GoHighLevel (hook below). */
function SubscribePopup() {
  const [show, setShow] = React.useState(false);
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(false);

  React.useEffect(() => {
    let seen = null;
    try { seen = localStorage.getItem('6m_sub_seen'); } catch (e) {}
    if (seen) return;
    const id = setTimeout(() => setShow(true), 1400);
    return () => clearTimeout(id);
  }, []);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') close(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  });

  const remember = () => { try { localStorage.setItem('6m_sub_seen', '1'); } catch (e) {} };
  const close = () => { setShow(false); remember(); };
  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: 'popup' }),
      }).catch(() => {});
      setDone(true); remember();
    }
  };

  if (!show) return null;
  return (
    <div className="overlay sub-overlay" onClick={close}>
      <div className="sub-modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-x" onClick={close} aria-label="Close"><Icon name="x" size={20} /></button>
        <div className="sub-glow"></div>
        <img className="sub-crest" src="assets/logo-v2.png" alt="6ix Mela" />
        {done ? (
          <div className="sub-body">
            <span className="sub-ok"><Icon name="check" size={30} /></span>
            <h3 className="sub-h">You're First In Line</h3>
            <p className="sub-p">Watch your inbox — lineup drops, presale codes and ticket releases hit you before anyone else. The 6ix is calling.</p>
            <button className="btn btn-ghost" style={{ marginTop: 8 }} onClick={close}>Enter the site <Icon name="arrow-right" size={16} /></button>
          </div>
        ) : (
          <div className="sub-body">
            <div className="eyebrow">Don't miss the drop</div>
            <h3 className="sub-h">Know Before<br />The 6ix Does</h3>
            <p className="sub-p">Our email list hears it first. Lineup announcements, presale codes and ticket releases land in your inbox <strong>before Instagram or this site ever update.</strong></p>
            <form className="sub-form" onSubmit={submit}>
              <input type="email" placeholder="your@email.ca" value={email} onChange={(e) => setEmail(e.target.value)} aria-label="Email" required />
              <button className="btn btn-primary btn-lg" type="submit">Notify Me <Icon name="arrow-up-right" size={18} /></button>
            </form>
            <button className="sub-skip" onClick={close}>No thanks, I'll risk missing out</button>
          </div>
        )}
      </div>
    </div>
  );
}
window.SubscribePopup = SubscribePopup;