<script setup>
defineProps({
  eyebrow: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    default: "",
  },
  image: {
    type: String,
    default: "/images/banner-bg.jpg",
  },
  routes: {
    type: Array,
    default: () => [],
  },
});
</script>

<template>
  <section
    class="relative overflow-hidden bg-black bg-cover bg-center text-white"
    :style="{ backgroundImage: `url(${image})` }"
  >
    <div class="absolute inset-0 bg-black/55" />
    <div class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-white to-transparent" />
    <div class="container-gm relative z-10 py-24 md:py-32">
      <p
        v-if="eyebrow"
        class="text-sm uppercase tracking-[0.34em] text-white/65"
        data-hero-reveal
      >
        {{ eyebrow }}
      </p>
      <h1 class="mt-5 max-w-4xl text-balance text-[34px] font-semibold leading-tight md:text-[42px]" data-hero-reveal>
        {{ title }}
      </h1>
      <p
        v-if="description"
        class="mt-6 max-w-2xl text-base leading-8 text-white/78 md:text-lg"
        data-hero-reveal
      >
        {{ description }}
      </p>
      <div v-if="routes.length" class="mt-8" data-hero-reveal>
        <SectionRouteLinks :routes="routes" light />
      </div>
    </div>
  </section>
</template>
