<template>
  <main v-if="landingComponents" class="min-h-screen relative">
    <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';
export default {
  components: {
    HeroHome,
  },
  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>