<template>
  <div class="min-h-screen bg-bg text-text flex items-center justify-center px-4">
    <div class="max-w-md text-center">
      <p class="text-6xl font-extrabold text-accent mb-4">{{ error.statusCode }}</p>
      <h1 class="text-2xl font-bold mb-3">
        {{ error.statusCode === 404 ? 'Seite nicht gefunden' : 'Ein Fehler ist aufgetreten' }}
      </h1>
      <p class="text-text-muted mb-8">
        {{ error.statusCode === 404
          ? 'Die angeforderte Seite existiert nicht. Vielleicht wurde sie verschoben oder gelöscht.'
          : 'Es ist ein unerwarteter Fehler aufgetreten. Bitte versuchen Sie es später erneut.'
        }}
      </p>
      <NuxtLink to="/" class="btn-primary">
        Zurück zur Startseite
      </NuxtLink>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { NuxtError } from "#app";

const props = defineProps<{ error: NuxtError }>();

useHead({
  title: `${props.error.statusCode} – HMS Licht & Ton`,
  meta: [
    { name: "robots", content: "noindex, nofollow, noarchive, nosnippet" },
  ],
});
</script>
