/* global Manifesto */
function Manifesto() {
  // We tell stories. We build engines. We do both, because they should never have been separate.
  const words = [
    { t: 'We', cls: '' },
    { t: 'tell', cls: '' },
    { t: 'stories.', cls: 'films' },
    { t: 'We', cls: '' },
    { t: 'build', cls: '' },
    { t: 'engines.', cls: 'solutions' },
    { t: 'We', cls: '' },
    { t: 'do', cls: '' },
    { t: 'both,', cls: 'accent' },
    { t: 'because', cls: '' },
    { t: 'they', cls: '' },
    { t: 'should', cls: '' },
    { t: 'never', cls: '' },
    { t: 'have', cls: '' },
    { t: 'been', cls: '' },
    { t: 'separate.', cls: 'accent' },
  ];

  const wrapRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const onScroll = () => {
      const el = wrapRef.current;
      if (!el) return;
      const r = el.getBoundingClientRect();
      const total = r.height - window.innerHeight;
      const p = Math.max(0, Math.min(1, -r.top / total));
      setProgress(p);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Hold a moment at the start before any reveal, and a moment at the end.
  const reveal = Math.max(0, Math.min(1, (progress - 0.10) / 0.55));
  const activeUntil = Math.floor(reveal * words.length);

  return (
    <section
      ref={wrapRef}
      id="manifesto"
      className="manifesto"
      data-screen-label="Manifesto"
    >
      <span className="manifesto-tag">02 — Manifesto</span>
      <div className="manifesto-pin">
        <h2 className="manifesto-text">
          {words.map((w, i) => (
            <span
              key={i}
              className={`word ${w.cls} ${i < activeUntil ? 'on' : ''}`}
            >{w.t}</span>
          ))}
        </h2>
      </div>
    </section>
  );
}
window.Manifesto = Manifesto;