<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"
      :component-data="props.components?.background"
      gradient-class="bg-gradient-to-b from-[#100d0f]/0 to-[#100d0f]"
    />
    <div
      class="relative h-full flex flex-col items-center justify-center gap-4"
    >
      <WidgetsMainTitle
        v-if="props.components.mainTitle"
        :component-data="props.components.mainTitle"
        class="w-[355px] lg:w-[944px]"
      />
      <WidgetsDescription
        v-if="props.components.description"
        :component-data="props.components.description"
      />
      <WidgetsVideoPlay
        v-if="props.components.videoPlay"
        :component-data="props.components.videoPlay"
      />
    </div>
  </section>
</template>
