let currentIndex = 0;
const carousel = document.getElementById('carousel');
const slides = carousel.children;
const totalSlides = slides.length;
const dots = document.querySelectorAll("[id^='dot-']");

// Update the carousel's position and the active pagination dot
function updateCarousel() {
  carousel.style.transform = `translateX(-${currentIndex * 100}%)`;
  dots.forEach((dot, index) => {
    dot.classList.toggle('bg-gray-600', index === currentIndex);
    dot.classList.toggle('bg-gray-400', index !== currentIndex);
  });
}

// Go to the next slide
function nextSlide() {
  currentIndex = (currentIndex + 1) % totalSlides;
  updateCarousel();
}

// Go to the previous slide
function prevSlide() {
  currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
  updateCarousel();
}

// Navigate to a specific slide
function goToSlide(index) {
  currentIndex = index;
  updateCarousel();
}

// Auto-slide functionality
setInterval(nextSlide, 5000); // Slide changes every 5 seconds