// ─── Contact Modal ────────────────────────────────────────────
// Opens when window.OPEN_CONTACT === true or hash === '#contact'.

function ContactModal() {
  const [open, setOpen] = React.useState(
    !!(window.OPEN_CONTACT || window.location.hash === '#contact')
  );

  // Hash / modal event / popstate listeners
  React.useEffect(() => {
    function onHash()   { if (window.location.hash === '#contact') setOpen(true); }
    function onModal(e) { if (e.detail === 'contact') setOpen(true); }
    function onPop()    { if (!window.location.pathname.includes('contact')) setOpen(false); }
    window.addEventListener('hashchange', onHash);
    window.addEventListener('not:modal',  onModal);
    window.addEventListener('popstate',   onPop);
    return () => {
      window.removeEventListener('hashchange', onHash);
      window.removeEventListener('not:modal',  onModal);
      window.removeEventListener('popstate',   onPop);
    };
  }, []);

  // ESC key
  React.useEffect(() => {
    function onKey(e) { if (e.key === 'Escape') handleClose(); }
    if (open) document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open]);

  function handleClose() {
    setOpen(false);
    if (window.location.pathname.includes('contact')) {
      if (window.history.state && window.history.state.notModal) {
        history.back();
      } else {
        history.pushState({}, '', '/');
      }
    } else {
      history.pushState({}, '', window.location.pathname + window.location.search);
    }
  }

  if (!open) return null;

  return (
    <div className="abt-overlay" onClick={handleClose}>
      <div className="abt-panel cnt-panel" onClick={e => e.stopPropagation()}>

        <div className="abt-head">
          <span className="abt-label">Contact</span>
          <button className="abt-close" onClick={handleClose}>✕ close</button>
        </div>

        <div className="abt-body">

          <h2 className="abt-section-head" style={{ marginTop: 0 }}>Get in Touch</h2>
          <p style={{ marginBottom: '1.6em', color: 'var(--not-fg-dim)', fontSize: '14px' }}>
            We welcome your questions, feedback, and contributions. We aim to respond within 72 hours.
          </p>

          <div className="cnt-email-card">
            <span className="cnt-email-label mono">Email</span>
            <a className="cnt-email-link" href="mailto:jesse@networkoftime.com">
              jesse@networkoftime.com
            </a>
          </div>

          <div className="cnt-categories">
            <h2 className="abt-section-head">What we can help with</h2>
            <ul className="cnt-cat-list">
              <li>General inquiries &amp; support</li>
              <li>Photo submission questions</li>
              <li>Research &amp; collaboration</li>
              <li>Media inquiries — available for interviews about the project</li>
              <li>Content removal requests</li>
            </ul>
          </div>

        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ContactModal });