<template>
  <div class="flex h-full flex-col items-center justify-center">
    <div class="text-center">
      <h1 class="text-6xl font-bold text-ink-gray-3 mb-4">404</h1>
      <h2 class="text-2xl font-semibold text-ink-gray-9 mb-2">Page Not Found</h2>
      <p class="text-ink-gray-5 mb-6">
        The page you're looking for doesn't exist or has been moved.
      </p>
      <Button variant="solid" @click="router.push({ name: 'Sites' })">
        Go to Sites
      </Button>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { Button } from 'frappe-ui'

const router = useRouter()
</script>
