<template>
  <section
    ref="parallaxSectionRef"
    class="relative w-screen overflow-hidden bg-dark h-[628px] md:h-screen"
  >
    <div class="absolute -inset-[10%] overflow-hidden">
      <img
        ref="imageRef"
        src="/images/banner/parallax.webp"
        alt=""
        class="absolute inset-0 h-[120%] w-full origin-center object-cover saturate-[1.08] contrast-[1.05] will-change-transform"
        draggable="false"
      />
    </div>

    <div
      class="absolute inset-0 z-[2] bg-[radial-gradient(circle_at_50%_42%,rgb(0_0_0_/_0.08),rgb(0_0_0_/_0.54)_70%),linear-gradient(90deg,rgb(0_0_0_/_0.56),rgb(0_0_0_/_0.08),rgb(0_0_0_/_0.56))]"
    ></div>

    <div class="relative z-[4] grid h-full place-items-center px-6 text-center">
      <h2
        ref="titleRef"
        class="m-0 max-w-[920px] text-balance text-[clamp(36px,5vw,64px)] font-black uppercase leading-[0.96] tracking-[-0.055em] text-white [perspective:900px] [text-shadow:0_22px_46px_rgb(0_0_0_/_0.44)] will-change-transform max-md:text-[clamp(34px,11vw,54px)] max-md:leading-[0.94] max-md:tracking-[-0.05em]"
      >
        <span
          v-for="line in titleLines"
          :key="line"
          ref="titleLineRefs"
          class="block origin-bottom will-change-[transform,opacity,filter]"
        >
          {{ line }}
        </span>
      </h2>
    </div>
  </section>
</template>

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

gsap.registerPlugin(ScrollTrigger);

const { t } = useI18n();

const parallaxSectionRef = ref<HTMLElement | null>(null);
const imageRef = ref<HTMLImageElement | null>(null);
const titleRef = ref<HTMLElement | null>(null);
const titleLineRefs = ref<HTMLElement[]>([]);

let ctx: gsap.Context | null = null;

const titleLines = [
  t("Unlimited Breakfast"),
  t("As you finish"),
  t("Ask For More"),
];

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

  if (!parallaxSectionRef.value || !imageRef.value || !titleRef.value) return;

  const section = parallaxSectionRef.value;
  const image = imageRef.value;
  const title = titleRef.value;
  const titleLines = titleLineRefs.value;

  ctx = gsap.context(() => {
    gsap.fromTo(
      image,
      {
        yPercent: -10,
        scale: 1.14,
      },
      {
        yPercent: 10,
        scale: 1.04,
        ease: "none",
        scrollTrigger: {
          trigger: section,
          start: "top bottom",
          end: "bottom top",
          scrub: 1.8,
          invalidateOnRefresh: true,
        },
      },
    );

    const titleTl = gsap.timeline({
      scrollTrigger: {
        trigger: section,
        start: "top 72%",
        end: "center 45%",
        scrub: 1.4,
        invalidateOnRefresh: true,
      },
    });

    titleTl.fromTo(
      titleLines,
      {
        y: 72,
        opacity: 0,
        rotateX: 38,
        scale: 0.92,
        filter: "blur(10px)",
      },
      {
        y: 0,
        opacity: 1,
        rotateX: 0,
        scale: 1,
        filter: "blur(0px)",
        stagger: 0.28,
        ease: "power4.out",
      },
    );

    gsap.to(title, {
      y: -26,
      scale: 1.015,
      ease: "none",
      scrollTrigger: {
        trigger: section,
        start: "center center",
        end: "bottom top",
        scrub: 1.6,
        invalidateOnRefresh: true,
      },
    });
  }, section);
});

onBeforeUnmount(() => {
  ctx?.revert();
  ctx = null;
});
</script>
