<template>
  <div
    class="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center p-6 transition-colors duration-300">
    <div class="w-full max-w-2xl animate-[fadeInUp_0.6s_ease-out]">

      <header class="text-center mb-12">
        <h1 class="text-4xl md:text-5xl font-extrabold text-gray-900 dark:text-white mb-4 tracking-tight">
          Academic Management System
        </h1>
        <p class="text-lg text-gray-600 dark:text-gray-400 max-w-md mx-auto">
          Streamline your educational workflow, manage student records, and oversee courses in one place.
        </p>
      </header>

      <nav class="grid grid-cols-1 md:grid-cols-2 gap-6">

        <nuxt-link to="/auth/login"
          class="group p-8 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
          <div class="text-3xl mb-4 group-hover:scale-110 transition-transform">🔐</div>
          <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-2">Access Portal</h2>
          <p class="text-sm text-gray-500 dark:text-gray-400">Sign in to manage your personalized dashboard and academic
            data.</p>
        </nuxt-link>

        <nuxt-link to="/auth-test"
          class="group p-8 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
          <div class="text-3xl mb-4 group-hover:scale-110 transition-transform">🛠️</div>
          <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-2">System Test</h2>
          <p class="text-sm text-gray-500 dark:text-gray-400">Verify API connections and authentication state
            persistence.</p>
        </nuxt-link>

      </nav>

      <footer class="mt-16 text-center">
        <div
          class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-800 text-xs font-medium text-gray-600 dark:text-gray-400">
          <span class="relative flex h-2 w-2">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
          </span>
          System Operational
        </div>
      </footer>
    </div>
  </div>
</template>