<script setup lang="ts">
import { useWindowScroll } from "@vueuse/core";

const scrollToContactSection = () => {
  const contactSection = document.getElementById("contact");
  contactSection?.scrollIntoView({ behavior: "smooth", block: "start" });
};
let isScrolled = ref<boolean>();
const { y } = useWindowScroll();
if (import.meta.browser) {
  isScrolled = computed(() => y.value > window.innerHeight);
}

const bottomOffset = ref("1rem");
let observer: IntersectionObserver | null = null;

onMounted(() => {
  const footer = document.querySelector("footer");
  if (!footer) return;

  observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        bottomOffset.value = entry.isIntersecting
          ? `${footer.clientHeight + 10}px`
          : "1rem";
      });
    },
    { root: null, threshold: 0 },
  );

  observer.observe(footer);
});

onBeforeUnmount(() => {
  if (observer) observer.disconnect();
});
</script>

<template>
  <div
    class="ws-gradient-border-animated fixed bottom-0 left-1/2 z-40 flex h-[60px] w-[300px] -translate-x-1/2 items-center justify-center transition-all duration-500 ease-in-out sm:w-[330px] rtl:w-[280px]"
    :class="
      isScrolled ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'
    "
    :style="{ bottom: bottomOffset }"
  >
    <div
      class="container mx-auto flex items-center justify-center gap-3 px-4 text-sm sm:gap-4 sm:text-base"
    >
      <p>{{ $t("getStarted.text") }}</p>
      <button
        :aria-label="$t('ariaLabels.getStartedBtn')"
        class="bg-accent text-foreground w-fit cursor-pointer rounded-full px-4 py-2 text-sm sm:text-base"
        @click="scrollToContactSection"
      >
        {{ $t("getStarted.button") }}
      </button>
    </div>
  </div>
</template>
