<script setup lang="ts">
interface Props {
  components: Record<string, any>
}

const props = defineProps<Props>()
</script>

<template>
  <section class="relative h-[640px] lg:h-[1000px]">
    <WidgetsBackground
      v-if="props.components?.background"
      :resources-data="props.components?.background.groups[0]"
    />
    <div
      class="relative h-full flex flex-col items-center justify-center gap-4"
    >
      <WidgetsSubTitle
        v-if="props.components.subTitle"
        :resources-data="props.components.subTitle.groups[0]"
        class="text-[24px] font-[500] text-[#ffffff] leading-[34px]"
      />
      <WidgetsMainTitle
        v-if="props.components.mainTitle"
        :resources-data="props.components.cardMainTitle.groups[0]"
        class="text-[50px] font-[700] text-[#c7a28b] leading-[70px]"
      />
      <WidgetsDescription
        v-if="props.components.description"
        :resources-data="props.components.description.groups[0]"
        class="text-[20px] font-[500] text-white/70 leading-[30px]"
      />
      <WidgetsButtonList
        v-if="props.components.buttonList"
        :groups-data="props.components.buttonList"
      />
    </div>
  </section>
</template>
