// src/views/NotFoundView.vue
<template>
  <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8 text-center bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl">
      <div class="text-9xl font-extrabold text-blue-600 dark:text-blue-400 animate-bounce">404</div>
      <h1 class="mt-6 text-3xl font-extrabold text-gray-900 dark:text-white">
        {{ appStore.checkLang.isTh ? 'ไม่พบหน้าดังกล่าว' : 'Page Not Found' }}
      </h1>
      <p class="mt-2 text-lg text-gray-600 dark:text-gray-300">
        {{ appStore.checkLang.isTh ? 'ขออภัย, เราไม่พบหน้าที่คุณกำลังมองหา' : 'Sorry, we couldn\'t find the page you\'re looking for.' }}
      </p>
      <div class="mt-6">
        <router-link
            to="/"
            class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
        >
          <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
          </svg>
          {{ appStore.checkLang.isTh ? 'กลับหน้าหลัก' : 'Go to Homepage' }}
        </router-link>
      </div>
      <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
        {{ appStore.checkLang.isTh ? 'หากคุณคิดว่านี่เป็นข้อผิดพลาด โปรดติดต่อผู้ดูแลระบบ' : 'If you believe this is an error, please contact the administrator.' }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { useAppStore } from '@/stores/app'; // Assuming you have appStore for language
import { RouterLink } from 'vue-router'; // Required for <router-link>

const appStore = useAppStore(); // Initialize appStore
</script>

<style scoped>
/* Optional: Add custom keyframes for bounce animation if not using utility classes directly */
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
.animate-bounce {
  animation: bounce 1s infinite;
}

/* Optional: Dark mode adjustments */
.dark\:bg-gray-900 { background-color: #1a202c; }
.dark\:bg-gray-800 { background-color: #2d3748; }
.dark\:text-blue-400 { color: #63b3ed; }
.dark\:text-white { color: #ffffff; }
.dark\:text-gray-300 { color: #cbd5e0; }
.dark\:text-gray-400 { color: #a0aec0; }
</style>