window.addEventListener("load", () => {
  let mmFooter = gsap.matchMedia();

  mmFooter.add("(min-width: 991px)", () => {
    gsap.set(".footer", {
      overflow: "hidden",
    });
    gsap.set(".footer-padding", {
      yPercent: -44,
    });
    const footerPin = gsap.timeline({
      scrollTrigger: {
        trigger: ".footer",
        start: "top bottom",
        end: "top +=15%",
        scrub: true,
      },
    });
    footerPin.to(".footer-padding", {
      yPercent: 0,
      ease: "linear",
    });
  });




  class CtaRive {
    constructor(el) {
        this.el = el;
        this.canvas = el.querySelector(`[data-cta-rive="${this.el.getAttribute('data-rive-card')}"]`);
        this.rive;
        this.src = this.canvas.getAttribute('data-rive-src');
        this.inputs;
        this.observer;
        this.init();

    }

    handleObserver(entries) {

      for(const entry of entries) {
          if (entry.isIntersecting) {
            this.rive.play();
          } else {
          }


      }
    }

    init() {
        console.log("initializing...");
        this.rive = new rive.Rive({
          src: this.src,
          canvas: this.canvas,
          artboard: "Artboard",
          stateMachines: ["State Machine 1"],

          onLoad: () => {
            this.rive.resizeDrawingSurfaceToCanvas(); 
            this.inputs = this.rive.stateMachineInputs("State Machine 1");
            //observer...
            this.observer = new IntersectionObserver(this.handleObserver.bind(this), {threshold: 0.44});
            this.observer.observe(this.canvas);
            this.attachEvents();

          },
        });
      }

      timeout(fn) {
        setTimeout(()=> {
          this.attachEvents();
        }, 500);
      }

      attachEvents() {
        console.log(this.inputs);

        this.el.addEventListener('mouseenter', ()=> {
            this.inputs[0].value = true;
            // this.animation.speed = 1
            this.rive.play("State Machine 1");
        })

        this.el.addEventListener('mouseleave', ()=> {
          console.log(this.inputs);

          this.inputs[0].value = false;
          // this.animation.speed = -1
          this.rive.play("State Machine 1"); 
        })


      }
}

const ctaRives = document.querySelectorAll('[data-rive-card]');

for(const rive of ctaRives) {
    new CtaRive(rive)
}
});