document.addEventListener("DOMContentLoaded", (event) => {
  // ---------------------------------------------
  // 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);
          }
      });
  }
 
  ScrollTrigger.create({
      trigger: sections[0],
      start: "top top",
      // markers: true,
      onEnter: () => updateElements(0),
      onLeaveBack: () => updateElements(0)
  });
  
  ScrollTrigger.create({
      trigger: sections[1],
      start: "top center",
      // markers: true,
      onEnter: () => updateElements(1),
      onLeaveBack: () => updateElements(1)
  });

  ScrollTrigger.create({
      trigger: sections[2],
      start: "top center",
     // markers: true,
      onEnter: () => updateElements(2),
      onLeaveBack: () => updateElements(2)
  });
// ++++++++++++++++++ S: TODO 진슬 추가_ 클릭시에도 메뉴 불 나오게
$(tits).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(){
        // $('.js__fixLeft_tit > li > a').removeClass('on'),
        // $(val).addClass('on')
        // ~ S: 기존 함수 활용
        if(index === 0) {
          updateElements(0)
        } else if(index === 1) {
          updateElements(1)
        } else if(index === 2) {
          updateElements(2)
        } 
        // ~ E: 기존 함수 활용 
      }
    }).play();
  });
})
 // ++++++++++++++++++ E: TODO 진슬 추가_ 클릭시에도 메뉴 불 나오게
});
// 고정 슬라이드
document.addEventListener('DOMContentLoaded', function() {
  const route = document.querySelector('.route');
  const sections = route.querySelectorAll('#sec1, #sec2, #sec3');
  const tabs = route.querySelectorAll('.tabs .tabs_li');
  const subs = route.querySelectorAll('.subs li');
  const imgs = route.querySelectorAll('.imgs li');

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

  const observerCallback = (entries) => {
      entries.filter(entry => entry.isIntersecting).forEach(entry => {
          const id = entry.target.id;
          [tabs, subs, imgs].forEach(group => 
              group.forEach((el, index) => 
                  el.classList.toggle('on', id === `sec${index + 1}`)
              )
          );
      });
  };

  const observer = new IntersectionObserver(observerCallback, observerOptions);
  sections.forEach(section => observer.observe(section));
});