<template>
  <div
    class="min-h-[calc(100dvh-4em)] flex items-center justify-center p-4 bg-gray-100 dark:bg-dark-primary"
  >
    <div
      class="max-w-md w-full bg-white dark:bg-dark-primary-800 rounded-2xl shadow-xl p-8 text-center border border-gray-200 dark:border-dark-primary-600"
    >
      <!-- آیکون بزرگ -->
      <div class="mb-10">
        <div
          class="w-40 h-40 mx-auto bg-red-50 dark:bg-dark-primary-700 rounded-full flex items-center justify-center shadow-lg"
        >
          <svg
            class="w-32 h-32 text-red-600 dark:text-red-500"
            fill="currentColor"
            viewBox="0 0 20 20"
          >
            <path
              fill-rule="evenodd"
              d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
      </div>

      <!-- عنوان -->
      <h2
        class="text-2xl font-semibold text-gray-800 dark:text-dark-primary-100 mb-2"
      >
        دسترسی غیرمجاز
      </h2>

      <!-- متن -->
      <div class="mb-6">
        <p class="text-gray-600 dark:text-dark-primary-300 text-lg mb-2">
          شما مجوز دسترسی به این صفحه را ندارید
        </p>
        <p class="text-gray-700 dark:text-dark-primary-200 font-medium">
            لطفا برای ادامه، ارتقاء دسترسی دهید
        </p>
      </div>

      <!-- دکمه اصلی -->
      <!-- <div class="mb-8">
        <button
          @click="goToDashboard"
          class="w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-4 rounded-xl shadow-lg hover:shadow-xl transition-all duration-200"
        >
          بازگشت به داشبورد
        </button>
      </div> -->
      <div class="mb-8">
        <button
          @click="goBack"
          class="w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-4 rounded-xl shadow-lg hover:shadow-xl transition-all duration-200"
        >
          بازگشت به صفحه قبل
        </button>
      </div>

      <!-- لینک‌های دیگر -->
      <div class="space-y-3">
        <!-- <a
          href="/login"
          class="block text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 hover:bg-primary-50 dark:hover:bg-dark-primary-700 py-3 rounded-lg transition duration-200 font-medium"
        >
          ثبت‌نام
        </a> -->
        <a
          @click.prevent="goToLogin"
          class="block text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 hover:bg-primary-50 dark:hover:bg-dark-primary-700 py-3 rounded-lg transition duration-200 font-medium"
        >
          ورود ، ثبت‌نام
        </a>
        <a
          href="/contact"
          class="block text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 hover:bg-primary-50 dark:hover:bg-dark-primary-700 py-3 rounded-lg transition duration-200 font-medium"
        >
          تماس با ما
        </a>

        <a
          href="/about"
          class="block text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 hover:bg-primary-50 dark:hover:bg-dark-primary-700 py-3 rounded-lg transition duration-200 font-medium"
        >
          درباره ما
        </a>
      </div>

      <!-- پیام پایین -->
      <div
        class="mt-6 pt-6 border-t border-gray-200 dark:border-dark-primary-600"
      >
        <p class="text-gray-500 dark:text-dark-primary-400 text-sm">
          کد خطا: 403 • دسترسی ممنوع
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
definePageMeta({ layout: "login-layout" });

const router = useRouter();

const goBack = () => {
  router.back();
};

// const goToDashboard = () => {
//         navigateTo({
// name: "DashboardBasePage",
// });
// };
const goToLogin = () => {
  navigateTo("/login");
};
</script>

<style scoped>
/* بدون استایل اضافی */
</style>
