/**
 * Read session storage for reduce animations
 */
var currentRdMo = false;
if (!sessionStorage.getItem("reduceAnimation")) {
  // initialise session variable if not available
  sessionStorage.setItem("reduceAnimation", false); // default value
  $(".reduce-animation-button").addClass("w--redirected-checked");
  $(".reduce-animation-button").siblings("input").attr("checked");
} else if (eval(sessionStorage.getItem("reduceAnimation"))) {
  currentRdMo = true;
  $(".body").attr("data-scroll-time", 0);
  $(".reduce-animation-button").removeClass("w--redirected-checked");
  $(".reduce-animation-button").siblings("input").removeAttr("checked");
}
/**
 * Play Lottie animation
 */
const keyActionLottie = bodymovin.loadAnimation({
  container: document.querySelector("#key-action-spin"),
  path: "https://cdn.prod.website-files.com/67340fff6e65b929d1abfff6/6747dd77f32b8fbebe275874_spin-expand.json",
  renderer: "svg",
  loop: false,
  autoplay: true,
});

function playKeyActionLottie(rdMotion) {
  keyActionLottie.setSpeed(1.8);
  //folderOpenLottie.setSpeed(1);
  let dir = 1;
  var pause;
  keyActionLottie.setDirection(dir);
  keyActionLottie.addEventListener("complete", function (e) {
    keyActionLottie.pause();
    if (dir > 0) {
      //playing forward
      pause = 2500;
    } else {
      pause = 200;
    }
    if (!rdMotion) {
      //reverse lottie and loop if reduce motion is not on
      setTimeout(function () {
        dir = -dir;
        if (dir < 0) {
          gsap.to("#key-action-spin-overlay", {
            scale: 0,
            duration: 0.4,
            opacity: 0,
          });
        } else {
          gsap.to("#key-action-spin-overlay", {
            scale: 1,
            duration: 0.4,
            opacity: 1,
          });
        }
        keyActionLottie.setDirection(dir);
        keyActionLottie.play();
      }, pause);
    }
  });
}

/**
 * gsap start
 */
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, Draggable);
//scrollTriger defaults
ScrollTrigger.defaults({
  toggleActions: "restart pause resume none",
  scrub: 1,
});

function updateMediaQuery() {
  let mm = gsap.matchMedia();

  mm.add(
    {
      isDesktop: "(min-width:992px)",
      preferReduceMotion: "(prefers-reduced-motion: reduce)", //system reduce motions setting
    },
    (context) => {
      let { isDesktop, preferReduceMotion } = context.conditions;
      var reduceMotion = false;
      if (preferReduceMotion || currentRdMo) {
        reduceMotion = true;
        console.log("Animation off");
      } else {
        console.log("Animation on");
      }

      playKeyActionLottie(reduceMotion);

      /*---------set initial position of elements---------*/
      gsap.set(".pinned-image", {
        opacity: reduceMotion ? 1 : 0,
        scale: reduceMotion ? 1 : 0.9,
      });

      gsap.set(".pinned-image.first", {
        opacity: 1,
        scale: 1,
      });

      gsap.set(".hero-text-image-wrapper", {
        position: reduceMotion ? "static" : "absolute",
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
      });

      gsap.set(".hero-content-wrapper", {
        height: reduceMotion ? "auto" : "100vh",
      });

      gsap.set(".timeline-grid-item", {
        opacity: reduceMotion ? 1 : 0.5,
        filter: reduceMotion ? "grayscale(0%)" : "grayscale(85%)",
      });

      /*---------animate all images in the hero section---------*/
      const images = gsap.utils.toArray(".pinned-images .pinned-image");
      const scrollableParas = gsap.utils.toArray(
        ".scrollable-content .hero-para-wrapper"
      );
      const heroWrappers = gsap.utils.toArray(".hero-text-image-wrapper");
      let speedModifier = 1.5; //slow down scrolling
      const endHeroScroll =
        "+=" +
        $(".hero-text-image-wrapper").length *
          window.innerHeight *
          speedModifier;

      const heroTl = gsap.timeline({
        scrollTrigger: {
          trigger: ".hero-content-wrapper",
          start: "top top",
          end: reduceMotion ? "bottom top" : endHeroScroll,
          pin: reduceMotion ? false : true,
          anticipatePin: 1,
          scrub: reduceMotion ? 0 : 1,
        }, //initialise timeline
      });

      scrollableParas.forEach((para, i) => {
        if (scrollableParas[i + 1]) {
          heroTl.set(scrollableParas[i + 1], {
            opacity: 1,
            yPercent: reduceMotion ? 0 : 100,
            ease: "power1.in",
          }); //initialise paragraphs
        }
      });

      images.forEach((img, i) => {
        if (images[i + 1]) {
          heroTl
            .to(
              img,
              {
                scale: reduceMotion ? 1 : 0.9,
                opacity: reduceMotion ? 1 : 0,
              },
              "+=0.8"
            ) //current imaage scale down and fades away, add pause
            .to(
              images[i + 1],
              {
                scale: 1,
                opacity: 1,
              },
              "<"
            ) //next image show and expand
            .to(
              scrollableParas[i + 1],
              {
                yPercent: 0,
              },
              "<"
            ) //next paragraph slide in from bottom
            .to(
              heroWrappers[i + 1],
              {
                zIndex: 10,
              },
              "<"
            ) //bring current image-text wrapper to front so it's clickable
            .to(
              scrollableParas[i],
              {
                yPercent: reduceMotion ? 0 : -(100 * (i + 1)),
              },
              "<"
            ); //current paragraph slide out to top
        }
      });

      heroTl.to({}, {}, "+=0.2"); // Adds pause at the end of the timeline

      /*---------horizontal scroll timeline section---------*/
      const horizontalContent = document.querySelector(".horizontal-content");
      const scrollWidth =
        horizontalContent.scrollWidth - window.innerWidth * 0.7;
      const endScroll = scrollWidth * 1.2;
      const timelineCards = document.querySelectorAll(".timeline-grid-item");
      const timelineSection = document.querySelector(".timeline-section");

      const timelineTrigger = ScrollTrigger.create({
        trigger: timelineSection,
        start: "top top",
        end: "+=" + endScroll,
        scrub: 1,
        pin: true, //pin timeline section
        anticipatePin: 1, // Smooth pinning
        onUpdate: (self) => {
          updateHorizontalContent(self.progress);
        },
      });

      let startX, endX, scrollDist;
      const draggable = Draggable.create(horizontalContent, {
        type: "x",
        bounds: { right: 0, left: -endScroll },
        onDragStart: function () {
          startX = this.x;
        },
        onDragEnd: function () {
          endX = this.x;
          scrollDist = (startX - endX) * 1.2;
          let originalScroll = timelineTrigger.scroll();
          timelineTrigger.scroll(originalScroll + scrollDist);
        },
      })[0];

      function updateHorizontalContent(progress) {
        gsap.to(horizontalContent, {
          x: progress * -scrollWidth,
          ease: "none",
        });
        const cardIndex = Math.floor(progress * timelineCards.length); //current active card
        const bar = document.querySelector(".progress-fill"); //progress bar

        timelineCards.forEach((card, index) => {
          $(card).toggleClass("active", index <= cardIndex); //add active class to cards that scrolled past
          var fillWidth = card.scrollWidth * cardIndex + card.scrollWidth / 2;
          var indicator = $(card).find(".indicator-bar"); //timline indicator, green vertical bar connects the timeline
          var dot = $(card).find(".indicator-dot");
          var cardContent = $(card).find(".timeline-card");

          //animate bar
          gsap.to(bar, {
            width: fillWidth,
            duration: reduceMotion ? 0 : 0.7,
            ease: "none",
          });

          //animate each inidcator and card
          if ($(card).hasClass("active")) {
            gsap.to(card, {
              opacity: 1,
              filter: "grayscale(0%)",
            });
            gsap.to(cardContent, {
              scale: 1,
              duration: reduceMotion ? 0 : 0.7,
              ease: "back.out",
            }); //scale up timeline card

            gsap.to(indicator, {
              scaleY: 1,
              duration: reduceMotion ? 0 : 0.4,
              ease: "power2.out",
            }); //show indicator

            gsap.to(dot, {
              scale: 1,
              duration: reduceMotion ? 0 : 0.4,
              ease: "power2.out",
            });
          } else {
            gsap.to(card, {
              opacity: reduceMotion ? 1 : 0.5,
              filter: reduceMotion ? "grayscale(0%)" : "grayscale(85%)",
            });
            gsap.to(cardContent, {
              scale: reduceMotion ? 1 : 0.8,
              duration: 0.7,
              ease: "back.in",
            }); //scale down timeline card

            gsap.to(indicator, {
              scaleY: reduceMotion ? 1 : 0,
              duration: reduceMotion ? 0 : 0.4,
              ease: "power2.in",
            }); //hide indicator

            gsap.to(dot, {
              scale: reduceMotion ? 1 : 0,
              duration: reduceMotion ? 0 : 0.4,
              ease: "power2.in",
            });
          }
        });
      }

      /*---------animate parallex patterns---------*/
      const patterns = gsap.utils.toArray(".parallex-pattern");
      var parallexTl = gsap.timeline({});

      patterns.forEach((pattern, i) => {
        var patternSection = "." + $(pattern).closest("section").attr("class");
        parallexTl.to(pattern, {
          y: reduceMotion ? 0 : -300,
          scrollTrigger: {
            trigger: patternSection,
            start: "top top",
            end: "bottom top",
            scrub: 1.2,
          },
          ease: "power1.inOut", // No easing for constant speed
        });
      });

      gsap.to("#footer-image", {
        y: reduceMotion ? 0 : 100,
        scrollTrigger: {
          trigger: ".footer-section",
          start: "top-=100% top",
          end: "bottom top",
          scrub: 1.2,
        },
      });
    }
  );
}

/**
 * scroll down icon
 */
$(window).scroll(function () {
  if ($(this).scrollTop() > 100) {
    $(".scroll-down-icon").fadeOut(); // Show the element with a fade-in effect
  } else {
    $(".scroll-down-icon").fadeIn(); // Hide the element with a fade-out effect
  }
});

/*-------------------------------------------------------------------
---------------------swiper js code------------------------------------
-------------------------------------------------------------------
*/
const videoSwiper = new Swiper("#video-swiper", {
  grabCursor: true,
  slidesPerView: 1,
  spaceBetween: "2rem",
  breakpoints: {
    991: {
      slidesPerView: "auto",
      spaceBetween: "auto",
    },
  },
  navigation: {
    nextEl: ".video-swiper-navigation .swiper-el-next",
    prevEl: ".video-swiper-navigation .swiper-el-prev",
  },
});

$(".key-action-swiper").each(function () {
  var keyActionSwiper =
    '.key-action-swiper[data-id="' + $(this).attr("id") + '"]';
  var nextButton =
    '.initiatives-swiper-navigation[data-id="' +
    $(this).attr("id") +
    '"] .swiper-el-next';
  var prevButton =
    '.initiatives-swiper-navigation[data-id="' +
    $(this).attr("id") +
    '"] .swiper-el-prev';
  var swiper = new Swiper(keyActionSwiper, {
    grabCursor: true,
    slidesPerView: 1,
    spaceBetween: 30,
    navigation: {
      nextEl: nextButton,
      prevEl: prevButton,
    },
    breakpoints: {
      480: {
        slidesPerView: 1.5,
      },
      640: {
        slidesPerView: 2,
      },
      991: {
        slidesPerView: 2.5,
        slidesPerGroup: 1,
      },
    },
  });
});

var timelineSwiper;
var init = false;

//only initialise swiper on mobile devices
$(window).on("load resize", function () {
  if (window.innerWidth <= 991) {
    if (!init) {
      init = true;
      timelineSwiper = new Swiper("#timeline-mobile-swiper", {
        grabCursor: true,
        slidesPerView: 1,
        spaceBetween: 30,
        breakpoints: {},
        pagination: {
          el: ".swiper-timeline-pagination",
          type: "progressbar",
        },
        navigation: {
          nextEl: ".timeline-swiper-navigation .swiper-el-next",
          prevEl: ".timeline-swiper-navigation .swiper-el-prev",
        },
      });
    }
  } else if (init) {
    timelineSwiper.destroy();
    init = false;
  }
});

const testimonialSwiper = new Swiper("#testimonial-swiper", {
  grabCursor: true,
  slidesPerView: 1,
  spaceBetween: "2rem",
  breakpoints: {},
  loop: true, 
  autoplay: {
      delay: 5000,
      pauseOnMouseEnter: true,
  },
  navigation: {
    nextEl: ".testimonial-swiper-navigation .swiper-el-next",
    prevEl: ".testimonial-swiper-navigation .swiper-el-prev",
  },
});

/*-------------------------------------------------------------------
    ---------------------popup toggle------------------------------------
    -------------------------------------------------------------------
    */

/**
 * calculate text color while hovering key action grid item
 */

$(".key-action-modal-wrapper").each(function () {
  var color =
    "hoverTextColor" + $(this).closest(".key-action-grid-item").attr("data-id");
  $(this).css("color", eval(color));
});

$(".key-action-grid-item").hover(
  function () {
    if (
      $(".modal-wrapper:visible").length < 1 &&
      !eval(sessionStorage.getItem("reduceAnimation"))
    ) {
      $(this).addClass("hovered");
      var id = $(this).attr("data-id");
      var colorVariable = "hoverTextColor" + id;
      $(this).css("color", eval(colorVariable));
    }
  },
  function () {
    if ($(".modal-wrapper:visible").length < 1) {
      $(this).hasClass("hovered") ? $(this).removeClass("hovered") : null;
      $(this).css("color", "#111111");
    }
  }
);

//toggle initiative popup
$(".popup-trigger").click(function () {
  var initiative = $(this).attr("id");
  var selector = '.popup-wrapper[data-id="' + initiative + '"]';
  $(selector).css({
    display: "flex",
    opacity: "0",
  });
  $(selector)
    .find(".popup-stat-modal")
    .css({
      transform: currentRdMo ? "" : "scale(0.9 )",
    });

  setTimeout(function () {
    $(selector).css("opacity", "1");

    $(selector).find(".popup-stat-modal").css({
      transform: "scale(1)",
    });
    $("html").addClass("w-lightbox-noscroll");
  }, 15);
});

$(".key-action-grid-item").click(function () {
  if ($(".modal-wrapper:visible").length < 1) {
    var keyAction = $(this).attr("data-id");
    var kaSelector = '.key-action-modal-wrapper[data-id="' + keyAction + '"]';
    $(kaSelector).css({
      opacity: 0,
      display: "flex",
    });

    $(kaSelector)
      .find(".key-action-modal")
      .css({
        transform: currentRdMo ? "" : "scale(0.98) translateX(100%)",
      });

    setTimeout(function () {
      $(kaSelector).css("opacity", "1");
      $(kaSelector).find(".key-action-modal").css({
        transform: "scale(1) translateX(0%)",
      });
      $("html").addClass("w-lightbox-noscroll");
    }, 15);
  }
});

/*-------------------------------------------------------------------
    -------------------html no-scroll when ppopup shows----------------
    -------------------------------------------------------------------
    */

function closeLastModal() {
  var modalWrapper = $(".modal-wrapper:visible").last();
  var modal = $(modalWrapper).find(".modal");
  if ($(modal).hasClass("key-action-modal")) {
    $(modal).css(
      "transform",
      currentRdMo ? "" : "translateX(100%) scale(0.98)"
    );
  } else {
    $(modal).css("transform", currentRdMo ? "" : "scale(0.98)");
  }

  $(modalWrapper).css("opacity", 0);

  setTimeout(function () {
    $(modalWrapper).css("display", "none");
  }, 250); //hide after animation

  setTimeout(function () {
    if ($(".modal-wrapper:visible").length < 1) {
      $("html").removeClass("w-lightbox-noscroll");
    }
  }, 360); //make body scrollable again
}

function closeAllModals() {
  closeLastModal();
  setTimeout(function () {
    if ($(".modal-wrapper:visible").length > 0) {
      closeLastModal();
    }
  }, 250);
}

$(".close-modal").click(() => {
  closeLastModal();
});

$(".anchor-link-close-modal").click(() => {
  closeAllModals();
});

$(document).on("keydown", (e) => {
  if (e.key == "Escape" || e.key == "Esc") {
    closeLastModal();
  }
});

//timeline dots mobile
$(document).ready(function () {
  var lastDot = $(".timeline-mobile-anchor-item")
    .last()
    .find(".timeline-mobile-anchor")
    .css("visibility", "hidden");
});

//scroll back to top
$(".back-to-top").click(() => {
  $(document).scrollTop(0);
});

//skip to content
$("#skip-to-content").click(() => {
  $(document).scrollTop($("#top")[0].scrollHeight);
});

$(".pagescroll-indicator").click(function () {
  if (!$(this).hasClass("w--current")) {
    closeAllModals();
  }
});
$(".pagescroll-indicator-navigation").click(function () {
  closeAllModals();
  var psDown = $(this).hasClass("pagescroll-indicator-down") ? true : false;
  if (psDown) {
    //down arrow pressed
    var next = $(".pagescroll-indicator.w--current").next(
      ".pagescroll-indicator"
    );
    if ($(next).length > 0) {
      $(next).click();
    }
  } else {
    //up arrow pressed
    var prev = $(".pagescroll-indicator.w--current")
      .prev(".pagescroll-indicator")
      .click();
    if ($(prev).length > 0) {
      $(prev).click();
    }
  }
});

/**
 * Reduce animation toggle
 */
$(document).ready(function () {
  updateMediaQuery(); //on load update mediaquery
});

$(".w-checkbox").mouseup(function () {
  setTimeout(function () {
    if ($(".reduce-animation-button").hasClass("w--redirected-checked")) {
      toggleOnAnimation();
    } else {
      toggleOffAnimation();
    }
    updateMediaQuery();
    location.reload();
  }, 10);
});

/**
 * disable motion for mobile devices
 */

function toggleOffAnimation() {
  sessionStorage.setItem("reduceAnimation", true);
  currentRdMo = true;
  $(".body").attr("data-scroll-time", 0);
}
function toggleOnAnimation() {
  sessionStorage.setItem("reduceAnimation", false);
  currentRdMo = false;
}

$(window).on("load", function () {
  if (window.innerWidth <= 991) {
    toggleOffAnimation();
    playKeyActionLottie(currentRdMo);
  }
});

let lastWidth = window.innerWidth;
$(window).on("resize", function () {
  var currentWidth = window.innerWidth;
  if (lastWidth > 991 && currentWidth <= 991) {
    //browser scale down
    toggleOffAnimation();
    location.reload();
  } else if (lastWidth <= 991 && currentWidth > 991) {
    //browser scale up
    toggleOnAnimation();
    location.reload();
  }
});