<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <?php 
 $db = \App\Core\Database::getInstance();
 $settingsStmt = $db->query(" SELECT * FROM settings");
 $allSettings = $settingsStmt->fetchAll();
 $siteSettings = [];
 foreach ($allSettings as $s) {
 $siteSettings[$s['key_name']] = $s['key_value'];
 }
 ?>
 <title><?php echo $siteSettings['institute_name'] ?? 'Smart Tuitions'; ?> - Welcome</title>
 
 <?php if(!empty($siteSettings['institute_logo'])): ?>
 <link rel="icon" type="image/x-icon" href="<?php echo url($siteSettings['institute_logo']); ?>">
 <?php endif; ?>

 <script defer src="<?php echo url('assets/vendor/alpinejs/alpine.min.js'); ?>"></script>
 <link rel="stylesheet" href="<?php echo url('assets/vendor/fontawesome/css/all.min.css'); ?>">
 <link rel="stylesheet" href="<?php echo url('assets/css/style.css'); ?>">
</head>
<body class="bg-white">
 <div class="min-h-screen bg-white flex flex-col selection:bg-blue-100 selection:text-blue-700 relative overflow-hidden">
 <!-- Enhanced Grid Pattern Background -->
 <div class="absolute inset-0 z-0 opacity-[0.05] pointer-events-none" style="background-image: linear-gradient(#475569 1px, transparent 1px), linear-gradient(90deg, #475569 1px, transparent 1px); background-size: 30px 30px;"></div>
 
 <!-- Compact Header -->
 <header class="bg-white/80 backdrop-blur-md border-b border-slate-100 sticky top-0 z-50">
 <div class="max-w-5xl mx-auto px-4 h-14 flex items-center justify-between">
 <div class="flex items-center gap-2 group cursor-default">
 <?php if(!empty($siteSettings['institute_logo'])): ?>
 <img src="<?php echo url($siteSettings['institute_logo']); ?>" alt="Logo" class="h-7 w-auto object-contain">
 <?php else: ?>
 <div class="bg-blue-600 p-1.5 rounded-lg">
 <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 <path d="M12 14l9-5-9-5-9 5 9 5z"></path>
 <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
 </svg>
 </div>
 <?php endif; ?>
 <span class="text-sm font-extrabold tracking-tight text-slate-900 truncate max-w-[150px] sm:max-w-none">
 <?php echo $siteSettings['institute_name'] ?? 'Smart Tuitions'; ?>
 </span>
 </div>
 
 <div class="flex items-center gap-3">
 <span class="text-[9px] font-bold text-slate-400 uppercase tracking-widest bg-slate-50 px-2 py-1 rounded-md border border-slate-100">Portal</span>
 </div>
 </div>
 </header>

 <!-- Main Content -->
 <main class="flex-1 flex flex-col items-center justify-center p-4 sm:p-6 z-10">
 <div class="w-full max-w-md mx-auto">
 <div class="text-center mb-10">
 <div class="inline-flex items-center gap-1.5 px-3 py-1 bg-blue-50 border border-blue-100 rounded-full text-[10px] font-bold text-blue-600 uppercase tracking-widest mb-4">
 <i class="fa-solid fa-shield-check text-[8px]"></i>
 Secure Gateway
 </div>
 <h1 class="text-2xl sm:text-3xl font-black text-slate-900 tracking-tight leading-tight mb-2">
 Education <span class="text-blue-600">Simplified.</span>
 </h1>
 <p class="text-[11px] sm:text-xs text-slate-500 font-medium px-4 leading-relaxed">
 Access your academic hub through the portals below.
 </p>
 </div>

 <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
 <!-- Admin Portal -->
 <a href="<?php echo url('/admin/login'); ?>" class="group bg-white border border-blue-600 rounded-2xl p-6 flex flex-col items-center justify-center gap-3 transition-all active:scale-[0.98]">
 <div class="w-14 h-14 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center">
 <i class="fa-solid fa-user-shield text-2xl"></i>
 </div>
 <div class="text-center">
 <h3 class="text-sm font-bold text-slate-900">Admin Portal</h3>
 <p class="text-[9px] font-black text-blue-800 uppercase mt-1">Management</p>
 </div>
 </a>

 <!-- Staff Portal -->
 <a href="<?php echo url('/staff/login'); ?>" class="group bg-white border border-purple-600 rounded-2xl p-6 flex flex-col items-center justify-center gap-3 transition-all active:scale-[0.98]">
 <div class="w-14 h-14 bg-purple-50 text-purple-600 rounded-2xl flex items-center justify-center">
 <i class="fa-solid fa-user-tie text-2xl"></i>
 </div>
 <div class="text-center">
 <h3 class="text-sm font-bold text-slate-900">Staff Panel</h3>
 <p class="text-[9px] font-black text-purple-800 uppercase mt-1">Operations</p>
 </div>
 </a>

 <!-- Student Portal -->
 <a href="<?php echo url('/login'); ?>" class="group bg-white border border-emerald-600 rounded-2xl p-6 flex flex-col items-center justify-center gap-3 transition-all active:scale-[0.98]">
 <div class="w-14 h-14 bg-emerald-50 text-emerald-600 rounded-2xl flex items-center justify-center">
 <i class="fa-solid fa-graduation-cap text-2xl"></i>
 </div>
 <div class="text-center">
 <h3 class="text-sm font-bold text-slate-900">Student Hub</h3>
 <p class="text-[9px] font-black text-emerald-800 uppercase mt-1">Learning</p>
 </div>
 </a>
 </div>

 <div class="mt-10 flex justify-center">
 <div class="flex items-center gap-2 px-4 py-2 bg-white/40 border border-slate-200/40 rounded-xl text-[9px] font-bold text-slate-400 uppercase tracking-[0.15em]">
 <i class="fa-solid fa-lock text-slate-300"></i>
 Secure Session
 </div>
 </div>
 </div>
 </main>

 <footer class="bg-white/50 py-4 border-t border-slate-200/30">
 <div class="max-w-5xl mx-auto px-4 text-center">
 <p class="text-[9px] font-bold text-slate-400 uppercase tracking-widest">
 &copy; <?php echo date('Y'); ?> <?php echo $siteSettings['institute_name'] ?? 'Smart Tuitions'; ?>.
 </p>
 </div>
 </footer>
 </div>
</body>
</html>
