import { onBeforeUnmount, onMounted, unref } from "vue";

export function usePageShellMotion(rootRef) {
  let ctx;

  onMounted(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      return;
    }

    const root = unref(rootRef);
    const { $gsap } = useNuxtApp();

    if (!root || !$gsap) {
      return;
    }

    ctx = $gsap.context(() => {
      $gsap.fromTo(
        root,
        { autoAlpha: 0 },
        { autoAlpha: 1, duration: 0.42, ease: "power2.out" },
      );

      root.querySelectorAll("[data-cta-orbit]").forEach((element) => {
        $gsap.to(element, {
          scale: 1.08,
          autoAlpha: 0.72,
          duration: 2.8,
          ease: "sine.inOut",
          repeat: -1,
          yoyo: true,
        });
      });
    }, root);
  });

  onBeforeUnmount(() => {
    ctx?.revert();
  });
}