function Plan() {
  const steps = [
    { side: "right", t: "Auditoría Integral", d: "Analizamos tu situación actual: competencia, audiencia, canales y oportunidades de crecimiento antes de invertir un peso." },
    { side: "left",  t: "Diseño Estratégico", d: "Creamos tu roadmap personalizado: qué canales activar, qué mensajes comunicar y cómo medir cada resultado." },
    { side: "right", t: "Implementación Completa", d: "Activamos tu sistema: campañas, páginas, automatizaciones y herramientas configuradas y listas para generar clientes." },
    { side: "left",  t: "Optimización Continua", d: "Monitoreamos resultados, ajustamos lo que no funciona y escalamos lo que sí. Tu sistema mejora cada mes." },
  ];
  const [p, setP] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    let raf, started = false;
    const animate = () => {
      const dur = 2200, t0 = performance.now();
      const tick = (now) => {
        const prog = Math.min(1, (now - t0) / dur);
        setP(prog);
        if (prog < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
    };
    const start = () => { if (started) return; started = true; cleanup(); animate(); };
    const check = () => {
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight - 120 && r.bottom > 0) { start(); return true; }
      return false;
    };
    const cleanup = () => {
      window.removeEventListener("scroll", check);
      window.removeEventListener("resize", check);
    };
    if (!check()) {
      window.addEventListener("scroll", check, { passive: true });
      window.addEventListener("resize", check);
    }
    return () => { cleanup(); cancelAnimationFrame(raf); };
  }, []);

  const activeAt = (i) => p >= (i / steps.length) + 0.04;

  return (
    <section id="plan" className="proceso section" ref={ref}>
      <Sticker kind="star" className="pr-stk pr-stk-1 anim" />
      <Sticker kind="sparkle" className="pr-stk pr-stk-2 anim" style={{ animationDelay: "0.7s" }} />
      <Sticker kind="plus" className="pr-stk pr-stk-3" />
      <Sticker kind="dot" className="pr-stk pr-stk-4 anim" style={{ animationDelay: "1.1s" }} />
      <Sticker kind="squig" className="pr-stk pr-stk-5" />
      <Sticker kind="sparkle" className="pr-stk pr-stk-6 anim" style={{ animationDelay: "1.6s" }} />
      <div className="wrap">
        <Reveal as="div" className="sec-head">
          <div className="eyebrow"><span className="dot" />Cómo trabajamos</div>
          <h2>El proceso para tu <span className="cyan">crecimiento</span></h2>
        </Reveal>

        <div className="proceso-timeline">
          <div className="pt-line"><div className="pt-line-fill" style={{ height: `${p * 100}%` }}></div></div>
          {steps.map((s, i) => {
            const on = activeAt(i);
            return (
              <div key={i} className={`pt-row ${s.side} ${on ? "on" : ""}`}>
                <div className="pt-card">
                  <h3>{s.t}</h3>
                  <p>{s.d}</p>
                </div>
                <div className="pt-node">{i + 1}</div>
                <div className="pt-spacer"></div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Plan });