let slides = document.querySelectorAll(".slide");
let indicators = document.querySelectorAll(".indicators span");
let index = 0;

function showSlide(i){
    slides.forEach(slide => slide.classList.remove("active"));
    indicators.forEach(dot => dot.classList.remove("active"));

    slides[i].classList.add("active");
    indicators[i].classList.add("active");
}

function nextSlide(){
    index++;
    if(index >= slides.length){
        index = 0;
    }
    showSlide(index);
}

setInterval(nextSlide, 5000);

indicators.forEach((dot, i)=>{
    dot.addEventListener("click", ()=>{
        index = i;
        showSlide(index);
    });
});
const classicoFeatures = document.querySelectorAll(".feature");

function revealClassico(){
    const trigger = window.innerHeight * 0.85;

    classicoFeatures.forEach(item=>{
        const top = item.getBoundingClientRect().top;

        if(top < trigger){
            item.classList.add("show");
        }
    });
}

window.addEventListener("scroll", revealClassico);
revealClassico();

const featureItems = document.querySelectorAll(".feature-item");

featureItems.forEach(item => {
    item.addEventListener("mouseenter", () => {
        const id = item.getAttribute("data-id");
        document.querySelector(".marker-" + id).style.background = "#ff5c63";
    });

    item.addEventListener("mouseleave", () => {
        const id = item.getAttribute("data-id");
        document.querySelector(".marker-" + id).style.background = "#6ce0c3";
    });
});
const blocks = document.querySelectorAll(".content-block");

blocks.forEach(block => {
    block.addEventListener("mouseenter", () => {
        block.style.transform = "translateX(10px)";
        block.style.transition = "0.3s";
    });

    block.addEventListener("mouseleave", () => {
        block.style.transform = "translateX(0px)";
    });
});


document.addEventListener("DOMContentLoaded", function () {

    const track = document.querySelector(".product-track");
    const nextBtn = document.querySelector(".next");
    const prevBtn = document.querySelector(".prev");
    const cards = document.querySelectorAll(".product-card");

    if (!track || cards.length === 0) return;

    const gap = 40;
    let index = 0;
    let autoSlide;

    // Clone all cards once
    cards.forEach(card => {
        const clone = card.cloneNode(true);
        track.appendChild(clone);
    });

    const allCards = document.querySelectorAll(".product-card");

    function getCardWidth() {
        return allCards[0].getBoundingClientRect().width + gap;
    }

    function moveSlide() {
        index++;
        track.style.transition = "transform 0.5s ease";
        track.style.transform = `translateX(-${index * getCardWidth()}px)`;

        // When reached cloned section
        if (index >= cards.length) {
            setTimeout(() => {
                track.style.transition = "none";
                index = 0;
                track.style.transform = `translateX(0px)`;
            }, 500);
        }
    }

    function startAutoSlide() {
        autoSlide = setInterval(moveSlide, 2500);
    }

    function stopAutoSlide() {
        clearInterval(autoSlide);
    }

    // Buttons
    nextBtn.addEventListener("click", () => {
        stopAutoSlide();
        moveSlide();
        startAutoSlide();
    });

    prevBtn.addEventListener("click", () => {
        stopAutoSlide();
        index--;
        if (index < 0) {
            index = cards.length - 1;
        }
        track.style.transform = `translateX(-${index * getCardWidth()}px)`;
        startAutoSlide();
    });

    startAutoSlide();

});
const scrollBtn = document.querySelector(".scroll-top");

window.addEventListener("scroll", () => {
    if(window.scrollY > 300){
        scrollBtn.style.display = "block";
    } else{
        scrollBtn.style.display = "none";
    }
});

scrollBtn.addEventListener("click", () => {
    window.scrollTo({
        top:0,
        behavior:"smooth"
    });
});