// Qué hacemos — sticky stage. Sección pineada, cards aparecen según progreso de scroll.
function QueHacemos() {
  const [lang] = window.useLang();
  const isEn = lang === "en";

  const caps = isEn
    ? [
        { tab: "Dashboards",            t: "Dashboards",             d: "Views of your business that mirror how you actually work. The data you need, where you need to read it." },
        { tab: "Automation",            t: "Automation",             d: "Repetitive tasks the system handles for you. Orders, alerts, syncs across tools, reports." },
        { tab: "Custom apps",           t: "Custom apps & software", d: "Internal apps, team portals, multi-role systems. For when no SaaS fits your shape." },
        { tab: "AI built-in",           t: "AI built-in",            d: "Assistants that answer about your business, automatic analyses, agents that take real action. AI inside the system, not glued on top." },
      ]
    : [
        { tab: "Dashboards",            t: "Dashboards",             d: "Vistas de tu negocio que reflejan cómo trabajás. Lo que necesitás leer, en un solo lugar." },
        { tab: "Automatizaciones",      t: "Automatizaciones",       d: "Tareas repetitivas que el sistema hace solo. Pedidos, alertas, sync entre herramientas, reportes." },
        { tab: "Apps a medida",         t: "Apps y software a medida", d: "Aplicaciones internas, portales para equipos, sistemas multi-rol." },
        { tab: "IA integrada",          t: "IA integrada",           d: "Asistentes que responden sobre tu negocio, análisis automáticos, agentes que ejecutan acciones reales. IA adentro del sistema." },
      ];

  const ref = React.useRef(null);
  const [step, setStep] = React.useState(-1);

  React.useEffect(() => {
    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        const el = ref.current;
        if (!el) { raf = 0; return; }
        const rect = el.getBoundingClientRect();
        const total = rect.height - window.innerHeight;
        const progress = Math.max(0, Math.min(0.9999, -rect.top / Math.max(total, 1)));
        // buckets = caps.length + 1 → primer bucket = sin cards, despues cada card
        const buckets = caps.length + 1;
        const s = Math.min(caps.length - 1, Math.floor(progress * buckets) - 1);
        setStep(s);
        raf = 0;
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, [caps.length]);

  return (
    <section className="qh" id="que-hacemos" ref={ref} data-step={step}>
      <div className="qh-stage">
        <div className="container qh-stage-inner">
          <div className="qh-head">
            <Reveal as="span" className="eyebrow rv-up">{isEn ? "WHAT WE DO" : "QUÉ HACEMOS"}</Reveal>
            <Reveal as="h2" className="section-title rv-up" delay={120}>
              {isEn ? <>Whatever your<br/>business needs.</> : <>Lo que tu negocio<br/>necesite.</>}
            </Reveal>
          </div>
          <ol className="cap-grid">
            {caps.map((c, i) => (
              <li className={`cap-card ${i <= step ? "is-on" : ""} ${i === step ? "is-active" : ""}`} key={c.tab}>
                <div className="cap-tab">
                  <span className="cap-tab-label">{c.tab}</span>
                </div>
                <div className="cap-body">
                  <p className="cap-d">{c.d}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}
window.QueHacemos = QueHacemos;