// App — composes the site, handles the audit modal + video modal + scroll reveal + icon init.
// The audit form (AuditModal) and the useModalA11y hook live in the shared AuditModal.jsx, loaded before this file.

function VideoModal({ onClose }) {
  const [playing, setPlaying] = React.useState(false);
  const [t, setT] = React.useState(0);
  const [closing, setClosing] = React.useState(false);
  const close = () => { setClosing(true); setTimeout(onClose, 300); };
  React.useEffect(() => {
    if (!playing) return;
    const id = setInterval(() => setT(x => { if (x >= 45) { clearInterval(id); return 45; } return Math.round((x + 0.1) * 10) / 10; }), 100);
    return () => clearInterval(id);
  }, [playing]);
  const pct = (t / 45) * 100;
  const fmt = s => '0:' + String(Math.floor(s)).padStart(2, '0');
  const done = t >= 45;
  const ref = useModalA11y(close);
  return (
    <div className={'video-scrim' + (closing ? ' closing' : '')} onClick={close}>
      <div className="video-modal" ref={ref} tabIndex={-1} role="dialog" aria-modal="true" aria-label="How Origo works" onClick={e => e.stopPropagation()}>
        <div className="video-head">
          <span className="vt"><span className="vdot"></span>How Origo works</span>
          <button className="vx" onClick={close}>×</button>
        </div>
        <div className="video-stage" onClick={() => { if (done) { setT(0); setPlaying(true); } else setPlaying(p => !p); }}>
          <div className="video-glow"></div>
          <img className="video-wmk" src="assets/origo-o.svg?v=4" alt="" />
          {(!playing && t === 0) && (
            <button className="play-big"><svg viewBox="0 0 24 24" width="26" height="26" fill="#000"><path d="M5 3.5v17l14-8.5z"/></svg></button>
          )}
          <div className="video-cap">{playing ? 'Measure · Implement · Verify' : done ? 'Replay' : 'A 45-second look at how we get you cited'}</div>
        </div>
        <div className="video-bar"><div className="video-fill" style={{ width: pct + '%' }}></div></div>
        <div className="video-foot"><span className="vtime">{fmt(t)} / 0:45</span><span className="vlabel">Demo film</span></div>
      </div>
    </div>
  );
}

function App() {
  const [modal, setModal] = React.useState(false);
  const [video, setVideo] = React.useState(false);
  const open = () => setModal(true);

  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <React.Fragment>
      <Nav onDemo={open} />
      <main id="main">
        <Hero onDemo={open} onVideo={() => setVideo(true)} />
        <EngineStrip />
        <Method />
        <ShareBars />
        <Showcase />
        <CTA onDemo={open} />
      </main>
      <Footer />
      {modal && <AuditModal onClose={() => setModal(false)} />}
      {video && <VideoModal onClose={() => setVideo(false)} />}
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);