/* Scoped to: sports-template-Upcoming-games */
(function() {
  'use strict';
  var componentRoots = document.querySelectorAll('[data-component-slug="sports-template-Upcoming-games"]');
  componentRoots.forEach(function(componentRoot) {
    // Helper to query within component, with fallback to document for sibling elements
    var $ = function(sel) { 
      return componentRoot.querySelector(sel) || document.querySelector('[data-component-slug="sports-template-Upcoming-games"] ~ ' + sel) || document.querySelector(sel);
    };
    var $$ = function(sel) { 
      var results = componentRoot.querySelectorAll(sel);
      return results.length ? results : document.querySelectorAll(sel);
    };
    // Original component JS runs in this scope
    const track = document.getElementById("sliderTrack"); const slides = document.querySelectorAll(".slide"); const prevBtn = document.getElementById("prevBtn"); const nextBtn = document.getElementById("nextBtn"); const pagination = document.getElementById("pagination"); let index = 0; let slidesPerView = 1; let slideWidth = slides[0].offsetWidth; function updateResponsive() { if (window.innerWidth >= 1024) slidesPerView = 3; else if (window.innerWidth >= 768) slidesPerView = 2; else slidesPerView = 1; slideWidth = slides[0].offsetWidth; moveSlider(); } function moveSlider() { track.style.transform = `translateX(-${index * slideWidth}px)`; updateDots(); } function nextSlide() { index++; if (index > slides.length - slidesPerView) index = 0; moveSlider(); } function prevSlide() { index--; if (index < 0) index = slides.length - slidesPerView; moveSlider(); } nextBtn.addEventListener("click", nextSlide); prevBtn.addEventListener("click", prevSlide); let autoPlay = setInterval(nextSlide, 3800); slides.forEach((_, i) => { const dot = document.createElement("span"); dot.className = "w-3 h-3 rounded-full bg-gray-300 cursor-pointer"; dot.onclick = () => { index = i; moveSlider(); }; pagination.appendChild(dot); }); function updateDots() { [...pagination.children].forEach((dot, i) => { dot.classList.toggle("bg-[#940F0F]", i === index); dot.classList.toggle("bg-gray-300", i !== index); }); } window.addEventListener("resize", updateResponsive); updateResponsive();
  });
})();