const scroll = new LocomotiveScroll({
    el: document.querySelector('#Main'),
    smooth: true
});






slideHover = () => {
    let data = [{
        "id": 1,
        "hoverimg": "https://imgs.search.brave.com/I5K_uhZoOsX2kZkPE-IC5beRWH5_EuZSgH-7mbiHxQU/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9jZG4t/aWNvbnMtcG5nLmZy/ZWVwaWsuY29tLzI1/Ni80OTk3LzQ5OTc1/NDMucG5nP3NlbXQ9/YWlzX2h5YnJpZA",
        "image": "./images/OURSERVICES/img2.jpg",
        "heading": "WEBSITE DESIGN",
        "para": "Create visually stunning, user-friendly websites that reflect your brand’s essence."
    }, {
        "id": 2,
        "hoverimg": "https://imgs.search.brave.com/I5K_uhZoOsX2kZkPE-IC5beRWH5_EuZSgH-7mbiHxQU/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9jZG4t/aWNvbnMtcG5nLmZy/ZWVwaWsuY29tLzI1/Ni80OTk3LzQ5OTc1/NDMucG5nP3NlbXQ9/YWlzX2h5YnJpZA",
        "image": "./images/OURSERVICES/img3.jpg",
        "heading": "GRAPHIC DESIGN",
        "para": "Bring your brand to life with visually compelling designs for websites, ads, social media, and more"
    }, {
        "id": 3,
        "hoverimg": "https://imgs.search.brave.com/I5K_uhZoOsX2kZkPE-IC5beRWH5_EuZSgH-7mbiHxQU/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9jZG4t/aWNvbnMtcG5nLmZy/ZWVwaWsuY29tLzI1/Ni80OTk3LzQ5OTc1/NDMucG5nP3NlbXQ9/YWlzX2h5YnJpZA",
        "image": "./images/OURSERVICES/img4.jpg",
        "heading": "VIDEO MARKETING",
        "para": "Engage your audience with high-quality, impactful videos that tell your brand’s story and increase conversions."
    }, {
        "id": 4,
        "hoverimg": "https://imgs.search.brave.com/I5K_uhZoOsX2kZkPE-IC5beRWH5_EuZSgH-7mbiHxQU/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9jZG4t/aWNvbnMtcG5nLmZy/ZWVwaWsuY29tLzI1/Ni80OTk3LzQ5OTc1/NDMucG5nP3NlbXQ9/YWlzX2h5YnJpZA",
        "image": "./images/OURSERVICES/img5.jpg",
        "heading": "PERFORMANCE MARKETING",
        "para": "Drive measurable results through data-driven performance marketing strategies."
    }, {
        "id": 5,
        "hoverimg": "https://imgs.search.brave.com/I5K_uhZoOsX2kZkPE-IC5beRWH5_EuZSgH-7mbiHxQU/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9jZG4t/aWNvbnMtcG5nLmZy/ZWVwaWsuY29tLzI1/Ni80OTk3LzQ5OTc1/NDMucG5nP3NlbXQ9/YWlzX2h5YnJpZA",
        "image": "./images/OURSERVICES/img6.jpg",
        "heading": "ORDER GENERATION",
        "para": "Boost your sales with our order generation solutions, designed to streamline your customer journey from interest to purchase."
    }, {
        "id": 6,
        "hoverimg": "https://imgs.search.brave.com/I5K_uhZoOsX2kZkPE-IC5beRWH5_EuZSgH-7mbiHxQU/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9jZG4t/aWNvbnMtcG5nLmZy/ZWVwaWsuY29tLzI1/Ni80OTk3LzQ5OTc1/NDMucG5nP3NlbXQ9/YWlzX2h5YnJpZA",
        "image": "./images/OURSERVICES/img7.jpg", "heading": "LEAD GENERATION",
        "para": "Enhance your sales pipeline with our lead generation services, targeting and attracting high-quality leads to fuel your business growth"
    }, {
        "id": 7,
        "hoverimg": "https://imgs.search.brave.com/I5K_uhZoOsX2kZkPE-IC5beRWH5_EuZSgH-7mbiHxQU/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9jZG4t/aWNvbnMtcG5nLmZy/ZWVwaWsuY29tLzI1/Ni80OTk3LzQ5OTc1/NDMucG5nP3NlbXQ9/YWlzX2h5YnJpZA",
        "image": "./images/OURSERVICES/img8.jpg", "heading": "INFLUENCER MARKETING",
        "para": "Amplify your brand's reach through authentic influencer collaborations."
    }, {
        "id": 8,
        "hoverimg": "https://imgs.search.brave.com/I5K_uhZoOsX2kZkPE-IC5beRWH5_EuZSgH-7mbiHxQU/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9jZG4t/aWNvbnMtcG5nLmZy/ZWVwaWsuY29tLzI1/Ni80OTk3LzQ5OTc1/NDMucG5nP3NlbXQ9/YWlzX2h5YnJpZA",
        "image": "./images/OURSERVICES/img9.jpg", "heading": "SEARCH ENGINE OPTIMIZATION (SEO)",
        "para": "Improve your online visibility and drive organic traffic with comprehensive SEO strategies."
    }, {
        "id": 9,
        "hoverimg": "https://imgs.search.brave.com/I5K_uhZoOsX2kZkPE-IC5beRWH5_EuZSgH-7mbiHxQU/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9jZG4t/aWNvbnMtcG5nLmZy/ZWVwaWsuY29tLzI1/Ni80OTk3LzQ5OTc1/NDMucG5nP3NlbXQ9/YWlzX2h5YnJpZA",
        "image": "./images/OURSERVICES/img10.jpg", "heading": "GOOGLE MY BUSINESS OPTIMIZATION",
        "para": "Enhance your local presence with expert management and optimization for Google My Business."
    }, {
        "id": 10,
        "hoverimg": "https://imgs.search.brave.com/I5K_uhZoOsX2kZkPE-IC5beRWH5_EuZSgH-7mbiHxQU/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9jZG4t/aWNvbnMtcG5nLmZy/ZWVwaWsuY29tLzI1/Ni80OTk3LzQ5OTc1/NDMucG5nP3NlbXQ9/YWlzX2h5YnJpZA",
        "image": "./images/OURSERVICES/img11.jpg", "heading": "ONLINE REPUTATION MANAGEMENT",
        "para": "Safeguard your brand's image with effective online reputation management."
    }]
    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">

                            <img src="${element.hoverimg}" alt="">
                            <h3>${element.heading}</h3>
                            <p>${element.para}</p>
                            <button><a href="#Contact">Contact</a></button>
                        </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 = "black";
        midbtn.style.color = "black";

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

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

    })
}
imageScroll()



ourProjects = () => {
    let images = document.querySelector(".page4-images img");
    let project1 = document.querySelector(".option-1");
    let project2 = document.querySelector(".option-2");
    let project3 = document.querySelector(".option-3");

    project1.addEventListener("click", () => {
        images.src = '/images/projects/img1.png';
        project1.style.backgroundColor = "#FF8343";
        project1.style.color = "white";

        project2.style.backgroundColor = "white";
        project2.style.color = "black";

        project3.style.backgroundColor = "white";
        project3.style.color = "black";
    })
    project2.addEventListener("click", () => {
        images.src = '/images/projects/img2.png';
        project2.style.backgroundColor = "#FF8343";
        project2.style.color = "white";

        project1.style.backgroundColor = "white";
        project1.style.color = "black";

        project3.style.backgroundColor = "white";
        project3.style.color = "black";
    })
    project3.addEventListener("click", () => {
        images.src = '/images/projects/img3.png';
        project3.style.backgroundColor = "#FF8343";
        project3.style.color = "white";

        project1.style.backgroundColor = "white";
        project1.style.color = "black";

        project2.style.backgroundColor = "white";
        project2.style.color = "black";
    })


}
ourProjects()


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()





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

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

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

document.addEventListener("DOMContentLoaded", responsviewNav);


responsviewNav();




let ourpartner = () => {
    const container = document.querySelector('.OurPartnerContainer');
    const leftArrow = document.querySelector('.ourpartnerLeft');
    const rightArrow = document.querySelector('.ourpartnerRight');

  rightArrow.addEventListener("click",()=>{
    container.scrollLeft += 260;
    container.style.scrollBehavior = "smooth"
});
leftArrow.addEventListener("click",()=>{
    container.scrollLeft -= 260;
    container.style.scrollBehavior = "smooth"
});
}

ourpartner();




let homeslider=()=>{
    const texts = [
        
        "Dubai's No. 1 Marketing Company",
        "Transforming Your Brand's Future"
    ];
    const backgrounds = [
        "url('./images/homeBg/img1.jpg')", 
        "url('./images/homeBg/img2.jpg')"
    ];

    let currentIndex = 0;

    setInterval(function() {
        currentIndex = (currentIndex + 1) % texts.length;
        document.getElementById("dynamicText").innerText = texts[currentIndex];
        document.getElementById("page1Outer").style.backgroundImage = backgrounds[currentIndex];
    }, 5000); 
}
homeslider()




let expertGrowth = ()=>{
function animateCounter(counterElement) {
    const targetValue = Number(counterElement.getAttribute('data-target'));
    let currentValue = 0;

    const interval = setInterval(() => {
        currentValue++;
        counterElement.textContent = currentValue + "+";

        if (currentValue >= targetValue) {
            clearInterval(interval);
        }
    }, 10); 
}

const counters = document.querySelectorAll('.counter');

const observerOptions = {
    root: null, 
    rootMargin: '0px', 
    threshold: 0.5
}; 

const handleIntersection = (entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting && !entry.target.classList.contains('counted')) {
            animateCounter(entry.target);
            entry.target.classList.add('counted');
        }
    });
};

const observer = new IntersectionObserver(handleIntersection, observerOptions);

counters.forEach(counter => {
    observer.observe(counter);
});

}

expertGrowth();