<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Configurador de Negocio — VYRON AI</title>
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #06090d;
      --card: #0b0f14;
      --border: #1a232e;
      --cyan: #00c2ff;
      --text: #d9e1ea;
      --muted: #8e98a8;
      --green: #00e676;
    }
    body {
      font-family: 'Space Grotesk', sans-serif;
      background: var(--bg);
      color: var(--text);
      margin: 0;
      padding: 30px 15px;
      display: flex;
      justify-content: center;
    }
    .panel {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      max-width: 650px;
      width: 100%;
      padding: 30px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    h1 { font-size: 20px; color: #fff; margin-bottom: 5px; }
    h1 span { color: var(--cyan); }
    p.sub { font-size: 13px; color: var(--muted); margin-bottom: 25px; }
    h2 { font-size: 15px; color: var(--cyan); border-bottom: 1px solid var(--border); padding-bottom: 6px; margin: 25px 0 15px 0; }
    label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
    input, select, textarea {
      width: 100%;
      background: #06090d;
      border: 1px solid var(--border);
      color: #fff;
      padding: 10px;
      border-radius: 6px;
      margin-bottom: 15px;
      font-family: inherit;
      box-sizing: border-box;
    }
    .row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
    .service-row { display: grid; grid-template-columns: 2fr 1fr 40px; gap: 10px; margin-bottom: 10px; }
    .btn-add {
      background: transparent;
      border: 1px dashed var(--cyan);
      color: var(--cyan);
      padding: 8px 12px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      width: 100%;
      margin-bottom: 20px;
    }
    .btn-del {
      background: #ff3b30;
      border: none;
      color: #fff;
      border-radius: 6px;
      cursor: pointer;
      font-weight: bold;
      height: 38px;
    }
    .btn-save {
      background: var(--cyan);
      color: #03070b;
      border: none;
      width: 100%;
      padding: 14px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 15px;
      cursor: pointer;
      margin-top: 15px;
    }
    .result-box {
      display: none;
      margin-top: 20px;
      background: #06090d;
      border: 1px solid var(--border);
      padding: 15px;
      border-radius: 8px;
    }
    textarea.code-preview {
      height: 180px;
      font-family: monospace;
      font-size: 12px;
      color: var(--cyan);
      resize: vertical;
    }
    .btn-copy {
      background: rgba(0, 194, 255, 0.15);
      border: 1px solid var(--cyan);
      color: var(--cyan);
      width: 100%;
      padding: 10px;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
    }
  </style>
</head>
<body>

<div class="panel">
  <h1>VYRON <span>AI</span> · Configurador de Negocio</h1>
  <p class="sub">Personaliza tus horarios y servicios para generar tu configuración.</p>

  <h2>1. Identidad de tu Empresa</h2>
  <label>Nombre del Negocio:</label>
  <input type="text" id="nombreNegocio" value="CENTRO DE BELLEZA & SPA">

  <label>Subtítulo o Eslogan:</label>
  <input type="text" id="subtitulo" value="Reserva tu cita en segundos">

  <h2>2. Horarios y Turnos</h2>
  <div class="row">
    <div>
      <label>Apertura Mañana:</label>
      <input type="time" id="iniManana" value="09:00">
    </div>
    <div>
      <label>Cierre Mañana:</label>
      <input type="time" id="finManana" value="14:00">
    </div>
  </div>
  <div class="row">
    <div>
      <label>Apertura Tarde:</label>
      <input type="time" id="iniTarde" value="16:00">
    </div>
    <div>
      <label>Cierre Tarde:</label>
      <input type="time" id="finTarde" value="20:00">
    </div>
  </div>
  <label>Duración estimada por Turno:</label>
  <select id="duracion">
    <option value="15">15 Minutos</option>
    <option value="30">30 Minutos</option>
    <option value="45">45 Minutos</option>
    <option value="60" selected>60 Minutos (1 Hora)</option>
  </select>

  <h2>3. Catálogo de Servicios</h2>
  <div id="servicesContainer">
    <div class="service-row">
      <input type="text" class="srv-name" placeholder="Nombre del servicio" value="Limpieza Facial Profunda">
      <input type="number" class="srv-price" placeholder="Precio €" value="45">
      <button class="btn-del" onclick="this.parentElement.remove()">✕</button>
    </div>
    <div class="service-row">
      <input type="text" class="srv-name" placeholder="Nombre del servicio" value="Masaje Relajante">
      <input type="number" class="srv-price" placeholder="Precio €" value="50">
      <button class="btn-del" onclick="this.parentElement.remove()">✕</button>
    </div>
  </div>
  <button type="button" class="btn-add" onclick="addService()">+ Añadir Servicio</button>

  <button type="button" class="btn-save" onclick="generarConfig()">⚡ GENERAR CONFIGURACIÓN</button>

  <div id="resultBox" class="result-box">
    <p style="font-size:13px; color:var(--green); margin:0 0 10px 0; font-weight:600;">✓ ¡Configuración generada correctamente!</p>
    <label>Código listo para tu archivo <strong>config.js</strong>:</label>
    <textarea id="codePreview" class="code-preview" readonly></textarea>
    <button type="button" id="copyBtn" class="btn-copy" onclick="copiarCodigo()">📋 COPIAR AL PORTAPAPELES</button>
    <button type="button" class="btn-save" style="background:#1a232e; color:#fff; font-size:13px; margin-top:10px;" onclick="descargarArchivo()">📥 O Descargar archivo config.js</button>
  </div>
</div>

<script>
let lastConfig = "";

function addService() {
  const container = document.getElementById('servicesContainer');
  const div = document.createElement('div');
  div.className = 'service-row';
  div.innerHTML = `
    <input type="text" class="srv-name" placeholder="Nombre del servicio">
    <input type="number" class="srv-price" placeholder="Precio €">
    <button class="btn-del" onclick="this.parentElement.remove()">✕</button>
  `;
  container.appendChild(div);
}

function generarConfig() {
  const nombre = document.getElementById('nombreNegocio').value.trim() || 'Mi Negocio';
  const subtitulo = document.getElementById('subtitulo').value.trim() || 'Reserva tu cita';
  const duracion = parseInt(document.getElementById('duracion').value) || 30;
  const iniM = document.getElementById('iniManana').value || '09:00';
  const finM = document.getElementById('finManana').value || '14:00';
  const iniT = document.getElementById('iniTarde').value || '16:00';
  const finT = document.getElementById('finTarde').value || '20:00';

  const srvNames = document.querySelectorAll('.srv-name');
  const srvPrices = document.querySelectorAll('.srv-price');
  const servicios = [];

  srvNames.forEach((input, index) => {
    const val = input.value.trim();
    const pr = parseFloat(srvPrices[index].value) || 0;
    if (val) {
      servicios.push({
        id: `srv_${index + 1}`,
        nombre: val,
        precio: pr
      });
    }
  });

  // Limpieza de acentos y caracteres raros para el ID
  const slug = nombre
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .toLowerCase()
    .replace(/[^a-z0-9]/g, '_')
    .replace(/_+/g, '_');

  lastConfig = `const CONFIG = {
  modoDemo: false,
  idNegocio: "${slug}",
  nombreNegocio: "${nombre}",
  subtitulo: "${subtitulo}",
  horarios: {
    duracionCitaMinutos: ${duracion},
    diasAbiertos: [1, 2, 3, 4, 5, 6],
    manana: { inicio: "${iniM}", fin: "${finM}" },
    tarde: { inicio: "${iniT}", fin: "${finT}" }
  },
  servicios: ${JSON.stringify(servicios, null, 4)},
  api: {
    workerUrl: "https://vyronai-secret-rcpl.contacto-467.workers.dev",
    urlGestionCitas: "https://hook.eu1.make.com/d4nao30pk5otf3157daxhghpi52y2q7q"
  }
};`;

  document.getElementById('codePreview').value = lastConfig;
  document.getElementById('resultBox').style.display = 'block';
  document.getElementById('resultBox').scrollIntoView({ behavior: 'smooth' });
}

function copiarCodigo() {
  const text = document.getElementById('codePreview').value;
  navigator.clipboard.writeText(text).then(() => {
    const btn = document.getElementById('copyBtn');
    btn.innerText = '✓ ¡COPIADO AL PORTAPAPELES!';
    btn.style.color = '#00e676';
    btn.style.borderColor = '#00e676';
    setTimeout(() => {
      btn.innerText = '📋 COPIAR AL PORTAPAPELES';
      btn.style.color = 'var(--cyan)';
      btn.style.borderColor = 'var(--cyan)';
    }, 2500);
  });
}

function descargarArchivo() {
  const blob = new Blob([lastConfig], { type: 'text/plain;charset=utf-8' });
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = 'config.js';
  a.click();
}
</script>
</body>
</html>