<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Variables let y const en JS</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-vars { max-width: 500px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .contador-box { font-size: 2rem; font-weight: bold; color: #0284c7; margin: 15px 0; }
    .btn { background: #0284c7; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; margin-right: 6px; }
    .btn:hover { background: #0369a1; }
  </style>
</head>
<body>

  <div class="card-vars">
    <h3 style="margin-top: 0; color: #0f172a;">Demostración de Variables</h3>
    <p>
      Nombre de Academia (<code>const</code> inmutable): <strong id="lbl-academia">Kilopolis</strong>
    </p>

    <div>Valor de Contador (<code>let</code> mutable):</div>
    <div id="valor-contador" class="contador-box">0</div>

    <button class="btn" onclick="incrementar()">Incrementar let (+1)</button>
    <button class="btn" onclick="probarConstError()" style="background: #ef4444;">Intentar reasignar const</button>

    <script>
      // 1. Constante: su valor no cambia
      const nombreAcademia = "Kilopolis Academia";
      document.getElementById('lbl-academia').textContent = nombreAcademia;

      // 2. Variable let: su valor cambia con cada clic
      let contador = 0;

      function incrementar() {
        contador++; // let permite la reasignación
        document.getElementById('valor-contador').textContent = contador;
      }

      function probarConstError() {
        try {
          // Intentar sobrescribir const provocará un TypeError
          nombreAcademia = "Otro Nombre";
        } catch (error) {
          alert("❌ Error bloqueado por JavaScript: " + error.message);
        }
      }
    </script>
  </div>

</body>
</html>