<?php
if (count(get_included_files()) === 1) { http_response_code(403); exit('Forbidden'); }
$lang     = ($lang ?? 'es') === 'en' ? 'en' : 'es';
$initName = htmlspecialchars($_SESSION['pending_name'] ?? '');
?>
<!DOCTYPE html>
<html lang="<?= $lang ?>">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
<title>Vale · Empezar</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#F4EDE3;--card:#FFFDF9;--coffee:#3B2F27;--rust:#A8331A;--rust-d:#8F2712;
  --gold:#D99A4E;--ok:#3F7A52;--ink:#3A332E;--muted:#8A7E73;--line:#E7DDD0;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{overflow-x:hidden}
html{height:100%}
body{
  font-family:'Hanken Grotesk',sans-serif;color:var(--ink);
  min-height:100dvh;width:100%;
  background:radial-gradient(130% 80% at 50% -10%,#FBF5EC,var(--bg) 55%,#DDD0BE);
  display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;
}
.page{flex:1;display:flex;flex-direction:column;align-items:center;padding:16px 12px 0;width:100%}
.top-bar{
  width:100%;max-width:960px;
  display:flex;align-items:center;justify-content:space-between;padding:0 0 16px;gap:8px;
}
.top-bar img{height:26px;width:auto;flex:none}
.login-hint{font-size:13px;color:var(--muted);font-weight:500;white-space:nowrap}
.login-hint a{color:var(--rust);font-weight:600;text-decoration:none}

/* Layout: columna en mobile, 2 col en desktop */
.main{width:100%;max-width:960px;display:flex;flex-direction:column;align-items:center;gap:0;flex:1}
@media(min-width:720px){.main{flex-direction:row;gap:48px;align-items:flex-start}}

/* Value prop (desktop only) */
.vp{flex:1;padding:24px 0 40px;display:none}
@media(min-width:720px){.vp{display:flex;flex-direction:column;gap:0}}
.vp-eyebrow{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--rust);margin-bottom:14px}
.vp-h{font-family:'Fraunces',serif;font-weight:700;font-size:clamp(28px,3.5vw,40px);line-height:1.05;letter-spacing:-.8px;color:var(--coffee);margin-bottom:12px}
.vp-h em{font-style:italic;color:var(--rust)}
.vp-lead{font-size:15.5px;color:var(--muted);line-height:1.65;margin-bottom:28px;max-width:22em}
.bullets{list-style:none;display:flex;flex-direction:column;gap:13px}
.bullet{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--ink);line-height:1.5}
.bullet-ico{width:32px;height:32px;border-radius:9px;flex:0 0 32px;background:rgba(168,51,26,.08);display:flex;align-items:center;justify-content:center;margin-top:1px}
.vp-quote{margin-top:36px;padding:16px 18px;background:rgba(255,255,255,.5);border-radius:14px;border:1px solid var(--line);font-size:13px;color:var(--muted);font-style:italic;line-height:1.6}
.vp-quote strong{font-style:normal;color:var(--ink);font-weight:700}

/* Chat col: full width en mobile, fijo en desktop */
.chat-col{width:100%;max-width:100%;padding-bottom:16px}
@media(min-width:720px){.chat-col{flex:0 0 400px;width:400px;max-width:420px;padding-bottom:24px}}

.frame{
  width:100%;height:min(570px,80dvh);background:var(--card);border-radius:20px;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 50px -16px rgba(60,35,20,.35),0 0 0 1px rgba(255,255,255,.55);
}
@media(min-width:720px){.frame{border-radius:26px;height:min(580px,82dvh)}}
.ch{background:var(--coffee);color:#fff;display:flex;align-items:center;gap:12px;padding:14px 16px;flex:none}
.ch-av{width:40px;height:40px;border-radius:50%;flex:none;background:linear-gradient(145deg,#E7B568,var(--gold));display:flex;align-items:center;justify-content:center;overflow:hidden}
.ch-name{font-family:'Fraunces',serif;font-weight:600;font-size:17px;color:var(--gold);line-height:1}
.ch-sub{font-size:11px;color:rgba(255,255,255,.55);margin-top:2px;display:flex;align-items:center;gap:5px}
.ch-dot{width:6px;height:6px;border-radius:50%;background:#4ad07f;flex:none;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.msgs{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px;display:flex;flex-direction:column;gap:9px;scroll-behavior:smooth}
.msgs::-webkit-scrollbar{width:0}
.bv,.bu{
  max-width:88%;padding:10px 13px;font-size:13.5px;line-height:1.55;
  animation:mpop .32s cubic-bezier(.2,.8,.2,1) both;
  word-break:break-word;overflow-wrap:break-word;
}
.bv{align-self:flex-start;background:var(--coffee);color:#f3e7d8;border-radius:15px 15px 15px 3px}
.bu{align-self:flex-end;background:var(--rust);color:#fff;border-radius:15px 15px 3px 15px}
@keyframes mpop{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.typing{align-self:flex-start;background:var(--coffee);border-radius:15px 15px 15px 3px;padding:12px 14px;display:flex;gap:5px;align-items:center}
.typing b{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);display:inline-block;animation:tdot 1.1s infinite ease}
.typing b:nth-child(2){animation-delay:.18s}
.typing b:nth-child(3){animation-delay:.36s}
@keyframes tdot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}

/* Chips */
.chips-row{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start;max-width:100%;animation:mpop .32s ease both}
.chip{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:7px 13px;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:.15s;display:flex;align-items:center;gap:6px}
.chip:hover{border-color:var(--rust);color:var(--rust)}
.chip:disabled{opacity:.4;pointer-events:none}
.rubro-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;align-self:flex-start;width:min(280px,100%);animation:mpop .32s ease both}
.rchip{background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:11px 11px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:.15s;display:flex;align-items:center;gap:7px;text-align:left}
.rchip:hover{border-color:var(--rust);background:#FDF1EE}

/* Google card */
.g-card{align-self:flex-start;width:min(290px,100%);background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:14px;animation:mpop .35s ease both}
.g-perk{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;margin-bottom:9px}
.g-perk .gi{width:30px;height:30px;border-radius:8px;background:#F3EAE0;display:flex;align-items:center;justify-content:center;flex:none}
.g-perk small{display:block;font-weight:400;color:var(--muted);font-size:11px;margin-top:1px}
.g-btn{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:11px;padding:12px;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s;margin-top:3px;box-shadow:0 3px 10px -5px rgba(0,0,0,.12)}
.g-btn:hover{border-color:#b5a490;transform:translateY(-1px)}
.g-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.g-note{font-size:11px;color:var(--muted);text-align:center;margin-top:7px;line-height:1.4}

.input-bar{flex:none;padding:10px 12px 14px;border-top:1px solid var(--line);background:var(--card);display:flex;gap:8px;align-items:center}
.input-bar input{flex:1;background:#F6EFE6;border:none;border-radius:99px;padding:11px 15px;font-family:inherit;font-size:16px;color:var(--ink);outline:none;min-width:0}
.input-bar input::placeholder{color:var(--muted)}
.input-bar input:disabled{opacity:.5}
.send{width:40px;height:40px;border-radius:50%;background:var(--rust);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:.15s}
.send:hover{background:var(--rust-d)}
.send:disabled{background:#ccc;cursor:not-allowed}
.send svg{width:16px;height:16px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}

footer{text-align:center;padding:14px;font-size:12px;color:var(--muted)}
footer a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
footer a:hover{color:var(--rust)}
footer .sep{margin:0 7px;opacity:.4}
</style>
</head>
<body>
<div class="page">
  <div class="top-bar">
    <img src="/img/logo.png" alt="Vale">
    <span class="login-hint">
      <?= $lang === 'en' ? 'Have an account?' : '¿Ya tenés cuenta?' ?>
      <a href="/login"><?= $lang === 'en' ? 'Sign in →' : 'Entrá →' ?></a>
    </span>
  </div>

  <div class="main">
    <!-- Value prop (desktop) -->
    <div class="vp">
      <div class="vp-eyebrow"><?= $lang === 'en' ? 'AI Employee' : 'Empleada con IA' ?></div>
      <h1 class="vp-h">
        <?= $lang === 'en' ? 'Your business,<br><em>always answering.</em>' : 'Tu negocio,<br><em>siempre respondiendo.</em>' ?>
      </h1>
      <p class="vp-lead">
        <?= $lang === 'en'
          ? 'Vale handles your customers 24/7. Books appointments, answers prices, sends reminders — while you focus on your work.'
          : 'Vale atiende a tus clientes 24/7. Agenda, responde precios, manda recordatorios — mientras vos trabajás.' ?>
      </p>
      <ul class="bullets">
        <li class="bullet">
          <div class="bullet-ico">
            <svg width="16" height="16" fill="none" stroke="#A8331A" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 6v6l3.5 3.5"/></svg>
          </div>
          <div><strong><?= $lang === 'en' ? '24/7 availability' : 'Disponible 24/7' ?></strong><br>
          <span style="color:var(--muted);font-size:12.5px"><?= $lang === 'en' ? 'Responds even when you\'re closed' : 'Responde aunque estés cerrado' ?></span></div>
        </li>
        <li class="bullet">
          <div class="bullet-ico">
            <svg width="16" height="16" fill="none" stroke="#A8331A" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="17" rx="3"/><path d="M3 9h18M8 2v4M16 2v4M9 14l2 2 4-4"/></svg>
          </div>
          <div><strong><?= $lang === 'en' ? 'Books appointments' : 'Agenda automáticamente' ?></strong><br>
          <span style="color:var(--muted);font-size:12.5px"><?= $lang === 'en' ? 'No more missed bookings' : 'Sin turnos perdidos' ?></span></div>
        </li>
        <li class="bullet">
          <div class="bullet-ico">
            <svg width="16" height="16" fill="none" stroke="#A8331A" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24"><path d="M12 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
          </div>
          <div><strong><?= $lang === 'en' ? 'Ready in minutes' : 'Lista en minutos' ?></strong><br>
          <span style="color:var(--muted);font-size:12.5px"><?= $lang === 'en' ? 'Just chat, no forms' : 'Solo chatear, sin formularios' ?></span></div>
        </li>
      </ul>
      <div class="vp-quote">
        <?= $lang === 'en'
          ? '"Vale answered 3 clients at midnight while I slept. Next morning: 3 confirmed bookings." — <strong>Carlos M., barbershop</strong>'
          : '"Vale atendió 3 clientes a medianoche mientras dormía. Al día siguiente, 3 turnos confirmados." — <strong>Carlos M., dueño de barbería</strong>' ?>
      </div>
    </div>

    <!-- Chat col -->
    <div class="chat-col">
      <div class="frame">
        <div class="ch">
          <div class="ch-av"><img src="/img/icon.png" alt="Vale" style="width:80%;height:80%;object-fit:contain;"></div>
          <div>
            <div class="ch-name">Vale</div>
            <div class="ch-sub"><span class="ch-dot"></span><span><?= $lang === 'en' ? 'online' : 'en línea' ?></span></div>
          </div>
        </div>
        <div class="msgs" id="msgs"></div>
        <div class="input-bar" id="inputBar" style="display:none">
          <input id="msgIn" type="text" maxlength="160"
                 placeholder="<?= $lang === 'en' ? 'Type here…' : 'Escribí acá…' ?>"
                 autocomplete="off" autocorrect="off" spellcheck="false">
          <button class="send" id="sendBtn">
            <svg viewBox="0 0 24 24"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4z"/></svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<footer>
  <span>Hecho por <a href="https://supraide.com" target="_blank" rel="noopener">Supraide</a></span>
  <span class="sep">·</span>
  <a href="/privacy"><?= $lang === 'en' ? 'Privacy' : 'Privacidad' ?></a>
  <span class="sep">·</span>
  <a href="mailto:hola@valeai.app"><?= $lang === 'en' ? 'Contact' : 'Contacto' ?></a>
</footer>

<script>
var LANG      = <?= json_encode($lang) ?>;
var INIT_NAME = <?= json_encode($initName) ?>;

var msgs    = document.getElementById('msgs');
var inputB  = document.getElementById('inputBar');
var msgIn   = document.getElementById('msgIn');
var sendBtn = document.getElementById('sendBtn');

var bizName = '', bizRubro = '', bizEspec = '';

var T = {
  es: {
    g1: '¡Hola! Soy Vale, tu nueva empleada con IA.',
    g2: 'En unos minutos configuro todo tu negocio charlando. Sin formularios.',
    g3: '¿Cómo se llama tu negocio?',
    inferring: 'Un segundo, veo a qué rubro pertenece...',
    confirm: function(r){ return 'Por el nombre, parece una ' + r + ' — ¿voy bien?'; },
    yes: 'Sí, exacto', no: 'Es otra cosa',
    ask_rubro: '¿A qué se dedica el negocio?',
    rubro_opts: ['Barbería','Odontología','Belleza / Spa','Otro'],
    rubro_vals: ['barberia','odontologia','belleza','general'],
    rubro_labels: { barberia:'barbería', odontologia:'odontología', belleza:'salón / spa', general:'negocio' },
    rubro_en_labels: { barberia:'barbershop', odontologia:'dental / clinic', belleza:'beauty / spa', general:'service business' },
    google_msg: '¡Perfecto! Lo último antes de continuar: conectá tu cuenta de Google para que yo pueda guardar todo y empezar a trabajar.',
    g_cal: 'Tu agenda', g_cal_s: 'Para agendar sin choques',
    g_login: 'Login seguro', g_login_s: 'Sin contraseña que recordar',
    g_btn: 'Continuar con Google',
    g_note: 'Vale nunca publica ni borra nada sin tu permiso.',
    ph_name: 'Ej: Barbería El Corte'
  },
  en: {
    g1: "Hi! I'm Vale, your new AI employee.",
    g2: "In minutes I'll set up your entire business — just by chatting. No forms.",
    g3: "What's your business called?",
    inferring: "One second, checking the business type...",
    confirm: function(r){ return "By the name, it looks like a " + r + " — am I right?"; },
    yes: 'Yes, exactly', no: 'Something else',
    ask_rubro: 'What type of business is it?',
    rubro_opts: ['Barbershop','Dental / Clinic','Beauty / Spa','Other'],
    rubro_vals: ['barberia','odontologia','belleza','general'],
    rubro_labels: { barberia:'barbershop', odontologia:'dental clinic', belleza:'beauty / spa', general:'business' },
    rubro_en_labels: { barberia:'barbershop', odontologia:'dental clinic', belleza:'beauty / spa', general:'service business' },
    google_msg: "Perfect! Last step before we continue: connect your Google account so I can save everything and get to work.",
    g_cal: 'Your calendar', g_cal_s: 'Book without conflicts',
    g_login: 'Secure login', g_login_s: 'No password to remember',
    g_btn: 'Continue with Google',
    g_note: 'Vale never posts or deletes anything without your permission.',
    ph_name: 'E.g.: Sunrise Barbershop'
  }
};
var d = T[LANG] || T.es;

var RUBRO_ICONS = {
  barberia:    '<path d="M8 3C8 3 7 7 7 9s1.5 3.5 3 4.5V20a1 1 0 002 0v-6.5c1.5-1 3-2.5 3-4.5s-1-6-1-6M10 3h4M9 9h6"/>',
  odontologia: '<path d="M12 2C9 5.5 7.5 9 7.5 12a4.5 4.5 0 009 0C16.5 9 15 5.5 12 2zm-1 9h2M9 17c1 2 2 3 3 3s2-1 3-3"/>',
  belleza:     '<path d="M12 3c-4 3.5-5.5 7-5.5 9.5a5.5 5.5 0 0011 0C17.5 10 16 6.5 12 3zm-2 8.5h4M9 17.5a3.5 3.5 0 007 0"/>',
  general:     '<path d="M8 7h12M8 12h12M8 17h12M3 7h.01M3 12h.01M3 17h.01"/>'
};

function scroll(){ msgs.scrollTop = msgs.scrollHeight; }

function addTyping(){
  var t = document.createElement('div');
  t.className = 'typing'; t.innerHTML = '<b></b><b></b><b></b>';
  msgs.appendChild(t); scroll(); return t;
}

function addVale(text, delay, cb){
  var t = addTyping();
  setTimeout(function(){
    msgs.removeChild(t);
    var m = document.createElement('div');
    m.className = 'bv'; m.innerHTML = text.replace(/\n/g,'<br>');
    msgs.appendChild(m); scroll();
    if(cb) setTimeout(cb, 240);
  }, delay || 800);
}

function addUser(text){
  var m = document.createElement('div');
  m.className = 'bu'; m.textContent = text;
  msgs.appendChild(m); scroll();
}

function showInput(ph, onSubmit){
  msgIn.value = ''; msgIn.placeholder = ph || ''; msgIn.disabled = false; sendBtn.disabled = false;
  inputB.style.display = 'flex'; msgIn._onsubmit = onSubmit;
  setTimeout(function(){ msgIn.focus(); }, 80);
}

function hideInput(){ inputB.style.display = 'none'; msgIn._onsubmit = null; }

// ── Flujo: nombre → rubro → Google ───────────────────────────────────────────

function start(){
  addVale(d.g1, 600, function(){
    addVale(d.g2, 900, function(){
      addVale(d.g3, 800, function(){
        if(INIT_NAME){
          var row = document.createElement('div'); row.className = 'chips-row';
          var b = document.createElement('button'); b.className = 'chip'; b.textContent = INIT_NAME;
          b.onclick = function(){ row.remove(); addUser(INIT_NAME); bizName = INIT_NAME; inferRubro(); };
          row.appendChild(b); msgs.appendChild(row); scroll();
        }
        showInput(d.ph_name, function(val){
          if(!val) return;
          bizName = val; addUser(val); hideInput(); inferRubro();
        });
      });
    });
  });
}

function inferRubro(){
  var t = addTyping();
  fetch('/empezar?action=infer&name=' + encodeURIComponent(bizName))
    .then(function(r){ return r.json(); })
    .then(function(data){
      msgs.removeChild(t);
      var rubro = data.rubro || 'general';
      var espec = data.especialidad || null;
      var conf  = data.confianza    || 0;

      if(conf >= 0.7){
        var lbl = LANG === 'en' ? (d.rubro_en_labels[rubro] || rubro) : (d.rubro_labels[rubro] || rubro);
        addVale(d.confirm(lbl), 500, function(){
          var row = document.createElement('div'); row.className = 'chips-row';
          [d.yes, d.no].forEach(function(label, i){
            var b = document.createElement('button'); b.className = 'chip'; b.textContent = label;
            b.onclick = function(){
              row.querySelectorAll('.chip').forEach(function(x){ x.disabled = true; });
              addUser(label);
              if(i === 0){ bizRubro = rubro; bizEspec = espec; showGoogleStep(); }
              else        { askRubroManually(); }
            };
            row.appendChild(b);
          });
          msgs.appendChild(row); scroll();
        });
      } else {
        askRubroManually();
      }
    })
    .catch(function(){ msgs.removeChild(t); askRubroManually(); });
}

function askRubroManually(){
  addVale(d.ask_rubro, 700, function(){
    var grid = document.createElement('div'); grid.className = 'rubro-grid';
    d.rubro_opts.forEach(function(label, i){
      var val = d.rubro_vals[i];
      var b = document.createElement('button'); b.className = 'rchip';
      b.innerHTML = '<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">'+(RUBRO_ICONS[val]||RUBRO_ICONS.general)+'</svg>' + label;
      b.onclick = function(){ grid.remove(); addUser(label); bizRubro = val; bizEspec = null; showGoogleStep(); };
      grid.appendChild(b);
    });
    msgs.appendChild(grid); scroll();
  });
}

function showGoogleStep(){
  addVale(d.google_msg, 700, function(){
    var card = document.createElement('div'); card.className = 'g-card';
    card.innerHTML =
      '<div class="g-perk"><div class="gi"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#A8331A" stroke-width="2" stroke-linecap="round"><rect x="3" y="4.5" width="18" height="16" rx="3"/><path d="M3 9h18M8 2.5v4M16 2.5v4"/></svg></div><div><b>'+d.g_cal+'</b><small>'+d.g_cal_s+'</small></div></div>' +
      '<div class="g-perk"><div class="gi"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#5a6b8c" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg></div><div><b>'+d.g_login+'</b><small>'+d.g_login_s+'</small></div></div>' +
      '<button class="g-btn" id="gBtn">' +
        '<svg width="16" height="16" viewBox="0 0 24 24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>' +
        d.g_btn +
      '</button>' +
      '<p class="g-note">'+d.g_note+'</p>';
    msgs.appendChild(card); scroll();

    document.getElementById('gBtn').onclick = function(){
      this.disabled = true; this.style.opacity = '.6';
      saveAndAuth();
    };
  });
}

async function saveAndAuth(){
  try {
    await fetch('/empezar?lang=' + LANG, {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest' },
      body: 'biz_name='      + encodeURIComponent(bizName)
          + '&rubro='        + encodeURIComponent(bizRubro)
          + '&especialidad=' + encodeURIComponent(bizEspec || '')
    });
  } catch(e){ /* continuar igual */ }
  window.location.href = '/auth/google?lang=' + LANG;
}

msgIn.addEventListener('keydown', function(e){
  if(e.key === 'Enter' && msgIn._onsubmit){
    var v = msgIn.value.trim(); if(v){ msgIn.value = ''; msgIn._onsubmit(v); }
  }
});
sendBtn.addEventListener('click', function(){
  var v = msgIn.value.trim();
  if(v && msgIn._onsubmit){ msgIn.value = ''; msgIn._onsubmit(v); }
});

setTimeout(start, 350);
</script>
</body>
</html>
