<?php include 'conexion.php'; ?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registro - 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>
        body { background-color: #f4f7f6; font-family: 'Segoe UI', sans-serif; }
        .register-container { 
            max-width: 450px; 
            margin: 60px auto; 
            background: white; 
            padding: 40px; 
            border-radius: 20px; 
            box-shadow: 0 10px 25px rgba(0,0,0,0.05); 
        }
        .form-control { border-radius: 10px; padding: 12px; border: 1px solid #e0e0e0; }
        .btn-primary { border-radius: 10px; padding: 12px; font-weight: 600; background-color: #0d6efd; }
        .logo-icon { color: #0d6efd; font-size: 3rem; margin-bottom: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="register-container text-center">
            <i class="fas fa-user-circle logo-icon"></i>
            <h3 class="fw-bold mb-2">Únete a Edujoam</h3>
            <p class="text-muted mb-4">Regístrate para acceder a los mejores recursos educativos.</p>
            
            <form action="procesar_registro.php" method="POST">
                <div class="mb-3 text-start">
                    <label class="form-label small fw-bold">Nombre Completo</label>
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0"><i class="fas fa-user text-muted"></i></span>
                        <input type="text" name="nombre" class="form-control border-start-0" required placeholder="Ej: Jhon Ocana">
                    </div>
                </div>
                
                <div class="mb-3 text-start">
                    <label class="form-label small fw-bold">Correo Electrónico</label>
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0"><i class="fas fa-envelope text-muted"></i></span>
                        <input type="email" name="email" class="form-control border-start-0" required placeholder="correo@ejemplo.com">
                    </div>
                </div>
                
                <div class="mb-3 text-start">
                    <label class="form-label small fw-bold">Contraseña</label>
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0"><i class="fas fa-lock text-muted"></i></span>
                        <input type="password" name="password" class="form-control border-start-0" required placeholder="Mínimo 6 caracteres">
                    </div>
                </div>
                
                <div class="mb-4 text-start">
                    <label class="form-label small fw-bold">Yo soy:</label>
                    <select name="tipo_usuario" class="form-select" style="border-radius: 10px; padding: 12px;">
                        <option value="profesor">Profesor / Docente</option>
                        <option value="estudiante">Estudiante</option>
                        <option value="padre">Padre de Familia</option>
                        <option value="otro">Otro</option>
                    </select>
                </div>
                
                <button type="submit" class="btn btn-primary w-100 shadow-sm mb-3">CREAR MI CUENTA</button>
            </form>
            
            <p class="mb-0 text-muted small">¿Ya tienes cuenta? <a href="login.php" class="text-primary fw-bold text-decoration-none">Inicia sesión aquí</a></p>
        </div>
    </div>
</body>
</html>