// Manifesto page — balanced statements, highlight sweep, scroll-revealed USPs
// (Scribble — the hand-drawn strokes — lives in components.jsx)
function ManifestoPage({ setPage }) {
  React.useEffect(() => {
    const els = document.querySelectorAll('.mfp-page .rvl, .mfp-page .hl-sweep');
    const io = new IntersectionObserver((es) => {
      es.forEach(e => { if (e.isIntersecting) { e.target.classList.add('on'); io.unobserve(e.target); } });
    }, { threshold: 0.35 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
  const usps = [
    { h: "We open doors that don't open easily.", ps: [] },
    { h: "Investors who understand what you're building.", ps: [] },
    { h: "The right investors for your next round.", ps: [] },
  ];
  return (
    <div className="mfp-page">
      <div className="mfp shell">
        <div className="hero-meta">
          <span className="dot"></span>
          <span>MANIFESTO</span>
          <span style={{ flex: 1 }}></span>
          <span>SETTING THE PACE</span>
        </div>
        <h1 className="mfp-lead">Pace is about moving with <i>purpose</i>: disciplined, focused, and always clear on where we're going. The <i>founders</i> we seek out win because they never break <i>stride</i>.</h1>
        <div className="mfp-body">
          <p>We're the most useful investor at the table. With deep relationships across industrial systems and human health, technical understanding, and conviction that does not chase consensus. We open doors. We do what we say.</p>
          <div>
            <p style={{marginTop: 0}}>Every company we back gets <em className="hl-sweep hl-ann"><span className="hl-lead">2 commercial<Scribble kind="line" /></span> <span className="hl-ring">contracts<Scribble kind="ring" /></span></em> and introductions to <em className="hl-sweep hl-ann hl-d2"><span className="hl-lead">50+ institutional<Scribble kind="line" /></span> <span className="hl-ring">investors<Scribble kind="ring" /></span></em>.</p>
            <p className="mfp-close">That is the discipline of Pace.</p>
          </div>
        </div>
      </div>
      <div className="usps shell">
        <div className="hero-meta">
          <span className="dot"></span>
          <span>USPS</span>
        </div>
        <div className="usps-grid">
          {usps.map((u, i) => (
            <div className={"usp-col rvl d" + i} key={i}>
              <h3>{u.h}</h3>
              {u.ps.map((p, j) => <p key={j}>{p}</p>)}
            </div>
          ))}
        </div>
        <Footer setPage={setPage} />
      </div>
    </div>
  );
}
window.ManifestoPage = ManifestoPage;