if (window.location.href === "https://gessi.upc.edu/en") {
    document.addEventListener("DOMContentLoaded", function () {
        // Define the original and additional slides
        const slides = [
            {
                imgSrc: "https://gessi.upc.edu/@@gw-full-hero-en",
                href: "https://gessi.upc.edu/en/students/collaboration-proposals",
                h2: "Check our Open assignments (TFGs, TFMs, ...)",
            },
            {
                imgSrc: "resolveuid/c096323afbda4a4e97edfd9faa6a33f1-en/@@images/image",
                href: "https://gessi.upc.edu/en/members",
                h2: "Join the Team!",
            }
        ];

        let currentSlideIndex = 0;

        // Detect existing HTML elements
        const imageElement = document.querySelector("#hero img");
        const linkElement = document.querySelector("#hero a.wrapper-img-link");
        const h2Element = document.querySelector("#hero .bullet p.h2");

        // Function to update the slide content (image, href, h2, title)
        function updateSlide(index) {
            const slide = slides[index];
            imageElement.src = slide.imgSrc;
            linkElement.href = slide.href;
            linkElement.title = slide.h2; // Set title to match the h2 text
            h2Element.textContent = slide.h2;

            // Update the dot indicators
            updateDots(index);
        }

        // Function to create and inject dot indicators
        function createDots() {
            const dotsContainer = document.createElement("div");
            dotsContainer.classList.add("dots-container");

            slides.forEach((_, index) => {
                const dot = document.createElement("span");
                dot.classList.add("dot");
                dot.dataset.index = index;

                // Add click event to each dot
                dot.addEventListener("click", () => {
                    currentSlideIndex = index;
                    updateSlide(currentSlideIndex);
                });

                dotsContainer.appendChild(dot);
            });

            const heroElement = document.querySelector("#hero");
            heroElement.appendChild(dotsContainer);

            // Set initial active dot
            updateDots(currentSlideIndex);
        }

        // Function to update dot indicators
        function updateDots(index) {
            const dots = document.querySelectorAll(".dot");
            dots.forEach((dot, i) => {
                dot.classList.toggle("active", i === index);
            });
        }

        // Function to create and inject navigation arrows
        function createArrows() {
            const arrowLeft = document.createElement("span");
            const arrowRight = document.createElement("span");

            arrowLeft.classList.add("arrow", "arrow-left");
            arrowLeft.innerHTML = "<"; // You can replace this with an icon
            arrowRight.classList.add("arrow", "arrow-right");
            arrowRight.innerHTML = ">"; // You can replace this with an icon

            // Click event for left arrow
            arrowLeft.addEventListener("click", () => {
                currentSlideIndex = (currentSlideIndex - 1 + slides.length) % slides.length;
                updateSlide(currentSlideIndex);
            });

            // Click event for right arrow
            arrowRight.addEventListener("click", () => {
                currentSlideIndex = (currentSlideIndex + 1) % slides.length;
                updateSlide(currentSlideIndex);
            });

            const heroElement = document.querySelector("#hero");
            heroElement.appendChild(arrowLeft);
            heroElement.appendChild(arrowRight);
        }

        // Create dots and arrows when DOM is fully loaded
        createDots();
        createArrows();

        // Initialize the first slide
        updateSlide(currentSlideIndex);
    });
}