<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>JSON y Módulos en JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-json { max-width: 540px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .grupo-botones { display: flex; gap: 8px; margin-bottom: 15px; }
    button { padding: 9px 14px; background: #0284c7; color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
    button:hover { background: #0369a1; }
    .caja-codigo { background: #0f172a; color: #38bdf8; padding: 14px; border-radius: 6px; font-family: monospace; font-size: 0.85rem; white-space: pre-wrap; margin-bottom: 12px; }
    .caja-resultado { background: #f1f5f9; border-left: 4px solid #10b981; padding: 12px; border-radius: 4px; font-family: inherit; font-size: 0.9rem; }
  </style>
</head>
<body>

  <div class="card-json">
    <h3 style="margin-top: 0; color: #0f172a;">Serialización y Parseo con JSON</h3>

    <div class="grupo-botones">
      <button onclick="serializar()">1. JSON.stringify()</button>
      <button style="background: #0d9488;" onclick="deserializar()">2. JSON.parse()</button>
    </div>

    <strong>Salida de Texto Serializado (JSON):</strong>
    <div class="caja-codigo" id="visor-json">// Presiona "JSON.stringify()" para ver el formato de texto...</div>

    <strong>Objeto Reconstruido en Memoria:</strong>
    <div class="caja-resultado" id="visor-objeto">Esperando deserialización...</div>
  </div>

  <script>
    // Objeto JavaScript original en memoria
    const cursoCertificado = {
      id: "KILO-JS-2026",
      nombre: "Desarrollo Web Fullstack",
      duracionSemanas: 12,
      temas: ["HTML5", "CSS3", "JavaScript ES6+", "PHP 8.3"],
      certificadoOficial: true
    };

    let textoJsonGenerado = "";

    function serializar() {
      // JSON.stringify con sangría de 2 espacios
      textoJsonGenerado = JSON.stringify(cursoCertificado, null, 2);

      document.getElementById('visor-json').textContent = textoJsonGenerado;
      document.getElementById('visor-objeto').textContent = 
        "Objeto convertido exitosamente a cadena de texto lista para ser enviada por internet o guardada en archivo.";
    }

    function deserializar() {
      if (!textoJsonGenerado) {
        serializar();
      }

      // JSON.parse reconstruye el objeto original
      const objetoRestaurado = JSON.parse(textoJsonGenerado);

      document.getElementById('visor-objeto').innerHTML = `
        <strong>Objeto reconstruido correctamente:</strong><br>
        Curso: <em>${objetoRestaurado.nombre}</em> (Duración: ${objetoRestaurado.duracionSemanas} semanas)<br>
        Módulos incluidos: ${objetoRestaurado.temas.join(' · ')}<br>
        Certificado: ${objetoRestaurado.certificadoOficial ? 'Sí (Acreditado)' : 'No'}
      `;
    }

    // Inicializar visualización
    serializar();
  </script>

</body>
</html>