<template>
  <section ref="ctaSectionRef" class="relative overflow-hidden py-12 md:py-24">
    <div
      ref="bgRef"
      class="relative bg-[#d2024e] text-white"
      style="transform-origin: center center"
    >
      <div
        class="absolute left-1/2 top-0 h-12 w-[140%] -translate-x-1/2 -translate-y-1/2 rounded-b-[100%] bg-white md:h-24 md:w-[120%]"
      ></div>

      <div
        class="relative z-10 mx-auto grid max-w-5xl items-center gap-8 px-6 py-16 md:grid-cols-2 md:gap-10 md:py-24"
      >
        <div ref="textRef" class="text-center md:text-left">
          <p class="mb-4 text-sm font-medium text-white">
            {{ t("Online Order") }}
          </p>

          <h2 class="mb-6 text-3xl font-bold leading-tight md:text-5xl">
            {{ t("Müco is at your door with Yemeksepeti!") }}
          </h2>

          <Button
            :label="t('Order')"
            href="https://yemek.go.link/3PDtu"
            external
            variant="white"
            size="lg"
          />
        </div>

        <div ref="imageRef" class="relative flex justify-center">
          <img
            src="/images/cta.webp"
            alt="Müco Yemeksepeti"
            class="w-full max-w-64 drop-shadow-2xl sm:max-w-[320px] md:absolute md:top-1/2 md:max-h-[480px] md:w-auto md:max-w-none md:-translate-y-1/2"
            aria-hidden="true"
          />
        </div>
      </div>

      <div
        class="absolute bottom-0 left-1/2 h-12 w-[140%] -translate-x-1/2 translate-y-1/2 rounded-t-[100%] bg-white md:h-24 md:w-[120%]"
      ></div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const { t } = useI18n();

const ctaSectionRef = ref<HTMLElement | null>(null);
const bgRef = ref<HTMLElement | null>(null);
const textRef = ref<HTMLElement | null>(null);
const imageRef = ref<HTMLElement | null>(null);

let ctx: gsap.Context | null = null;
let mm: gsap.MatchMedia | null = null;

const createAnimation = () => {
  if (
    !ctaSectionRef.value ||
    !bgRef.value ||
    !textRef.value ||
    !imageRef.value
  ) {
    return;
  }

  const bg = bgRef.value;
  const text = textRef.value;
  const image = imageRef.value;
  const section = ctaSectionRef.value;

  gsap.set(bg, {
    scaleY: 0,
    transformOrigin: "center center",
  });

  gsap.set(text, {
    x: -120,
    opacity: 0,
  });

  gsap.set(image, {
    x: 120,
    opacity: 0,
  });

  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: section,
      start: "top 70%",
      end: "top 0%",
      scrub: 1,
      invalidateOnRefresh: true,
    },
  });

  tl.to(bg, {
    scaleY: 1,
    ease: "power2.out",
    duration: 1,
  })
    .to(
      text,
      {
        x: 0,
        opacity: 1,
        ease: "power3.out",
        duration: 0.8,
      },
      "-=0.55",
    )
    .to(
      image,
      {
        x: 0,
        opacity: 1,
        ease: "power3.out",
        duration: 0.8,
      },
      "-=0.75",
    );
};

onMounted(async () => {
  await nextTick();

  if (!ctaSectionRef.value) return;

  ctx = gsap.context(() => {
    mm = gsap.matchMedia();

    mm.add("(min-width: 768px)", () => {
      createAnimation();
    });

    mm.add("(max-width: 767px)", () => {
      createAnimation();
    });
  }, ctaSectionRef.value);
});

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

  mm = null;
  ctx = null;
});
</script>
