(function () {
  const viewports = document.querySelectorAll('[data-live-carousel]');

  viewports.forEach((viewport) => {
    const track = viewport.querySelector('.live-track');
    const arrow = viewport.querySelector('.live-arrow');
    if (!track || !arrow) return;

    let pauseTimer = null;
    const pauseTrack = () => {
      track.style.animationPlayState = 'paused';
      clearTimeout(pauseTimer);
      pauseTimer = setTimeout(() => {
        track.style.animationPlayState = 'running';
      }, 2600);
    };

    arrow.addEventListener('click', () => {
      const card = track.querySelector('.live-card');
      const step = card ? (card.offsetWidth + 14) : 320;
      track.style.transform = 'translateX(0)';
      pauseTrack();
      const current = viewport.scrollLeft;
      viewport.scrollTo({ left: current + step, behavior: 'smooth' });
    });

    viewport.addEventListener('mouseenter', () => {
      track.style.animationPlayState = 'paused';
    });

    viewport.addEventListener('mouseleave', () => {
      clearTimeout(pauseTimer);
      track.style.animationPlayState = 'running';
    });
  });
})();
