//alert("HELLO");
// MEDIA QUERY
let isMobile = window.matchMedia("(max-width: 991px)").matches;

// MOBILE NAVIGATION =================================================================
// if (isMobile) {
//   $("[nav-trigger]").on("click", function () {
//     $(this).removeClass("nav_closed");
//     $("html, body").css("overflow", "hidden");
//   });

//   $("[nav-x]").on("click", function () {
//     $("[nav-trigger]").addClass("nav_closed");
//     $("html, body").css("overflow", "visible");
//   });
// }

// so you can autoscroll to the next section
/*
$("[nav-link]").on("click", function () {
  $("[nav-trigger]").addClass("nav_closed");
});
*/

// BUTTON CLIPPING ======================================================
if (!isMobile) {
  const mainBtn = gsap.utils.toArray("[btn-main]");
  console.log(mainBtn);

  mainBtn.forEach((item) => {
    //console.log(item.children[0]);
    let base = item.children[0];
    let foreGround = item.children[1];

    let tl = gsap.timeline({
      defaults: { ease: "none", duration: 0.15 },
      paused: true
    });

    tl.set(base, { opacity: 1 });

    tl.fromTo(
      base,
      {
        clipPath:
          "polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%)"
      },
      {
        clipPath: "polygon(100% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%)"
      }
    );

    tl.fromTo(
      foreGround,
      { clipPath: "polygon(100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 0%)" },
      {
        clipPath: "polygon(100% 0%, 100% 0%, 0% 100%, 0% 100%, 0% 0%)"
      },
      "<"
    );

    tl.set(foreGround, {
      clipPath: "polygon(0% 0%, 100% 0%, 0% 100%, 0% 0%, 0% 0%)"
    });
    tl.to(base, {
      clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%)"
    });
    tl.to(
      foreGround,
      {
        clipPath: "polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%)"
      },
      "<"
    );

    item.addEventListener("mouseenter", () => {
      tl.play();
    });

    item.addEventListener("mouseleave", () => {
      tl.reverse();
    });
  });
}
// OVERLAY HOVER CLIP =======================================================================================
if (!isMobile) {
  const imgOverlay = gsap.utils.toArray("[img-wrap]");

  imgOverlay.forEach((item) => {
    let overLay = item.children[1];

    let tl = gsap.timeline({
      defaults: { ease: "none", duration: 0.15 },
      paused: true
    });

    tl.fromTo(
      overLay,
      { clipPath: "polygon(100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 0%)" },
      {
        clipPath: "polygon(100% 0%, 100% 0%, 0% 100%, 0% 100%, 0% 0%)"
      }
    );

    tl.set(overLay, {
      clipPath: "polygon(0% 0%, 100% 0%, 0% 100%, 0% 0%, 0% 0%)"
    });

    tl.to(overLay, {
      clipPath: "polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%)"
    });

    item.addEventListener("mouseenter", () => {
      tl.play();
    });

    item.addEventListener("mouseleave", () => {
      tl.reverse();
    });
  });
}

// REVERSE OVERLAY HOVER CLIP =======================================================================================
if (!isMobile) {
  const revOverlay = gsap.utils.toArray("[img-wrap-reverse]");

  revOverlay.forEach((item) => {
    //console.log(item.children[0]);
    let overLay = item.children[1];

    let tl = gsap.timeline({
      defaults: { ease: "none", duration: 0.15 },
      paused: true
    });

    tl.set(overLay, { opacity: 1 });

    tl.fromTo(
      overLay,
      {
        clipPath:
          "polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%)"
      },
      {
        clipPath: "polygon(100% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%)"
      }
    );

    tl.to(overLay, {
      clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%)"
    });

    item.addEventListener("mouseenter", () => {
      setTimeout(() => {
        tl.play();
      }, "250");
    });

    item.addEventListener("mouseleave", () => {
      tl.reverse();
    });
  });
}
// FOOTER HEADING ANIMATION ==============================================================================================================
$(".heading-wrap").each(function (index) {
  let headings = $(this).find(".is--stagger");
  let tl = gsap.timeline({ repeat: -1 });
  tl.set($(this), { opacity: 1 });
  headings.each(function (index) {
    if (index > 0) {
      tl.from($(this), { yPercent: 100, duration: 0.4 }, "<0.1");
    }
    if (index < headings.length - 1) {
      tl.to($(this), {
        delay: 1,
        yPercent: -100,

        duration: 0.4
      });
    }
  });
});