/* ─── NeuriaN Illustration Library ────────────────────────── Reusable SVG components, all on-brand (indigo/teal/dark). Each component accepts optional `light` prop for light mode. ────────────────────────────────────────────────────────── */ /* ── ROI Bar Chart ──────────────────────────────────────── */ function IlluROIChart({ before, after, label, unit='€', color='#4F6EF7' }) { const max = Math.max(before, after) * 1.15; const bh = Math.round((before / max) * 100); const ah = Math.round((after / max) * 100); const saving = Math.round(((after - before) / Math.abs(before)) * 100); return ( {/* Grid lines */} {[0,33,66,100].map(y => ( ))} {/* Before bar */} {before}{unit} Antes {/* After bar */} {after}{unit} Con NeuriaN {/* Delta badge */} 0 ? 'rgba(0,212,170,0.12)' : 'rgba(79,110,247,0.12)'} stroke={saving > 0 ? 'rgba(0,212,170,0.3)' : 'rgba(79,110,247,0.3)'} strokeWidth="0.5"/> 0 ? '#00D4AA' : '#7B96FF'}>{saving > 0 ? '+' : ''}{saving}% {label} ); } /* ── Calendar / Booking Visual ──────────────────────────── */ function IlluCalendar({ bookedDays = [2,5,9,12,15,16,19,22,23], totalDays = 22 }) { const days = Array.from({length: totalDays}, (_, i) => i+1); const cols = 5; return ( {/* Header */} {/* Day headers */} {['L','M','X','J','V'].map((d,i) => ( {d} ))} {/* Day cells */} {days.map((d, i) => { const col = i % cols; const row = Math.floor(i / cols); const x = 10 + col * 44; const y = 64 + row * 26; const booked = bookedDays.includes(d); return ( {d} ); })} {/* Legend */} Cita reservada automáticamente ); } /* ── Time Saved Clock — improved contrast ───────────────── */ function IlluTimeSaved({ hours = 2.5, label = 'horas/día ahorradas' }) { const pct = Math.min(hours / 8, 1); const angle = pct * 360; const r = 52; const cx = 70, cy = 76; const toRad = deg => (deg - 90) * Math.PI / 180; const arcX = cx + r * Math.cos(toRad(angle)); const arcY = cy + r * Math.sin(toRad(angle)); const largeArc = angle > 180 ? 1 : 0; return ( {/* Outer ring */} {/* Track */} {/* Progress arc */} {/* Tick marks */} {Array.from({length:12},(_,i) => { const a = (i/12)*360 - 90; const r1=r-6, r2=r+4; const x1=cx+r1*Math.cos(a*Math.PI/180), y1=cy+r1*Math.sin(a*Math.PI/180); const x2=cx+r2*Math.cos(a*Math.PI/180), y2=cy+r2*Math.sin(a*Math.PI/180); return ; })} {/* Center text — high contrast */} {hours}h al día libres {/* Bottom label */} {label} ); } /* ── No-Show Reduction — calendar grid visual ───────────── */ function IlluNoShows({ before=22, after=8 }) { const reduction = Math.round(((before - after) / before) * 100); // 5x4 grid of appointment slots const slots = Array.from({length:20}, (_, i) => { if (i < 20 * (before/100)) return 'noshow-before'; return 'ok'; }); // After: far fewer no-shows const slotsAfter = Array.from({length:20}, (_, i) => { if (i < 20 * (after/100)) return 'noshow-after'; return 'ok'; }); return ( {/* ANTES label */} ANTES {/* Grid before */} {Array.from({length:20}, (_,i) => { const col = i%5, row = Math.floor(i/5); const noshow = i < Math.round(20*(before/100)); return ( ); })} {before}% no-shows {/* Arrow */} → {/* DESPUÉS label */} CON NEURIAN {/* Grid after */} {Array.from({length:20}, (_,i) => { const col = i%5, row = Math.floor(i/5); const noshow = i < Math.round(20*(after/100)); return ( ); })} {after}% no-shows {/* Reduction badge */} −{reduction}% reducción {/* Legend */} No-show Asistió Sin sistema ); } /* ── Time Freed — schedule blocks visual ────────────────── */ function IlluBusiness({ freed = 3 }) { const workHours = 8; const busyHours = workHours - freed; const hours = Array.from({length: workHours}, (_, i) => ({ label: `${9+i}h`, type: i < busyHours ? (i < 2 ? 'task' : i < 4 ? 'task' : 'task') : 'free', task: i < busyHours ? ['Atender llamadas','Confirmar citas','Recordatorios','Gestión manual','Responder WA','Tareas admin'][i] || 'Admin' : null })); return ( {/* Title */} TU DÍA DE TRABAJO {/* Hour blocks */} {hours.map((h, i) => { const x = 10; const y = 18 + i * 14; const isFree = h.type === 'free'; return ( {/* Hour label */} {h.label} {/* Block */} {!isFree && h.task && ( {h.task} )} {isFree && ( ✓ Tiempo libre — NeuriaN lo gestionó )} ); })} {/* Badge */} {freed}h/día recuperadas para ti ); } /* ── Response Time Visual ───────────────────────────────── */ function IlluResponseTime() { return ( {/* Timeline bar */} {/* Before: slow */} Antes: ~4 horas {/* After: fast */} Con NeuriaN: <10 segundos {/* Pulse dot */} {/* Labels */} Tiempo de respuesta al cliente {/* Stat */} 1440x más rápido ); } /* ── Revenue Recovered ──────────────────────────────────── */ function IlluRevenue({ lost = 3200, recovered = 2800, currency='€/mes' }) { return ( {/* Coins stack left (lost) */} {[0,1,2].map(i=>( ))} −{lost}{currency.replace('/mes','')} perdido/mes {/* Arrow */} → {/* Coins stack right (recovered) */} {[0,1,2,3,4].map(i=>( ))} +{recovered}{currency.replace('/mes','')} recuperado/mes {/* ROI badge */} ROI positivo en 30 días ); } /* ── WhatsApp Flow Illustration ─────────────────────────── */ function IlluWhatsappFlow() { return ( {/* Phone outline */} {/* Status bar */} {/* Messages */} ✓ Cita confirmada Martes 29 · 10:00h {/* Input bar */} {/* Channels below */} También disponible en {[ {x:54, label:'Web', color:'#4F6EF7'}, {x:100, label:'Email', color:'#7B96FF'}, {x:146, label:'IG', color:'#00D4AA'}, ].map(c => ( {c.label} ))} ); } /* ── Interactive Automation Pipeline ───────────────────── */ function IlluPipeline({ steps = ['Solicitud','Verificación','Confirmación','Recordatorio','Post-visita'] }) { const [activeStep, setActiveStep] = React.useState(0); // Rich example data per step index (falls back to generic) const examples = [ { icon: '📩', title: 'Solicitud recibida', channel: 'WhatsApp · 22:14h', preview: (
Hola, quería pedir cita para una limpieza dental 🦷
¡Hola! Soy el asistente de Clínica López. Recibido 👋 Comprobando disponibilidad...
⏱ Respuesta en <3 segundos · 24/7
), stat: { value: '<3s', label: 'tiempo de respuesta' } }, { icon: '🔍', title: 'Verificación de agenda', channel: 'Integración · Google Calendar / Gesden', preview: (
MAYO 2026 3 huecos disponibles
{[ {day:'Martes 28', time:'10:00h', avail:true}, {day:'Martes 28', time:'12:30h', avail:false}, {day:'Miércoles 29', time:'17:00h', avail:true}, {day:'Jueves 30', time:'09:00h', avail:true}, ].map((slot,i) => (
{slot.day} · {slot.time} {slot.avail ? '✓ libre' : '✕ ocupado'}
))}
🔄 Sincronizado en tiempo real con tu agenda
), stat: { value: '0', label: 'conflictos de agenda' } }, { icon: '✅', title: 'Confirmación automática', channel: 'WhatsApp · mensaje saliente', preview: (
✓ Cita confirmada
📅 Martes 28 de mayo · 10:00h
📍 Clínica López — C/ Major 12, Barcelona
Recibirás un recordatorio 24h antes.
Para cancelar o cambiar escribe "cancelar".
📲 También enviado por email automáticamente
), stat: { value: '+40%', label: 'tasa de confirmación' } }, { icon: '🔔', title: 'Recordatorio automático', channel: 'WhatsApp · 24h y 2h antes', preview: (
RECORDATORIO · 24h antes
👋 ¡Hola! Te recordamos tu cita mañana
martes 28 · 10:00h en Clínica López.

¿Podrás venir? Responde SÍ o NO
SÍ, confirmo ✓
NO, cancelar ✕
📉 −{Math.round(22-22*0.45)}% no-shows con recordatorio doble
), stat: { value: '−45%', label: 'reducción no-shows' } }, { icon: '⭐', title: 'Seguimiento post-visita', channel: 'WhatsApp · 24h después', preview: (
¡Hola! ¿Qué tal tu visita de ayer?
Valora tu experiencia del 1 al 5 ⭐
{['😞','😐','🙂','😊','🤩'].map((e,i) => (
{e}
))}
🤩 ¡Genial! Gracias por la valoración.
¿Quieres reservar tu próxima visita?
📈 +23% de clientes que vuelven con seguimiento
), stat: { value: '+23%', label: 'clientes recurrentes' } }, ]; // Map passed steps to examples (cycle if more steps than examples) const getExample = (i) => examples[i % examples.length]; return (
{/* Left: step buttons */}
{steps.map((s, i) => { const ex = getExample(i); const isActive = activeStep === i; const isPast = i < activeStep; return ( ); })} {/* Progress bar */}
Paso {activeStep+1} de {steps.length} {getExample(activeStep).stat.value} {getExample(activeStep).stat.label}
{/* Right: example panel */}
{/* Panel header */}
{getExample(activeStep).icon}
{getExample(activeStep).title}
{getExample(activeStep).channel}
En vivo
{/* Panel body */}
{getExample(activeStep).preview}
); } /* ── Sector Hero Illustration ───────────────────────────── */ function IlluSectorHero({ sector = 'dental' }) { const icons = { dental: { primary:'🦷', items:['Recepción','Citas','Recordatorios','Encuestas'] }, estetica: { primary:'💆', items:['WhatsApp','Agenda','Confirmación','Post-visita'] }, taller: { primary:'🔧', items:['Presupuestos','Seguimiento','Estado','Factura'] }, gym: { primary:'🏋️', items:['Alta','Baja','Pausa','Renovación'] }, clinica: { primary:'🏥', items:['Triaje','Cita','Recordatorio','Informe'] }, peluqueria: { primary:'💇', items:['Reserva','Confirmación','Lista espera','Reseña'] }, }; const s = icons[sector] || icons.dental; return ( {/* Center hub */} {s.primary} {/* Orbit items */} {s.items.map((item, i) => { const angle = (i / s.items.length) * 360 - 45; const rad = angle * Math.PI / 180; const r = 62; const x = 100 + r * Math.cos(rad); const y = 80 + r * Math.sin(rad); return ( {item} ); })} {/* NeuriaN label */} Sistema NeuriaN — todo conectado ); } /* ── Dashboard Preview ──────────────────────────────────── */ function IlluDashboard() { return ( {/* Window chrome */} {/* Sidebar */} {[40,56,72,88,104].map(y=>( ))} {/* Main area */} {/* Stats row */} {[ {x:52, label:'Citas hoy', val:'24', color:'#4F6EF7'}, {x:112, label:'Respondidas', val:'24', color:'#00D4AA'}, {x:172, label:'No-shows', val:'1', color:'#EF4444'}, ].map(s=>( {s.val} {s.label} ))} {/* Chart area */} {[0,1,2,3,4,5,6].map(i=>{ const h = [30,45,28,55,40,60,35][i]; return ; })} {/* Activity list */} {[0,1,2,3].map(i=>( ))} ); } Object.assign(window, { IlluROIChart, IlluCalendar, IlluTimeSaved, IlluNoShows, IlluResponseTime, IlluRevenue, IlluWhatsappFlow, IlluPipeline, IlluBusiness, IlluSectorHero, IlluDashboard });