<?php
session_start();
// Si el usuario ya está logueado, lo mandamos directo al inicio
if (isset($_SESSION['user_id'])) {
    header("Location: index.php");
    exit;
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iniciar Sesión - Edujoam</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root { --primary-color: #0d6efd; }
        body { 
            background-color: #f4f7f6; 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            height: 100vh;
            display: flex;
            align-items: center;
        }
        .login-container { 
            max-width: 420px; 
            width: 90%;
            margin: auto; 
            background: white; 
            padding: 40px; 
            border-radius: 20px; 
            box-shadow: 0 15px 35px rgba(0,0,0,0.1); 
        }
        .form-control { 
            border-radius: 12px; 
            padding: 12px 15px; 
            border: 1px solid #e0e0e0;
        }
        .form-control:focus {
            box-shadow: 0 0 0 0.25 mil rem rgba(13, 110, 253, 0.1);
        }
        .btn-login { 
            border-radius: 12px; 
            padding: 12px; 
            font-weight: 700; 
            background-color: var(--primary-color);
            transition: all 0.3s ease;
        }
        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
        }
        .logo-circle {
            width: 80px;
            height: 80px;
            background: #eef4ff;
            color: var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 2rem;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="login-container">
        <div class="text-center mb-4">
            <div class="logo-circle shadow-sm">
                <i class="fas fa-user-lock"></i>
            </div>
            <h3 class="fw-bold text-dark">Bienvenido</h3>
            <p class="text-muted small">Ingresa tus credenciales para continuar</p>
        </div>

        <form action="validar_login.php" method="POST">
            <div class="mb-3">
                <label class="form-label small fw-bold text-secondary">Correo Electrónico</label>
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0 text-muted"><i class="fas fa-envelope"></i></span>
                    <input type="email" name="email" class="form-control border-start-0" placeholder="ejemplo@correo.com" required>
                </div>
            </div>

            <div class="mb-4">
                <div class="d-flex justify-content-between">
                    <label class="form-label small fw-bold text-secondary">Contraseña</label>
                </div>
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0 text-muted"><i class="fas fa-key"></i></span>
                    <input type="password" name="password" class="form-control border-start-0" placeholder="********" required>
                </div>
            </div>

            <button type="submit" class="btn btn-primary w-100 btn-login shadow-sm mb-3">
                <i class="fas fa-sign-in-alt me-2"></i> ENTRAR
            </button>
        </form>

        <div class="text-center mt-4">
            <p class="small text-muted mb-2">¿Aún no tienes una cuenta?</p>
            <a href="registro.php" class="btn btn-outline-secondary btn-sm w-100 rounded-pill fw-bold">
                CREAR CUENTA NUEVA
            </a>
            <hr class="my-4">
            <a href="index.php" class="text-decoration-none small text-secondary">
                <i class="fas fa-arrow-left me-1"></i> Volver al catálogo
            </a>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>