const slides = document.getElementById("slides");
const sliderWrap = document.querySelector('.slider-wrap');  // ½½¶óÀÌ´õ °¨½Î´Â ÄÁÅ×À̳Ê
const groupWidth = 1165;
const gapWidth = 100;
const moveWidth = groupWidth + gapWidth;
const groups = document.querySelectorAll('.slide-group');
const totalGroups = groups.length;
let current = 1;

function updateSlide(animate = true){
    slides.style.transition = animate ? 'transform 0.7s ease-in-out' : 'none';
    slides.style.transform = `translateX(-${current * moveWidth}px)`;
}
function moveSlide(dir){
    if (dir === 'right') {
        current++;
        updateSlide();
        if (current === totalGroups - 1) {
            setTimeout(() => {
                current = 1;
                updateSlide(false);
            }, 710);
        }
    } else {
        current--;
        updateSlide();
        if (current === 0) {
            setTimeout(() => {
                current = totalGroups - 2;
                updateSlide(false);
            }, 710);
        }
    }
}
document.getElementById("next").onclick = () => { moveSlide('right'); resetAuto(); };
document.getElementById("prev").onclick = () => { moveSlide('left'); resetAuto(); };

let auto = setInterval(()=> moveSlide('right'), 4000);

function resetAuto(){
    clearInterval(auto);
    auto = setInterval(()=> moveSlide('right'), 4000);
}

// ? ¿©±â¿¡ hover À̺¥Æ® Ãß°¡
sliderWrap.addEventListener('mouseenter', () => {
    clearInterval(auto);
});
sliderWrap.addEventListener('mouseleave', () => {
    resetAuto();
});