// Los cuatro módulos del Motor — rail vertical con pulso que acompaña el
// scroll, y panel de métrica (línea de base → objetivo) por módulo.
function Modulos() {
  const [lang] = useLang();
  const C = window.FUSE_CONTENT.modulos;
  const [pre, emph, post] = C.h2[lang];
  const wrapRef = React.useRef(null);
  const railRef = React.useRef(null);

  // Rail fill follows scroll progress through the module list.
  React.useEffect(() => {
    let raf;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const wrap = wrapRef.current, rail = railRef.current;
        if (!wrap || !rail) return;
        const r = wrap.getBoundingClientRect();
        const mid = window.innerHeight * 0.55;
        const pct = Math.max(0, Math.min(1, (mid - r.top) / r.height));
        rail.style.setProperty('--fill', `${pct * 100}%`);
      });
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);

  // Metric bars animate when their row is in view.
  React.useEffect(() => {
    const rows = wrapRef.current ? wrapRef.current.querySelectorAll('.mod-row') : [];
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in-view'); io.unobserve(e.target); } });
    }, { threshold: 0.35 });
    rows.forEach(r => io.observe(r));
    return () => io.disconnect();
  }, [lang]);

  return (
    <section id="modulos" className="section divider-top" style={{ background: 'var(--paper)' }} data-screen-label="modulos">
      <div className="container">
        <header className="reveal" style={{ marginBottom: 'clamp(40px, 6vw, 72px)' }}>
          <div className="kicker kicker-accent">{C.kicker[lang]}</div>
          <h2 className="h-section" style={{ marginTop: 16, maxWidth: '20ch' }}>
            {pre}<span className="mk-emph">{emph}</span>{post}
          </h2>
          <p style={{ marginTop: 20, fontSize: 16, lineHeight: 1.65, color: 'var(--ink-2)', maxWidth: '68ch' }}>
            {C.body[lang]}
          </p>
        </header>

        <div className="mods-wrap" ref={wrapRef}>
          <div className="mods-rail" ref={railRef}>
            <span className="rail-fill" />
            <span className="rail-pulse" />
          </div>

          {C.items[lang].map((m, i) => (
            <article key={m.id} className="mod-row" id={`mod-${m.id}`}>
              <div className="reveal-left">
                <div className="m-num">§ MÓDULO {m.num}</div>
                <h3 className="m-title">{m.title}</h3>
                <p className="m-body">{m.body}</p>
              </div>
              <div className="mod-metric reveal" data-delay="2">
                <span className="mm-label">↳ {m.metric}</span>
                <div className="mm-compare">
                  <div className="mm-cell base">
                    <span className="mm-val">{m.base}</span>
                    <span className="mm-sub">{m.baseLabel}</span>
                  </div>
                  <span className="mm-arrow" aria-hidden>→</span>
                  <div className="mm-cell goal">
                    <span className="mm-val">{m.goal}</span>
                    <span className="mm-sub">{m.goalLabel}</span>
                  </div>
                </div>
                <div className="mm-bar" aria-hidden><i /></div>
              </div>
            </article>
          ))}
        </div>

        <div className="regla-note reveal" style={{ marginTop: 'clamp(40px, 6vw, 64px)' }}>
          <span className="rn-k">§ {C.regla_title[lang]}</span>
          <p>{C.regla[lang]}</p>
        </div>
      </div>
    </section>
  );
}

window.Modulos = Modulos;