<script setup>
import { homeHero as defaultHero } from "~/data/home";

defineProps({
  hero: {
    type: Object,
    default: () => defaultHero,
  },
});
</script>

<template>
  <section
    class="relative flex min-h-[calc(100vh-var(--page-offset,134px)-40px)] items-center overflow-hidden bg-black pb-14"
    :style="{ backgroundImage: `url(${hero.backgroundImage})` }"
  >
    <div class="absolute inset-0 bg-black/45" />
    <div class="absolute inset-x-0 bottom-0 z-10 h-28 bg-gradient-to-t from-white to-transparent" />
    <div class="container-gm relative z-10 py-20 text-center text-white">
      <p class="text-sm uppercase tracking-[0.35em] text-white/70" data-hero-reveal>
        {{ hero.eyebrow }}
      </p>
      <h1 class="mx-auto mt-6 max-w-4xl text-balance text-4xl font-semibold leading-tight md:text-6xl">
        <span data-hero-reveal>{{ hero.title }}</span>
      </h1>
      <p class="mx-auto mt-6 max-w-2xl text-balance text-base text-white/80 md:text-lg" data-hero-reveal>
        {{ hero.description }}
      </p>
      <div class="mt-10 flex flex-wrap items-center justify-center gap-4" data-hero-reveal>
        <NuxtLink :to="hero.primaryCta.href" class="gm-btn bg-gm-green px-8 text-white hover:scale-95 hover:bg-gm-green-dark">
          {{ hero.primaryCta.label }}
        </NuxtLink>
        <NuxtLink :to="hero.secondaryCta.href" class="gm-btn border border-white/35 bg-white/10 px-8 text-white hover:border-white hover:bg-white/20">
          {{ hero.secondaryCta.label }}
        </NuxtLink>
      </div>
      <div class="mx-auto mt-14 grid max-w-3xl gap-3 rounded-3xl border border-white/15 bg-white/10 p-3 backdrop-blur md:grid-cols-3" data-hero-reveal>
        <div
          v-for="metric in hero.metrics"
          :key="metric.label"
          class="rounded-2xl bg-black/20 px-4 py-4"
        >
          <p class="text-2xl font-semibold text-white">{{ metric.value }}</p>
          <p class="mt-1 text-xs text-white/65">{{ metric.label }}</p>
        </div>
      </div>
    </div>
  </section>
</template>
