<template>
  <section class="py-16 sm:py-20 bg-gradient-to-b from-white to-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
        <!-- Mitglied werden -->
        <NuxtLink
          to="/mitgliedschaft"
          class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all border-2 border-transparent hover:border-primary-600"
        >
          <div class="flex items-center mb-4">
            <div class="w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center group-hover:bg-primary-600 transition-colors">
              <UserPlus
                :size="32"
                class="text-primary-600 group-hover:text-white transition-colors"
              />
            </div>
            <h3 class="ml-4 text-2xl font-display font-bold text-gray-900">
              Mitglied werden
            </h3>
          </div>
          <p class="text-gray-600 mb-4">
            Werden Sie Teil unserer Tischtennisfamilie und profitieren Sie von regelmäßigem Training, 
            Wettkämpfen und einer tollen Gemeinschaft.
          </p>
          <div class="flex items-center text-primary-600 font-semibold group-hover:translate-x-2 transition-transform">
            Mehr erfahren
            <ArrowRight
              :size="20"
              class="ml-2"
            />
          </div>
        </NuxtLink>

        <!-- Kontakt aufnehmen -->
        <NuxtLink
          to="/kontakt"
          class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all border-2 border-transparent hover:border-primary-600"
        >
          <div class="flex items-center mb-4">
            <div class="w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center group-hover:bg-primary-600 transition-colors">
              <Mail
                :size="32"
                class="text-primary-600 group-hover:text-white transition-colors"
              />
            </div>
            <h3 class="ml-4 text-2xl font-display font-bold text-gray-900">
              Kontakt aufnehmen
            </h3>
          </div>
          <p class="text-gray-600 mb-4">
            Haben Sie Fragen oder möchten ein kostenloses Probetraining vereinbaren? 
            Wir freuen uns auf Ihre Nachricht!
          </p>
          <div class="flex items-center text-primary-600 font-semibold group-hover:translate-x-2 transition-transform">
            Jetzt kontaktieren
            <ArrowRight
              :size="20"
              class="ml-2"
            />
          </div>
        </NuxtLink>
      </div>
    </div>
  </section>
</template>

<script setup>
import { UserPlus, Mail, ArrowRight } from 'lucide-vue-next'
</script>

