// ─── About Modal ─────────────────────────────────────────────
// Renders over the main homepage. Opens when:
//   • window.OPEN_ABOUT === true  (set by server when visiting /about.html directly)
//   • window.location.hash === '#about'  (in-page nav click)
// Closing navigates to '/' if on /about.html, else clears the hash.

function AboutModal() {
  const [open, setOpen] = React.useState(
    !!(window.OPEN_ABOUT || window.location.hash === '#about')
  );

  React.useEffect(() => {
    function onHash()  { if (window.location.hash === '#about') setOpen(true); }
    function onModal(e) { if (e.detail === 'about') setOpen(true); }
    function onPop()   { if (!window.location.pathname.includes('about')) 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);
    };
  }, []);

  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('about')) {
      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" onClick={e => e.stopPropagation()}>

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

        <div className="abt-body">

          <h2 className="abt-section-head">What is the Network Of Time?</h2>
          <p>The Network Of Time is a research project, educational resource and artwork created and maintained by <a href="https://jesseward.ca" target="_blank" rel="noopener">Jesse Ward</a>.</p>
          <p>You've heard of "six degrees of separation."</p>
          <p>This is the first project proving it with real photos.</p>
          <p>This is the first interactive, visual social graph spanning from the 1800s to today — proof we're tangled in the same photographic web, just scattered through time and space.</p>
          <p>Match any two people on the front page and you will see how they have "met" through a series of meetings or chance appearances, in the smallest possible number of photos from our collection.</p>
          <p>If you've ever been in a photo with someone who's connected to someone here — even through several degrees — you're probably in the Network too. (Even if you're not visible yet.)</p>

          <h2 className="abt-section-head">How can this claim to be the largest photo network?</h2>
          <p>Smaller photographic networks exist — clusters of people for whom no known photo connects them to the broader graph.</p>
          <p>In most cases, it is not possible to definitively say someone living after the advent of photography in the mid-19th century is not part of the Network Of Time.</p>
          <p>The real network spans millions of private photos, film frames, and crowded scenes where people can't even be identified.</p>
          <p>This site is just a snapshot of an unexposable whole.</p>
          <p>The earliest known photo of Queen Victoria and her daughter dates to 1844. In 1926, she's pictured with her great-great-granddaughter Elizabeth II.</p>
          <p>Elizabeth, over her 96-year life, was photographed with thousands.</p>
          <p>From there, the net spreads — politicians, warlords, nuns, wrestlers, hackers, prophets, rappers, you.</p>
          <p>That royal chain likely spreads to everyone living today.</p>

          <h2 className="abt-section-head">Why the name "Network Of Time"?</h2>
          <p>The name emphasises how the Network includes billions of people whose lifespans have overlapped over 150+ years in connections that are not always chronological.</p>

          <h2 className="abt-section-head">Who is this site for?</h2>
          <p>The Network Of Time is intended as an educational and cultural resource suitable for ages 14 and up.</p>
          <p>While care is taken to avoid explicit or graphic content, this archive contains some photographs that may depict:</p>
          <ul>
            <li>moments of hardship, such as famine or war</li>
            <li>partial nudity in cultural or artistic contexts</li>
            <li>emotionally intense human situations</li>
          </ul>
          <p>We do not include images with:</p>
          <ul>
            <li>explicit sexual content</li>
            <li>graphic violence or gore</li>
            <li>AI-generated or digitally altered people</li>
          </ul>
          <p>When in doubt, we prioritise historical integrity, respect for subjects, and emotional appropriateness for curious, thoughtful viewers.</p>

          <h2 className="abt-section-head">What criteria exist for a photo on this site?</h2>
          <ul>
            <li>No images with explicit nudity or graphic violence.</li>
            <li>All subjects must appear in a photo taken in one moment — no superimpositions.</li>
            <li>Subjects must be living at the time of the photograph.</li>
            <li>No images that would deny someone their right to privacy.</li>
          </ul>

          <h2 className="abt-section-head">Why is X missing, or why aren't X and Y connected?</h2>
          <p>A connection is missing because:</p>
          <ul>
            <li>It hasn't been added yet.</li>
            <li>No known photo exists to prove it.</li>
          </ul>

          <h2 className="abt-section-head">Why does this matter?</h2>
          <p>We are all interdependent. This is what the evidence looks like.</p>

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

Object.assign(window, { AboutModal });