// VORA — testimonial marquee: seamless loop (clone track) + pause on hover/focus
export function initTestimonials() {
  const viewport = document.querySelector('.testimonials__viewport');
  const track = document.querySelector('.testimonials__track');
  if (!viewport || !track) return;

  // Clone the track's children once so the CSS keyframe (translateX(-50%))
  // produces a seamless infinite loop.
  if (!track.dataset.cloned) {
    const clone = track.cloneNode(true);
    clone.setAttribute('aria-hidden', 'true');
    clone.removeAttribute('id');
    Array.from(clone.children).forEach((child) => {
      child.setAttribute('aria-hidden', 'true');
    });
    track.after(clone);
    track.dataset.cloned = 'true';

    // Keep both tracks animating in lockstep visually by wrapping them.
    const wrapper = document.createElement('div');
    wrapper.className = 'testimonials__track-group';
    wrapper.style.display = 'flex';
    wrapper.style.gap = '20px';
    wrapper.style.width = 'max-content';
    wrapper.style.animation = getComputedStyle(track).animation;

    track.parentElement.insertBefore(wrapper, track);
    wrapper.appendChild(track);
    wrapper.appendChild(clone);

    // Move animation to the wrapper, reset on the original track.
    track.style.animation = 'none';
    clone.style.animation = 'none';
    wrapper.classList.add('testimonials__track');

    const pause = () => {
      wrapper.style.animationPlayState = 'paused';
    };
    const resume = () => {
      wrapper.style.animationPlayState = 'running';
    };

    viewport.addEventListener('mouseenter', pause);
    viewport.addEventListener('mouseleave', resume);
    viewport.addEventListener('focusin', pause);
    viewport.addEventListener('focusout', resume);
  }
}
