<template>
  <section class="py-16 sm:py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-12">
        <h2 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-4">
          Kommende Termine
        </h2>
        <div class="w-24 h-1 bg-primary-600 mx-auto mb-6" />
      </div>

      <div class="max-w-4xl mx-auto">
        <TermineVorschau />
      </div>

      <div class="text-center mt-8">
        <NuxtLink
          to="/termine"
          class="inline-flex items-center px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"
        >
          Alle Termine anzeigen
          <ArrowRight
            :size="20"
            class="ml-2"
          />
        </NuxtLink>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ArrowRight } from 'lucide-vue-next'
import TermineVorschau from './TermineVorschau.vue'
</script>

