const carouselTrack = document.querySelector('.carousel-track');
const cards = Array.from(document.querySelectorAll('.card-car'));
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');

const totalCards = cards.length;
let currentIndex = 0;
const visibleCards = 0; // Número de tarjetas visibles
const cardWidth = 200; // Ancho de cada tarjeta

// Inicializa el carrusel
function initializeCarousel() {
    showCard(currentIndex);
}

// Función para mover el carrusel
function showCard(index) {
    const offset = (index - Math.floor(visibleCards / 2)) * cardWidth;
    carouselTrack.style.transform = `translateX(${-offset}px)`;
    updateCardColors(index);
}

// Función para actualizar las clases de color
function updateCardColors(index) {
    cards.forEach((card, i) => {
        card.classList.remove('active');
        // Asegura que la tarjeta del medio sea siempre a color
        if (i === index+3) {
            card.classList.add('active');
        }
    });
}

// Función para cambiar el índice y mostrar la nueva tarjeta
function changeIndex(direction) {
    if (direction === 'next') {
        currentIndex = (currentIndex + 1) % totalCards;
    } else if (direction === 'prev') {
        currentIndex = (currentIndex - 1 + totalCards) % totalCards;
    }
    showCard(currentIndex);
}

nextBtn.addEventListener('click', () => {
    changeIndex('next');
});


prevBtn.addEventListener('click', () => {
    changeIndex('prev');
});


initializeCarousel();