// Carrossel de vídeos verticais (auto-scroll continuous)
const VerticalVideos = () => {
  const items = [...window.ABACO.verticalVideos, ...window.ABACO.verticalVideos];
  const ref = React.useRef(null);
  const [paused, setPaused] = React.useState(false);
  React.useEffect(() => {
    let raf;
    const tick = () => {
      const el = ref.current;
      if (el && !paused) {
        el.scrollLeft += 0.6;
        if (el.scrollLeft >= el.scrollWidth / 2) {
          el.scrollLeft = 0;
        }
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [paused]);

  return (
    <section className="vvids">
      <div className="container vvids-head">
        <div>
          <div className="eyebrow eyebrow-light">Ábaco em movimento</div>
          <h2 className="vvids-title">O dia a dia, do jeito que acontece.</h2>
        </div>
        <a href={`https://instagram.com/${window.ABACO.instagram}`} className="vvids-cta">
          ver todos os vídeos
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4">
            <path d="M5 12h14M13 5l7 7-7 7" />
          </svg>
        </a>
      </div>

      <div className="vvids-track-wrap"
           onMouseEnter={() => setPaused(true)}
           onMouseLeave={() => setPaused(false)}>
        <div className="vvids-track no-scrollbar" ref={ref}>
          {items.map((v, i) => (
            <article key={i} className={"vvid-card"}>
              <div className={"vvid-thumb ph " + (v.tone === 'default' ? '' : v.tone)}>
                <span>{v.title}</span>
                <button className="vvid-play" aria-label="play">
                  <svg viewBox="0 0 24 24" width="24" height="24" fill="white">
                    <path d="M8 5v14l11-7z" />
                  </svg>
                </button>
                <div className="vvid-meta-overlay">
                  <span className="vvid-tag">{v.meta}</span>
                  <strong>{v.title}</strong>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

window.VerticalVideos = VerticalVideos;