<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 15px; }
    .card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; max-width: 480px; }
    .form-group { margin-bottom: 12px; }
    label { display: block; font-size: 0.85rem; font-weight: bold; margin-bottom: 4px; color: #334155; }
    input[type="text"], input[type="email"], select {
      width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; box-sizing: border-box;
    }
    .btn { background: #059669; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-weight: bold; cursor: pointer; }
    .alert-success { background: #ecfdf5; border-left: 4px solid #10b981; padding: 12px; margin-top: 15px; border-radius: 4px; color: #065f46; }
    .alert-danger { background: #fef2f2; border-left: 4px solid #ef4444; padding: 12px; margin-top: 15px; border-radius: 4px; color: #991b1b; }
  </style>
</head>
<body>

<div class="card">
  <h3 style="margin-top:0; color:#0f172a;">Inscripción al Taller Kilopolis</h3>

  <!-- Formulario de simulación -->
  <form method="POST">
    <div class="form-group">
      <label for="nombre">Nombre Completo:</label>
      <input type="text" id="nombre" name="nombre" value="Camila Gómez" required>
    </div>

    <div class="form-group">
      <label for="correo">Correo Electrónico:</label>
      <input type="email" id="correo" name="correo" value="[email protected]" required>
    </div>

    <div class="form-group">
      <label for="curso">Especialidad de Interés:</label>
      <select id="curso" name="curso">
        <option value="php">Desarrollo Backend con PHP 8 & MySQL</option>
        <option value="js">Frontend Moderno con JavaScript</option>
        <option value="fullstack">Bootcamp Fullstack Completo</option>
      </select>
    </div>

    <button type="submit" class="btn">Simular Envío de Datos &raquo;</button>
  </form>

  <?php
  // Procesamiento de datos en el servidor mediante $_POST
  $esEnvio = ($_SERVER['REQUEST_METHOD'] === 'POST');

  $nombre = $_POST['nombre'] ?? 'Camila Gómez';
  $correo = $_POST['correo'] ?? '[email protected]';
  $curso  = $_POST['curso'] ?? 'php';

  $cursosMap = [
      'php'       => 'Desarrollo Backend con PHP 8 & MySQL',
      'js'        => 'Frontend Moderno con JavaScript',
      'fullstack' => 'Bootcamp Fullstack Completo'
  ];
  $cursoTexto = $cursosMap[$curso] ?? $curso;

  // Sanitización obligatoria con htmlspecialchars para neutralizar cualquier script malicioso
  $nombreLimpio = htmlspecialchars($nombre, ENT_QUOTES, 'UTF-8');
  $correoValido = filter_var($correo, FILTER_VALIDATE_EMAIL);
  $correoLimpio = $correoValido ? htmlspecialchars($correo, ENT_QUOTES, 'UTF-8') : htmlspecialchars($correo, ENT_QUOTES, 'UTF-8') . ' <span style="color:#ef4444; font-size:0.8rem;">(inválido)</span>';
  $cursoLimpio  = htmlspecialchars($cursoTexto, ENT_QUOTES, 'UTF-8');

  echo "<div class='alert-success'>";
  echo "<strong>" . ($esEnvio ? "¡Datos recibidos vía POST en el servidor!" : "¡Ejemplo inicial listo para simular!") . "</strong><br>";
  echo "<p style='margin: 8px 0 0 0;'>";
  echo "• Nombre: <strong>{$nombreLimpio}</strong><br>";
  echo "• Correo: <strong>{$correoLimpio}</strong><br>";
  echo "• Programa: <strong>{$cursoLimpio}</strong>";
  echo "</p>";
  echo "</div>";
  ?>
</div>

</body>
</html>