const initSlider = () => {
    const imageList = document.querySelector(".slider-wrapper .image-list");
    const slideButtons = document.querySelectorAll(".slider-wrapper .slide-button");
    const sliderScrollbar = document.querySelector(".work-container .slider-scrollbar");
    const scrollbarThumb = sliderScrollbar.querySelector(".scrollbar-thumb");
    const maxScrollLeft = imageList.scrollWidth - imageList.clientWidth;

    // Handle scrollbar thumb drag
    scrollbarThumb.addEventListener("mousedown", (e) => {
        const startX = e.clientX;
        const thumbPosition = scrollbarThumb.offsetLeft;
        const maxThumbPosition = sliderScrollbar.getBoundingClientRect().width - scrollbarThumb.offsetWidth;

        // Update thumb position on mouse move
        const handleMouseMove = (e) => {
            const deltaX = e.clientX - startX;
            const newThumbPosition = thumbPosition + deltaX;
            // Ensure the scrollbar thumb stays within bounds
            const boundedPosition = Math.max(0, Math.min(maxThumbPosition, newThumbPosition));
            const scrollPosition = (boundedPosition / maxThumbPosition) * maxScrollLeft;

            scrollbarThumb.style.left = `${boundedPosition}px`;
            imageList.scrollLeft = scrollPosition;
        }
        // Remove event listeners on mouse up
        const handleMouseUp = () => {
            document.removeEventListener("mousemove", handleMouseMove);
            document.removeEventListener("mouseup", handleMouseUp);
        }
        // Add event listeners for drag interaction
        document.addEventListener("mousemove", handleMouseMove);
        document.addEventListener("mouseup", handleMouseUp);
    });
    // Slide images according to the slide button clicks
    slideButtons.forEach(button => {
        button.addEventListener("click", () => {
            const direction = button.id === "prev-slide" ? -1 : 1;
            const scrollAmount = imageList.clientWidth * direction;
            imageList.scrollBy({ left: scrollAmount, behavior: "smooth" });
        });
    });
    // Show or hide slide buttons based on scroll position
    const handleSlideButtons = () => {
        slideButtons[0].style.display = imageList.scrollLeft <= 0 ? "none" : "flex";
        slideButtons[1].style.display = imageList.scrollLeft >= maxScrollLeft ? "none" : "flex";
    }
    // Update scrollbar thumb position based on image scroll
    const updateScrollThumbPosition = () => {
        const scrollPosition = imageList.scrollLeft;
        const thumbPosition = (scrollPosition / maxScrollLeft) * (sliderScrollbar.clientWidth - scrollbarThumb.offsetWidth);
        scrollbarThumb.style.left = `${thumbPosition}px`;
    }
    // Call these two functions when image list scrolls
    imageList.addEventListener("scroll", () => {
        updateScrollThumbPosition();
        handleSlideButtons();
    });
}
window.addEventListener("resize", initSlider);
window.addEventListener("load", initSlider);





let responsviewNav = () => {
    let navSlide = document.querySelector("#navlist");
    let menuopen = document.querySelector("#menuopen");
    let menuclose = document.querySelector("#menuclose");

    menuopen.addEventListener("click", () => {
        navSlide.style.left = "0%";
        menuclose.style.display = "block";
        menuopen.style.display = "none";

    })
    menuclose.addEventListener("click", () => {
        navSlide.style.left = "-100%";
        menuopen.style.display = "block";
        menuclose.style.display = "none";

    })
}

responsviewNav();





clientfeedback = () => {
    let feedback = [{
        "text": `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia, unde.
                        Natus, veniam
                        obcaecati? Possimus laboriosam praesentium minima error distinctio omnis.`,
        "client": "JANNAT TUMPA",
        "position": "-COO,AMERIMAR ENTERPRISES, INC."
    }, {
        "text": `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia, unde.
                        Natus, veniam
                        obcaecati? Possimus laboriosam praesentium minima error distinctio omnis.`,
        "client": "PRANIT TUMPA",
        "position": "-COO,AMERIMAR ENTERPRISES, INC."
    }, {
        "text": `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia, unde.
                        Natus, veniam
                        obcaecati? Possimus laboriosam praesentium minima error distinctio omnis.`,
        "client": "OMKAR TUMPA",
        "position": "-COO,AMERIMAR ENTERPRISES, INC."
    }, {
        "text": `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia, unde.
                        Natus, veniam
                        obcaecati? Possimus laboriosam praesentium minima error distinctio omnis.`,
        "client": "RAJESH TUMPA",
        "position": "-COO,AMERIMAR ENTERPRISES, INC."
    }];
    let currentindex = 0;
    let feedbackcontent = document.querySelector(".client-feedbacks");
    showFeedback = () => {

        let info = feedback[currentindex];
        feedbackcontent.innerHTML = `<div class="feedback-1">
                        <p class="feedback-text">${info.text}</p>
                        <div class="about-feedback">
                            <h3>${info.client}</h3>
                            <p>${info.position}</p>
                        </div>
                    </div>`;
        currentindex = (currentindex + 1) % feedback.length;

    }
    showFeedback();
    setInterval(showFeedback, 5000)
}

clientfeedback()






slideHover = () => {
    let data = [{
        "id": 1,
        "hoverimg": "",
        "image": "/assets/works/img-1.jpg",
        "heading": "",
        "para": ""
    },{
        "id": 2,
        "hoverimg": "",
        "image": "/assets/works/img-2.jpg",
        "heading": "",
        "para": ""
    },{
        "id": 3,
        "hoverimg": "",
        "image": "/assets/works/img-3.jpg",
        "heading": "",
        "para": ""
    },{
        "id": 4,
        "hoverimg": "",
        "image": "/assets/works/img-4.jpg",
        "heading": "",
        "para": ""
    },{
        "id": 5,
        "hoverimg": "",
        "image": "/assets/works/img-5.jpg",
        "heading": "",
        "para": ""
    },{
        "id": 6,
        "hoverimg": "",
        "image": "/assets/works/img-6.jpg",
        "heading": "",
        "para": ""
    },{
        "id": 7,
        "hoverimg": "",
        "image": "/assets/works/img-7.jpg",
        "heading": "",
        "para": ""
    },{
        "id": 8,
        "hoverimg": "",
        "image": "/assets/works/img-8.jpg",
        "heading": "",
        "para": ""
    },{
        "id": 9,
        "hoverimg": "",
        "image": "/assets/works/img-9.jpg",
        "heading": "",
        "para": ""
    },{
        "id": 10,
        "hoverimg": "",
        "image": "/assets/works/img-10.jpg",
        "heading": "",
        "para": ""
    },{
        "id": 11,
        "hoverimg": "",
        "image": "/assets/works/img-11.jpg",
        "heading": "",
        "para": ""
    },{
        "id": 12,
        "hoverimg": "",
        "image": "/assets/works/img-12.jpg",
        "heading": "",
        "para": ""
    }, ]
    let imagessliderhover = document.querySelector(".slider");
    let bgimage = document.querySelector(".images");
    let hoverimage = document.querySelector(".imgslider-items");
    console.log(data)

    data.forEach(element => {
        imagessliderhover.innerHTML += `<div class="images">
        <img src="${element.image}" class="bg-image-slider" alt="">

                        <div class="imgslider-items">

                      
                            <h3>${element.heading}</h3>
                            <p>${element.para}</p>
                          
                        </div>
                    </div>`;
    });

}

slideHover()



imageScroll = () => {
    let imagegallary = document.querySelector(".page2-imgslider")
    let startbtn = document.querySelector(".sliderbtn .start");
    let midbtn = document.querySelector(".sliderbtn .mid");
    let endbtn = document.querySelector(".sliderbtn .end");

    imagegallary.addEventListener("wheel", (data) => {
        imagegallary.scrollLeft += data.deltaY;
        imagegallary.computedStyleMap.scrollBehavior = "auto"
    })
    endbtn.addEventListener("click", (data) => {
        imagegallary.scrollLeft += 1260;
        imagegallary.style.scrollBehavior = "smooth"
        endbtn.style.color = "#fe3146";
        startbtn.style.color = "white";white
        midbtn.style.color = "white";

    })
    startbtn.addEventListener("click", (data) => {
        imagegallary.scrollLeft -= 1260;
        imagegallary.style.scrollBehavior = "smooth"
        startbtn.style.color = "#fe3146";
        midbtn.style.color = "white";
        endbtn.style.color = "white";

    })
    midbtn.addEventListener("click", (data) => {
        imagegallary.scrollLeft += 640;
        imagegallary.style.scrollBehavior = "smooth"
        midbtn.style.color = "#fe3146";
        startbtn.style.color = "white";
        endbtn.style.color = "white";

    })
}
imageScroll()







const homebg =()=>{


const texts = [
    {
        p: "Ink Your Memory With",
        h1: "FLAT 50% OFF ON ANY TATTO",
        h3: "Your Dream Tatto At Dot Line",
        bg: "./assets/home.jpg"
    },
    {
        p: "Transform Your Vision",
        h1: "Experience the Art of Tattooing",
        h3: "Book Your Appointment Today!",
        bg: "./assets/bg1.jpg"
    },
    {
        p: "Express Yourself",
        h1: "Unleash Your Creativity",
        h3: "Get Inspired by Our Artists",
        bg: "another-background.jpg"
    }
];

let currentIndex = 0;

// Change text and background every 5 seconds
setInterval(() => {
    const homeContent = document.querySelector('.home-content');
    const homeSection = document.querySelector('.Home');

    // Update text and background
    const currentText = texts[currentIndex];
    homeContent.innerHTML = `
        <p>${currentText.p}</p>
        <h1>${currentText.h1}</h1>
        <h3>${currentText.h3}</h3>
    `;
    homeSection.style.backgroundImage = `url('${currentText.bg}')`;

    // Update index for next text
    currentIndex = (currentIndex + 1) % texts.length; // Loop back to start
}, 5000);
}

homebg()