// approach.jsx - scroll-linked animated timeline
const { useEffect: useEffectAp, useRef: useRefAp, useState: useStateAp } = React;

const Approach = () => {
  const { t } = useLang();
  const a = t.approach;
  const stepsRef = useRefAp(null);
  const [progress, setProgress] = useStateAp(0);
  const [activeIdx, setActiveIdx] = useStateAp(-1);

  useEffectAp(() => {
    const onScroll = () => {
      const el = stepsRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const total = rect.height + vh * 0.6;
      const scrolled = vh * 0.6 - rect.top;
      const p = Math.max(0, Math.min(1, scrolled / total));
      setProgress(p * 100);

      // determine which step is in viewport center
      const steps = el.querySelectorAll('.step');
      let idx = -1;
      steps.forEach((s, i) => {
        const r = s.getBoundingClientRect();
        if (r.top < vh * 0.55 && r.bottom > vh * 0.25) idx = i;
      });
      setActiveIdx(idx);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="approach" id="approach">
      <div className="approach-head">
        <Reveal><div className="eyebrow">{a.eyebrow}</div></Reveal>
        <Reveal delay={1}><h2 className="section-title">{a.title}</h2></Reveal>
      </div>
      <div className="approach-steps" ref={stepsRef} style={{'--progress': `${progress}%`}}>
        {a.steps.map((s, i) => (
          <div key={i} className={`step ${activeIdx === i ? 'active' : ''}`}>
            <div className="step-num">{s.n}</div>
            <h3 className="step-title">{s.t}</h3>
            <p className="step-body">{s.b}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

window.Approach = Approach;