// GetContent — scroll-reveal tekst. Woorden lichten op (faint -> ink) terwijl je
// scrollt; het accentwoord "GetContent" wordt coral.
function RevealText() {
  const ref = React.useRef(null);
  const full = "Bij ons staat jouw budget centraal. Waar een creator normaal zijn eigen tarief heeft, bepaal jij bij GetContent zelf wat het budget is voor jouw opdracht. Creators kiezen zelf of ze daarop reageren. Zo bepaal jij zelf wat je wilt uitgeven.";
  const words = full.split(' ');
  const [lit, setLit] = React.useState(0);

  React.useEffect(() => {
    const scroller = document.querySelector('#gc-scroll');
    const update = () => {
      const el = ref.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const winH = window.innerHeight;
      let progress = (winH * 0.78 - rect.top) / ((rect.height + winH * 0.2) * 1.43);
      progress = Math.max(0, Math.min(1, progress));
      setLit(Math.floor(progress * words.length));
    };
    const target = scroller || window;
    target.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);
    update();
    return () => { target.removeEventListener('scroll', update); window.removeEventListener('resize', update); };
  }, [words.length]);

  return (
    <section style={{ background: 'var(--surface-page)', padding: 'var(--section-pad-y) 0' }}>
      <div style={{ maxWidth: 880, margin: '0 auto', padding: '0 var(--gutter)' }}>
        <span className="gc-eyebrow" style={{ marginBottom: 22 }}>Onze aanpak</span>
        <p ref={ref} style={{ fontSize: 'clamp(1.6rem, 4.2vw, 2.875rem)', lineHeight: 1.35, fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.01em' }}>
          {words.map((w, i) => {
            const isAccent = w.replace(/[^A-Za-z]/g, '') === 'GetContent';
            const on = i < lit;
            return (
              <span key={i} style={{
                color: isAccent ? (on ? 'var(--accent)' : 'rgba(237,110,111,0.4)') : (on ? 'rgba(18,24,38,0.82)' : 'rgba(18,24,38,0.34)'),
                fontWeight: isAccent ? 'var(--fw-extra)' : 'var(--fw-semibold)',
                transition: 'color 0.5s var(--ease-out)',
              }}>{w}{i < words.length - 1 ? ' ' : ''}</span>
            );
          })}
        </p>
      </div>
    </section>
  );
}
window.RevealText = RevealText;