$(document).ready(function () {


    // Intersection Observer를 사용하여 .typing 요소가 화면에 보일 때 애니메이션 시작
    const observerOptions = {
        root: null, // 뷰포트 (브라우저 창)
        rootMargin: "0px",
        threshold: 0.5 // 요소가 50% 보이면 실행
    };


    //////////////////////// 커서 이동 ////////////////////////
    const cursor = document.querySelector("#cursor");
    let mouseX = 0, mouseY = 0;
    let cursorX = 0, cursorY = 0;


    document.addEventListener("mousemove", (e) => {
        mouseX = e.clientX;
        mouseY = e.clientY;
    });


    function animateCursor() {
        const speed = 0.01;


        cursorX += (mouseX - cursorX) * speed;
        cursorY += (mouseY - cursorY) * speed;


        cursor.style.transform = `translate(${cursorX}px, ${cursorY}px)`;


        requestAnimationFrame(animateCursor);
    }


    animateCursor();



    //////////////////////// date-text 속성 안에 동일한 텍스트 넣기 ////////////////////////
    $('.main_top .colorFill').each(function () {
        var textContent = $(this).text().trim();
        $(this).attr('data-text', textContent);
    });


    
    //////////////////////// 타이핑 이벤트 ////////////////////////
    const typingTexts = {
        'typingMainVs': ["에이전시", "컨설턴트"], // typing1에 해당하는 텍스트 배열
        'typingAboutTop': ["DEVELOPER"] // typing2에 해당하는 텍스트 배열
    };


    // 각 .typing 클래스를 가진 요소마다 별도의 애니메이션 적용
    $('.typing').each(function () {
        const typingClass = $(this).attr('class').split(' ').find(className => typingTexts[className]);
        if (!typingClass) return; // 텍스트 배열이 없으면 넘어감


        const texts = typingTexts[typingClass]; // 해당 클래스에 대한 텍스트 배열
        let currentTextIndex = 0;
        let currentCharIndex = 0;
        let isDeleting = false;
        let isWaitingForNextText = false;
        const typingElement = $(this); // 현재 .typing 요소 선택
        let observer;


        // 타이핑 효과 실행 함수
        function typeEffect() {
            const currentText = texts[currentTextIndex];
            let visibleText;


            if (isWaitingForNextText) {
                // 새 텍스트가 타이핑되기 전에 잠깐 대기
                setTimeout(() => {
                    isWaitingForNextText = false;
                    isDeleting = false; // 삭제 상태 해제
                    currentCharIndex = 0; // 새로운 텍스트부터 시작
                    typeEffect(); // 새 텍스트 타이핑 시작
                }, 500); // 0.5초 대기 후 타이핑 시작
                return;
            }


            if (isDeleting) {
                visibleText = currentText.slice(0, currentCharIndex--); // 글자 삭제
            } else {
                if (currentCharIndex === 0) {
                    typingElement.text(''); // 새로운 텍스트 시작 전에 내용 비우기
                }
                visibleText = currentText.slice(0, currentCharIndex++); // 글자 추가
            }


            typingElement.text(visibleText);


            if (!isDeleting && currentCharIndex === currentText.length) {
                setTimeout(() => {
                    if (currentTextIndex === texts.length - 1) {
                        // 마지막 텍스트에서는 멈추기 (디벨로퍼처럼 단일 텍스트인 경우)
                        return;
                    }
                    isDeleting = true;
                }, 500);
            }


            if (isDeleting && currentCharIndex < 0) {
                isWaitingForNextText = true; // 새 텍스트 타이핑 전에 대기
                currentTextIndex = (currentTextIndex + 1) % texts.length; // 다음 텍스트로 이동
            }


            const speed = isDeleting ? 100 : 150;
            setTimeout(typeEffect, speed);
        }


        // Intersection Observer 콜백 함수
        function observerCallback(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // 화면에 보일 때 타이핑 애니메이션 시작
                    typeEffect();
                    observer.unobserve(entry.target); // 한 번만 실행되도록 감지 후 제거
                }
            });
        }


        // Intersection Observer 인스턴스 생성
        observer = new IntersectionObserver(observerCallback, observerOptions);


        // .typing 요소가 화면에 보일 때 애니메이션 시작
        observer.observe(typingElement[0]);
    });


});