<template>
  <div class="min-h-screen bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div class="mb-6">
        <h1 class="text-3xl font-display font-bold text-gray-900">Inhalte verwalten</h1>
        <p class="mt-1 text-sm text-gray-500">Redaktionelle Inhalte der Website bearbeiten</p>
      </div>

      <!-- Tabs -->
      <div class="border-b border-gray-200 mb-6">
        <nav class="-mb-px flex space-x-8 overflow-x-auto" aria-label="Tabs">
          <button
            v-for="tab in tabs"
            :key="tab.id"
            class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
            :class="activeTab === tab.id
              ? 'border-primary-600 text-primary-600'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
            @click="activeTab = tab.id"
          >
            {{ tab.label }}
          </button>
        </nav>
      </div>

      <!-- Tab Content -->
      <div>
        <CmsUeberUns v-if="activeTab === 'ueber-uns'" />
        <CmsGeschichte v-if="activeTab === 'geschichte'" />
        <CmsTtRegeln v-if="activeTab === 'tt-regeln'" />
        <CmsSatzung v-if="activeTab === 'satzung'" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CmsUeberUns from '~/components/cms/CmsUeberUns.vue'
import CmsGeschichte from '~/components/cms/CmsGeschichte.vue'
import CmsTtRegeln from '~/components/cms/CmsTtRegeln.vue'
import CmsSatzung from '~/components/cms/CmsSatzung.vue'

definePageMeta({
  middleware: 'auth',
  layout: 'default'
})

useHead({
  title: 'Inhalte verwalten – CMS'
})

const activeTab = ref('ueber-uns')

const tabs = [
  { id: 'ueber-uns', label: 'Über uns' },
  { id: 'geschichte', label: 'Geschichte' },
  { id: 'tt-regeln', label: 'TT-Regeln' },
  { id: 'satzung', label: 'Satzung' }
]
</script>
