document.addEventListener("DOMContentLoaded", () => {
    // ---------------------------------------------
    // js__fixLeft 오른쪽에 따라 왼쪽 내용 변하기
    // 사용 클래스 : js__fixLeft_tit, js__fixLeft_bg, js__fixLeft_sec
    // ---------------------------------------------
    gsap.registerPlugin(ScrollTrigger);

    const tits = document.querySelectorAll(".js__fixLeft_tit");
    const bgs = document.querySelectorAll(".js__fixLeft_bg");
    const sections = document.querySelectorAll(".js__fixLeft_secs > div");

    function bgOnEnter(element) {
        gsap.to(element, {
            transform: "scale(1.05)",
            duration: 0.5
        });
    }

    function bgOnLeave(element) {
        gsap.to(element, {
            transform: "scale(1)",
            duration: 0.5
        });
    }

    function titOnEnter(element) {
        gsap.to(element, {
            opacity: 1,
            transform: "scale(1) translate(0%, 0%)",
            duration: 0.5
        });
    }

    function titOnLeave(element) {
        gsap.to(element, {
            opacity: 0.5,
            transform: "scale(0.7) translate(-47%, 0%)",
            duration: 0.5
        });
    }

    function updateElements(index) {
        bgs.forEach((bg, i) => {
            if (i === index) {
                bg.classList.add("on");
                bgOnEnter(bg);
            } else {
                bg.classList.remove("on");
                bgOnLeave(bg);
            }
        });

        tits.forEach((tit, i) => {
            if (i === index) {
                tit.classList.add("on");
                titOnEnter(tit);
            } else {
                tit.classList.remove("on");
                titOnLeave(tit);
            }
        });
    }

    if (sections[0]) {
        ScrollTrigger.create({
            trigger: sections[0],
            start: "center top",
            onEnter: () => updateElements(0),
            onLeaveBack: () => updateElements(0)
        });
    }

    if (sections[1]) {
        ScrollTrigger.create({
            trigger: sections[1],
            start: "center center",
            onEnter: () => updateElements(1),
            onLeaveBack: () => updateElements(1)
        });
    }

    $(".js__fixLeft_tit").each(function (index, val) {
        val.addEventListener("click", () => {
            gsap.to(window, {
                duration: 0,
                scrollTo: { y: "#content" + (index + 1), offsetY: 390 }
            }).play();

            gsap.to(val, {
                onComplete: function () {
                    if (index === 0) {
                        updateElements(0);
                    } else if (index === 1) {
                        updateElements(1);
                    }
                }
            }).play();
        });
    });
});

function getLeftVcDiv() {
    return document.querySelector("div.left.vc");
}

window.addEventListener("resize", function () {
    const leftVcDiv = getLeftVcDiv();

    if (!leftVcDiv) {
        return;
    }

    if (window.innerWidth <= 992) {
        checkAndToggleDisplay();
    } else {
        leftVcDiv.style.display = "none";
    }
});

document.addEventListener("DOMContentLoaded", function () {
    const leftVcDiv = getLeftVcDiv();

    if (!leftVcDiv) {
        return;
    }

    if (window.innerWidth <= 992) {
        checkAndToggleDisplay();
    } else {
        leftVcDiv.style.display = "none";
    }
});

window.addEventListener("wheel", function (event) {
    const leftVcDiv = getLeftVcDiv();

    if (!leftVcDiv) {
        return;
    }

    if (window.innerWidth <= 992) {
        checkAndToggleDisplay(event);
    } else {
        leftVcDiv.style.display = "none";
    }
});

function checkAndToggleDisplay(event) {
    const secondChild = document.querySelector(".process .left span.js__fixLeft_tit:nth-of-type(2)");
    const leftVcDiv = getLeftVcDiv();

    if (!leftVcDiv) {
        return;
    }

    if (secondChild && secondChild.classList.contains("on")) {
        if (event && event.deltaY > 0) {
            leftVcDiv.style.opacity = 0;
        } else if (event && event.deltaY < 0) {
            leftVcDiv.style.opacity = 1;
        }
    } else {
        leftVcDiv.style.opacity = 1;
    }
}