// scenes-manifesto.jsx — the closing pull quote.
// One huge sentence assembles word-by-word as the section scrolls past.
// Quote text fades from sepia → lavender as you reach the bottom (matches sky).

const { useRef: useRefM, useEffect: useEffectM, useState: useStateM } = React;

function Manifesto() {
  const wrap = useRefM(null);
  const [p, setP] = useStateM(0);
  useEffectM(() => {
    function onScroll() {
      const el = wrap.current;
      if (!el) return;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const span = el.offsetHeight + vh;
      const scrolled = vh - r.top;
      setP(Math.max(0, Math.min(1, scrolled / span)));
    }
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const text = [
    "We", "believe", "the", "computer", "was", "a", "place",
    "before", "it", "was", "a", "feed.", "A", "room", "with", "a",
    "lamp.", "A", "book", "with", "your", "name",
    "in", "it.",
    "We", "are", "trying", "to",
    "make", "it", "that", "again."
  ];

  return (
    <section id="manifesto" ref={wrap} style={{
      position: 'relative',
      padding: '220px 8vw 200px',
      minHeight: '100vh',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <div style={{ maxWidth: 1180, position: 'relative' }}>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.5em', textTransform: 'uppercase',
          color: 'var(--lavender)', marginBottom: 48, display: 'flex', alignItems: 'center', gap: 16,
          opacity: Math.max(0.55, Math.min(1, p * 2)),
        }}>
          <span style={{ width: 50, height: 1, background: 'currentColor', display: 'inline-block' }}></span>
          A small manifesto
        </div>

        <blockquote style={{
          fontFamily: 'var(--serif)',
          fontSize: 'clamp(48px, 6vw, 96px)',
          lineHeight: 1.1,
          fontWeight: 300,
          letterSpacing: '-0.025em',
          color: 'transparent',
          background: 'linear-gradient(180deg, var(--ink) 0%, var(--sepia) 28%, var(--lavender) 72%, var(--lavender-2) 100%)',
          WebkitBackgroundClip: 'text', backgroundClip: 'text',
          maxWidth: 1080, margin: 0,
        }}>
          {text.map((w, i) => {
            const local = i / text.length;
            const wp = Math.max(0, Math.min(1, (p - local * 0.45) * 5));
            const italic = ['place', 'book', 'name', 'feed.'].includes(w);
            return (
              <span key={i} style={{ display: 'inline-block', overflow: 'hidden', verticalAlign: 'bottom', marginRight: '0.28em' }}>
                <span style={{
                  display: 'inline-block',
                  transform: `translateY(${(1 - wp) * 40}%)`,
                  opacity: Math.max(0.35, wp),
                  transition: 'transform .9s cubic-bezier(.2,.7,.2,1), opacity .6s',
                  fontStyle: italic ? 'italic' : 'normal',
                }}>{w}</span>
              </span>
            );
          })}
        </blockquote>

        <cite style={{
          display: 'block', marginTop: 80,
          fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.4em',
          textTransform: 'uppercase', color: 'var(--lavender)', fontStyle: 'normal',
          opacity: Math.max(0.5, (p - 0.3) * 2.5),
        }}>— The AriLabs studio · Manchester · 2026</cite>
      </div>
    </section>
  );
}

window.Manifesto = Manifesto;