function SolutionSection() {
  //   setTimeout(() => {
  //     ScrollTrigger.refresh();
  //   }, 1000);

  //   if (currentViewPort() === "mobile") {
  //     $(".home_application_process_card").each(function (index) {
  //       const triggerEle = $(this);
  //       const current_card = $(this);

  //       let tl = gsap.timeline({
  //         scrollTrigger: {
  //           trigger: triggerEle,
  //           start: "top 50%",
  //           end: "bottom bottom",
  //           // scrub: 0.25 ,
  //           // markers: true,
  //           // once: true,
  //           onEnter: () => {
  //             $(".home_application_process_card").attr("is_active", "false");
  //             current_card.attr("is_active", "true");
  //           },
  //           onEnterBack: () => {
  //             $(".home_application_process_card").attr("is_active", "false");
  //             current_card.attr("is_active", "true");
  //           },
  //         },
  //       });
  //     });
  //   }

  if (currentViewPort() === "desktop") {
    // return;
    $(".homepage-scroll-track").each(function (index) {
      const scroll_track = $(this);

      $(".scroll_track_mark_contain .homepage_prob-solution-cell.is-left").each(
        function () {
          const clone = $(this).clone();
          $(".homepage-scroll-absolute .homepage-scroll-sticky-screen").append(
            clone
          );
        }
      );

      setTimeout(() => {
        scroll_track.find(".section_home-prob-solution").each(function (index) {
          // console.log("testing");
          const triggerEle = $(this);
          const order = index + 1;

          const current_process_card = $(
            ".homepage-scroll-track .section_home-prob-solution"
          ).eq(index);
          const all_process_cards = $(
            ".homepage-scroll-track .section_home-prob-solution"
          ).not(current_process_card);

          // is_active
          function updateUI() {
            console.log("Updating UI");
            scroll_track.attr("current-section", order);
            //   all_process_card_illustrations.attr("is_active", "false");
            //   all_process_cards.attr("is_active", "false");
            //   current_process_card.attr("is_active", "true");
            //   setTimeout(() => {
            //     current_process_card_illustration.attr("is_active", "true");
            //   }, 100);
          }

          let tl = gsap.timeline({
            scrollTrigger: {
              trigger: triggerEle,
              start: "50% bottom",
              end: "bottom bottom",
              // scrub: 0.25 ,
              // markers: true,
              // once: true,
              onEnter: () => {
                // console.log("Entering", order);
                updateUI();
              },
              onLeave: () => {
                // console.log("Leaving", order);
                updateUI();
              },
              onEnterBack: () => {
                // console.log("Entering back", order);
                updateUI();
              },
              onLeaveBack: () => {
                // console.log("Leaving back", order);
                updateUI();
              },
            },
          });
        });
      }, 300);
    });
  }
}
function Grid3colSection() {
  if (currentViewPort() === "desktop") {
    // return;
    $(".section_home-grid-3col .homepage_grid-3-cells").each(function (index) {
      const triggerEle = $(this);

      let tl = gsap
        .timeline({
          scrollTrigger: {
            trigger: triggerEle,
            start: "top 70%",
            end: "top 30%",
            scrub: 0.5,
            // markers: true,
            once: true,
          },
        })

        .from(".homepage_grid-3-cells .home-card-linear:nth-child(1)", {
          x: -30,
          opacity: 0,
        })
        .from(
          ".homepage_grid-3-cells .home-card-linear:nth-child(3)",
          {
            x: 30,
            opacity: 0,
          },
          "<"
        );
    });
  }
}

function Hero_Section_Light() {
  $(".section_home_hero.is-light").each(function () {
    const current_section = $(this);
    const hero_ui_1 = current_section.find(".home_hero-illustration.is-no-1");
    const hero_ui_2 = current_section.find(".home_hero-illustration.is-no-2");
    const hero_ui_3 = current_section.find(".home_hero-illustration.is-no-3");
    const hero_ui_4 = current_section.find(".home_hero-illustration.is-no-4");
    const hero_text_line = current_section.find(
      ".homepage-v2-icon.is-hero-text"
    );
    const hero_circled_text = current_section.find(".hero-circled-text");

    const delay_duration = 0.75;
    // const animation_duration = 0.75;
    // const distance_in = 35;
    // const distance_out = distance_in * -1;

    // gsap.timeline({ delay: 1 }).from(dotted_background_dots, {
    //   opacity: 0,
    //   scale: 0,
    //   stagger: {
    //     from: "random",
    //     amount: 3,
    //   },
    // });

    const hero_animation_tl = gsap
      .timeline({
        // repeat: -1,
        paused: true,
        // onStart: () => {

        // },
        delay: delay_duration,
      })
      .to(hero_text_line, {
        opacity: 1,
        duration: 0.5,
      })
      .add(function () {
        if (currentViewPort() !== "mobile") {
          console.log("not mobile");
          gsap.to(
            hero_circled_text,
            {
              color: "#F9DEE6",
            }
            // ,"<"
          );
        }
      })
      .to(hero_text_line, {
        opacity: 0,
        delay: 1,
      })
      .add(function () {
        if (currentViewPort() !== "mobile") {
          console.log("not mobile");
          gsap.to(
            hero_circled_text,
            {
              color: "white",
            }
            // ,"<"
          );
        }
      })

      .to(
        hero_ui_2,
        {
          opacity: 1,
          deration: 3.5,
        },
        "<=0.5"
      )
      .to(hero_ui_3, {
        opacity: 1,
        delay: 1,
      })
      .to(hero_ui_4, {
        opacity: 1,
      });

    hero_animation_tl.play();
  });
}
function Hero_Section_Dark() {
  // $(".section_home_hero.is-dark").each(function () {
  //   const current_section = $(this);

  //   var stage = 1;
  //   var maxStage = 6;
  //   var interval = 4500; // 3 seconds

  //   function updateStage() {
  //     $(".home_hero-animation-wrap").attr("stage", stage);
  //     stage = (stage % maxStage) + 1; // loop back to 1 after 6
  //     setTimeout(updateStage, interval);
  //   }

  //   updateStage();
  // });
  $(".section_home_hero.is-dark").each(function () {
    const current_section = $(this);

    gsap.fromTo(
      ".home_hero_text",
      {
        opacity: 0,
        x: -20,
      },
      {
        opacity: 1,
        x: 0,
        delay: 0.5,
      }
    );

    const hero_animation_tl = gsap
      .timeline({
        repeat: -1,
        // repeatDelay: 2,
        paused: true,
        onStart: () => {
          console.log("Hero animation starting");
          setInitialSVGState("class", "hp-grid-cell-connector");
          $(".home_hero-animation-wrap .hp-grid-cell").attr({
            "is-pulsing": "false",
            "is-pulsing-strong": "false",
          });
        },
        onRepeat: () => {
          console.log("Hero animation repeating");
          setInitialSVGState("class", "hp-grid-cell-connector");
          $(".home_hero-animation-wrap .hp-grid-cell").attr({
            "is-pulsing": "false",
            "is-pulsing-strong": "false",
          });
        },
        delay: 0.5,
      })

      // Grid lines bg

      //Stage 0
      .set(
        ".home_hero-animation-wrap .hp-hero-cell-st1-rec",
        {
          backgroundColor: "rgba(207, 0, 65, 0.50)",
        }
        // "<"
      )

      .set(
        ".home_hero-animation-wrap .hp-hero-cell-st1-rec-inner",
        {
          borderColor: "#CF0041",
        },
        "<"
      )
      .set(
        ".home_hero-animation-wrap .hp-grid-cell:not(:empty)",
        {
          // borderColor: "#A33765",
          borderColor: "transparent",
          backgroundColor: "#5c0b2a",
          "box-shadow": "rgba(255, 255, 255, 0.6) 0px 1px 2px 0px inset",
          // "box-shadow":
          //   "rgba(207, 0, 65, 1) 0px 2px 25px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px inset",
          attr: { "is-pulsing": "true" },
          // stagger: {
          //   from: "random",
          //   amount: 0.5,
          // },
        },
        "<"
      )
      .set(
        ".hp-hero-cell-dots.is-no1",
        // {
        //   opacity: 0,
        // },
        {
          opacity: 1,
          // stagger: {
          //   from: "random",
          //   amount: 0.5,
          // },
        },
        "<"
      )
      .set(
        ".hp-hero-cell-st1-rec-icon.is-mode-1, .hp-hero-cell-st1-level.is-mode-1",
        {
          opacity: 1,
        }
      )
      .set(
        ".hp-hero-cell-st1-rec-icon.is-mode-2, .hp-hero-cell-st1-level.is-mode-2",
        {
          opacity: 0,
        },
        "<"
      )

      .fromTo(
        ".hp-grid-cell:not([no-show-stage='1']):not(.is-hidden)",
        {
          opacity: 0,
          // scale: 0.85,
        },
        {
          opacity: 1,
          duration: 0,
          // scale: 1,
          // stagger: {
          //   from: "random",
          //   amount: 0.35,
          // },
        }
        // "<"
      )

      .fromTo(
        ".hp-grid-cell[no-show-stage='1']",
        {
          opacity: 0,
        },
        {
          opacity: 1,
          duration: 0,
          // stagger: {
          //   from: "random",
          //   each: 0.25,
          // },
        }
      )
      .to(
        ".home_hero-animation-grid",
        {
          opacity: 1,
          duration: 1,
          delay: 0.75,
        }
        // "<"
      )
      .fromTo(
        ".home_hero-line.is-horizontal",
        {
          width: "0%",
          // opacity: 0,
          backgroundColor: "#8530D1",
        },
        {
          width: "100%",
          opacity: 1,
          backgroundColor: "#222938",
          stagger: {
            from: "start",
            amount: 1,
          },
        },
        "<"
      )
      .fromTo(
        ".home_hero-line.is-vertical",
        {
          height: "0%",
          // opacity: 0,
          backgroundColor: "#8530D1",
        },
        {
          height: "100%",
          opacity: 1,
          backgroundColor: "#222938",
          stagger: {
            from: "start",
            amount: 0.8,
          },
        },
        "<"
      )

      //Stage 1

      // Show cell in red state

      //Stage 2

      // Blue cards
      .to(".home_hero-animation-wrap .hp-hero-cell-point", {
        opacity: 1,
        delay: 1.2,
        stagger: {
          from: "random",
          amount: 0.35,
        },
      })

      .set(
        `.home_hero-animation-wrap .hp-grid-cell.is-blue .hp-hero-cell-st1-rec-icon.is-mode-1, 
        .home_hero-animation-wrap .hp-grid-cell.is-blue .hp-hero-cell-st1-level.is-mode-1`,
        {
          delay: 1,
          opacity: 0,
          position: "absolute",
          // stagger: {
          //   from: "random",
          //   amount: 0.5,
          // },
        }
      )
      .set(
        `.home_hero-animation-wrap .hp-grid-cell.is-blue .hp-hero-cell-st1-rec-icon.is-mode-2, 
        .home_hero-animation-wrap .hp-grid-cell.is-blue .hp-hero-cell-st1-level.is-mode-2`,
        {
          opacity: 1,
          position: "relative",
          // stagger: {
          //   from: "random",
          //   amount: 0.5,
          // },
        },
        "<"
      )

      .to(
        ".home_hero-animation-wrap .hp-grid-cell.is-blue .hp-hero-cell-st1-rec",
        {
          backgroundColor: "rgba(131, 204, 237, 0.50)",
        }
        // "<"
      )

      .to(
        ".home_hero-animation-wrap .hp-grid-cell.is-blue .hp-hero-cell-st1-rec-inner",
        {
          borderColor: "#83CCED",
        },
        "<"
      )
      .to(
        ".home_hero-animation-wrap .hp-grid-cell.is-blue .hp-hero-cell-point",
        {
          backgroundColor: "rgba(131, 204, 237, 0.40)",
        }
        // "<"
      )
      .set(
        ".home_hero-animation-wrap .hp-grid-cell.is-blue .hp-hero-cell-st1-level-info .hp-hero-cell-st1-level-info-dot",
        {
          backgroundColor: "rgba(131, 204, 237, 1)",
        },
        "<"
      )
      .set(
        ".home_hero-animation-wrap .hp-grid-cell.is-blue .hp-hero-cell-st1-level-info *",
        {
          color: "rgba(131, 204, 237, 1)",
        },
        "<"
      )
      .to(
        ".home_hero-animation-wrap .hp-grid-cell.is-blue .hp-hero-cell-st1-level-info",
        {
          marginTop: "0.4166666666666667em",
          opacity: 1,
          delay: 0.75,
          duration: 0.45,
          // stagger: {
          //   from: "random",
          //   each: 0.025,
          // },
        }
      )
      .to(
        ".home_hero-animation-wrap .hp-grid-cell.is-blue:not(:empty)",
        {
          // borderColor: "#7E98B8",
          borderColor: "transparent",
          backgroundColor: "#39475b",
          // "box-shadow": "unset",
          "box-shadow": "rgba(255, 255, 255, 0.6) 0px 1px 2px 0px inset",
          attr: { "is-pulsing": "false" },
          stagger: {
            from: "random",
            amount: 0.5,
          },
        },
        "<"
      )
      .to(
        ".home_hero-animation-wrap .hp-grid-cell.is-blue .hp-hero-cell-dots.is-no1",
        {
          opacity: 0,
        },
        "<"
      )
      .fromTo(
        ".home_hero-animation-wrap .hp-grid-cell.is-blue .hp-hero-cell-dots.is-no2",
        {
          opacity: 0,
        },
        {
          opacity: 1,
          // stagger: {
          //   from: "random",
          //   amount: 0.5
          // },
        },
        "<"
      )

      // Yello cards

      .set(
        `.home_hero-animation-wrap .hp-grid-cell.is-yellow .hp-hero-cell-st1-rec-icon.is-mode-1, 
        .home_hero-animation-wrap .hp-grid-cell.is-yellow .hp-hero-cell-st1-level.is-mode-1`,
        {
          opacity: 0,
          position: "absolute",
          delay: 1,
          // stagger: {
          //   from: "random",
          //   amount: 0.5,
          // },
        }
      )

      .set(
        `.home_hero-animation-wrap .hp-grid-cell.is-yellow .hp-hero-cell-st1-rec-icon.is-mode-2, 
        .home_hero-animation-wrap .hp-grid-cell.is-yellow .hp-hero-cell-st1-level.is-mode-2`,
        {
          position: "relative",
          opacity: 1,
          // stagger: {
          //   from: "random",
          //   amount: 0.5,
          // },
        },
        "<"
      )

      .to(
        ".home_hero-animation-wrap .hp-grid-cell.is-yellow .hp-hero-cell-st1-rec",
        {
          backgroundColor: "rgba(237, 232, 57, 0.50)",
        }
        // "<"
      )

      .to(
        ".home_hero-animation-wrap .hp-grid-cell.is-yellow .hp-hero-cell-st1-rec-inner",
        {
          borderColor: "#EDE839",
        },
        "<"
      )
      .to(
        ".home_hero-animation-wrap .hp-grid-cell.is-yellow .hp-hero-cell-point",
        {
          backgroundColor: "rgba(237, 232, 57, 0.40)",
        }
        // "<"
      )
      .set(
        ".home_hero-animation-wrap .hp-grid-cell.is-yellow .hp-hero-cell-st1-level-info .hp-hero-cell-st1-level-info-dot",
        {
          backgroundColor: "#EDE839",
        },
        "<"
      )
      .set(
        ".home_hero-animation-wrap .hp-grid-cell.is-yellow .hp-hero-cell-st1-level-info *",
        {
          color: "#EDE839",
        },
        "<"
      )
      .to(
        ".home_hero-animation-wrap .hp-grid-cell.is-yellow .hp-hero-cell-st1-level-info",
        {
          marginTop: "0.4166666666666667em",
          opacity: 1,
          delay: 0.75,
          duration: 0.45,
          // stagger: {
          //   from: "random",
          //   each: 0.025,
          // },
        }
      )
      .to(
        ".home_hero-animation-wrap .hp-grid-cell.is-yellow:not(:empty)",
        {
          // borderColor: "#ABA975",
          borderColor: "transparent",
          backgroundColor: "#555227",
          // "box-shadow": "unset",
          "box-shadow": "rgba(255, 255, 255, 0.6) 0px 1px 2px 0px inset",
          attr: { "is-pulsing": "false" },
          stagger: {
            from: "random",
            amount: 0.5,
          },
        },
        "<"
      )
      .to(
        ".home_hero-animation-wrap .hp-grid-cell.is-yellow .hp-hero-cell-dots.is-no1",
        {
          opacity: 0,
        },
        "<"
      )
      .fromTo(
        ".home_hero-animation-wrap .hp-grid-cell.is-yellow .hp-hero-cell-dots.is-no2",
        {
          opacity: 0,
        },
        {
          opacity: 1,
          // stagger: {
          //   from: "random",
          //   amount: 0.5
          // },
        },
        "<"
      )
      .to(
        ".home_hero-animation-wrap .hp-grid-cell.is-red .hp-hero-cell-st1-level-info",
        {
          marginTop: "0.4166666666666667em",
          opacity: 1,
          delay: 0.75,
          duration: 0.45,
          // stagger: {
          //   from: "random",
          //   each: 0.025,
          // },
        }
      )
      //Stage 3

      .to(
        ".home_hero-animation-wrap .hp-grid-cell:not(.is-marked) .hp-hero-cell-st1-rec",
        {
          backgroundColor: "rgba(84, 104, 129, 0.5)",
          delay: 1.5,
        }
      )

      .to(
        ".home_hero-animation-wrap .hp-grid-cell:not(.is-marked) .hp-hero-cell-st1-rec-inner",
        {
          borderColor: "#546881",
        },
        "<"
      )
      .to(
        ".home_hero-animation-wrap .hp-grid-cell:not(.is-marked) .hp-hero-cell-point",
        {
          backgroundColor: "rgba(84, 104, 129, 0.35)",
        },
        "<"
      )
      .to(
        ".home_hero-animation-wrap .hp-grid-cell:not(.is-marked) .hp-hero-cell-st1-level-info .hp-hero-cell-st1-level-info-dot",
        {
          backgroundColor: "rgba(255, 255, 255, 0.75)",
        },
        "<"
      )
      .to(
        ".home_hero-animation-wrap .hp-grid-cell:not(.is-marked) .hp-hero-cell-st1-level-info *",
        {
          color: "rgba(255, 255, 255, 0.75)",
        },
        "<"
      )

      .to(
        ".home_hero-animation-wrap .hp-grid-cell:not(.is-marked)",
        {
          borderColor: "transparent",
          // borderColor: "rgba(52, 48, 65, 0.8)",
          backgroundColor: "rgba(84, 84, 84, 0.1)",
          // boxShadow: "unset",
          "box-shadow": "rgba(255, 255, 255, 0.1) 0px 1px 2px 0px inset",
          attr: { "is-pulsing": "false" },
          stagger: {
            from: "random",
            amount: 0.5,
          },
        },
        "<"
      )

      .to(
        ".home_hero-animation-wrap .hp-grid-cell.is-marked",
        {
          attr: { "is-pulsing": "false" },
          attr: { "is-pulsing-strong": "true" },
        },
        "<"
      )

      .to(
        ".home_hero-animation-wrap .hp-grid-cell:not(.is-red.is-marked) .hp-hero-cell-dots",

        {
          opacity: 0,
        },
        "<"
      )

      //Stage 4
      .to(
        ".home_hero-animation-wrap .hp-grid-cell:not(.is-marked) .hp-hero-cell-st1",
        {
          opacity: 0,
          delay: 0.5,
          stagger: {
            from: "random",
            amount: 0.5,
          },
        }
        // "<"
      )

      //Stage 5
      .to(".home_hero-animation-wrap .hp-grid-cell:not(.is-marked)", {
        opacity: 0,
        scale: 0,
        stagger: {
          from: "random",
          amount: 0.5,
        },
      })

      //Stage 6
      .to(
        ".home_hero-animation-wrap .hp-grid-cell .hp-hero-cell-st1",
        {
          opacity: 0,
          delay: 1.5,
        }
        // "<"
      )

      .to(
        ".home_hero-animation-wrap .hp-grid-cell.is-red.is-marked",
        {
          height: "12.01em",
          delay: 0.25,
        },
        "<"
      )

      .to(
        `.home_hero-animation-wrap .hp-grid-cell-outer .hp-hero-cell-stage5-dots`,
        {
          opacity: 1,
        },
        "<"
      )

      // Stage 7

      .to(".home_hero-animation-wrap .hp-grid-cell-outer", {
        left: "-12.3em",
        bottom: "-6.3em",
        delay: 0.5,
      })
      .to(
        `.home_hero-animation-wrap .hp-grid-cell-outer .hp-grid-cell-connector`,
        {
          opacity: 1,
          delay: 0.5,
        }
        // "<"
      )

      .add(function () {
        drawSVG("class", "hp-grid-cell-connector", {
          duration: 0.75,
        });
        // console.log("drawing SVG now");
      })
      .fromTo(
        `.home_hero-animation-wrap .hp-grid-cell-outer .hp-stage-5-card`,
        {
          scale: 0.25,
          opacity: 0,
        },
        {
          delay: 0.3,
          scale: 1,
          opacity: 1,
        }
        // "<"
      )

      .to(
        `.home_hero-animation-wrap .hp-grid-cell-outer .hp-stage-5-dots`,
        {
          opacity: 1,
        },
        "<"
      )
      .to(".home_hero-animation-wrap .home_hero-animation-grid", {
        opacity: 0,
        delay: 3,
      })
      .to(".home_hero-line.is-horizontal", {
        width: "0%",
        opacity: 1,
        stagger: {
          from: "start",
          amount: 1,
        },
      })
      .to(
        ".home_hero-line.is-vertical",

        {
          height: "0%",
          opacity: 1,
          stagger: {
            from: "start",
            amount: 1.2,
          },
        },
        "<"
      );
    // .set(".home_hero-animation-wrap ", {
    //   opacity: 0,
    // })
    hero_animation_tl.play();
  });
}

$(".home_hero-animation-wrap").attr("stage", 0);

$("document").ready(function () {
  setTimeout(() => {
    SolutionSection();
    Hero_Section_Light();
    Hero_Section_Dark();
    Grid3colSection();

    if (currentViewPort() === "desktop") {
    }
    if (currentViewPort() !== "mobile") {
    }
  }, page_wait_time);
  // setTimeout(() => {

  // }, 1000);
});