// === 3D scroll-driven parallax stack ===
function ParallaxStack() {
  const stackRef = useRef(null);
  const sceneRef = useRef(null);
  const [progress, setProgress] = useState(0);

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

  const cards = [
    { n: '01', h: <>Evidence over <em>opinion.</em></>, f: 'Good decisions start with honest data, not the loudest voice in the room.' },
    { n: '02', h: <>Rigour, with <em>empathy.</em></>, f: 'The numbers matter. So do the people and communities behind them.' },
    { n: '03', h: <>Clarity for <em>decision-makers.</em></>, f: 'My job is to make the complex legible — a dashboard a leader can act on in seconds.' },
    { n: '04', h: <>Lift the <em>whole team.</em></>, f: 'Capability outlasts any single analysis. I build people, not just pipelines.' },
  ];

  return (
    <section className="parallax-stack" ref={stackRef} data-screen-label="Principles">
      <div className="parallax-stack-pin">
        <div className="ps-eyebrow eyebrow">A few principles</div>
        <div className="parallax-stack-scene" ref={sceneRef}>
          {cards.map((c, i) => {
            const seg = 1 / cards.length;
            const start = i * seg;
            const local = (progress - start) / seg; // -inf .. 1+
            const inT = Math.max(0, Math.min(1, local + 0.4));
            const outT = Math.max(0, Math.min(1, local - 0.6));
            const z = -200 + inT * 200 - outT * 600;
            const rotX = -20 + inT * 20 - outT * 30;
            const opacity = inT * (1 - outT);
            const y = (1 - inT) * 80 + outT * -60;
            return (
              <div
                key={i}
                className="ps-card"
                style={{
                  transform: `translate3d(0, ${y}px, ${z}px) rotateX(${rotX}deg)`,
                  opacity,
                  zIndex: 10 + i,
                  pointerEvents: opacity > 0.5 ? 'auto' : 'none',
                }}
              >
                <div className="ps-card-num">{c.n} / 0{cards.length}</div>
                <h3 className="ps-card-h">{c.h}</h3>
                <div className="ps-card-foot">{c.f}</div>
              </div>
            );
          })}
        </div>
        <div className="ps-progress">
          <div className="ps-progress-fill" style={{ height: (progress * 100) + '%' }}></div>
        </div>
      </div>
    </section>
  );
}

window.ParallaxStack = ParallaxStack;