<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Estructura Switch en JS</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-switch { max-width: 480px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    select { width: 100%; padding: 8px 10px; margin: 8px 0 15px 0; border: 1px solid #cbd5e1; border-radius: 6px; }
    .info-clase { background: #f0fdf4; border-left: 4px solid #16a34a; padding: 14px; border-radius: 4px; }
  </style>
</head>
<body>

  <div class="card-switch">
    <h3 style="margin-top: 0; color: #0f172a;">Horario Académico Kilopolis</h3>

    <label for="selector-dia">Selecciona un día de la semana:</label>
    <select id="selector-dia" onchange="consultarClase()">
      <option value="lunes">Lunes</option>
      <option value="martes">Martes</option>
      <option value="miercoles">Miércoles</option>
      <option value="jueves">Jueves</option>
      <option value="viernes">Viernes</option>
      <option value="sabado">Sábado</option>
      <option value="domingo">Domingo</option>
    </select>

    <div id="resultado-horario" class="info-clase"></div>

    <script>
      function consultarClase() {
        const dia = document.getElementById('selector-dia').value;
        let tema = "";

        switch (dia) {
          case "lunes":
            tema = "HTML5 Semántico y Arquitectura Web";
            break;
          case "martes":
            tema = "CSS3 Avanzado: Flexbox y Grid";
            break;
          case "miercoles":
            tema = "JavaScript Moderno ES6+ y DOM";
            break;
          case "jueves":
            tema = "PHP 8.3 Orientado a Objetos";
            break;
          case "viernes":
            tema = "Bases de Datos Relacionales MySQL";
            break;
          case "sabado":
          case "domingo": // Casos compartidos
            tema = "🎉 Fin de Semana: Taller Práctico y Proyecto";
            break;
          default:
            tema = "Día no reconocido.";
        }

        document.getElementById('resultado-horario').innerHTML = `
          <strong>Asignatura:</strong> ${tema}
        `;
      }

      consultarClase();
    </script>
  </div>

</body>
</html>