<script setup>
import { RouterLink } from 'vue-router'
</script>

<template>
  <section class="min-h-[60vh] flex items-center justify-center">
    <div
      class="text-center px-6 py-10 sm:px-8 sm:py-12 rounded-xl border border-neutral-200/30 bg-white/60 dark:bg-neutral-900/60 backdrop-blur-md shadow-sm space-y-4"
    >
      <div class="flex items-center justify-center gap-3">
        <span
          class="inline-flex items-center justify-center rounded-full bg-orange-600/10 text-orange-600 dark:text-orange-400 w-12 h-12 text-xl font-bold"
          >404</span
        >
        <h1 class="text-2xl sm:text-3xl font-bold tracking-tight">{{ $t('message.404.title') }}</h1>
      </div>

      <p class="text-neutral-600 dark:text-neutral-300 max-w-prose mx-auto">
        {{ $t('message.404.description') }}
      </p>
      <div class="flex flex-wrap items-center justify-center gap-3 pt-2">
        <RouterLink
          to="/"
          class="inline-flex px-4 py-2 rounded-md bg-orange-600 hover:bg-orange-500 text-white text-sm font-medium"
        >
          {{ $t('message.404.return_home') }}
        </RouterLink>
        <RouterLink
          to="/servers"
          class="inline-flex px-4 py-2 rounded-md border border-neutral-300/60 dark:border-neutral-700/60 text-sm font-medium text-neutral-800 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800"
        >
          {{ $t('message.home.hero.browse_servers') }}
        </RouterLink>
      </div>
    </div>
  </section>
</template>
