<script setup>
import { useRoute } from "vue-router";
import { tenantPath } from "../../utils/tenant";

const route = useRoute();
const tenantRoute = (path) => tenantPath(path, route);
</script>

<template>
  <div class="min-h-screen flex items-center justify-center bg-slate-50">
    <div class="text-center">
      <div class="mb-6">
        <!-- Use an image or illustration here -->
        <i class="pi pi-compass text-6xl text-slate-300"></i>
      </div>
      <h1 class="text-4xl font-bold text-slate-900 mb-4">404</h1>
      <p class="text-xl text-slate-600 mb-8">抱歉，您访问的页面走丢了。</p>
      <div class="flex justify-center gap-4">
        <router-link
          :to="tenantRoute('/')"
          class="px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
          >返回首页</router-link
        >
        <button
          @click="$router.back()"
          class="px-6 py-3 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 transition-colors"
        >
          返回上一页
        </button>
      </div>
    </div>
  </div>
</template>
