<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Generador QR - vCard</title>
  <style>
    body { font-family: system-ui, Arial; max-width:720px; margin:24px auto; padding:0 12px; }
    label { display:block; margin-top:12px; }
    input[type=text] { width:100%; padding:8px; font-size:16px; box-sizing:border-box; }
    button { margin-top:12px; padding:10px 16px; font-size:16px; cursor:pointer; }
    #qrcode { margin-top:18px; }
  </style>
</head>
<body>
  <h2>Generador QR (vCard) — teléfono + LinkedIn</h2>

  <label>Nombre completo
    <input id="name" type="text" placeholder="Ej: Juan Pérez" value="Juan Pérez">
  </label>

  <label>Teléfono (formato internacional recomendado)
    <input id="phone" type="text" placeholder="+573001234567" value="+573001234567">
  </label>

  <label>LinkedIn (URL completa)
    <input id="linkedin" type="text" placeholder="https://www.linkedin.com/in/usuario" value="https://www.linkedin.com/in/usuario">
  </label>

  <button id="generate">Generar QR</button>
  <button id="download" style="display:none">Descargar PNG</button>

  <div id="qrcode"></div>

  <!-- Biblioteca QR (no requiere instalación) -->
  <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script>
  <script>
    const genBtn = document.getElementById('generate');
    const dlBtn = document.getElementById('download');
    const qDiv = document.getElementById('qrcode');

    function makeVCard(name, phone, linkedin) {
      // vCard 3.0 (compatibilidad amplia)
      const escapedName = (s) => (s || '').replace(/\n/g,' ').replace(/,/g,'\\,');
      const v = [
        "BEGIN:VCARD",
        "VERSION:3.0",
        `FN:${escapedName(name)}`,
        // TEL with type CELL
        `TEL;TYPE=CELL:${phone}`,
        // Use the URL field for LinkedIn
        `URL:${linkedin}`,
        "END:VCARD"
      ];
      return v.join("\n");
    }

    async function generate() {
      const name = document.getElementById('name').value.trim();
      const phone = document.getElementById('phone').value.trim();
      let linkedin = document.getElementById('linkedin').value.trim();

      if (!name || !phone) {
        alert("Ingresa al menos nombre y teléfono.");
        return;
      }
      if (linkedin && !/^https?:\/\//i.test(linkedin)) {
        linkedin = "https://" + linkedin;
      }

      const vcard = makeVCard(name, phone, linkedin);
      qDiv.innerHTML = ""; // limpiar

      // Genera en un canvas (se puede descargar)
      try {
        const canvas = document.createElement('canvas');
        await QRCode.toCanvas(canvas, vcard, { width: 300, margin: 1 });
        qDiv.appendChild(canvas);

        // Mostrar botón descargar
        dlBtn.style.display = 'inline-block';
        dlBtn.onclick = () => {
          const link = document.createElement('a');
          link.href = canvas.toDataURL('image/png');
          link.download = `qr_${name.replace(/\s+/g,'_')}.png`;
          link.click();
        };
      } catch (e) {
        console.error(e);
        alert("Error generando el QR. Revisa la consola.");
      }
    }

    genBtn.addEventListener('click', generate);

    // Generar al cargar con valores por defecto (opcional)
    // generate();
  </script>
</body>
</html>
