<template>
  <section
    :id="id"
    class="relative flex flex-col p-4 md:p-12 mb-8 items-center justify-center gap-4 md:gap-8 text-center h-dvh lg:h-[85dvh] bg-gradient-conic-hero rounded-3xl">

    <img 
      v-if="shapes.shape_1" 
      :src="`/img/${shapes.shape_1}`" 
      alt="hero background shape left" 
      class="absolute left-0 bottom-0 h-60 md:h-25.6" >
    <img 
      v-if="shapes.shape_2" 
      :src="`/img/${shapes.shape_2}`" 
      alt="hero background shape right" 
      class="absolute right-0 top-0 h-60 md:h-25.6" >

    <div class=" flex flex-col items-center z-10 gap-6">
      <h1 class="text-32 md:text-40 lg:text-5xl font-bold max-w-4xl">{{ title }}</h1>
      <p class="text-lg md:text-xl lg:text-2xl max-w-3xl">{{ subtitle }}</p>
      <NuxtLink v-if="button" :to="button.link">
        <ButtonCTA :color="button.color" class="uppercase mt-6">
          {{ button.label }}
        </ButtonCTA>
      </NuxtLink>
    </div>
  </section>
</template>

<script>

export default {
  props: {
    id: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    subtitle: {
      type: String,
      default: "",
    },
    button: {
      type: Object,
      default: () => ({
        label: "",
        link: "",
      }),
    },
    shapes: {
      type: Object,
      default: () => ({
        shape_1: "",
        shape_2: "",
      }),
    },
  },
  
};
</script>