<template>
  <div class="min-h-full">
    <component
      :is="getComponentForSection(section.id)"
      v-for="section in enabledSections"
      :key="section.id"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import Hero from '~/components/Hero.vue'
import HomeTermine from '~/components/HomeTermine.vue'
import Spielplan from '~/components/Spielplan.vue'
import PublicNews from '~/components/PublicNews.vue'
import HomeActions from '~/components/HomeActions.vue'

const { data: config } = await useFetch('/api/config')

// Standard-Reihenfolge, falls Config nicht vorhanden
const defaultSections = [
  { id: 'banner', enabled: true },
  { id: 'termine', enabled: true },
  { id: 'spiele', enabled: true },
  { id: 'aktuelles', enabled: true },
  { id: 'kontakt', enabled: true }
]

// Lade Sections aus Config oder verwende Standard
const sections = computed(() => {
  if (config.value?.homepage?.sections && Array.isArray(config.value.homepage.sections)) {
    return config.value.homepage.sections
  }
  return defaultSections
})

// Filtere nur aktivierte Sections
const enabledSections = computed(() => {
  return sections.value.filter(section => section.enabled !== false)
})

// Mapping von Section-ID zu Komponente
const componentMap = {
  banner: Hero,
  termine: HomeTermine,
  spiele: Spielplan,
  aktuelles: PublicNews,
  kontakt: HomeActions
}

function getComponentForSection(sectionId) {
  return componentMap[sectionId] || null
}
</script>
