// Carrusel 3D (coverflow) con los 5 pasos del proceso. En escritorio las
// tarjetas se disponen en semicírculo con perspectiva; en móvil se convierte
// en un carrusel plano deslizable (scroll-snap) vía CSS. El estado
// (activeIndex) es el único origen de verdad y alimenta ambos modos.
// Navegación 100% manual: sin avance automático.
const PASOS = [
  { k: 'how.p1', icono: '📞' },
  { k: 'how.p2', icono: '🔎' },
  { k: 'how.p3', icono: '💡' },
  { k: 'how.p4', icono: '🚀' },
  { k: 'how.p5', icono: '🎯' },
].map((p) => ({ titulo: window.t(p.k + '.t'), texto: window.t(p.k + '.x'), icono: p.icono }));

// Distancia más corta (con signo) entre dos índices en un carrusel circular.
function shortestOffset(i, active, len) {
  let diff = i - active;
  if (diff > len / 2) diff -= len;
  if (diff < -len / 2) diff += len;
  return diff;
}

function ComoTrabajamos() {
  const { useState: useStateFlow, useRef: useRefFlow, useEffect: useEffectFlow } = React;
  const [active, setActive] = useStateFlow(0);
  const trackRef = useRefFlow(null);
  const cardRefs = useRefFlow([]);
  const isSyncingScroll = useRefFlow(false);
  const isFirstRender = useRefFlow(true);
  const len = PASOS.length;

  const goTo = (i) => setActive(((i % len) + len) % len);
  const next = () => goTo(active + 1);
  const prev = () => goTo(active - 1);

  // Lleva la tarjeta activa a la vista (solo tiene efecto visible en el
  // carrusel plano de móvil; en escritorio el viewport no hace scroll).
  // Se omite en el montaje inicial para no forzar un scroll de página.
  useEffectFlow(() => {
    if (isFirstRender.current) { isFirstRender.current = false; return undefined; }
    const card = cardRefs.current[active];
    if (!card) return undefined;
    isSyncingScroll.current = true;
    card.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
    const t = setTimeout(() => { isSyncingScroll.current = false; }, 500);
    return () => clearTimeout(t);
  }, [active]);

  // En móvil, si el usuario desliza a mano, sincroniza el índice activo con
  // la tarjeta que quede más centrada en el viewport.
  useEffectFlow(() => {
    const el = trackRef.current;
    if (!el) return undefined;
    const onScroll = () => {
      if (isSyncingScroll.current) return;
      const rect = el.getBoundingClientRect();
      const center = rect.left + rect.width / 2;
      let closest = 0;
      let closestDist = Infinity;
      cardRefs.current.forEach((c, i) => {
        if (!c) return;
        const r = c.getBoundingClientRect();
        const dist = Math.abs(r.left + r.width / 2 - center);
        if (dist < closestDist) { closestDist = dist; closest = i; }
      });
      setActive((prevActive) => (prevActive === closest ? prevActive : closest));
    };
    el.addEventListener('scroll', onScroll, { passive: true });
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section id="como-trabajamos" className="section reveal">
      <div className="container">
        <div className="section__head">
          <h2 dangerouslySetInnerHTML={window.tHtml('how.title')} />
          <p dangerouslySetInnerHTML={window.tHtml('how.sub')} />
        </div>

        <div className="flow3d">
          <div className="flow3d__viewport" ref={trackRef}>
            <div className="flow3d__track">
              {PASOS.map((paso, i) => {
                const diff = shortestOffset(i, active, len);
                const abs = Math.abs(diff);
                const isActiveCard = diff === 0;
                // Profundidad falseada en 2D puro (translateX + scale +
                // opacity), sin rotateY/translateZ/perspective: cualquier
                // rotación 3D real sobre texto obliga al navegador a
                // rasterizarlo con antialiasing borroso (limitación conocida
                // de los navegadores, no arreglable con backface-visibility
                // ni font-smoothing). Quitando la rotación el texto queda
                // siempre nítido, en la tarjeta activa y en las laterales.
                const style = {
                  transform: `translate(-50%, -50%) translateX(${diff * 300}px) scale(${1 - abs * 0.14})`,
                  opacity: abs > 2 ? 0 : 1 - abs * 0.32,
                  zIndex: 10 - abs,
                  pointerEvents: isActiveCard ? 'auto' : 'none',
                };
                return (
                  <div
                    key={paso.titulo}
                    ref={(el) => { cardRefs.current[i] = el; }}
                    className={`flow3d__card ${isActiveCard ? 'flow3d__card--active' : ''}`}
                    style={style}
                  >
                    <div className="flow3d__card-inner">
                      <div className="flow3d__icon" aria-hidden="true">{paso.icono}</div>
                      <div className="flow3d__num">{i + 1}</div>
                      <h3>{paso.titulo}</h3>
                      <p>{paso.texto}</p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="flow3d__controls">
            <button type="button" className="flow3d__arrow" onClick={prev} aria-label={window.t('how.prev')}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M15 5 L8 12 L15 19" />
              </svg>
            </button>
            <div className="flow3d__dots">
              {PASOS.map((paso, i) => (
                <button
                  key={paso.titulo}
                  type="button"
                  className={`flow3d__dot ${i === active ? 'is-active' : ''}`}
                  onClick={() => goTo(i)}
                  aria-label={`${window.t('how.goto')} ${i + 1}: ${paso.titulo}`}
                />
              ))}
            </div>
            <button type="button" className="flow3d__arrow" onClick={next} aria-label={window.t('how.next')}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M9 5 L16 12 L9 19" />
              </svg>
            </button>
          </div>
        </div>

        <div className="flow-callout">
          <span className="flow-callout__pill">{window.t('how.c1')}</span>
          <span className="flow-callout__pill">{window.t('how.c2')}</span>
          <span className="flow-callout__pill">{window.t('how.c3')}</span>
          <span className="flow-callout__pill">{window.t('how.c4')}</span>
        </div>
      </div>
    </section>
  );
}