<template>
  <main v-if="landingComponents" class="min-h-screen relative 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>
    <!-- <div class="fixed bottom-0 right-0 z-50 p-2">
      <ButtonCTA @click="changeLang" >
        Cambiar Idioma
      </ButtonCTA>
    </div> -->
  </main>
</template>

<script>
import { mapGetters, mapActions } 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',
          },
        },
      ];
    }
  },
  // methods: {
  //   ...mapActions(['setLangcode']),
  //   changeLang() {
  //     const newLang = this.langcode === 'es' ? 'cat' : 'es';
  //     this.setLangcode(newLang);
  //     this.$router.push({ path: `/${newLang}` });
  //   }
  // }
}
</script>