// Home — single-viewport minimal landing: nav, 3D mark, tagline, facts
function HomePage({ setPage }) {
  const [fb, setFb] = React.useState(false);
  // Arms the hand-drawn strokes under the tagline one frame after mount, so
  // they draw rather than appearing already finished.
  const [ann, setAnn] = React.useState(false);
  React.useEffect(() => { const r = requestAnimationFrame(() => setAnn(true)); return () => cancelAnimationFrame(r); }, []);
  const ref = React.useRef(null);
  React.useEffect(() => {
    let cleanup = null, alive = true;
    const iv = setInterval(() => {
      if (window.PV_MOUNT_LOGO3D && ref.current) {
        clearInterval(iv);
        if (!alive) return;
        cleanup = window.PV_MOUNT_LOGO3D(ref.current);
        if (!cleanup) setFb(true);
      }
    }, 90);
    const to = setTimeout(() => { clearInterval(iv); if (alive && !window.PV_MOUNT_LOGO3D) setFb(true); }, 7000);
    return () => { alive = false; clearInterval(iv); clearTimeout(to); if (cleanup) cleanup(); };
  }, []);
  const D = window.PV_DATA;
  return (
    <div className="mh4 shell">
      <div className="logo3d-wrap rv rv1" ref={ref}>
        {fb && <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}><Logo size={210} color="var(--accent)" /></div>}
      </div>
      <h1 className="mh4-tag rv rv2">Go Further</h1>
      <p className={"mh4-sub rv rv3 hl-ann" + (ann ? " on" : "")}><span className="hl-lead">Supporting<Scribble kind="line" /></span> <span className="hl-ring">Explorers<Scribble kind="ring" /></span> on Pace to make history</p>
      <div className="mh4-bottom rv rv4">
        <div className="mh4-facts">
          {D.facts.map(f => (
            <div className="mh2-fact" key={f.k}><div className="k">{f.k}</div><div className="v">{f.v}</div></div>
          ))}
        </div>
        <div className="mh4-foot">
          <span className="mf-copy">© Pace Ventures <a className="ft-legal" onClick={() => setPage('lplogin')} style={{cursor:'pointer', marginLeft: 14}}>LP Login</a></span>
          <div className="mf-links">
            <a className="ft-legal" onClick={() => setPage('legal')} style={{cursor:'pointer'}}>Privacy &amp; Imprint</a>
            <a href="https://www.linkedin.com/company/paceventures" target="_blank" rel="noreferrer">LinkedIn</a>
            <ThemeToggle />
          </div>
        </div>
      </div>
    </div>
  );
}
window.HomePage = HomePage;