const track = document.getElementById('slidesTrack');
const slides = track.querySelectorAll('.slide');
const dotsContainer = document.getElementById('dots');
const totalEl = document.getElementById('totalSlides');
const currentEl = document.getElementById('currentSlide');
let current = 0;
let autoTimer;

totalEl.textContent = slides.length;


slides.forEach((_, i) => {
    const d = document.createElement('span');
    d.className = 'dot' + (i === 0 ? ' active' : '');
    d.onclick = () => goTo(i);
    dotsContainer.appendChild(d);
});

function goTo(n) {
    current = (n + slides.length) % slides.length;
    track.style.transform = `translateX(-${current * 100}%)`;
    currentEl.textContent = current + 1;
    dotsContainer.querySelectorAll('.dot').forEach((d, i) => {
        d.classList.toggle('active', i === current);
    });
}

function changeSlide(dir) {
    clearInterval(autoTimer);
    goTo(current + dir);
    startAuto();
}

function startAuto() {
    autoTimer = setInterval(() => goTo(current + 1), 5000);
}

startAuto();

document.addEventListener('keydown', e => {
    if (e.key === 'ArrowLeft') changeSlide(-1);
    if (e.key === 'ArrowRight') changeSlide(1);
    if (e.key === 'Escape') closeLightbox();
});

let touchStartX = 0;
const sliderEl = document.getElementById('slider');
sliderEl.addEventListener('touchstart', e => touchStartX = e.touches[0].clientX, { passive: true });
sliderEl.addEventListener('touchend', e => {
    const diff = touchStartX - e.changedTouches[0].clientX;
    if (Math.abs(diff) > 40) changeSlide(diff > 0 ? 1 : -1);
});


function openFull(src) {
    const lb = document.getElementById('lightbox');
    document.getElementById('lightboxImg').src = src;
    lb.style.display = 'flex';
    document.body.style.overflow = 'hidden';
}

function closeLightbox() {
    document.getElementById('lightbox').style.display = 'none';
    document.body.style.overflow = '';
}
