gsap.registerPlugin(CustomEase);

document.addEventListener("DOMContentLoaded", () => {
  const swiper = new Swiper(".swiper", {
    effect: "fade",
    fadeEffect: {
      mode: "cross-fade",
    },
    autoplay: { delay: 2500 },
    speed: 600,
  });

  initialAnim();

  initFormToggle(swiper);
});

function initFormToggle(swiper) {
  const formTl = gsap
    .timeline({
      paused: true,
      onComplete: () => swiper.autoplay.stop(),
    })
    .set(".form-wrapper-1", { display: "block" })
    .to(".form-wrapper-1", { opacity: 1, duration: 0.8 });

  const wrapper = document.querySelector(".form-wrapper-1");
  const opener = document.querySelector(".soon-form-wrapper");

  const closeForm = () => {
    swiper.autoplay.start();
    formTl.timeScale(1.3).reverse();
  };

  opener.addEventListener("click", () => formTl.timeScale(1).play());

  wrapper.addEventListener("click", (e) => {
    if (e.target === wrapper || e.target.closest(".cross")) {
      closeForm();
    }
  });
}

function initialAnim() {
  CustomEase.create("reveal", "M0,0 C0.65,0 0.35,1 1,1");
  CustomEase.create("sweep", "M0,0 C0.42,0 0.58,1 1,1");

  const textBlocks = document.querySelectorAll(".soon-text-wrapper > *");

  gsap
    .timeline()
    .fromTo(
      "#reveal-rect",
      { attr: { height: 0 } },
      { attr: { height: 467 }, duration: 1.2, ease: "reveal" },
      0
    )
    .fromTo(
      "#sweep",
      { x: -150 },
      { x: 820, duration: 1.2, ease: "sweep", repeat: 1 },
      1.25
    )
    .from(
      textBlocks,
      { opacity: 0, y: 10, duration: 0.4, stagger: 0.5 },
      "-=.4"
    );
}