/**
 * Marquee Clients Animation
 * Duplicates client logos untuk infinite loop yang smooth
 * Auto-pauses on hover, resumes on mouse leave
 */

(function() {
  'use strict';

  // Tunggu DOM siap
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initMarquee);
  } else {
    initMarquee();
  }

  function initMarquee() {
    const clientsContainer = document.querySelector('.clients .container');
    if (!clientsContainer) return;

    // Clone semua logo
    const logos = Array.from(clientsContainer.querySelectorAll('img'));
    if (logos.length === 0) return;

    // Duplikasi logos untuk seamless loop (minimal 3x untuk smooth effect)
    const clone1 = cloneLogos(logos);
    const clone2 = cloneLogos(logos);

    clientsContainer.appendChild(clone1);
    clientsContainer.appendChild(clone2);

    // Setup pause on hover
    clientsContainer.addEventListener('mouseenter', pauseMarquee);
    clientsContainer.addEventListener('mouseleave', resumeMarquee);

    // Setup pause on touch (mobile)
    clientsContainer.addEventListener('touchstart', pauseMarquee);
    clientsContainer.addEventListener('touchend', resumeMarquee);
  }

  /**
   * Clone semua logo dengan wrapper div
   */
  function cloneLogos(logos) {
    const wrapper = document.createElement('div');
    wrapper.className = 'marquee-clone';

    logos.forEach(logo => {
      const clone = logo.cloneNode(true);
      wrapper.appendChild(clone);
    });

    return wrapper;
  }

  /**
   * Pause animasi
   */
  function pauseMarquee(e) {
    const container = e.currentTarget;
    container.style.animationPlayState = 'paused';

    // Scale up sedikit untuk visual feedback
    const imgs = container.querySelectorAll('img');
    imgs.forEach(img => {
      img.classList.add('paused');
    });
  }

  /**
   * Resume animasi
   */
  function resumeMarquee(e) {
    const container = e.currentTarget;
    container.style.animationPlayState = 'running';

    // Remove scale class
    const imgs = container.querySelectorAll('img');
    imgs.forEach(img => {
      img.classList.remove('paused');
    });
  }
})();
