<template>
  <section
    ref="bannerSectionRef"
    class="relative isolate overflow-hidden px-4 py-8 md:px-8 bg-light"
  >
    <div
      class="relative mx-auto max-w-7xl overflow-hidden py-10 text-dark md:py-20"
    >
      <div
        class="relative z-10 grid items-center gap-10 md:grid-cols-[0.9fr_1.1fr]"
      >
        <div
          class="relative mx-auto h-[468px] md:h-[628px] min-h-[420px] w-full max-w-[420px] overflow-hidden rounded-t-full rounded-b-[2rem] bg-neutral-100 shadow-xl"
        >
          <img
            ref="imageRef"
            src="/images/banner/1.webp"
            alt="Banner image"
            class="absolute left-0 -top-28 md:-top-44 h-[135%] w-[115%] max-w-none object-cover object-center will-change-transform"
          />
        </div>

        <div class="relative">
          <h2
            class="max-w-3xl text-4xl font-black leading-[0.95] tracking-tight md:text-5xl"
          >
            <span v-html="section.title" />
          </h2>

          <p class="mt-8 max-w-xl text-base leading-8 text-black/60 md:text-lg">
            {{ section.description }}
          </p>

          <div class="mt-9 flex flex-wrap items-center gap-4">
            <Button :button="section.button" />
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref } from "vue";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Button from "@/components/Button.vue";

gsap.registerPlugin(ScrollTrigger);

defineProps<{
  section: {
    title: string;
    description: string;
    button: {
      enabled: boolean;
      label: string;
      url: string;
      external: boolean;
      color?: null;
      icon?: {
        name?:
          | "mail"
          | "document"
          | "code"
          | "external"
          | "arrowRight"
          | "arrowUp"
          | "none";
        position?: "left" | "right" | "center";
      };
    };
  };
}>();

const bannerSectionRef = ref<HTMLElement | null>(null);
const imageRef = ref<HTMLImageElement | null>(null);

let ctx: gsap.Context | null = null;

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

  if (!bannerSectionRef.value || !imageRef.value) return;

  const section = bannerSectionRef.value;
  const image = imageRef.value;

  ctx = gsap.context(() => {
    gsap.set(image, {
      xPercent: -10,
      y: -90,
      scale: 1.08,
      transformOrigin: "center center",
    });

    gsap.to(image, {
      y: 90,
      ease: "none",
      scrollTrigger: {
        trigger: section,
        start: "top bottom",
        end: "bottom top",
        scrub: true,
        invalidateOnRefresh: true,
      },
    });
  }, section);
});

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