<?php
if (count(get_included_files()) === 1) { http_response_code(403); exit('Forbidden'); }
$page_title = 'Recursos';
$sellerNav  = 'recursos';

ob_start();
?>

<style>
/* ── recursos page ─────────────────────────────────────────── */
.rec-section{margin-bottom:2rem}
.rec-section h2{font-family:var(--font-headings);font-size:1rem;color:var(--color-tierra);margin:0 0 .8rem;display:flex;align-items:center;gap:8px}
.rec-section h2::after{content:"";flex:1;height:1px;background:var(--color-border)}

/* Landing cards */
.landing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem}
.landing-card{background:#fff;border:1px solid var(--color-border);border-radius:12px;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.6rem}
.lc-label{font-size:.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--color-text-muted)}
.lc-title{font-weight:700;font-size:.95rem;color:var(--color-tierra);line-height:1.3}
.lc-desc{font-size:.78rem;color:var(--color-text-muted);line-height:1.5;flex:1}
.lc-actions{display:flex;gap:.4rem}
.lc-btn{flex:1;text-align:center;font-size:.75rem;font-weight:700;padding:.4rem .6rem;border-radius:7px;text-decoration:none;border:none;cursor:pointer;font-family:var(--font-body)}
.lc-btn.open{background:var(--color-oro);color:var(--color-tierra)}
.lc-btn.copy{background:#f0ebe3;color:var(--color-tierra)}
.lc-btn.open:hover{background:var(--color-oro-oscuro,#b07a1a)}
.lc-btn.copy:hover{background:#e5dfd4}

/* Steps */
.steps-row{display:flex;gap:1rem;flex-wrap:wrap}
.step-card{background:#fff;border:1px solid var(--color-border);border-radius:12px;padding:1rem 1.1rem;flex:1;min-width:170px}
.step-num{font-family:var(--font-headings);font-size:2.2rem;color:rgba(168,51,26,.12);line-height:1;margin-bottom:.4rem}
.step-title{font-weight:700;font-size:.88rem;color:var(--color-tierra);margin-bottom:.3rem}
.step-body{font-size:.78rem;color:var(--color-text-muted);line-height:1.55}
.step-body a{color:var(--color-barro);font-weight:600;text-decoration:none}
.step-body a:hover{text-decoration:underline}

/* Templates WA */
.wa-list{display:flex;flex-direction:column;gap:.65rem}
.wa-card{background:#fff;border:1px solid var(--color-border);border-radius:12px;padding:.9rem 1.1rem}
.wa-tag{font-size:.68rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--color-barro);margin-bottom:.4rem}
.wa-msg{font-size:.82rem;color:#3A2E26;line-height:1.6;white-space:pre-wrap;background:#faf6f1;border-radius:8px;padding:.6rem .8rem;margin:.3rem 0 .5rem}
.wa-copy{font-size:.72rem;font-weight:700;color:var(--color-barro);background:none;border:none;cursor:pointer;font-family:var(--font-body);padding:0}
.wa-copy:hover{text-decoration:underline}

/* Pitch quick ref */
.pitch-ref{display:flex;flex-direction:column;gap:.6rem}
.pitch-item{background:#fff;border-left:3px solid var(--color-oro);border-radius:0 10px 10px 0;padding:.7rem 1rem;display:flex;align-items:flex-start;gap:.7rem}
.pitch-moment{font-size:.65rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--color-text-muted);min-width:64px;padding-top:2px}
.pitch-text{font-size:.82rem;color:#3A2E26;line-height:1.55;flex:1}
.pitch-copy-btn{font-size:.7rem;font-weight:700;color:var(--color-barro);background:none;border:none;cursor:pointer;font-family:var(--font-body);white-space:nowrap;padding-top:2px}
.pitch-copy-btn:hover{text-decoration:underline}

/* kit de ventas banner */
.kit-banner{background:linear-gradient(120deg,var(--color-tierra),#5A3A2A);border-radius:14px;padding:1.2rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.75rem}
.kb-text h3{font-family:var(--font-headings);font-size:1.05rem;color:#fff;margin:0 0 4px}
.kb-text p{font-size:.82rem;color:rgba(255,255,255,.55);margin:0;line-height:1.5}
.kb-btn{background:var(--color-oro);color:var(--color-tierra);font-size:.85rem;font-weight:800;padding:.65rem 1.3rem;border-radius:99px;text-decoration:none;white-space:nowrap;border:none;cursor:pointer;font-family:var(--font-body)}
.kb-btn:hover{background:#d9a020}
/* battlecard banner */
.bc-banner{background:linear-gradient(120deg,#1FA855,#137a3d);border-radius:14px;padding:1.2rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.bc-banner .kb-btn{background:#fff;color:#137a3d}
.bc-banner .kb-btn:hover{background:#eafff3}
/* ganchos */
.gancho-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.65rem}
.gancho-item{background:#fff;border:1px solid var(--color-border);border-left:3px solid var(--color-oro);border-radius:0 10px 10px 0;padding:.75rem 1rem}
.gancho-n{font-family:var(--font-headings);font-size:1.5rem;color:rgba(168,51,26,.15);line-height:1;float:right;margin-left:.5rem}
.gancho-title{font-weight:700;font-size:.88rem;color:var(--color-tierra);margin-bottom:.25rem}
.gancho-body{font-size:.78rem;color:var(--color-text-muted);line-height:1.5;clear:both}
/* objeciones */
.obj-list{display:flex;flex-direction:column;gap:.6rem}
.obj-item{background:#fff;border:1px solid var(--color-border);border-radius:12px;padding:.85rem 1.1rem}
.obj-q{font-weight:700;font-size:.85rem;color:#3A2E26;margin-bottom:.35rem}
.obj-q::before{content:'"';color:var(--color-text-muted)}
.obj-q::after{content:'"';color:var(--color-text-muted)}
.obj-a{font-size:.82rem;color:var(--color-text-muted);line-height:1.55;display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem}
.obj-a::before{content:'→';color:#1FA855;font-weight:700;flex-shrink:0;margin-top:1px}
.obj-copy{font-size:.7rem;font-weight:700;color:var(--color-barro);background:none;border:none;cursor:pointer;font-family:var(--font-body);white-space:nowrap;flex-shrink:0;padding-top:1px}
.obj-copy:hover{text-decoration:underline}

/* toast */
#cp-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1E7A4D;color:#fff;padding:10px 20px;border-radius:99px;font-size:.82rem;font-weight:700;display:none;z-index:999;box-shadow:0 6px 20px rgba(0,0,0,.2)}
</style>

<?php
$baseUrl = getenv('APP_URL') ?: 'https://valeai.app';
$landings = [
    ['tag'=>'General','title'=>'Landing principal','desc'=>'Para cualquier rubro. Ideal para primera impresión.','path'=>'/'],
    ['tag'=>'Barbería','title'=>'Vale para barberías','desc'=>'Turnos, fade, barbero favorito. La más concreta para el rubro.','path'=>'/landing/vale-barberia.html'],
    ['tag'=>'Belleza','title'=>'Vale para salones y spas','desc'=>'Color, manicura, tiempos reales, seña automática.','path'=>'/landing/vale-belleza.html'],
    ['tag'=>'Odontología','title'=>'Vale para consultorios','desc'=>'Citas, recordatorios, sin diagnósticos.','path'=>'/landing/vale-odontologia.html'],
];
?>

<!-- KPIs rápidos -->
<div class="kpi-row">
  <div class="kpi"><div class="kv"><?= (int)$activos ?></div><div class="kl">Negocios activos</div></div>
  <div class="kpi"><div class="kv">$<?= number_format($totalMrr, 0) ?></div><div class="kl">MRR generado</div></div>
  <div class="kpi"><div class="kv">$<?= number_format($pendComm, 2) ?></div><div class="kl">Comisiones pendientes</div></div>
  <div class="kpi"><div class="kv"><?= count($tenants) ?></div><div class="kl">Total en pipeline</div></div>
</div>

<!-- Banners de recursos -->
<div class="kit-banner">
  <div class="kb-text">
    <h3>Kit de ventas completo</h3>
    <p>Pitch por escenario, frases que cierran, manejo de objeciones y cómo hacer el demo en vivo.</p>
  </div>
  <a href="<?= $baseUrl ?>/landing/vale-vendedores.html" target="_blank" class="kb-btn">Abrir kit de ventas →</a>
</div>
<div class="bc-banner">
  <div class="kb-text">
    <h3 style="color:#fff">Battlecard — guía de venta en calle</h3>
    <p>Opener, demo en vivo, 5 ganchos, objeciones y cierre. Una página, todo lo que necesitás antes de salir.</p>
  </div>
  <a href="<?= $baseUrl ?>/landing/vale-battlecard-vendedor.html" target="_blank" class="kb-btn">Ver battlecard →</a>
</div>

<!-- Páginas de venta -->
<div class="rec-section">
  <h2>Páginas de venta</h2>
  <div class="landing-grid">
    <?php foreach ($landings as $l): $url = $baseUrl.$l['path']; ?>
    <div class="landing-card">
      <div class="lc-label"><?= htmlspecialchars($l['tag']) ?></div>
      <div class="lc-title"><?= htmlspecialchars($l['title']) ?></div>
      <div class="lc-desc"><?= htmlspecialchars($l['desc']) ?></div>
      <div class="lc-actions">
        <a href="<?= htmlspecialchars($url) ?>" target="_blank" class="lc-btn open">Abrir</a>
        <button class="lc-btn copy" onclick="copyText('<?= htmlspecialchars($url, ENT_QUOTES) ?>')">Copiar link</button>
      </div>
    </div>
    <?php endforeach; ?>
  </div>
</div>

<!-- Cómo activar un cliente -->
<div class="rec-section">
  <h2>Cómo activar un cliente</h2>
  <div class="steps-row">
    <div class="step-card">
      <div class="step-num">01</div>
      <div class="step-title">Compartí la landing</div>
      <div class="step-body">Mandá la página del rubro del negocio. Si es barbería, mandá la de barberías. Dejá que lea y que sienta que está hecha para él.</div>
    </div>
    <div class="step-card">
      <div class="step-num">02</div>
      <div class="step-title">Acompañá el registro</div>
      <div class="step-body">El botón "Crear cuenta gratis" lo lleva a registrarse. Podés hacerlo con él en el momento. En 5 minutos tiene la cuenta.</div>
    </div>
    <div class="step-card">
      <div class="step-num">03</div>
      <div class="step-title">Activá el plan</div>
      <div class="step-body">Una vez registrado, buscalo en <a href="/seller/tenants">tu pipeline</a> y presioná "Activar". Elegís el plan y los meses pagados en efectivo.</div>
    </div>
    <div class="step-card">
      <div class="step-num">04</div>
      <div class="step-title">Seguimiento</div>
      <div class="step-body">A los 7 días escribile para saber cómo le va. Un cliente que siente acompañamiento renueva. Uno que queda solo, no.</div>
    </div>
  </div>
</div>

<!-- Templates de WhatsApp -->
<div class="rec-section">
  <h2>Templates de WhatsApp</h2>
  <div class="wa-list">
    <div class="wa-card">
      <div class="wa-tag">Primer contacto</div>
      <div class="wa-msg" id="wa1">Hola [Nombre], ¿cómo estás? Te escribo porque tengo algo que creo que te va a interesar para tu negocio. ¿Tenés 2 minutos para que te cuente?</div>
      <button class="wa-copy" onclick="copyId('wa1')">Copiar mensaje</button>
    </div>
    <div class="wa-card">
      <div class="wa-tag">Después del primer interés</div>
      <div class="wa-msg" id="wa2">Mirá, te mando la página para que la veas con calma: [LINK LANDING]. Vale es básicamente una empleada con IA que atiende a tus clientes por WhatsApp las 24 horas — reserva turnos, responde preguntas, manda recordatorios. Empezás gratis, sin tarjeta. ¿Qué te parece si lo probamos?</div>
      <button class="wa-copy" onclick="copyId('wa2')">Copiar mensaje</button>
    </div>
    <div class="wa-card">
      <div class="wa-tag">Seguimiento (sin respuesta)</div>
      <div class="wa-msg" id="wa3">Hola [Nombre], ¿pudiste ver lo que te mandé? Te pregunto porque hay negocios como el tuyo que están perdiendo clientes cada semana solo por no poder contestar a tiempo. Vale lo resuelve sin que tengas que cambiar nada de cómo trabajás. ¿Cuándo te queda bien para que te muestre cómo funciona en vivo?</div>
      <button class="wa-copy" onclick="copyId('wa3')">Copiar mensaje</button>
    </div>
    <div class="wa-card">
      <div class="wa-tag">Demo en vivo</div>
      <div class="wa-msg" id="wa4">Te mando el chat demo para que lo pruebes ahora mismo: [LINK LANDING] — buscá el chat al costado y escribile como si fueras un cliente tuyo. Mirá cómo responde.</div>
      <button class="wa-copy" onclick="copyId('wa4')">Copiar mensaje</button>
    </div>
  </div>
</div>

<!-- Los 5 ganchos -->
<div class="rec-section">
  <h2>Los 5 ganchos</h2>
  <div class="gancho-list">
    <div class="gancho-item"><span class="gancho-n">1</span><div class="gancho-title">En su idioma, hecha para usted.</div><div class="gancho-body">No una app en inglés que se siente ajena. Vale habla como ellos, en centroamericano.</div></div>
    <div class="gancho-item"><span class="gancho-n">2</span><div class="gancho-title">No aprende nada.</div><div class="gancho-body">Se configura hablándole, como me habla a mí. Ninguna app, ningún tutorial.</div></div>
    <div class="gancho-item"><span class="gancho-n">3</span><div class="gancho-title">Vive en el WhatsApp que su cliente ya usa.</div><div class="gancho-body">El cliente no baja ninguna app. Escribe donde ya escribe.</div></div>
    <div class="gancho-item"><span class="gancho-n">4</span><div class="gancho-title">Es una empleada, no un programa.</div><div class="gancho-body">Trabaja por usted; usted no la "maneja". Contesta, agenda y sigue.</div></div>
    <div class="gancho-item"><span class="gancho-n">5</span><div class="gancho-title">Yo se la dejo lista y le acompaño.</div><div class="gancho-body">Local, en su idioma. No una empresa gringa que lo deja solo después de la venta.</div></div>
  </div>
</div>

<!-- Objeciones más comunes -->
<div class="rec-section">
  <h2>Objeciones — respuesta de un toque</h2>
  <div class="obj-list">
    <div class="obj-item">
      <div class="obj-q">No entiendo de tecnología</div>
      <div class="obj-a"><span id="ob1">Por eso no tiene que aprender nada. Le habla a Vale como me habla a mí, y ella hace todo. Y yo se la dejo lista.</span><button class="obj-copy" onclick="copyId('ob1')">Copiar</button></div>
    </div>
    <div class="obj-item">
      <div class="obj-q">Ya tengo WhatsApp</div>
      <div class="obj-a"><span id="ob2">Perfecto, Vale vive ahí mismo. La diferencia es que contesta sola cuando usted no puede.</span><button class="obj-copy" onclick="copyId('ob2')">Copiar</button></div>
    </div>
    <div class="obj-item">
      <div class="obj-q">Está caro / no tengo para eso</div>
      <div class="obj-a"><span id="ob3">Empezar es gratis, sin tarjeta. Pruébela, y si no le sirve, no paga nada.</span><button class="obj-copy" onclick="copyId('ob3')">Copiar</button></div>
    </div>
    <div class="obj-item">
      <div class="obj-q">¿Es un robot? No quiero que mis clientes hablen con una máquina</div>
      <div class="obj-a"><span id="ob4">Se presenta como asistente, contesta amable en su idioma, y lo que no sabe se lo pasa a usted. Nunca inventa.</span><button class="obj-copy" onclick="copyId('ob4')">Copiar</button></div>
    </div>
    <div class="obj-item">
      <div class="obj-q">Lo voy a pensar</div>
      <div class="obj-a"><span id="ob5">Buenísimo — déjeme dejársela gratis hoy para que la pruebe mientras lo piensa. No pierde nada.</span><button class="obj-copy" onclick="copyId('ob5')">Copiar</button></div>
    </div>
    <div class="obj-item">
      <div class="obj-q">¿Quiénes son ustedes?</div>
      <div class="obj-a"><span id="ob6">Un estudio local. Le configuro Vale y le acompaño, en su idioma — no una app que lo deja solo.</span><button class="obj-copy" onclick="copyId('ob6')">Copiar</button></div>
    </div>
  </div>
</div>

<!-- Pitch rápido de referencia -->
<div class="rec-section">
  <h2>Pitch rápido — referencia</h2>
  <div class="pitch-ref">
    <div class="pitch-item">
      <div class="pitch-moment">Abrir</div>
      <div class="pitch-text">"Don [nombre], ¿cuántos clientes le escriben cuando está ocupado atendiendo y no alcanza a contestar? Déjeme mostrarle algo en 2 minutos que les contesta y les agenda solo — y empezar es gratis."</div>
      <button class="pitch-copy-btn" onclick="copyText(this.previousElementSibling.textContent.trim())">Copiar</button>
    </div>
    <div class="pitch-item">
      <div class="pitch-moment">Dolor</div>
      <div class="pitch-text">"Cada mensaje sin respuesta es un cliente que ya está escribiéndole a tu competencia. No porque no quiera comprarte — sino porque vos no estabas disponible en ese momento."</div>
      <button class="pitch-copy-btn" onclick="copyText(this.previousElementSibling.textContent.trim())">Copiar</button>
    </div>
    <div class="pitch-item">
      <div class="pitch-moment">Solución</div>
      <div class="pitch-text">"Vale es una empleada con IA que atiende esos mensajes por vos. Sabe todo sobre tu negocio, habla como vos, y está disponible a las 2 de la mañana si un cliente escribe. Reserva turnos, responde precios, confirma pedidos. Todo por WhatsApp."</div>
      <button class="pitch-copy-btn" onclick="copyText(this.previousElementSibling.textContent.trim())">Copiar</button>
    </div>
    <div class="pitch-item">
      <div class="pitch-moment">Precio</div>
      <div class="pitch-text">"Empezás gratis, sin límite de tiempo. Cuando querés más — WhatsApp, más clientes, seguimiento automático — son $55 al mes. Una empleada real cuesta $1,500 mínimo."</div>
      <button class="pitch-copy-btn" onclick="copyText(this.previousElementSibling.textContent.trim())">Copiar</button>
    </div>
    <div class="pitch-item">
      <div class="pitch-moment">Cerrar</div>
      <div class="pitch-text">"El riesgo es cero — la empezás gratis. El riesgo es no hacerlo y seguir perdiendo clientes. ¿Arrancamos ahora o mañana a primera hora?"</div>
      <button class="pitch-copy-btn" onclick="copyText(this.previousElementSibling.textContent.trim())">Copiar</button>
    </div>
  </div>
</div>

<div id="cp-toast">Copiado</div>

<script>
function copyText(t){navigator.clipboard.writeText(t).then(()=>{var x=document.getElementById('cp-toast');x.style.display='block';clearTimeout(x._t);x._t=setTimeout(()=>{x.style.display='none'},2000)})}
function copyId(id){copyText(document.getElementById(id).textContent.trim())}
</script>

<?php
$content = ob_get_clean();
require __DIR__ . '/layout.php';
