// ====================== CARROSSEL 3D CILINDRO ======================

const images = [
    "https://picsum.photos/id/1015/800/600",
    "https://picsum.photos/id/201/800/600",
    "https://picsum.photos/id/237/800/600",
    "https://picsum.photos/id/1018/800/600",
    "https://picsum.photos/id/133/800/600",
    "https://picsum.photos/id/180/800/600",
    "https://picsum.photos/id/251/800/600"
    // Troque estas URLs pelas suas fotos reais de Isabella (recomendo 6 a 9 imagens)
];

const carousel = document.getElementById('carousel');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
const autoPlayCheck = document.getElementById('autoPlay');

let currentAngle = 0;
let autoRotateInterval = null;
const totalSlides = images.length;
const angleStep = 360 / totalSlides;
const radius = 280;        // ← Raio do cilindro (ajuste se necessário)

// Cria os slides
images.forEach((src, i) => {
    const slide = document.createElement('div');
    slide.className = 'slide';
    
    const rotateY = i * angleStep;
    
    slide.style.transform = `rotateY(${rotateY}deg) translateZ(${radius}px)`;
    
    slide.innerHTML = `<img src="${src}" alt="Foto ${i+1}" loading="lazy">`;
    carousel.appendChild(slide);
});

// Função para girar
function rotateCarousel() {
    carousel.style.transform = `rotateY(${currentAngle}deg)`;
}

// Botões
nextBtn.addEventListener('click', () => {
    currentAngle -= angleStep;
    rotateCarousel();
});

prevBtn.addEventListener('click', () => {
    currentAngle += angleStep;
    rotateCarousel();
});

// Auto-play
function startAutoPlay() {
    if (autoRotateInterval) clearInterval(autoRotateInterval);
    autoRotateInterval = setInterval(() => {
        currentAngle -= angleStep;
        rotateCarousel();
    }, 2800); // um pouco mais lento que antes
}

autoPlayCheck.addEventListener('change', () => {
    if (autoPlayCheck.checked) {
        startAutoPlay();
    } else {
        clearInterval(autoRotateInterval);
    }
});

// Inicia auto-play
startAutoPlay();

// ==================== DRAG / SWIPE (Mouse + Touch) ====================

let isDragging = false;
let previousX = 0;
let velocity = 0;           // para inércia suave
let lastTime = Date.now();

carousel.addEventListener('mousedown', e => {
    isDragging = true;
    previousX = e.clientX;
    velocity = 0;
    clearInterval(autoRotateInterval);
});

window.addEventListener('mousemove', e => {
    if (!isDragging) return;

    const delta = e.clientX - previousX;
    currentAngle += delta * 0.85;
    rotateCarousel();

    // Calcula velocidade para inércia
    const now = Date.now();
    velocity = delta / (now - lastTime + 1);
    previousX = e.clientX;
    lastTime = now;
});

window.addEventListener('mouseup', () => {
    if (!isDragging) return;
    isDragging = false;

    // Inércia suave
    if (Math.abs(velocity) > 0.5) {
        const inertiaInterval = setInterval(() => {
            currentAngle += velocity * 8;
            velocity *= 0.92; // atrito
            rotateCarousel();

            if (Math.abs(velocity) < 0.2) {
                clearInterval(inertiaInterval);
                if (autoPlayCheck.checked) startAutoPlay();
            }
        }, 16);
    } else if (autoPlayCheck.checked) {
        startAutoPlay();
    }
});

// Touch (mobile)
let previousTouchX = 0;

carousel.addEventListener('touchstart', e => {
    isDragging = true;
    previousTouchX = e.touches[0].clientX;
    velocity = 0;
    clearInterval(autoRotateInterval);
});

carousel.addEventListener('touchmove', e => {
    if (!isDragging) return;
    const delta = e.touches[0].clientX - previousTouchX;
    currentAngle += delta * 0.85;
    rotateCarousel();

    previousTouchX = e.touches[0].clientX;
});

carousel.addEventListener('touchend', () => {
    isDragging = false;
    if (autoPlayCheck.checked) startAutoPlay();
});