<template>
  <div v-if="data?.components && data.components.length" class="relative">
    <template
      v-for="(component, idx) in data.components"
      :key="component.id || `${component.__component}-${idx}`"
    >
      <section :data-section="component.__component">
        <HeroPromo
          v-if="component.__component === 'sections.hero'"
          :section="component"
        />
        <SectionsHighlight
          v-if="component.__component === 'sections.highlight'"
          :section="component"
        />
        <SectionsBanner
          v-if="component.__component === 'sections.banner'"
          :section="component"
        />
        <SectionsParallax
          v-if="component.__component === 'sections.parallax'"
          :section="component"
        />
        <SectionsOverview
          v-if="component.__component === 'sections.overview'"
          :section="component"
        />
        <SectionsCTA
          v-if="component.__component === 'sections.cta'"
          :section="component"
        />
        <SectionsGallery
          v-if="component.__component === 'sections.gallery'"
          :section="component"
        />
        <SectionsBreakfastEn
          v-if="component.__component === 'sections.breakfast'"
          :section="component"
        />
        <SectionsTestimonials
          v-if="component.__component === 'sections.testimonials'"
          :section="component"
        />
        <SectionsContact
          v-if="component.__component === 'sections.contact'"
          :section="component"
          class="px-6 py-28 lg:h-dvh min-h-fit"
        />
      </section>
    </template>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from "vue";
import { usePageData } from "@/composables/usePageData";
import { useMeta } from "@/composables/useMeta";

type ComponentSlice = Record<string, any> & {
  __component?: string;
  id?: string | number;
};

type Data = {
  components?: Array<ComponentSlice>;
  meta?: Record<string, any>;
};

const data = usePageData<Data>("home", "en");
useMeta(data.value?.meta ?? {}, "en");
</script>
