<template>
  <main v-if="landingComponents" class="min-h-screen relative mx-4 md:mx-8">
    <template v-for="(component, index) in landingComponents" :key="`component-${component.component}-${index}`">
      <component 
        :is="component.component" 
        v-if="component" 
        v-bind="component.props" />
    </template>
    
  </main>
</template>

<script>
import { mapGetters } from 'vuex';
import HeroHome from '~/components/HeroHome.vue';
import WhatIs from '../../components/WhatIs.vue';
import SectionWithCards from '../../components/SectionWithCards.vue';
import TextWithImage from '../../components/TextWithImage.vue';
import LogosWithText from '../../components/LogosWithText.vue';

export default {
  components: {
    HeroHome,
    WhatIs,
    SectionWithCards,
    TextWithImage,
    LogosWithText
  },
  data() {
    return {
      landingComponents: []
    };
  },
  computed: {
    ...mapGetters(['langcode']),
  },
  async created() {
    const langcode = this.$route.params.langcode;
    try {
      const res = await import(`~/data/${langcode}/index.json`);
      this.landingComponents = res.default;
    } catch (err) {
      console.error('Error al cargar contenido:', err);
      this.landingComponents = [
        {
          component: 'ErrorComponent',
          props: {
            message: 'Contenido no disponible',
          },
        },
      ];
    }
  }
}
</script>