let slideIndex = 0;
let autoSlideInterval;

const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

function showSlide(index) {
    slides.forEach((slide, i) => {
        slide.classList.remove('active');
        if (i === index) {
            slide.classList.add('active');
        }
    });
}

// Reinicia el temporizador de cambio de slide
function resetSlideInterval() {
    clearInterval(autoSlideInterval); // Limpia el intervalo actual
    autoSlideInterval = setInterval(nextSlide, 5000); // Inicia un nuevo intervalo
}

function nextSlide() {
    slideIndex = (slideIndex + 1) % slides.length;
    showSlide(slideIndex);
}

function nextSlideBTN() {
    nextSlide();
    resetSlideInterval();
}

function prevSlide() {
    slideIndex = (slideIndex - 1 + slides.length) % slides.length;
    showSlide(slideIndex);
}

function prevSlideBTN() {
    prevSlide();
    resetSlideInterval();
}

prevBtn.addEventListener('click', prevSlideBTN);
nextBtn.addEventListener('click', nextSlideBTN);

// Inicia el carrusel automático al cargar la página
autoSlideInterval = setInterval(nextSlide, 5000);