<script setup lang="ts">
const scrollToContactSection = () => {
  const contactSection = document.getElementById("contact");
  contactSection?.scrollIntoView({ behavior: "smooth", block: "start" });
};
</script>
<template>
  <section id="goals" class="py-section bg-gradient-odd">
    <div class="container mx-auto px-4">
      <div
        class="relative mx-auto max-w-[1130px] rounded-2xl py-[56px] text-center"
      >
        <div class="contnent relative z-[3] px-4">
          <h2
            class="dark-text-gradient px-5 pb-[2rem] text-center text-[1.75rem] font-bold sm:text-[2rem]"
          >
            {{ $t("goals.title") }}
          </h2>
          <button
            class="ws-gradient-border mx-auto block w-full max-w-[568px] cursor-pointer py-4 text-center"
            @click="scrollToContactSection"
          >
            {{ $t("goals.button") }}
          </button>
        </div>
        <div
          class="overlay bg-surface-background/90 absolute inset-0 z-[2] h-full w-full rounded-2xl"
        />
        <video
          autoplay
          muted
          loop
          playsinline
          class="absolute inset-0 z-[1] h-full w-full rounded-2xl object-cover"
        >
          <source src="/videos/blog-hero.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </div>
    </div>
  </section>
</template>
<style scoped></style>
