<template>
  <section
    id="home"
    class="relative min-h-full flex items-center justify-center overflow-hidden bg-gradient-to-br from-gray-50 to-gray-100"
  >
    <!-- Decorative Elements -->
    <div class="absolute inset-0 z-0">
      <div class="absolute top-0 right-0 w-96 h-96 bg-primary-200/30 rounded-full blur-3xl" />
      <div class="absolute bottom-0 left-0 w-96 h-96 bg-gray-300/30 rounded-full blur-3xl" />
      <!-- Hintergrundbild -->
      <div 
        class="absolute inset-0 opacity-10"
        style="background-image: url('/images/club_about_us.png'); background-size: cover; background-position: center;"
      />
    </div>

    <!-- Content -->
    <div class="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-8">
      <div class="text-center">
        <h1 class="text-5xl sm:text-6xl lg:text-7xl font-display font-bold text-gray-900 mb-6 leading-tight animate-fade-in">
          Willkommen beim<br>
          <span class="text-primary-600">Harheimer TC</span>
        </h1>

        <p class="text-xl sm:text-2xl text-gray-700 mb-8 max-w-3xl mx-auto animate-fade-in-delay-1">
          Tradition trifft Moderne - Ihr Tischtennisverein in Frankfurt-Harheim seit {{ yearsSinceFounding }} Jahren
        </p>
      </div>
    </div>
  </section>
</template>

<script setup>
const foundingYear = 1954
const yearsSinceFounding = new Date().getFullYear() - foundingYear
</script>

<style scoped>
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out;
}

.animate-fade-in-delay-1 {
  animation: fadeIn 0.8s ease-out 0.2s both;
}

.animate-fade-in-delay-2 {
  animation: fadeIn 0.8s ease-out 0.4s both;
}
</style>

