<?php
session_start();
if(isset($_SESSION['id'])){
    header("Location: menu.php");
    exit();
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Sistema Web - Login</title>
 <!-- Bootstrap 5 -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 <!-- Font Awesome -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 body {
    background: linear-gradient(135deg, #FFF5F7 0%, #FCE4EC 50%, #F8BBD0 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
 .login-card {
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(233,30,99,.25);
    max-width: 900px;
    width: 100%;
    background: white;
}
 .login-left {
    background: linear-gradient(180deg,#EC407A,#F06292);
    padding:60px 40px;
    color:white;
    text-align:center;
}
 .login-left h1{
    font-size:2.5rem;
    font-weight:bold;
    margin-bottom:15px;
    color:white;
}
 .login-left p{
    color:#FFEFF5;
    font-size:18px;
}
 .logo-login{
    width:120px;
    height:120px;
    object-fit:contain;
    margin-bottom:20px;
}
 .login-right{
    background:white;
    padding:50px 40px;
}
 .login-right h2{
    color:#EC407A;
    font-weight:bold;
    margin-bottom:30px;
}
 .login-right .form-control{
    border-radius:12px;
    border:2px solid #F8BBD0;
    padding:12px 15px;
}
 .login-right .form-control:focus{
    border-color:#EC407A;
    box-shadow:0 0 8px rgba(236,64,122,.3);
}
 .login-right .btn-primary{
    background:#EC407A;
    border:none;
    border-radius:12px;
    padding:12px;
    font-weight:bold;
    width:100%;
}
 .login-right .btn-primary:hover{
    background:#D81B60;
}
 .login-right label {
    font-weight: 500;
    color: #333;
 }
 .alert {
    border-radius: 10px;
 }
 @media (max-width: 768px) {
    .login-left {
        padding: 30px 20px;
    }
    .login-left h1 {
        font-size: 1.8rem;
    }
 }
 </style>
</head>
<body>
 <div class="login-card">
   <div class="row g-0">
     <!-- LADO IZQUIERDO -->
    <div class="col-md-5 login-left d-flex flex-column justify-content-center">
    <div class="icon">
        <img src="assets/logo.png" alt="Logo Sistema de Accesorio" class="logo-login">
    </div>
    <h1>SISTEMA DE ACCESORIO DE MOTOS</h1>
    <p>Panel Administrativo Institucional</p>
    <div class="mt-3">
        <span class="badge bg-light text-dark">v2.0</span>
    </div>
</div>


     <!-- LADO DERECHO -->
     <div class="col-md-7 login-right">
        <h2><i class="fas fa-sign-in-alt me-2"></i>Iniciar Sesión</h2>

        <?php if(isset($_GET['error'])): ?>
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            <?php 
            $error = $_GET['error'];
            if($error == 'invalid') echo "Credenciales incorrectas. Verifica tu email y contraseña.";
            elseif($error == 'empty') echo "Por favor completa todos los campos.";
            else echo "Error al iniciar sesión.";
            ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        <?php endif; ?>

        <form action="validar.php" method="POST">
            <div class="mb-3">
                <label for="email" class="form-label">
                    <i class="fas fa-envelope me-1"></i> Correo Electrónico
                </label>
                <input type="email" class="form-control" id="email" name="email"
                placeholder="ejemplo@correo.com" required autofocus>
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">
                    <i class="fas fa-lock me-1"></i> Contraseña
                </label>
                <input type="password" class="form-control" id="password" name="password"
                placeholder="Ingresa tu contraseña" required>
            </div>
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-arrow-right me-2"></i> Ingresar
            </button>
        </form>

        <div class="mt-3 text-center text-muted small">
            <i class="fas fa-info-circle"></i> Usuario de prueba: admin@test.com / 123456
        </div>
     </div>
   </div>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
