let lenis;
let page_wait_time = 350;
let scrub_val = 1;

const color_list = {
  main_black: "#121918",
};

function initScrollSmoother() {
  // lenis = new Lenis({
  //   lerp: 0.2, // Lower values create a smoother scroll effect
  //   smoothWheel: true, // Enables smooth scrolling for mouse wheel events
  // });

  lenis = new Lenis({
    lerp: 0.15, // Lower values create a smoother scroll effect
    // lerp: 0.2, // Lower values create a smoother scroll effect
    smoothWheel: true, // Enables smooth scrolling for mouse wheel events
    duration: 1.2,
    // duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    orientation: "vertical", // vertical, horizontal
    gestureOrientation: "vertical", // vertical, horizontal, both
    smoothWheel: true,
    wheelMultiplier: 1,
    smoothTouch: false,
    touchMultiplier: 2,
  });

  // lenis.on('scroll', (e) => {
  // console.log(e)
  // })

  lenis.on("scroll", ScrollTrigger.update);

  // gsap.ticker.add((time)=>{
  // lenis.raf(time * 1000)
  // })

  // gsap.ticker.lagSmoothing(0);

  // Define a function to run at each animation frame
  const scrollFn = (time) => {
    lenis.raf(time); // Run Lenis' requestAnimationFrame method
    requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame
  };
  // Start the animation frame loop
  requestAnimationFrame(scrollFn);
}

function initAnimationSetup() {
  gsap.registerPlugin(
    ScrollTrigger,
    Observer,
    Flip,
    DrawSVGPlugin,
    SplitText,
    MorphSVGPlugin,
    MotionPathPlugin
  );

  //Set default duration for gsap
  gsap.defaults({
    ease: "power2.inOut",
    // ease: "power3.out",
    duration: 0.75,
  });

  let SplitFeaturedHeading = new SplitText(`[text-split-target]`, {
    type: "lines, words, chars",
    linesClass: "magic-line",
    wordsClass: "magic-word",
    charsClass: "magic-character",
  });

  initScrollSmoother();
}

const uniqueId = function () {
  return "id-" + Math.random().toString(36).slice(2, 18);
};

setInitialSVGState = (type, name, target) => {
  let paths;
  let paths_with_dashes;
  let scale_eles = null;
  let scale_eles_no_origin = null;
  let fadein_eles;

  // return;

  let selector_name;

  if (type === "id") {
    selector_name = "#" + name;
  } else if (type === "class") {
    selector_name = "." + name;
  } else {
    selector_name = name;
  }

  if (type === undefined) {
    paths = document.querySelectorAll("svg path:not([no-draw])");
  } else if (target === undefined) {
    paths_with_dashes = $(`${selector_name} .maskReveal .dashedElement`);
    paths_with_dashes.attr("no-draw", "");

    paths = document.querySelectorAll(
      `${selector_name} path:not([no-draw]),
        ${selector_name} circle:not([no-draw]),
        ${selector_name} rect:not([no-draw]),
        ${selector_name} line:not([no-draw])`
    );
    scale_eles = document.querySelectorAll(`${selector_name} [scale-effect]`);
    fadein_eles = document.querySelectorAll(`${selector_name} [fadein-effect]`);
    scale_eles_no_origin = document.querySelectorAll(
      `${selector_name} [scale-effect-no-origin-interfere]`
    );
  } else if (target === "path") {
    paths = document.querySelectorAll(`path${selector_name}:not([no-draw])`);
  }

  if (scale_eles) {
    gsap.set(scale_eles, {
      transformOrigin: "50% 50%",
    });
  }
  if (fadein_eles) {
    gsap.set(fadein_eles, {
      opacity: 0,
    });
  }
  if (scale_eles) {
    gsap.set(scale_eles, {
      opacity: 0,
      scale: 0,
    });
  }
  if (scale_eles_no_origin) {
    gsap.set(scale_eles_no_origin, {
      opacity: 0,
      scale: 0,
    });
  }

  // return;

  try {
    //set up path, line, svg, circle with dashes
    paths_with_dashes.each(function (index) {
      //path, line, rect
      const current_ele = $(this);
      const current_MaskReveal_ele = current_ele.closest(".maskReveal");
      const current_Mask_ele = current_ele.closest("svg").find(".theMask");

      const maskId = uniqueId();
      current_Mask_ele.attr("id", maskId);
      current_MaskReveal_ele.attr("mask", `url(#${maskId})`);

      let clone = current_ele.clone();
      clone.removeAttr("stroke-dasharray");
      gsap.set(clone, { attr: { stroke: "white" }, drawSVG: 0 });
      current_Mask_ele.append(clone);
    });

    gsap.set(paths, {
      drawSVG: "0%",
    });
  } catch (error) {
    // Code to handle the error
    console.log("An error occurred:", error);
  }
};

drawSVG = (type, name, { duration, selector, reverse } = {}) => {
  if (!duration) {
    duration = 2;
  }

  // return;

  // Get the path(s) to animate based on the type and name parameters
  let paths;
  let scale_eles;
  let scale_eles_no_origin;
  let fadein_eles;

  let selector_name;

  if (type === "id") {
    selector_name = "#" + name;
  } else if (type === "class") {
    selector_name = "." + name;
  } else {
    selector_name = name;
  }

  if (!type) {
    paths = document.querySelectorAll("svg path:not([no-draw])");
  } else if (!selector) {
    paths_with_dashes = $(`${selector_name} svg .theMask .dashedElement`);

    paths = document.querySelectorAll(
      `${selector_name} path:not([no-draw]),
        ${selector_name} circle:not([no-draw]),
        ${selector_name} rect:not([no-draw]),
        ${selector_name} line:not([no-draw])`
    );
    scale_eles = document.querySelectorAll(`${selector_name} [scale-effect]`);
    fadein_eles = document.querySelectorAll(`${selector_name} [fadein-effect]`);
    scale_eles_no_origin = document.querySelectorAll(
      `${selector_name} [scale-effect-no-origin-interfere]`
    );
  } else if (selector === "path") {
    paths = document.querySelectorAll(`path${selector_name}:not([no-draw])`);
  }
  // return;
  gsap
    .timeline()

    .add(function () {
      if (reverse) {
        gsap
          .timeline()
          .to(paths, {
            drawSVG: "0%",
            duration,
            ease: "power2.inOut",
          })
          .to(
            paths_with_dashes,
            {
              duration,
              // delay: 0.5,
              stagger: {
                amount: 0.5,
              },
              drawSVG: "0%",
            },
            ">-0.35"
          );
      } else {
        gsap
          .timeline()
          .fromTo(
            paths,
            {
              drawSVG: "0%",
            },
            {
              drawSVG: "100%",
              duration,
              ease: "power2.inOut",
            }
          )
          .to(
            paths_with_dashes,
            {
              duration,
              // delay: 0.5,
              stagger: {
                amount: 0.5,
              },
              drawSVG: "100%",
            },
            ">-0.35"
          );
      }
    });

  if (scale_eles) {
    gsap.to(scale_eles, {
      opacity: 1,
      scale: 1,
      delay: 0.5,
    });
  }
  if (scale_eles_no_origin) {
    gsap.to(scale_eles_no_origin, {
      opacity: 1,
      scale: 1,
      delay: 0.5,
    });
  }
  if (fadein_eles) {
    gsap.to(fadein_eles, {
      opacity: 1,
    });
  }
};

function drawSVGgroup() {}

function currentViewPort() {
  const windowWidth = window.innerWidth;
  let viewport;
  if (windowWidth > 991) {
    viewport = "desktop";
  }
  if (windowWidth <= 991 && windowWidth > 767) {
    viewport = "tablet";
  }
  if (windowWidth <= 767) {
    viewport = "mobile";
  }

  return viewport;
}

let currentViewport = currentViewPort();
let lastWindowWidth = window.innerWidth;

window.addEventListener("resize", () => {
  const newWindowWidth = window.innerWidth;
  const newViewport = currentViewPort();

  if (newWindowWidth !== lastWindowWidth && newViewport !== currentViewport) {
    currentViewport = newViewport;
    location.reload(); // Refresh the browser
  }
});

setTimeout(function () {
  $(`[parallax-effect]`).each(function () {
    if (currentViewPort() === "desktop") {
      let elementHeight = $(this).innerHeight();
      // console.log(elementHeight);
      let parallax_type = $(this).attr("parallax-type");
      let parallax_faster = $(this).attr("parallax-faster");
      let parallax_start = $(this).attr("parallax-start");
      let parallax_end = $(this).attr("parallax-end");
      // let parallax_end_random = Math.random() * (35 - 5) + 5;
      let parallax_end_random = parallax_faster
        ? -1 * (Math.floor(Math.random() * (80 - 50 + 1)) - 80)
        : -1 * (Math.floor(Math.random() * (60 - 30 + 1)) - 60);
      let parallax_start_random = parallax_faster
        ? 80 - 50 + 50
        : Math.random() * (60 - 30) + 30;

      //Elements have to be a div with image background
      if (parallax_type === "image") {
        gsap
          .timeline({
            scrollTrigger: {
              trigger: $(this),
              // markers: true,
              scrub: 0.75,
            },
            defaults: {
              ease: "none",
            },
          })
          .fromTo(
            $(this),
            {
              backgroundPosition: `50% ${
                parallax_start !== undefined ? parallax_start : 100
              }%`,
            },
            {
              backgroundPosition: `50% ${
                parallax_end !== undefined ? parallax_end : 0
              }%`,
            }
          );
      } else {
        // if (elementHeight > 480) {
        //   // $(this).css("backgroundColor", "black");
        //   parallax_end_random = parallax_faster
        //     ? -1 * (Math.floor(Math.random() * (18 - 12 + 1)) - 18)
        //     : -1 * (Math.floor(Math.random() * (10 - 5 + 1)) - 10);
        //   parallax_start_random = parallax_faster
        //     ? Math.random() * (18 - 12) + 12
        //     : Math.random() * (10 - 5) + 5;
        //   // return;
        // }
        gsap
          .timeline({
            scrollTrigger: {
              trigger: $(this),
              scrub: 0.75,
              // markers: true,
              start: "0% 100%",
              end: "100% 0%",
            },
            // defaults: {
            //   ease: "none"
            // }
          })
          .fromTo(
            $(this),
            {
              y: `${
                parallax_start !== undefined
                  ? parallax_start
                  : parallax_start_random
              }`,
              // yPercent: `${parallax_start !== undefined ? parallax_start : 25}`
            },
            {
              y: `${
                parallax_end !== undefined
                  ? parallax_end
                  : parallax_end_random * -1
              }`,
            }
          );
      }
    }
  });
}, 1000);
// }, 1500);
$(`[fade-animation]`).each(function (index) {
  // if (windowViewPort !== "desktop") return;
  let triggerElement = $(this);
  let delay_duration = $(this).attr("delay-duration");
  if (delay_duration === undefined) {
    delay_duration = 0.1;
  }

  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: triggerElement,
      start: "top 80%",
      end: "bottom center",
      toggleActions: "play none none none",
      // markers: true
      // scrub: 1
      // once: true
    },
  });
  tl.fromTo(
    triggerElement,
    {
      opacity: 0,
      // y: 10
      // scale: 0.92,
    },
    {
      delay: delay_duration,
      // y: 0,
      // scale: 1,
      ease: "power1.inOut",
      duration: 0.75,
      opacity: 1,
    }
  );
});

function mimicElementSize(sourceSelector, targetSelector) {
  const sourceElement = document.querySelector(sourceSelector);
  const targetElement = document.querySelector(targetSelector);

  if (sourceElement && targetElement) {
    const sourceRect = sourceElement.getBoundingClientRect();

    // Set dimensions to target element
    targetElement.style.width = `${sourceRect.width}px`;
    targetElement.style.height = `${sourceRect.height}px`;
  } else {
    console.error("Source or target element not found.");
  }
}

$(`[sizes-mimic-target]`).each(function () {
  const sourceSelector = $(this).attr("sizes-mimic-target");
  const targetClasses = $(this).attr("class");
  const targetSelector = `.${targetClasses.replace(/\s+/g, ".")}`;
  console.log(sourceSelector, targetSelector);
  mimicElementSize(sourceSelector, targetSelector);
});

$(`[parallax_effect]`).each(function () {
  if (currentViewPort() === "desktop") {
    let elementHeight = $(this).innerHeight();
    // console.log(elementHeight);
    let parallax_type = $(this).attr("parallax_type");
    let parallax_faster = $(this).attr("parallax_faster");
    let parallax_start = $(this).attr("parallax_start");
    let parallax_end = $(this).attr("parallax_end");
    // console.log("parallax effect running", parallax_start, parallax_end);
    // let parallax_end_random = Math.random() * (35 - 5) + 5;
    let parallax_end_random = parallax_faster
      ? -1 * (Math.floor(Math.random() * (50 - 45 + 1)) - 50)
      : -1 * (Math.floor(Math.random() * (30 - 20 + 1)) - 30);
    let parallax_start_random = parallax_faster
      ? 50 - 45 + 45
      : Math.random() * (30 - 20) + 20;

    switch (parallax_type) {
      case "image":
        gsap
          .timeline({
            scrollTrigger: {
              trigger: $(this),
              scrub: 0.75,
            },
            defaults: {
              ease: "none",
            },
          })
          .fromTo(
            $(this),
            {
              backgroundPosition: `50% ${
                parallax_start !== undefined ? parallax_start : 100
              }%`,
            },
            {
              backgroundPosition: `50% ${
                parallax_end !== undefined ? parallax_end : 0
              }%`,
            }
          );
        break;
      default:
        if (elementHeight > 480) {
          // $(this).css("backgroundColor", "black");
          parallax_end_random = parallax_faster
            ? -1 * (Math.floor(Math.random() * (18 - 12 + 1)) - 18)
            : -1 * (Math.floor(Math.random() * (10 - 5 + 1)) - 10);
          parallax_start_random = parallax_faster
            ? Math.random() * (18 - 12) + 12
            : Math.random() * (10 - 5) + 5;
          // return;
        }
        gsap
          .timeline({
            scrollTrigger: {
              trigger: $(this),
              scrub: 0.75,
              // markers: true,
              start: "0% 100%",
              end: "100% 0%",
            },
            // defaults: {
            //   ease: "none"
            // }
          })
          .fromTo(
            $(this),
            {
              yPercent: `${
                parallax_start !== undefined
                  ? parallax_start
                  : parallax_start_random
              }`,
              // yPercent: `${parallax_start !== undefined ? parallax_start : 25}`
            },
            {
              yPercent: `${
                parallax_end !== undefined
                  ? parallax_end
                  : parallax_end_random * -1
              }`,
            }
          );
    }
  }
});

// Define breakpoints for tablet and mobile
const BREAKPOINT_TABLET = 992;
const BREAKPOINT_MOBILE = 768;

// Initial state to keep track of current device type
let currentDevice = getDeviceType(window.innerWidth);

// Function to get the current device type
function getDeviceType(width) {
  if (width >= BREAKPOINT_TABLET) {
    return "desktop";
  } else if (width >= BREAKPOINT_MOBILE) {
    return "tablet";
  } else {
    return "mobile";
  }
}

// Callback functions for each device type
function onEnterDesktop() {
  // console.log("Entered Desktop (>= 992px)");
}

function onEnterTablet() {
  // console.log("Entered Tablet (>= 768px and < 992px)");
}

function onEnterMobile() {
  // console.log("Entered Mobile (< 768px)");
}

// Function to handle resize events
function handleResize() {
  const newDevice = getDeviceType(window.innerWidth);

  if (newDevice !== currentDevice) {
    if (newDevice === "desktop") {
      onEnterDesktop();
    } else if (newDevice === "tablet") {
      onEnterTablet();
    } else if (newDevice === "mobile") {
      onEnterMobile();
    }

    // Update the current device type
    currentDevice = newDevice;
  }
}

// Add event listener for resize event
window.addEventListener("resize", handleResize);

// Initial check
handleResize();

function section_w_svgs() {
  $("[section_w_svgs]").each(function (index) {
    const id = `section_w_svgs_${index}`;
    $(this).attr("id", id);

    setInitialSVGState("id", id);

    const triggerEle = $(this);
    gsap.timeline({
      scrollTrigger: {
        trigger: triggerEle,
        start: "top 50%",
        once: true,
        onEnter: () => {
          drawSVG("id", id, { speed: 1.5, reverse: false });
        },
        // end: "+=60%",
        // markers: true,
        // scrub: true,
        // pin: triggerEle,
      },
    });
  });
}
function init_Nav_Footer() {
  $(".navigation").each(function () {
    const nav = $(this);

    const nav_outer_div = nav.closest("div");
    const not_displaying = nav_outer_div.css("display") === "none";
    if (not_displaying) {
      nav_outer_div.remove();
    }
  });

  $(".navigation").each(function () {
    const nav = $(this);

    //Top banner
    const top_banners = $(".nav_top-banner");

    let has_top_banner = top_banners.length === 1;
    console.log("has_top_banner", has_top_banner);

    top_banners.each(function () {
      const top_banner = $(this);

      top_banner
        .find(".nav_top-banner-item:nth-child(1)")
        .attr("is-active", "true");

      let current_top_banner_item_order = 1;

      let total_top_banner_items = top_banner.find(
        ".nav_top-banner-item"
      ).length;

      if (total_top_banner_items > 1) {
        const swapping_top_banner_interval = setInterval(() => {
          if (current_top_banner_item_order < total_top_banner_items) {
            current_top_banner_item_order++;
          } else {
            current_top_banner_item_order = 1;
          }

          top_banner.find(".nav_top-banner-item").attr("is-active", "false");
          top_banner
            .find(
              `.nav_top-banner-item:nth-child(${current_top_banner_item_order})`
            )
            .attr("is-active", "true");
        }, 5000);
      }
    });

    function close_nav_screen() {
      console.log("closing nav");
      gsap.set("body", {
        overflow: "unset",
        height: "auto",
      });
      nav.attr("nav-open", "false");

      gsap
        .timeline({
          // delay: 0.25,
          onComplete: () => {
            $(".nav_accordion-header[is-open='true']").click();
          },
        })

        .to(".nav-screen", {
          opacity: 0,
        });
    }

    // $(".nav-screen").on("click", function (e) {
    //   e.stopPropagation();
    //   // console.log("clicked nav");
    // });
    $(".nav_close_bg").on("click", function () {
      // console.log("clicked html");
      close_nav_screen();
    });

    $(".nav_hamburger").on("click", function (e) {
      // return;
      e.stopPropagation();
      console.log("clicked");

      const nav_open = nav.attr("nav-open");
      if (nav_open !== "true") {
        // lenis.stop();
        gsap.set("body", {
          overflow: "hidden",
          height: "100%",
        });

        if (has_top_banner) {
          //   console.log("Top banner detected");
          gsap.set(".nav-screen", {
            top: "3.125rem",
          });
        }

        nav.attr("nav-open", "true");
        gsap
          .timeline({
            // delay: 0.25,
          })
          .fromTo(
            ".nav-screen",
            {
              x: 0,
              opacity: 0,
              height: "0vh",
            },
            {
              x: 0,
              opacity: 1,
              height:
                has_top_banner === true ? "calc(100vh - 3.125rem)" : "100vh",
            }
          )
          .fromTo(
            ".nav-screen .nav_accordion-header,.nav-screen .nav_header-group-right",
            {
              x: 75,
              opacity: 0,
            },
            {
              x: 0,
              opacity: 1,
              stagger: {
                from: "start",
                each: 0.1,
              },
            }
          );
      } else {
        gsap.timeline({
          onComplete: () => {
            close_nav_screen();
          },
        });
      }
    });

    const mega_menus = $(".navigation .nav_mega-menu");

    if (currentViewPort() !== "desktop") {
      mega_menus.each(function () {
        const current_mega_menu = $(this);
        const current_mega_menu_name = current_mega_menu.attr("nav-menu-name");
        const current_mega_menu_header = $(
          `.nav_accordion-header[nav-menu-name='${current_mega_menu_name}']`
        );
        const original_height = current_mega_menu.outerHeight();
        const original_padding_top = parseInt(
          current_mega_menu.css("padding-top")
        );
        const original_padding_bottom = parseInt(
          current_mega_menu.css("padding-bottom")
        );
        // console.log(
        //   "hey",
        //   original_height,
        //   original_padding_top,
        //   original_padding_bottom
        // );
        current_mega_menu.attr({
          original_height: original_height,
          padding_top: original_padding_top,
          padding_bottom: original_padding_bottom,
        });

        gsap.set(current_mega_menu, {
          maxHeight: 0,
          paddingTop: 0,
          paddingBottom: 0,
          opacity: 0,
          filter: "blur(7px)",
        });

        current_mega_menu_header.on("click", function () {
          console.log(current_mega_menu_name);
          console.log("clicked");

          const is_open = current_mega_menu_header.attr("is-open");
          if (is_open !== "true") {
            current_mega_menu_header.attr("is-open", "true");
            gsap.timeline().to(current_mega_menu, {
              maxHeight: original_height,
              paddingTop: original_padding_top,
              paddingBottom: original_padding_bottom,
              opacity: 1,
              duration: 0.75,
              filter: "blur(0px)",
            });
          } else {
            current_mega_menu_header.attr("is-open", "false");
            gsap.timeline().to(current_mega_menu, {
              maxHeight: 0,
              paddingTop: 0,
              paddingBottom: 0,
              opacity: 0,
              duration: 0.75,
              filter: "blur(7px)",
            });
          }
        });
      });
    }
  });

  $(".footer").each(function () {
    const footer = $(this);

    const footer_cols = footer.find(".footer_col");

    if (currentViewPort() === "mobile") {
      footer_cols.each(function () {
        const current_footer_col = $(this);
        const current_footer_col_header =
          current_footer_col.find(".footer_col-header");
        const current_footer_col_body =
          current_footer_col.find(".footer_col-body");
        const original_height = current_footer_col_body.outerHeight();
        const original_padding_top = parseInt(
          current_footer_col_body.css("padding-top")
        );
        const original_padding_bottom = parseInt(
          current_footer_col_body.css("padding-bottom")
        );
        // console.log(
        //   "hey",
        //   original_height,
        //   original_padding_top,
        //   original_padding_bottom
        // );
        current_footer_col_body.attr({
          original_height: original_height,
          padding_top: original_padding_top,
          padding_bottom: original_padding_bottom,
        });

        gsap.set(current_footer_col_body, {
          maxHeight: 0,
          paddingTop: 0,
          paddingBottom: 0,
          opacity: 0,
          filter: "blur(7px)",
        });

        current_footer_col_header.on("click", function () {
          // console.log("clicked");

          const is_open = current_footer_col_header.attr("is-open");
          if (is_open !== "true") {
            current_footer_col_header.attr("is-open", "true");
            gsap.timeline().to(current_footer_col_body, {
              maxHeight: original_height,
              paddingTop: original_padding_top,
              paddingBottom: original_padding_bottom,
              opacity: 1,
              duration: 0.75,
              filter: "blur(0px)",
            });
          } else {
            current_footer_col_header.attr("is-open", "false");
            gsap.timeline().to(current_footer_col_body, {
              maxHeight: 0,
              paddingTop: 0,
              paddingBottom: 0,
              opacity: 0,
              duration: 0.75,
              filter: "blur(7px)",
            });
          }
        });
      });
    }
  });
}

function Grid_System_R({ x_axis_duration, y_axis_duration } = {}) {
  x_axis_duration ??= 6.5;
  y_axis_duration ??= 6.5;

  $("section:has(.grid-system_main-wrapper)").each(function (index) {
    let based_duration_each_round = x_axis_duration;
    const current_section = $(this);
    let use_top_line = current_section.attr("use_top_line");
    let use_bottom_line = current_section.attr("use_bottom_line");

    use_top_line ??= "true";
    use_bottom_line ??= "true";

    // console.log(
    //   "Animation duration is:",
    //   based_duration_each_round,
    //   x_axis_duration,
    //   y_axis_duration
    // );

    let based_duration_each_round_mil;
    // console.log(index);

    const animated_lines = current_section.find(".animated_line");

    let line_animation_progress = [
      {
        position: "top", //bottom, left, right
        direction: "right", // left, down, up
        is_active: use_top_line,
      },
      {
        position: "bottom", //bottom, left, right
        direction: "left", // left, down, up
        is_active: use_bottom_line,
      },
    ];

    // console.log("testing", line_animation_progress);

    function direction_handler(line_index) {
      switch (line_animation_progress[line_index].position) {
        case "top":
          if (line_animation_progress[line_index].direction === "right") {
            line_animation_progress[line_index].direction = "down";
            line_animation_progress[line_index].position = "right";
          }
          if (line_animation_progress[line_index].direction === "left") {
            line_animation_progress[line_index].direction = "down";
            line_animation_progress[line_index].position = "left";
          }
          break;
        case "bottom":
          if (line_animation_progress[line_index].direction === "right") {
            line_animation_progress[line_index].direction = "up";
            line_animation_progress[line_index].position = "right";
          }
          if (line_animation_progress[line_index].direction === "left") {
            line_animation_progress[line_index].direction = "up";
            line_animation_progress[line_index].position = "left";
          }
          break;
        case "left":
          if (line_animation_progress[line_index].direction === "down") {
            line_animation_progress[line_index].direction = "right";
            line_animation_progress[line_index].position = "bottom";
          }
          if (line_animation_progress[line_index].direction === "up") {
            line_animation_progress[line_index].direction = "right";
            line_animation_progress[line_index].position = "top";
          }
          break;
        case "right":
          if (line_animation_progress[line_index].direction === "down") {
            line_animation_progress[line_index].direction = "left";
            line_animation_progress[line_index].position = "bottom";
          }
          if (line_animation_progress[line_index].direction === "up") {
            line_animation_progress[line_index].direction = "left";
            line_animation_progress[line_index].position = "top";
          }
          break;
        default:
      }

      // console.log(line_animation_progress);
    }

    //   gsap.to(animated_lines, {
    //     opacity: 1,
    //   });

    const x_animated_lines = current_section.find(
      ".animated_line.is-horizontal"
    );
    const y_animated_lines = current_section.find(".animated_line.is-vertical");
    const x_animated_line_top = current_section.find(
      ".animated_line_shell.is-top .animated_line.is-horizontal"
    );
    const x_animated_line_bottom = current_section.find(
      ".animated_line_shell.is-bottom .animated_line.is-horizontal"
    );
    const y_animated_line_right = current_section.find(
      ".animated_line_shell.is-right .animated_line.is-vertical"
    );
    const y_animated_line_left = current_section.find(
      ".animated_line_shell.is-left .animated_line.is-vertical"
    );

    const animate_lines = () => {
      let current_target_line;

      based_duration_each_round_mil = based_duration_each_round * 1000;

      const line_shell_height = current_section
        .find(".animated_line_shell.is-vertical")
        .height();

      line_animation_progress.forEach(
        ({ position, direction, is_active }, index) => {
          // console.log("line", position, direction, is_active);
          if (is_active === "false") return;

          function animate_line_x_axis() {
            if (direction === "right") {
              let tl = gsap
                .timeline({})

                .set(current_target_line, {
                  opacity: 1,
                })
                .fromTo(
                  current_target_line,
                  {
                    marginLeft: "0%",
                  },
                  {
                    marginLeft: "100%",
                    duration: based_duration_each_round,
                    ease: "none",
                  },
                  "<"
                )
                .set(current_target_line, {
                  opacity: 0,
                });
            } else if (direction === "left") {
              let tl = gsap
                .timeline({})

                .set(current_target_line, {
                  opacity: 1,
                })
                .fromTo(
                  current_target_line,
                  { marginLeft: "100%" },
                  {
                    marginLeft: "0%",
                    duration: based_duration_each_round,
                    ease: "none",
                  },
                  "<"
                )
                .set(current_target_line, {
                  opacity: 0,
                });
            }
          }
          function animate_line_y_axis() {
            if (direction === "up") {
              let tl = gsap
                .timeline({})

                .set(current_target_line, {
                  opacity: 1,
                })
                .fromTo(
                  current_target_line,
                  {
                    marginTop: line_shell_height,
                  },
                  {
                    marginTop: 0,
                    duration: based_duration_each_round,
                    ease: "none",
                  },
                  "<"
                )
                .set(current_target_line, {
                  opacity: 0,
                });
            } else if (direction === "down") {
              let tl = gsap
                .timeline({})

                .set(current_target_line, {
                  opacity: 1,
                })
                .fromTo(
                  current_target_line,
                  { marginTop: 0 },
                  {
                    marginTop: line_shell_height,
                    duration: based_duration_each_round,
                    ease: "none",
                  },
                  "<"
                )
                .set(current_target_line, {
                  opacity: 0,
                });
            }
          }

          switch (position) {
            case "top":
              current_target_line = x_animated_line_top;

              animate_line_x_axis();

              break;
            case "bottom":
              current_target_line = x_animated_line_bottom;

              animate_line_x_axis();

              break;
            case "left":
              current_target_line = y_animated_line_left;

              animate_line_y_axis();

              break;
            case "right":
              current_target_line = y_animated_line_right;
              animate_line_y_axis();

              break;
            default:
          }

          direction_handler(index);
        }
      );

      // console.log("animating lines triggered", line_shell_height);
    };

    animate_lines();

    let animate_line_interval;

    function startInterval() {
      animate_line_interval = setInterval(() => {
        if (based_duration_each_round === x_axis_duration) {
          based_duration_each_round = y_axis_duration;
        } else if (based_duration_each_round === y_axis_duration) {
          based_duration_each_round = x_axis_duration;
        }

        animate_lines();
        // console.log(based_duration_each_round_mil);

        clearInterval(animate_line_interval); // clear this one
        // Update your duration here if needed
        startInterval(); // start new one with updated duration
      }, based_duration_each_round_mil);
    }

    // Start the first interval
    startInterval();
  });
}

function Faq_Component() {
  $(".faq_item").on("click", function (index) {
    const current_faq_item = $(this);

    const is_open = current_faq_item.attr("is_open");
    if (is_open !== "true") {
      // $(".faq_item").attr("is_open", "false");
      current_faq_item.attr("is_open", "true");
    } else {
      current_faq_item.attr("is_open", "false");
    }
  });
  $(".faq_item a").on("click", function (e) {
    e.stopPropagation();
  });

  // $(".faq_item").each(function (index) {
  //   const triggerEle = $(this);

  //   let tl = gsap
  //     .timeline({
  //       scrollTrigger: {
  //         trigger: triggerEle,
  //         start: "top 70%",
  //         end: "bottom bottom",
  //         // scrub: 0.25 ,
  //         // markers: true,
  //         // once: true,
  //       },
  //     })
  //     .fromTo(
  //       triggerEle,
  //       {
  //         opacity: 0,
  //         y: 20,
  //       },
  //       {
  //         opacity: 1,
  //         y: 0,
  //       }
  //     );
  // });
}

function g_play_video(video_src, video_screen_ele) {
  const iframe_component = video_screen_ele.find("iframe");

  if (video_src.includes("iframe")) {
    video_src = $(`${video_src}`).attr("src");
    console.log("Iframe case");
  }
  if (!video_src) {
    video_src = "https://www.youtube.com/embed/E4RXZIps4cc?si=gXSjgSuD298pfyHv";
    console.log("no video_src found");
  }

  console.log(video_src);

  iframe_component.attr("src", video_src);
  //Youtube
  if (video_src.includes("youtube")) {
    console.log("youtube case");
    video_screen_ele.find("[v_platform='vimeo']").hide();
    video_screen_ele.find("[v_platform='youtube']").show();
  }
  //Vimeo
  if (video_src.includes("vimeo")) {
    console.log("vimeo case");
    video_screen_ele.find("[v_platform='youtube']").hide();
    video_screen_ele.find("[v_platform='vimeo']").show();
    setTimeout(() => {
      const script = document.createElement("script");
      script.src = "https://player.vimeo.com/api/player.js";
      script.async = true; // Optional: Load the script asynchronously
      document.head.appendChild(script); // Append the script to the document
    }, 10); // 3
  }
}

function g_stop_video() {
  const iframe_component = $("iframe[v_platform]");
  iframe_component.attr("src", "");
}

const video_screen = $(".video_screen");

function openVideoScreenSrc(src) {
  console.log("clicking");
  g_play_video(src, video_screen);
  //   video_screen.addClass("is_active");
  gsap.to(".video_screen", {
    opacity: 1,
    pointerEvents: "auto",
  });

  // lenis.stop();
}
function closeVideoScreenSrc() {
  const iframe_component = video_screen.find("iframe");
  //Youtube
  //   video_screen.removeClass("is_active");
  gsap.to(".video_screen", {
    opacity: 0,
    pointerEvents: "none",
  });
  iframe_component.attr("src", "");
  // lenis.start();
}

function video_section() {
  $(".video_screen:not(#main_ele)");
  $(".page_wrap").prepend($(".video_screen#main_ele"));

  $("[video_section]").each(function (index) {
    const video_section = $(this);

    const open_btn = video_section.find(
      "[video_play_btn='true'], .brand_benefits_video_wrapper"
    );

    open_btn.removeAttr("href");

    const video_screen_close_btn = video_screen.find(
      ".video_screen_close_btn, .video_screen_bg"
    );

    const iframe_src = video_section.find("[video_src]").attr("video_src");
    gsap.set(video_section, {
      zIndex: 5,
    });
    // console.log("iframe_src", iframe_src);

    open_btn.on("click", function (event) {
      // event.preventDefault();
      openVideoScreenSrc(iframe_src);
    });
    video_screen_close_btn.on("click", function () {
      closeVideoScreenSrc();
    });
  });
}

function init_footer() {}
function init_page() {
  gsap.to(".page-wrapper", {
    opacity: 1,
    duration: 1,
    delay: 0.5,
  });
}
function initAnimationSetup() {
  section_w_svgs();
}
// console.log("global");

function Grid_card_animation() {
  const main_wrapper = $(".section_career-hero");

  const triggerEle = main_wrapper;

  //   const wrappers = document.querySelectorAll(".grid-layout");
  const card_wrappers = $(".grid-layout");

  card_wrappers.each(function () {
    const current_wrapper = $(this);
    const $cards = current_wrapper.find(".grid-card");

    let color = "#f8f6f2";

    if (current_wrapper.hasClass("is-press")) {
      color = "#f8f6f2";
    }
    if (current_wrapper.hasClass("is-news")) {
      color = "#011A42";
    }

    // console.log("Hey");
    current_wrapper.on("mousemove", function (event) {
      $cards.each(function () {
        const $card = $(this);
        const rect = this.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;

        const $background = $card.find(".grid-card_background");
        if ($background.length) {
          $background.css(
            "background",
            `radial-gradient(1200px circle at ${x}px ${y}px, ${color} 5%, transparent 60%)`
          );
        }
      });
    });
  });
}

function HubspotForm_Setup() {
  $(".hubspot-form-embed").each(function () {
    setTimeout(() => {
      //   console.log("triggered");
      $(this)
        .find(".hs-form-booleancheckbox-display")
        .append($(".form_field_input_checkbox_f"));
    }, 1000);
  });
}

function Back_Btn() {
  $(".history-back-btn").on("click", function (e) {
    e.stopPropagation();
    window.history.go(-1);
  });
}

$("document").ready(function () {
  init_page();
  initAnimationSetup();
  init_Nav_Footer();
  Grid_card_animation();
  Faq_Component();
  video_section();
  HubspotForm_Setup();
  Back_Btn();

  setTimeout(() => {}, 1000);

  if (currentViewPort() === "desktop") {
  }

  //   let case_study_slider_interval = setInterval(() => {
  //     // console.log("Case study slider interval triggered.");
  //     testimonial_swiper_component();
  //     setFontSizeAutomaticallySwiperHeading();
  //     if (case_study_slider_triggered) {
  //       clearInterval(case_study_slider_interval);
  //     }
  //   }, 1000);

  $(window).scroll(function () {
    //check if section is on screen after scroll
  });
});