<script setup>
import { ctaSection as defaultCta } from "~/data/navigation";

defineProps({
  cta: {
    type: Object,
    default: () => defaultCta,
  },
  sectionId: {
    type: String,
    default: "consult",
  },
});
</script>

<template>
  <section :id="sectionId" class="relative overflow-hidden bg-gm-green py-20 text-white">
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.18),transparent_40%)]" />
    <div data-cta-orbit class="absolute left-[8%] right-[8%] top-10 h-px bg-white/30" />
    <div data-cta-orbit class="absolute bottom-10 left-[14%] right-[14%] h-px bg-white/20" />
    <div class="container-gm relative flex flex-col items-center justify-center text-center" data-reveal>
      <p class="text-balance text-3xl font-semibold leading-tight md:text-[42px]">
        {{ cta.title }}
      </p>
      <p v-if="cta.subtitle" class="mt-4 max-w-2xl text-base leading-8 text-white/80">
        {{ cta.subtitle }}
      </p>
      <NuxtLink
        :to="cta.href"
        class="gm-btn gm-btn-secondary mt-8 px-8 text-base font-semibold"
      >
        {{ cta.button }}
      </NuxtLink>
      <div class="mt-6">
        <SectionRouteLinks :routes="cta.routes" light />
      </div>
    </div>
  </section>
</template>
