// Proceso — timeline animado on scroll

const STEPS = [
  { n: "01", title: "Te escuchamos", desc: "Contanos qué necesitás. Te respondemos en menos de 24h y entendemos tu situación sin tecnicismos." },
  { n: "02", title: "Analizamos tu caso", desc: "Relevamos documentación, actividad y riesgos. Te decimos exactamente qué trámites corresponden y cuáles no." },
  { n: "03", title: "Presupuesto claro", desc: "Recibís un plan con plazos, costos y profesionales involucrados. Sin sorpresas a mitad de camino." },
  { n: "04", title: "Gestionamos por vos", desc: "Coordinamos profesionales matriculados, presentamos en organismos y te avisamos en cada hito." },
  { n: "05", title: "Certificado en mano", desc: "Te entregamos los certificados y, si querés, seguimos acompañándote con auditorías mensuales." },
];

const Proceso = () => {
  const [progress, setProgress] = React.useState(0);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const onScroll = () => {
      if (!ref.current) return;
      const rect = ref.current.getBoundingClientRect();
      const vh = window.innerHeight;
      const total = rect.height;
      const start = vh * 0.6;
      const end = vh * 0.2;
      const passed = start - rect.top;
      const window_ = total - end + start;
      const p = Math.max(0, Math.min(1, passed / window_));
      setProgress(p);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const activeIdx = Math.min(STEPS.length - 1, Math.floor(progress * STEPS.length));

  return (
    <section id="proceso" ref={ref} style={{
      padding: "120px 0",
      background: "linear-gradient(180deg, #FAFBF7 0%, #EFF7F1 60%, #FAFBF7 100%)",
      position: "relative"
    }}>
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 80px" }}>
          <div className="eyebrow reveal">Cómo trabajamos</div>
          <h2 className="reveal" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", marginTop: 14, marginBottom: 18 }}>
            De la consulta al certificado,<br/>
            sin que <span className="squiggle">te enteres</span> de la burocracia.
          </h2>
          <p className="reveal" style={{ fontSize: 18, color: "var(--ink-soft)" }}>
            Un proceso transparente y guiado, paso a paso.
          </p>
        </div>

        <div style={{ position: "relative", maxWidth: 880, margin: "0 auto" }}>
          {/* track */}
          <div style={{
            position: "absolute", left: 36, top: 24, bottom: 24, width: 3,
            background: "rgba(14,42,36,.08)", borderRadius: 999
          }}></div>
          <div style={{
            position: "absolute", left: 36, top: 24, width: 3,
            height: `calc((100% - 48px) * ${progress})`,
            background: "linear-gradient(180deg, var(--green-primary), var(--green-mint))",
            borderRadius: 999, transition: "height .3s ease"
          }}></div>

          {STEPS.map((s, i) => {
            const reached = i <= activeIdx;
            return (
              <div key={i} style={{
                display: "flex", gap: 28, marginBottom: 36, alignItems: "flex-start",
                opacity: reached ? 1 : 0.4, transition: "opacity .5s"
              }}>
                <div style={{
                  flexShrink: 0, width: 76, height: 76, borderRadius: "50%",
                  background: reached ? "var(--green-primary)" : "white",
                  color: reached ? "white" : "var(--ink-soft)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "Fraunces, serif", fontSize: 26, fontWeight: 600,
                  boxShadow: reached ? "0 12px 30px rgba(0,151,117,.3)" : "0 2px 8px rgba(14,42,36,.06)",
                  border: reached ? "none" : "1.5px solid rgba(14,42,36,.1)",
                  transition: "all .4s",
                  position: "relative", zIndex: 2
                }}>
                  {reached && i < activeIdx ? <IconCheck color="white" size={32}/> : s.n}
                </div>
                <div style={{ flex: 1, paddingTop: 12 }}>
                  <h3 style={{ fontSize: 26, marginBottom: 8 }}>{s.title}</h3>
                  <p style={{ color: "var(--ink-soft)", fontSize: 16, maxWidth: 580 }}>{s.desc}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Proceso });