document.addEventListener("DOMContentLoaded", function() {
  headerNav();
  headerScroll();
  topBtn();
  scrollAni();
  popup();
  textIntro();
  textIntro02();
  aniSection01();
  aniSection02();
  aiSection();
  historySec();
  stickySec();
  mapProject();
});



function headerNav() {
  $(document).on('mouseenter', '#nav', function () {
    $('#header').addClass('active');
  });

  $(document).on('mouseleave', '#nav', function () {
    $('#header').removeClass('active');
  });
}


function headerScroll() {
  var didScroll;
  var lastScrollTop = 0;
  var delta = 5;
  var navbarHeight = $('#header').outerHeight() - 100;

  $(window).scroll(function(event){
      didScroll = true;
  });

  setInterval(function() {
      if (didScroll) {
          hasScrolled();
          didScroll = false;
      }
  }, 250);

  function hasScrolled() {
      var st = $(this).scrollTop();
      
      if(Math.abs(lastScrollTop - st) <= delta)
          return;
      
      if (st > lastScrollTop && st > navbarHeight){
          $('#header').removeClass('nav-down').addClass('nav-up');
      } else {
          if(st + $(window).height() < $(document).height()) {
              $('#header').removeClass('nav-up').addClass('nav-down');
          }
      }

      if (st == 0) {
          $('#header').removeClass('nav-down');
          $('#header').removeClass('nav-up');
      }
      
      lastScrollTop = st;
  }

} 



function topBtn() {
  $(document).ready(function(){

    $(window).on('scroll', function(){

      var scrollTop = $(window).scrollTop();
      var windowHeight = $(window).height();
      var documentHeight = $(document).height();

      if($('#footer').hasClass('sub')){
        if(scrollTop + windowHeight >= documentHeight - 100){
          $('.top-btn-wrap').removeClass('active');
        } else if(scrollTop <= 300){
          $('.top-btn-wrap').removeClass('active');
        } else {
          $('.top-btn-wrap').addClass('active');
        }
        return;
      }

      if(scrollTop + windowHeight >= documentHeight - 100){
        $('.top-btn-wrap').removeClass('active');
      } else if(scrollTop > 300){
        $('.top-btn-wrap').addClass('active');
      } else {
        $('.top-btn-wrap').removeClass('active');
      }

    });

    $(document).on('click', '.top-btn', function(e){
      e.preventDefault();
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });

  });
}




function scrollAni() {
  $(document).ready(function(){

    gsap.registerPlugin(ScrollTrigger);

    $('.ani').each(function(){
      let $this = $(this);

      gsap.to($this, {
        scrollTrigger: {
          trigger: $this[0],
          start: "top 80%",
          once: true,
          onEnter: function(){
            $this.addClass('ani-active');
          }
        }
      });
    });

  });
}



function popup() {
  // 팝업 열기
  $(document).on('click', '[data-popup]', function () {

    var popup = $(this).data('popup');

    if (popup) {
      $('#' + popup).closest('.popup-wrap').addClass('active');
      $('body').addClass('scroll-lock');
      return;
    }

    if (href) {
      window.location.href = href;
    }

  });

  // 팝업 닫기
  $(document).on('click', '.popup-close', function () {

    $(this).closest('.popup-wrap').removeClass('active');

    if ($('.popup-wrap.active').length === 0) {
      $('body').removeClass('scroll-lock');
    }

  });
}



function textIntro() {
  gsap.to(".ani-top-section .ani-sub-tit span", {
    opacity: 1,
    left: 0,
    filter: "blur(0px)",
    duration: 1.5,
    delay: 0.4,
    ease: "power3.out"
  });

  gsap.to(".ani-top-section .ani-sub-tit p", {
    opacity: 1,
    left: 0,
    filter: "blur(0px)",
    duration: 1.5,
    delay: 0.4,
    ease: "power3.out"
  });
}


function textIntro02() {
  gsap.to(".ai-top-section .ai-sub-tit span, .ai-top-section .ai-sub-tit h3", {
    opacity: 1,
    left: 0,
    filter: "blur(0px)",
    duration: 1.5,
    delay: 0.4,
    ease: "power3.out"
  });

  gsap.to(".ai-top-section .ai-sub-tit p", {
    opacity: 1,
    left: 0,
    filter: "blur(0px)",
    duration: 1.5,
    delay: 0.4,
    ease: "power3.out"
  });
}


function aniSection01() {
  gsap.registerPlugin(ScrollTrigger);

  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".ani-top-section",
      start: "top top",
      end: "+=200%",
      scrub: 1.2,
      pin: true,
    }
  });

  tl.fromTo(".ani-top-section .bg-wrap",
    {
      clipPath: "inset(41% 12% 0% 12% round 20px 20px 0 0)"
    },
    {
      clipPath: "inset(0% 0% 0% 0% round 0px 0px 0px 0px)",
      ease: "none"
    },
    0
  );

  tl.fromTo(".ani-top-section .bg-wrap .bg",
    {
      y: "41%"
    },
    {
      y: "0%",
      ease: "none"
    },
    0
  );

  tl.to(".ani-top-section .bg-wrap .bg-opacity", {
    backgroundColor: "rgba(0,0,0,0.5)",
    ease: "none"
  }, 0);

  tl.to(".ani-top-section .ani-sub-tit span, .ani-top-section .ani-sub-tit p", {
    color: "#fff",
    ease: "none"
  }, 0);

  tl.to({}, { duration: 0.5 });
}



function aniSection02() {
  gsap.registerPlugin(ScrollTrigger);

  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".ani-wrap .sec02",
      start: "top top",
      end: "+=125%",
      scrub: 1.2,
      pin: true,
    }
  });

  tl.to(".ani-wrap .sec02 .ani-sub-txt", {
    opacity: 1,
    y: 0,
    duration: 0.6,
    ease: "power2.out"
  }, 0.2);

  tl.to({}, { duration: 0.8 });
}


function aiSection() {
  gsap.registerPlugin(ScrollTrigger);

  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".ai-top-section",
      start: "top top",
      end: "+=300%",
      scrub: 1.2,
      pin: true,
    }
  });

  tl.fromTo(".ai-top-section .bg-wrap",
    { clipPath: "inset(48% 12% 0% 12% round 20px 20px 0 0)" },
    { clipPath: "inset(0% 0% 0% 0% round 0px 0px 0px 0px)", ease: "none" },
    0
  );

  tl.fromTo(".ai-top-section .bg-wrap .bg",
    { y: "41%" },
    { y: "0%", ease: "none" },
    0
  );

  tl.to(".ai-top-section .bg-wrap .bg-opacity", {
    backgroundColor: "rgba(0,0,0,0.6)",
    ease: "none"
  }, 0);

  tl.to(".ai-top-section .ai-sub-tit span, .ai-top-section .ai-sub-tit p, .ai-top-section .ai-sub-tit h3", {
    color: "#fff",
    ease: "none"
  }, 0);

  tl.to({}, { duration: 0.8 });

  tl.to(".ai-top-section .ai-sub-tit", {
    opacity: 0,
    y: "-20px",
    ease: "none",
    duration: 0.4
  });

  tl.to({}, { duration: 0.2 });

  tl.fromTo(".ai-top-section .ai-sub-tit-next",
    { opacity: 0, y: "-30px" },
    { opacity: 1, y: "0px", ease: "none", duration: 0.5 }
  );

  tl.to({}, { duration: 0.7 });
}




function historySec() {
  const historyWrap = document.querySelector(".history-wrap");
  const historyFixed = document.querySelector(".history-fixed");
  const historyContent = document.querySelector(".history-content");
  const contents = document.querySelectorAll(".history-content .content");
  const tabs = document.querySelectorAll(".history-tab li");
  const tits = document.querySelectorAll(".history-tit");

  if (!historyWrap || !historyFixed || !contents.length) return;

  let isClickScrolling = false;
  let scrollTimeout;

  function clearActive() {
    tabs.forEach(el => el.classList.remove("active"));
    tits.forEach(el => el.classList.remove("active"));
    contents.forEach(el => el.classList.remove("active"));
  }

  tabs[0]?.classList.add("active");
  tits[0]?.classList.add("active");
  contents[0]?.classList.add("active");

  ScrollTrigger.create({
    trigger: historyWrap,
    start: "top top",
    end: "bottom top",
    pin: historyFixed,
    pinSpacing: false,
  });

  contents.forEach((content, i) => {
    ScrollTrigger.create({
      trigger: content,
      start: "top 35%",
      end: "bottom 35%",
      onEnter: () => {
        if (isClickScrolling) return;
        clearActive();
        tabs[i]?.classList.add("active");
        tits[i]?.classList.add("active");
        content.classList.add("active");
      },
      onEnterBack: () => {
        if (isClickScrolling) return;
        clearActive();
        tabs[i]?.classList.add("active");
        tits[i]?.classList.add("active");
        content.classList.add("active");
      },
    });
  });

  tabs.forEach((tab, i) => {
    tab.addEventListener("click", () => {
      const st = ScrollTrigger.getAll().find(st => st.trigger === contents[i]);
      if (!st) return;

      const offset = window.innerHeight * 0.35;

      // 클릭 스크롤 시작
      isClickScrolling = true;

      clearActive();
      tabs[i].classList.add("active");
      tits[i].classList.add("active");
      contents[i].classList.add("active");

      window.scrollTo({
        top: st.start + offset,
        behavior: "smooth"
      });
    });
  });

  window.addEventListener("scroll", () => {
    if (!isClickScrolling) return;

    clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(() => {
      isClickScrolling = false;
      ScrollTrigger.update();
    }, 120);
  });

  ScrollTrigger.refresh();
}





function stickySec() {

  gsap.registerPlugin(ScrollTrigger);

  const grid = document.querySelector(".sticky-wrap");
  const texts = gsap.utils.toArray(".sticky-grid .text-group");

  if (!grid || texts.length === 0) return;

  const unitRatio = 1;
  const unit = window.innerHeight * unitRatio;

  function setItem(index) {
    grid.classList.remove("item1", "item2", "item3");
    grid.classList.add("item" + (index + 1));
  }

  texts.forEach((el, i) => {
    gsap.set(el, {
      position: "absolute",
      top: 0,
      left: "calc(320px + 480px)",
      width: "calc(100% - 800px)",
      height: unit + "px",
      y: i * unit
    });
  });

  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: grid,
      start: "top top",
      end: () => "+=" + (unit * (texts.length - 1) + window.innerHeight * 0.3), // 🔥 마지막 여유 포함
      scrub: 1,
      pin: true,
      anticipatePin: 1,
    }
  });

  tl.to(texts, {
    y: "-=" + unit * (texts.length - 1),
    ease: "none",
  }, 0);

  ScrollTrigger.create({
    trigger: grid,
    start: "top top",
    end: () => "+=" + (unit * (texts.length - 1) + window.innerHeight * 0.3),
    scrub: true,
    onUpdate: (self) => {
      const index = Math.min(
        texts.length - 1,
        Math.floor(self.progress * texts.length)
      );
      setItem(index);
    }
  });

}


function mapProject() {
  $(document).on('click', '.map-project .btn-wrap .link-st02', function(e){
    e.preventDefault();
    e.stopPropagation();

    $('.map-project-list-popup').toggleClass('active');
  });

  $(document).on('click', '.map-project-list-popup', function(e){
    e.stopPropagation();
  });

  $(document).on('click', function(){
    $('.map-project-list-popup').removeClass('active');
  });
}