<?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">
 <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 Postres" class=-login" width=80 heigth=80>
</div
 <h2>Bazar Paola</h2>
 <p>Panel Administrativo</p>
 <div class="mt-3">
 <span class="badge bg-light text-dark">v2.0</span>
 </div>
 </div>
 <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>
