// ─── Demo Screen — Propuesta de transformación personalizada ────────────────── window.S9Demo = function S9Demo({ state, onBack }) { const [status, setStatus] = React.useState('loading'); const [html, setHtml] = React.useState(''); const niche = window.NICHOS.find(n => n.id === state.nicho) || window.NICHOS[0]; const areasData = niche.areas || niche.dolores || []; const dolor = (state.dolores || []).map(id => areasData.find(d => d.id === id)).filter(Boolean); const mainDolor = dolor[0] || areasData[0] || { titulo: 'proceso crítico', sub: '' }; const escala = window.ESCALAS.find(e => e.id === state.escala) || window.ESCALAS[1]; const maduracion = window.MADURACIONES.find(m => m.id === state.maduracion) || window.MADURACIONES[0]; const est = window.estimarImpacto({ nicho: state.nicho, escala: state.escala, maduracion: state.maduracion }); const empresa = state.empresa || 'tu empresa'; const nombre = (state.nombre || '').split(' ')[0] || ''; React.useEffect(() => { // Solo pasamos los hechos crudos — Claude razona el resto const nichoDesc = { fabricacion: 'Empresa que fabrica, produce o transforma productos — producción por lotes, calidad, trazabilidad, cumplimiento regulatorio. Nivel de automatización posible: 70-85%.', lab: 'Laboratorio farmacéutico o fabricante de medicamentos en Colombia — producción por lotes, control de calidad BPM, registros INVIMA, bodega de materias primas y producto terminado. Nivel de automatización posible con IA: 70-85% operacional.', comercio: 'Empresa con puntos de venta o tiendas que atienden clientes directamente — inventario en múltiples sedes, caja, abastecimiento, coordinación entre puntos. Nivel de automatización posible: 75-90%.', drogueria: 'Droguería o cadena farmacéutica colombiana — punto de venta directo al paciente, múltiples sedes, inventario de medicamentos, cajas, dependientes, regentes. Nivel de automatización posible con IA: 75-90% operativo. Uno de los negocios más optimizables del sector salud.', distribucion:'Empresa con fuerza de ventas en calle visitando clientes — asesores TAT, rutas, pedidos, cartera, liquidación de comisiones, presupuesto comercial. Nivel de automatización posible: 80%.', distri: 'Distribuidora canal TAT en Colombia — fuerza de ventas en calle visitando clientes diariamente, asesores con rutas, pedidos, cartera, liquidación de comisiones y bonos, presupuesto comercial por zona. Nivel de automatización posible: 80% operativo/comercial.', servicios: 'Empresa que presta servicios mediante agenda, atención o citas — agendamiento, facturación, seguimiento de clientes, operación del servicio. Nivel de automatización posible: 60-80%.', ips: 'IPS, clínica u hospital colombiano — atención médica, farmacia interna, facturación a EPS con glosas, historia clínica, agenda médica, autorización de procedimientos. Nivel de automatización posible: 60-80%. La eficiencia puede multiplicarse significativamente.', tecnico: 'Empresa que instala, mantiene o soporta equipos y operaciones — soporte técnico, gestión de activos, licitaciones, cartera institucional. Nivel de automatización posible: 70-85%.', dispositivos:'Empresa de dispositivos médicos o equipos biomédicos en Colombia — importación, venta a hospitales y clínicas, soporte técnico posventa, mantenimiento de equipos instalados, licitaciones. Nivel de automatización posible: 70-85%.', otro: 'Empresa colombiana del sector salud, bienestar o servicios relacionados.', }[state.nicho] || niche.desc || niche.label; const prompt = `Eres un consultor experto en transformación digital de empresas colombianas. Acabas de hacer un diagnóstico con un directivo en una feria empresarial y ahora vas a mostrarle, en una propuesta visual personalizada, cómo se vería su empresa si el problema que encontraste estuviera resuelto. CONTEXTO REAL DE LA EMPRESA: Empresa: ${empresa}${nombre ? ` | Contacto: ${nombre}` : ''} Tipo de empresa: ${nichoDesc} Tamaño: ${escala.label} Nivel tecnológico actual: ${maduracion.label} Problema principal identificado: ${mainDolor.titulo} — ${mainDolor.sub} ${dolor[1] ? `Problema secundario: ${dolor[1].titulo}` : ''} ${est ? `Estimación de impacto en productividad: ${est.personasAfectadas} personas del equipo dedicando ${est.horasPorPersona.min}-${est.horasPorPersona.max} horas semanales a trabajo que no debería existir` : ''} TU MISIÓN: Razona desde tu conocimiento real de cómo operan este tipo de empresas en Colombia. No copies ni parafrasees el problema — úsalo como punto de partida para construir una narrativa de transformación que sea reconocible, específica y que haga que el directivo piense "esto es exactamente lo que nos pasa y lo que necesitamos". La propuesta debe mostrar que entiendes profundamente cómo funciona este negocio en Colombia — los actores involucrados, los procesos reales, los cuellos de botella típicos, el lenguaje que usa el sector. GENERA una propuesta HTML de pantalla completa con estas secciones: SECCIÓN 1 — ENCABEZADO (fondo #070910): Nombre de la empresa grande y bold. Una frase de una línea que capture la oportunidad específica para este tipo de empresa — que suene a insight de alguien que conoce el sector, no a slogan genérico. Badge pequeño: "Diagnóstico personalizado · AI First Business · ${new Date().toLocaleDateString('es-CO', {day:'numeric', month:'long', year:'numeric'})}" SECCIÓN 2 — EL DIAGNÓSTICO (card con borde izquierdo rojo): Título: "Lo que encontramos en ${empresa}" 3-4 líneas en prosa. Describe el problema de forma que el directivo lo reconozca como propio. Usa el lenguaje real del sector — no "optimización de procesos" sino los términos reales que usan en ese negocio en Colombia. Conecta el problema con su impacto en la capacidad de crecimiento de la empresa, no solo en eficiencia. Termina con una frase que abra la posibilidad: "Y sin embargo, existe una forma de que ${empresa} lo resuelva de una vez." SECCIÓN 3 — EL ECOSISTEMA DE SOLUCIONES (fondo #0f1117): Título: "Lo que construiríamos para ${empresa}" Primero, 3-4 líneas en prosa que describan el ecosistema completo — no como lista de funcionalidades sino como visión de cómo se vería la operación transformada. Menciona los diferentes actores que tendrían sus propias herramientas (equipo de campo, gerencia, clientes, colaboradores según corresponda al tipo de empresa). Luego, 3-4 tarjetas horizontales con scroll. Cada tarjeta representa un actor o área que se transforma. Cada tarjeta: ícono SVG relevante, nombre del actor/área específico para este negocio, 1-2 líneas de qué cambia para ellos. Lenguaje concreto y reconocible. SECCIÓN 4 — CONTRASTE (dos columnas): Sin título de sección visible. Dos columnas: Izquierda (fondo rgba(239,68,68,0.06), borde rojo suave): "Hoy" — 3 situaciones específicas de 1 línea que describan cómo opera hoy este tipo de empresa con este problema. Que sean tan precisas que el directivo piense "¿cómo saben esto?". Sin números inventados. Derecha (fondo rgba(16,185,129,0.06), borde verde suave): "Con la solución" — 3 situaciones correspondientes que muestren el contraste. Mismo tono específico. Sin prometer imposibles. SECCIÓN 5 — INTELIGENCIA DE MERCADO (gradiente azul-morado, card destacada): Título: "Lo que está cambiando en el sector" 2-3 líneas sobre una tendencia real y verificable del sector en Colombia en 2025-2026 que hace urgente esta transformación para este tipo de empresa específicamente. Que suene a información que el consultor tiene y el cliente no. SECCIÓN 6 — CIERRE (fondo #070910, centrado): ${nombre ? `Una frase directa dirigida a ${nombre} específicamente.` : 'Una frase de cierre poderosa.'} Dos botones funcionales: - "Hablemos esta semana" → href="https://wa.me/573043783705?text=Hola%2C%20acabo%20de%20ver%20la%20propuesta%20para%20${encodeURIComponent(empresa)}%20y%20quiero%20agendar%20una%20conversaci%C3%B3n" en azul sólido - "Compartir propuesta" → onclick="if(navigator.share){navigator.share({title:'Propuesta ${encodeURIComponent(empresa)}',url:window.location.href})}else{navigator.clipboard.writeText(window.location.href)}" en borde azul Texto pequeño abajo: "AI First Business · Transformación digital · Colombia 2026" ESTILO COMPLETO: - Fondo base: #070910, cards: #0f1117, surface secundario: #161a24 - Borders: 1px solid rgba(255,255,255,0.07) - Texto: #f1f5f9, secundario: rgba(241,245,249,0.5), dim: rgba(241,245,249,0.25) - Azul: #3b82f6, Verde: #10b981, Rojo: #ef4444, Morado: #8b5cf6 - Font: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif - Secciones: padding 48px 24px, max-width 640px, margin 0 auto - Cards: border-radius 16px, padding 24px, box-shadow: 0 2px 16px rgba(0,0,0,0.3) - Labels de sección: font-size 10px, letter-spacing 0.12em, text-transform uppercase, color rgba(255,255,255,0.3) - Títulos: font-size 22px, font-weight 700, letter-spacing -0.02em, line-height 1.25 - Prosa: font-size 15px, line-height 1.75, color rgba(241,245,249,0.75) - Animaciones: @keyframes fadeUp { from {opacity:0;transform:translateY(14px)} to {opacity:1;transform:none} } — aplicar con delay escalonado - Botones: padding 14px 28px, border-radius 12px, font-size 15px, font-weight 600 - NUNCA usar listas con viñetas — todo en prosa o tarjetas - Mobile-first, 100% de ancho, sin scroll horizontal Responde ÚNICAMENTE con HTML listo para innerHTML. Sin DOCTYPE, sin html/head/body, sin markdown, sin backticks, sin comentarios.`; fetch('/api/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ model: 'claude-sonnet-4-5', max_tokens: 6000, messages: [{ role: 'user', content: prompt }], }), }) .then(r => r.json()) .then(data => { const text = (data.content || []).filter(b => b.type === 'text').map(b => b.text).join(''); if (!text) throw new Error('empty'); const clean = text.replace(/^```html?\n?/i, '').replace(/\n?```$/i, '').trim(); setHtml(clean); setStatus('ready'); }) .catch(() => setStatus('error')); }, []); return (
{/* Barra superior */}
Propuesta para {empresa}
{/* Loading */} {status === 'loading' && (
Construyendo tu propuesta…
Analizando el diagnóstico de {empresa} y preparando una propuesta de transformación personalizada
{niche.label} · {mainDolor.titulo}
)} {/* Error */} {status === 'error' && (
⚠️
No pudimos generar la propuesta
Habla con nuestro equipo en el stand — te la presentamos en persona.
)} {/* Propuesta generada */} {status === 'ready' && (
)}
); };