document.addEventListener("DOMContentLoaded", () => {
  initSiteLoader();
  initNav();
  initNavScroll();
  initContactModal();
  smoothscroll();
  actualYear();
});

function smoothscroll() {
  const wrapper = document.querySelector("#smooth-wrapper");
  if (!wrapper) return;

  const smoother = ScrollSmoother.create({
    wrapper: "#smooth-wrapper",
    content: "#smooth-content",
    smooth: 2,
    effects: true,
  });

  if (window.location.hash) {
    const target = document.querySelector(window.location.hash);

    if (target) {
      smoother.scrollTo(target, false, "top top");
    }
  }

  ScrollTrigger.matchMedia({
    "(max-width: 768px)": function () {
      document.querySelectorAll("[data-speed]").forEach((el) => {
        el.setAttribute("data-speed", "1");
      });

      smoother.effects().forEach((e) => e.kill());
      smoother.effects("[data-speed]", { speed: 1 });
    },
  });
}
function initNav() {
  const navElWrapper = document.querySelector('[kxm-el="new-nav-wrapper"]');
  if (!navElWrapper) return;
  const newNavEl = navElWrapper.querySelector('[kxm-el="new-nav"]');
  const newNavBtn = navElWrapper.querySelector('[kxm-btn="new-nav"]');
  const teaserElWr = navElWrapper.querySelector(".nav-slide__cms-teaser__wr");
  const dynamicTeaserEl = teaserElWr.querySelectorAll(".w-dyn-item");
  const dynamicTeasernavWr = navElWrapper.querySelector(
    '[kxm-el="dynamic-teaser-btn"]',
  );
  const dynamicTeasernavEl = dynamicTeasernavWr.querySelectorAll(".w-dyn-item");
  const newNavCloser = navElWrapper.querySelector('[kxm-btn="new-nav-closer"]');
  const linkBox = navElWrapper.querySelectorAll('[kxm-anim="link-box"]');
  const hashBtns = navElWrapper.querySelectorAll('[kxm-btn="on-side-trigger"]');

  gsap.set(".nav-slide__anim-line", { height: "0%" });
  gsap.set(dynamicTeaserEl, { opacity: 0, display: "none" });
  gsap.set(dynamicTeaserEl[0], {
    opacity: 1,
    display: "block",
  });
  gsap.set(".nav-slide__list-overlay", { width: "100%" });
  gsap.set(newNavEl, { top: "-100%", display: "flex" });

  let newNavisOpen = false;
  const newNavTL = gsap.timeline({
    paused: true,
  });

  newNavTL
    .to(
      navElWrapper,
      {
        height: "100svh",
        duration: 0.25,
      },
      "-=0.20",
    )
    .to("body", {
      overflow: "hidden",
    })
    .to(
      ".navigation-slide-el",
      {
        height: "100svh",
        top: "0%",
        opacity: 1,
        duration: 0.35,
      },
      "-=0.15",
    )

    .to(
      ".nav-slide__list-overlay",
      {
        width: 0,
        duration: 0.3,
      },
      "-=0.2",
    )

    .to(
      ".nav-slide__anim-line",
      {
        height: "100%",
        duration: 0.35,
      },
      "<",
    )

    .from(
      dynamicTeaserEl[0],
      {
        opacity: 0,
        duration: 0.25,
      },
      "-=0.2",
    )

    .from(
      linkBox,
      {
        opacity: 0,
        rotateY: 2,
        rotateZ: 2,
        stagger: 0.06,
        duration: 0.3,
      },
      "-=0.2",
    );

  newNavBtn.addEventListener("click", () => {
    if (!newNavisOpen) {
      newNavTL.play();
      newNavisOpen = true;
    } else {
      newNavTL.reverse();
      newNavisOpen = false;
    }
  });

  document.addEventListener("keydown", (event) => {
    if (event.key === "Escape") {
      newNavTL.reverse();
      newNavisOpen = false;
    }
  });

  newNavCloser.addEventListener("click", () => {
    newNavTL.reverse();
    newNavisOpen = false;
  });

  hashBtns.forEach((btn) => {
    btn.addEventListener("click", () => {
      if (window.location.pathname === "/") {
        newNavTL.reverse();
        newNavisOpen = false;
      }
    });
  });

  dynamicTeasernavEl.forEach((navItem, index) => {
    navItem.addEventListener("mouseenter", () => {
      gsap.set(dynamicTeaserEl, {
        display: "none",
        opacity: 0,
      });

      gsap.set(dynamicTeaserEl[index], {
        display: "block",
      });

      gsap.to(dynamicTeaserEl[index], {
        opacity: 1,
        duration: 0.2,
      });
    });
  });
}

function initSiteLoader() {
  const sl = document.querySelector(".site-loader");
  if (!sl) return;

  const lastShown = localStorage.getItem("siteloader-shown");
  const oneHour = 60 * 60 * 1000;

  if (lastShown && Date.now() - Number(lastShown) < oneHour) {
    sl.remove();
    return;
  }

  localStorage.setItem("siteloader-shown", Date.now());

  const tl = gsap.timeline();
  const slLoad = sl.querySelector(".siteloader-loading__element");
  const slLogo = sl.querySelector('[siteloader="logo"]');
  const slText = sl.querySelector('[siteloader="text"]');

  tl.from(slText, {
    y: "-10em",
    duration: 0.8,
    ease: "power4.out",
  })
    .from(
      slLogo,
      {
        y: "10em",
        duration: 0.7,
        ease: "power2.out",
      },
      "-=0.5",
    )
    .to(
      slLoad,
      {
        width: "100%",
        duration: 1.5,
        ease: "power3.inOut",
      },
      "-=0.3",
    )
    .to(
      sl,
      {
        y: "-130%",
        duration: 1.4,
        ease: "expo.inOut",
        onComplete: () => gsap.set(sl, { display: "none" }),
      },
      "-=0.6",
    );
}

function initNavScroll() {
  const navLogo = document.querySelector(".nav-logo__wrapper");
  if (!navLogo) return;

  const navscrollTrigger = {
    trigger: ".nav-logo__wrapper",
    start: "top -10%",
    end: "top 10%",
    toggleActions: "play none none reverse",
  };

  gsap.set(".nav-logo__wrapper", {
    backgroundColor: "rgba(238, 239, 240, 0)",
  });

  gsap.to(".nav-logo__wrapper", {
    scrollTrigger: navscrollTrigger,
    backgroundColor: "rgba(238, 239, 240, 1)",
  });

  gsap.to(".nav-logo-svg", {
    scrollTrigger: navscrollTrigger,
    color: "#3a3e40",
  });
}

function initContactModal() {
  const contactOpenerBtn = document.querySelectorAll(
    '[kxm-contact-modal="true"]',
  );
  const contactModal = document.querySelector(".contact-modal-bg");
  if (!contactModal) return;

  const contactElement = contactModal.querySelector("[kxm-schieber]");
  let isOpenModalstate = false;

  contactOpenerBtn.forEach((btn) => {
    btn.addEventListener("click", () => {
      isOpenModalstate = !isOpenModalstate;

      gsap.killTweensOf([contactModal, contactElement]);
      if (isOpenModalstate) {
        document.body.style.overflow = "hidden";
        contactModal.style.display = "flex";
        gsap.to(contactModal, {
          opacity: 1,
          duration: 0.5,
          ease: "power2.inOut",
        });
        gsap.fromTo(
          contactElement,
          { y: "40em" },
          { y: 0, duration: 0.5, ease: "power2.inOut" },
        );
      } else {
        gsap.to(contactElement, {
          y: "40em",
          duration: 0.5,
          ease: "power2.inOut",
        });
        gsap.to(contactModal, {
          opacity: 0,
          duration: 0.5,
          ease: "power2.inOut",
          onComplete: () => {
            contactModal.style.display = "none";
            document.body.style.overflow = "auto";
          },
        });
      }
    });
  });
}

function actualYear() {
  const jahrText = document.querySelector('[kxm="year"]');
  if (jahrText) {
    jahrText.textContent = new Date().getFullYear();
  }
}