<template>
  <div class="min-h-full py-16 bg-gray-50">
    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="bg-white rounded-xl shadow-lg p-8 text-center">
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
          <svg
            class="w-8 h-8 text-green-600"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M5 13l4 4L19 7"
            />
          </svg>
        </div>
        
        <h1 class="text-3xl font-display font-bold text-gray-900 mb-4">
          {{ alreadyConfirmed ? 'Bereits bestätigt' : 'Anmeldung bestätigt!' }}
        </h1>
        
        <p class="text-lg text-gray-600 mb-8">
          {{ alreadyConfirmed 
            ? 'Ihre Newsletter-Anmeldung wurde bereits bestätigt.' 
            : 'Vielen Dank! Ihre Newsletter-Anmeldung wurde erfolgreich bestätigt. Sie erhalten ab sofort unseren Newsletter.' }}
        </p>
        
        <NuxtLink
          to="/"
          class="inline-block px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg hover:bg-primary-700 transition-colors"
        >
          Zur Startseite
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup>
const route = useRoute()
const alreadyConfirmed = route.query.already === 'true'

useHead({
  title: 'Newsletter bestätigt - Harheimer TC',
})
</script>

