@decido/shell 1.0.0

package/src/components/playground/demos/KiaLiveSimulationNode.tsx

@@ -0,0 +1,177 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { BaseNode } from '@decido/macia-core';
+import {
+    Play, Pause, SkipForward, Activity, Zap, Users,
+    Car, ShoppingCart, Wrench, BarChart3, Radio, TrendingUp,
+    ArrowRight, Clock, Gauge, RefreshCw
+} from 'lucide-react';
+
+/* ═══════════════════════════════════════════════════════════════
+   KIA LIVE SIMULATION NODE — Real-Time Data Flow · Grecco Motors
+   Orchestrates simulated events across all ecosystem nodes
+   ═══════════════════════════════════════════════════════════════ */
+
+interface SimEvent {
+    id: number;
+    time: string;
+    source: string;
+    target: string;
+    type: 'lead' | 'service' | 'sale' | 'alert' | 'finance';
+    msg: string;
+    color: string;
+}
+
+const EVENT_TEMPLATES = [
+    { source: '📱 WhatsApp Bot', target: '🎯 Lead Scoring', type: 'lead' as const, msg: 'Nuevo lead: María Gómez — Interesada en EV6', color: '#3b82f6' },
+    { source: '🎯 Lead Scoring', target: '📊 Dashboard', type: 'lead' as const, msg: 'Lead HOT → Assign Johan S. Blanco (Score: 92)', color: '#ef4444' },
+    { source: '🎮 Gamification', target: '📊 Dashboard', type: 'lead' as const, msg: 'Lucky Drive win: Mantenimiento Gratis → CRM reg', color: '#a855f7' },
+    { source: '🔧 Workshop', target: '📊 Dashboard', type: 'service' as const, msg: 'Sportage KIA-5502 — Bahía 3 — QC Passed ✅', color: '#22c55e' },
+    { source: '🏥 Fleet Health', target: '🔧 Workshop', type: 'alert' as const, msg: 'EV6-001: Bujía cilindro 1 desgaste 87% — Cita auto', color: '#f59e0b' },
+    { source: '🛒 Store', target: '💰 Finance', type: 'sale' as const, msg: 'Pedido #1247: Polarizado 3M + Tapetes — $1.13M', color: '#06b6d4' },
+    { source: '💰 Finance', target: '📊 Dashboard', type: 'finance' as const, msg: 'Pre-aprobación OK: Score 812, Bancolombia, $112M', color: '#22c55e' },
+    { source: '🛡️ CyberOps', target: '📊 Dashboard', type: 'alert' as const, msg: 'Brute force blocked — IP 45.33.X.X — WAF active', color: '#ef4444' },
+    { source: '🚗 Mobility', target: '🛡️ CyberOps', type: 'alert' as const, msg: 'V2X integrity check passed — EV6 fleet OK', color: '#22c55e' },
+    { source: '📚 Academy', target: '📊 Dashboard', type: 'lead' as const, msg: 'Camila Torres → ADAS Expert cert completed 🏆', color: '#a855f7' },
+    { source: '🔧 Workshop', target: '🛒 Store', type: 'service' as const, msg: 'Auto-order: Filtro aceite Sportage × 12 unid', color: '#06b6d4' },
+    { source: '📱 WhatsApp Bot', target: '🎮 Gamification', type: 'lead' as const, msg: 'Redirect: Cliente quiere Test Drive → Showroom', color: '#3b82f6' },
+];
+
+const PIPELINE_STAGES = [
+    { label: 'Leads', icon: Users, count: 437, color: '#3b82f6' },
+    { label: 'Contacto', icon: Radio, count: 246, color: '#06b6d4' },
+    { label: 'Show Up', icon: Car, count: 85, color: '#a855f7' },
+    { label: 'Cotización', icon: BarChart3, count: 47, color: '#f59e0b' },
+    { label: 'Cierre', icon: TrendingUp, count: 30, color: '#22c55e' },
+];
+
+export const KiaLiveSimulationNode = (props: any) => {
+    const [events, setEvents] = useState<SimEvent[]>([]);
+    const [isRunning, setIsRunning] = useState(true);
+    const [speed, setSpeed] = useState(1);
+    const [stats, setStats] = useState({ eventsTotal: 0, leads: 0, services: 0, sales: 0, alerts: 0 });
+    const [pipeline, setPipeline] = useState(PIPELINE_STAGES.map(s => ({ ...s })));
+
+    const addEvent = useCallback(() => {
+        const template = EVENT_TEMPLATES[Math.floor(Math.random() * EVENT_TEMPLATES.length)];
+        const ev: SimEvent = {
+            id: Date.now() + Math.random(),
+            time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }),
+            ...template,
+        };
+        setEvents(prev => [ev, ...prev].slice(0, 50));
+        setStats(prev => ({
+            eventsTotal: prev.eventsTotal + 1,
+            leads: prev.leads + (template.type === 'lead' ? 1 : 0),
+            services: prev.services + (template.type === 'service' ? 1 : 0),
+            sales: prev.sales + (template.type === 'sale' ? 1 : 0),
+            alerts: prev.alerts + (template.type === 'alert' ? 1 : 0),
+        }));
+        // Pipeline jitter
+        setPipeline(prev => prev.map((s, i) => ({
+            ...s,
+            count: s.count + (i === 0 ? Math.floor(Math.random() * 3) : 0),
+        })));
+    }, []);
+
+    useEffect(() => {
+        if (!isRunning) return;
+        const interval = setInterval(addEvent, 2500 / speed);
+        return () => clearInterval(interval);
+    }, [isRunning, speed, addEvent]);
+
+    const toggleSpeed = () => setSpeed(s => s >= 4 ? 1 : s * 2);
+
+    return (
+        <BaseNode {...props} title="Kia Live Simulation" width={520} height={620}>
+            <div className="flex flex-col h-full bg-[#060a12] text-white overflow-hidden">
+
+                {/* Header */}
+                <div className="flex items-center gap-3 p-3 bg-[#0c1222] border-b border-slate-800">
+                    <div className="w-9 h-9 rounded-full bg-red-600/20 flex items-center justify-center border border-red-500/30">
+                        <span className="text-red-500 font-bold text-[7px] tracking-widest">KIA</span>
+                    </div>
+                    <div className="flex-1">
+                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
+                            LIVE SIMULATION
+                            {isRunning && <span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />}
+                        </div>
+                        <div className="text-[10px] text-slate-400">Grecco Motors · Event Stream · {stats.eventsTotal} eventos</div>
+                    </div>
+                    <div className="flex gap-1">
+                        <button onClick={() => setIsRunning(!isRunning)}
+                            className={`p-1.5 rounded-lg border transition-all ${isRunning
+                                ? 'bg-green-500/20 border-green-500/30 text-green-400'
+                                : 'bg-slate-800 border-slate-700 text-slate-400'}`}>
+                            {isRunning ? <Pause size={12} /> : <Play size={12} />}
+                        </button>
+                        <button onClick={toggleSpeed}
+                            className="px-2 py-1 rounded-lg bg-slate-800 border border-slate-700 text-[10px] font-bold text-slate-300">
+                            {speed}×
+                        </button>
+                        <button onClick={addEvent}
+                            className="p-1.5 rounded-lg bg-slate-800 border border-slate-700 text-slate-400 hover:text-white">
+                            <SkipForward size={12} />
+                        </button>
+                    </div>
+                </div>
+
+                {/* Stats Bar */}
+                <div className="flex gap-1 p-2 bg-[#0a0f1a] border-b border-slate-800">
+                    {[
+                        { val: stats.leads, label: 'Leads', color: 'blue' },
+                        { val: stats.services, label: 'Servicios', color: 'green' },
+                        { val: stats.sales, label: 'Ventas', color: 'cyan' },
+                        { val: stats.alerts, label: 'Alertas', color: 'yellow' },
+                    ].map(s => (
+                        <div key={s.label} className={`flex-1 bg-${s.color}-500/5 border border-${s.color}-500/10 rounded p-1.5 text-center`}>
+                            <div className={`text-sm font-bold text-${s.color}-400`}>{s.val}</div>
+                            <div className="text-[8px] text-slate-500">{s.label}</div>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Pipeline */}
+                <div className="flex items-center gap-0.5 px-3 py-2 border-b border-slate-800 bg-slate-900/30">
+                    {pipeline.map((stage, i) => (
+                        <React.Fragment key={stage.label}>
+                            <div className="flex-1 text-center">
+                                <div className="text-base font-bold" style={{ color: stage.color }}>{stage.count}</div>
+                                <div className="text-[8px] text-slate-500">{stage.label}</div>
+                            </div>
+                            {i < pipeline.length - 1 && (
+                                <ArrowRight size={10} className="text-slate-600 flex-shrink-0" />
+                            )}
+                        </React.Fragment>
+                    ))}
+                </div>
+
+                {/* Event Stream */}
+                <div className="flex-1 overflow-y-auto p-2 space-y-1">
+                    {events.map(ev => (
+                        <div key={ev.id} className="flex items-start gap-2 bg-slate-900/50 rounded-lg p-2 border border-slate-800/50"
+                            style={{ borderLeftColor: ev.color, borderLeftWidth: '2px' }}>
+                            <div className="flex-shrink-0">
+                                <Activity size={10} className="mt-0.5" style={{ color: ev.color }} />
+                            </div>
+                            <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-2 text-[9px] text-slate-500 mb-0.5">
+                                    <span className="font-mono">{ev.time}</span>
+                                    <span>{ev.source}</span>
+                                    <ArrowRight size={8} />
+                                    <span>{ev.target}</span>
+                                </div>
+                                <div className="text-[10px] text-slate-300 leading-relaxed">{ev.msg}</div>
+                            </div>
+                        </div>
+                    ))}
+                    {events.length === 0 && (
+                        <div className="text-slate-600 text-center py-12 text-xs">
+                            <RefreshCw className="mx-auto mb-2 animate-spin" size={16} />
+                            Iniciando simulación...
+                        </div>
+                    )}
+                </div>
+            </div>
+        </BaseNode>
+    );
+};

package/src/components/playground/demos/KiaMultiDealerNode.tsx

@@ -0,0 +1,223 @@
+import React, { useState, useEffect } from 'react';
+import { BaseNode } from '@decido/macia-core';
+import {
+    Building2, TrendingUp, Users, BarChart3, Map,
+    ChevronUp, ChevronDown, Eye, Crown, Target, Layers
+} from 'lucide-react';
+
+/* ═══════════════════════════════════════════════════════════════
+   KIA MULTI-DEALER NODE — Multi-Concesionario · Red Metrokia
+   Benchmark, ranking, regional dashboard, template system
+   ═══════════════════════════════════════════════════════════════ */
+
+interface Dealer {
+    id: string;
+    name: string;
+    city: string;
+    region: string;
+    score: number;
+    prevScore: number;
+    ranking: string;
+    sales: number;
+    posventa: number;
+    nps: number;
+    ms: number;
+    color: string;
+}
+
+const DEALERS: Dealer[] = [
+    { id: 'GRC-GIR', name: 'Grecco Girón', city: 'Girón', region: 'Santander', score: 94, prevScore: 91, ranking: 'S', sales: 41, posventa: 98, nps: 96.1, ms: 15.2, color: '#ef4444' },
+    { id: 'GRC-VRO', name: 'Grecco V. Rosario', city: 'V. del Rosario', region: 'N. Santander', score: 91, prevScore: 88, ranking: 'S', sales: 27, posventa: 72, nps: 95.3, ms: 12.8, color: '#3b82f6' },
+    { id: 'GRC-CUC', name: 'Grecco Cúcuta', city: 'Cúcuta', region: 'N. Santander', score: 87, prevScore: 85, ranking: 'S', sales: 9, posventa: 45, nps: 93.8, ms: 8.4, color: '#22c55e' },
+    { id: 'GRC-BUC', name: 'Grecco Bucaramanga', city: 'Bucaramanga', region: 'Santander', score: 85, prevScore: 82, ranking: 'A', sales: 6, posventa: 38, nps: 94.2, ms: 6.1, color: '#f59e0b' },
+    { id: 'GRC-PIE', name: 'Grecco Piedecuesta', city: 'Piedecuesta', region: 'Santander', score: 82, prevScore: 79, ranking: 'A', sales: 8, posventa: 32, nps: 92.0, ms: 5.5, color: '#a855f7' },
+    { id: 'GRC-FLR', name: 'Grecco Floridablanca', city: 'Floridablanca', region: 'Santander', score: 80, prevScore: 78, ranking: 'A', sales: 4, posventa: 28, nps: 91.5, ms: 4.2, color: '#06b6d4' },
+];
+
+const REGIONS = ['Nacional', 'Santander', 'N. Santander'];
+
+const TEMPLATES = [
+    { name: 'Dashboard Ejecutivo', nodes: 7, slides: 6, uses: 12 },
+    { name: 'Posventa Predictiva', nodes: 4, slides: 5, uses: 8 },
+    { name: 'Embudo Comercial', nodes: 5, slides: 6, uses: 15 },
+    { name: 'Partner Score 360°', nodes: 6, slides: 5, uses: 6 },
+];
+
+export const KiaMultiDealerNode = (props: any) => {
+    const [tab, setTab] = useState<'overview' | 'benchmark' | 'templates'>('overview');
+    const [region, setRegion] = useState('Nacional');
+    const [dealers, setDealers] = useState(DEALERS.map(d => ({ ...d })));
+
+    const filtered = region === 'Nacional' ? dealers : dealers.filter(d => d.region === region);
+    const totalSales = filtered.reduce((s, d) => s + d.sales, 0);
+    const avgNPS = (filtered.reduce((s, d) => s + d.nps, 0) / filtered.length).toFixed(1);
+    const avgScore = Math.round(filtered.reduce((s, d) => s + d.score, 0) / filtered.length);
+
+    // Subtle jitter
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setDealers(prev => prev.map(d => ({
+                ...d,
+                sales: d.sales + Math.floor(Math.random() * 3 - 1),
+                score: Math.min(99, Math.max(60, d.score + Math.floor(Math.random() * 3 - 1))),
+                nps: Math.min(99, Math.max(70, parseFloat((d.nps + (Math.random() - 0.5)).toFixed(1)))),
+            })));
+        }, 7000);
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <BaseNode {...props} title="Kia Multi-Dealer" width={520} height={620}>
+            <div className="flex flex-col h-full bg-[#060a12] text-white overflow-hidden">
+
+                {/* Header */}
+                <div className="flex items-center gap-3 p-3 bg-[#0c1222] border-b border-slate-800">
+                    <div className="w-9 h-9 rounded-full bg-red-600/20 flex items-center justify-center border border-red-500/30">
+                        <Building2 size={16} className="text-red-400" />
+                    </div>
+                    <div className="flex-1">
+                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
+                            RED METROKIA
+                            <span className="text-[8px] px-1.5 py-0.5 bg-blue-500/20 text-blue-400 rounded font-normal">{DEALERS.length} SEDES</span>
+                        </div>
+                        <div className="text-[10px] text-slate-400">Multi-Concesionario · Benchmark · {totalSales} ventas/mes</div>
+                    </div>
+                    <select value={region} onChange={e => setRegion(e.target.value)}
+                        className="bg-slate-800 border border-slate-700 rounded-lg px-2 py-1 text-[10px] text-slate-300 focus:outline-none">
+                        {REGIONS.map(r => <option key={r} value={r}>{r}</option>)}
+                    </select>
+                </div>
+
+                {/* Tabs */}
+                <div className="flex gap-1 p-2 bg-[#0a0f1a] border-b border-slate-800">
+                    {([
+                        { key: 'overview' as const, icon: Map, label: 'Regional' },
+                        { key: 'benchmark' as const, icon: BarChart3, label: 'Benchmark' },
+                        { key: 'templates' as const, icon: Layers, label: 'Templates' },
+                    ]).map(t => (
+                        <button key={t.key} onClick={() => setTab(t.key)}
+                            className={`flex-1 flex items-center justify-center gap-1 py-1.5 rounded text-[9px] font-bold transition-all ${tab === t.key ? 'bg-red-600/20 text-red-400 border border-red-500/30' : 'text-slate-500'
+                                }`}>
+                            <t.icon size={10} /> {t.label}
+                        </button>
+                    ))}
+                </div>
+
+                {/* Stats Bar */}
+                <div className="flex gap-1 px-3 py-2 border-b border-slate-800">
+                    {[
+                        { label: 'Ventas/Mes', val: totalSales.toString(), color: 'text-blue-400' },
+                        { label: 'NPS Prom', val: `${avgNPS}%`, color: 'text-green-400' },
+                        { label: 'Score Prom', val: avgScore.toString(), color: 'text-purple-400' },
+                        { label: 'Sedes', val: filtered.length.toString(), color: 'text-slate-400' },
+                    ].map(s => (
+                        <div key={s.label} className="flex-1 text-center bg-slate-900/50 rounded p-1.5 border border-slate-800/50">
+                            <div className={`text-sm font-bold ${s.color}`}>{s.val}</div>
+                            <div className="text-[8px] text-slate-500">{s.label}</div>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 overflow-y-auto p-3 space-y-2">
+
+                    {/* Overview — Regional Cards */}
+                    {tab === 'overview' && filtered.map((d, i) => (
+                        <div key={d.id} className="bg-slate-900/50 rounded-lg p-3 border border-slate-800"
+                            style={{ borderLeftWidth: '3px', borderLeftColor: d.color }}>
+                            <div className="flex items-center justify-between mb-2">
+                                <div className="flex items-center gap-2">
+                                    {i === 0 && <Crown size={12} className="text-yellow-400" />}
+                                    <div>
+                                        <div className="text-[11px] font-bold">{d.name}</div>
+                                        <div className="text-[9px] text-slate-500">{d.city} · {d.region}</div>
+                                    </div>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                    <div className={`px-2 py-0.5 rounded text-[10px] font-black ${d.ranking === 'S' ? 'bg-green-500/20 text-green-400' :
+                                        d.ranking === 'A' ? 'bg-blue-500/20 text-blue-400' :
+                                            'bg-yellow-500/20 text-yellow-400'
+                                        }`}>{d.ranking}</div>
+                                    <div className="text-right">
+                                        <div className="text-sm font-bold">{d.score}</div>
+                                        <div className={`text-[8px] flex items-center gap-0.5 ${d.score > d.prevScore ? 'text-green-400' : 'text-red-400'}`}>
+                                            {d.score > d.prevScore ? <ChevronUp size={8} /> : <ChevronDown size={8} />}
+                                            {Math.abs(d.score - d.prevScore)}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex gap-3 text-[9px]">
+                                <span className="text-slate-400">Ventas: <span className="font-bold text-blue-400">{d.sales}</span></span>
+                                <span className="text-slate-400">Posventa: <span className="font-bold text-green-400">{d.posventa}</span></span>
+                                <span className="text-slate-400">NPS: <span className="font-bold text-purple-400">{d.nps}%</span></span>
+                                <span className="text-slate-400">MS: <span className="font-bold text-yellow-400">{d.ms}%</span></span>
+                            </div>
+                        </div>
+                    ))}
+
+                    {/* Benchmark — Comparative Bars */}
+                    {tab === 'benchmark' && (
+                        <>
+                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-1">Benchmark por KPI</div>
+                            {['score', 'sales', 'nps', 'ms'].map(kpi => (
+                                <div key={kpi} className="bg-slate-900/50 rounded-lg p-2.5 border border-slate-800">
+                                    <div className="text-[9px] text-slate-400 font-bold uppercase mb-1.5">
+                                        {kpi === 'score' ? '⭐ Partner Score' : kpi === 'sales' ? '📊 Ventas/Mes' : kpi === 'nps' ? '💚 NPS' : '📈 Market Share'}
+                                    </div>
+                                    {filtered.sort((a, b) => {
+                                        const val = (d: Dealer) => kpi === 'score' ? d.score : kpi === 'sales' ? d.sales : kpi === 'nps' ? d.nps : d.ms;
+                                        return val(b) - val(a);
+                                    }).map((d, i) => {
+                                        const val = kpi === 'score' ? d.score : kpi === 'sales' ? d.sales : kpi === 'nps' ? d.nps : d.ms;
+                                        const max = kpi === 'score' ? 100 : kpi === 'sales' ? 100 : kpi === 'nps' ? 100 : 20;
+                                        return (
+                                            <div key={d.id} className="flex items-center gap-2 mb-1">
+                                                <span className="text-[8px] text-slate-500 w-3 text-right">{i + 1}</span>
+                                                <span className="text-[9px] font-semibold w-20 truncate" style={{ color: d.color }}>{d.name.split(' ')[0]}</span>
+                                                <div className="flex-1 h-1.5 bg-slate-800 rounded-full">
+                                                    <div className="h-full rounded-full transition-all duration-700"
+                                                        style={{ width: `${(val / max) * 100}%`, background: d.color }} />
+                                                </div>
+                                                <span className="text-[9px] font-bold text-white w-8 text-right">
+                                                    {kpi === 'nps' || kpi === 'ms' ? `${val}%` : val}
+                                                </span>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            ))}
+                        </>
+                    )}
+
+                    {/* Templates */}
+                    {tab === 'templates' && (
+                        <>
+                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-1 flex items-center gap-1">
+                                <Layers size={10} /> Templates Exportables
+                            </div>
+                            {TEMPLATES.map(t => (
+                                <div key={t.name} className="bg-slate-900/50 rounded-lg p-3 border border-slate-800 flex items-center justify-between">
+                                    <div>
+                                        <div className="text-[11px] font-bold text-white">{t.name}</div>
+                                        <div className="text-[9px] text-slate-500">{t.nodes} nodos · {t.slides} slides · Usado {t.uses}×</div>
+                                    </div>
+                                    <button className="px-2.5 py-1 bg-red-600/20 border border-red-500/30 rounded-lg text-[9px] font-bold text-red-400 hover:bg-red-600/30 transition-all">
+                                        Exportar
+                                    </button>
+                                </div>
+                            ))}
+                            <div className="bg-blue-500/5 rounded-lg p-3 border border-blue-500/20 mt-2">
+                                <div className="text-[10px] font-bold text-blue-400 mb-1">🔄 Sincronización</div>
+                                <div className="text-[9px] text-slate-400">
+                                    Templates compartidos automáticamente con {DEALERS.length} sedes.
+                                    Cada sede puede personalizar datos locales manteniendo la estructura.
+                                </div>
+                            </div>
+                        </>
+                    )}
+                </div>
+            </div>
+        </BaseNode>
+    );
+};

package/src/components/playground/demos/KiaNPSVoiceNode.tsx

@@ -0,0 +1,214 @@
+import React, { useState, useEffect } from 'react';
+import { BaseNode } from '@decido/macia-core';
+import {
+    MessageCircle, Star, ThumbsUp, ThumbsDown, TrendingUp,
+    BarChart3, Heart, AlertCircle, Smile, Frown, Meh
+} from 'lucide-react';
+
+/* ═══════════════════════════════════════════════════════════════
+   KIA NPS & VOICE NODE — Voice of Customer · Grecco Motors
+   NPS tracking, sentiment analysis, survey automation, verbatims
+   ═══════════════════════════════════════════════════════════════ */
+
+const NPS_HISTORY = [
+    { month: 'Sep', score: 82, responses: 156 },
+    { month: 'Oct', score: 85, responses: 178 },
+    { month: 'Nov', score: 88, responses: 192 },
+    { month: 'Dic', score: 91, responses: 201 },
+    { month: 'Ene', score: 93, responses: 215 },
+    { month: 'Feb', score: 95, responses: 187 },
+];
+
+const VERBATIMS = [
+    { name: 'María Gómez', model: 'EV6', rating: 5, text: 'Excelente atención de Johan. El EV6 supera expectativas. ¡100% recomendado!', sentiment: 'positive' as const, date: 'Feb 15' },
+    { name: 'Carlos Ruiz', model: 'Sportage', rating: 4, text: 'Buen servicio posventa, pero el tiempo de espera fue un poco largo.', sentiment: 'neutral' as const, date: 'Feb 14' },
+    { name: 'Laura Mejía', model: 'Seltos', rating: 5, text: 'Lucky Drive fue increíble. Gané accesorios gratis. Gran experiencia!', sentiment: 'positive' as const, date: 'Feb 13' },
+    { name: 'Pedro Martínez', model: 'K3', rating: 2, text: 'Mi reclamación de garantía lleva 3 semanas sin resolver. Muy decepcionado.', sentiment: 'negative' as const, date: 'Feb 12' },
+    { name: 'Ana Restrepo', model: 'Sorento', rating: 5, text: 'El cargador V2G en Grecco HQ es el mejor de la ciudad. Servicio AAA.', sentiment: 'positive' as const, date: 'Feb 11' },
+    { name: 'Diego Arias', model: 'Picanto', rating: 3, text: 'El mantenimiento estuvo OK. Faltó comunicación sobre el tiempo estimado.', sentiment: 'neutral' as const, date: 'Feb 10' },
+];
+
+const CATEGORIES = [
+    { label: 'Atención Ventas', score: 96, count: 89, trend: 3 },
+    { label: 'Posventa', score: 88, count: 124, trend: -1 },
+    { label: 'Experiencia Showroom', score: 94, count: 67, trend: 5 },
+    { label: 'Financiación', score: 91, count: 45, trend: 2 },
+    { label: 'Entrega Vehículo', score: 85, count: 38, trend: -2 },
+    { label: 'Accesorios / Store', score: 92, count: 56, trend: 4 },
+];
+
+export const KiaNPSVoiceNode = (props: any) => {
+    const [tab, setTab] = useState<'overview' | 'verbatims' | 'categories'>('overview');
+    const [history, setHistory] = useState(NPS_HISTORY.map(h => ({ ...h })));
+
+    const currentNPS = history[history.length - 1].score;
+    const prevNPS = history[history.length - 2].score;
+    const totalResponses = history.reduce((s, h) => s + h.responses, 0);
+    const promoters = Math.round(totalResponses * 0.72);
+    const passives = Math.round(totalResponses * 0.18);
+    const detractors = Math.round(totalResponses * 0.10);
+
+    // NPS bar chart max
+    const maxScore = 100;
+    const barWidth = 100 / history.length;
+
+    // Jitter
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setHistory(prev => prev.map((h, i) =>
+                i === prev.length - 1
+                    ? { ...h, score: Math.min(99, Math.max(80, h.score + Math.floor(Math.random() * 3 - 1))), responses: h.responses + Math.floor(Math.random() * 3) }
+                    : h
+            ));
+        }, 6000);
+        return () => clearInterval(interval);
+    }, []);
+
+    const sentimentIcon = (s: string) =>
+        s === 'positive' ? <Smile size={12} className="text-green-400" /> :
+            s === 'negative' ? <Frown size={12} className="text-red-400" /> :
+                <Meh size={12} className="text-yellow-400" />;
+
+    return (
+        <BaseNode {...props} title="Kia NPS & Voice" width={480} height={620}>
+            <div className="flex flex-col h-full bg-slate-950 text-white overflow-hidden">
+
+                {/* Header */}
+                <div className="flex items-center gap-3 p-3 bg-slate-900 border-b border-slate-800">
+                    <div className="w-9 h-9 rounded-full bg-pink-600/20 flex items-center justify-center border border-pink-500/30">
+                        <Heart size={16} className="text-pink-400" />
+                    </div>
+                    <div className="flex-1">
+                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
+                            NPS & VOZ DEL CLIENTE
+                            <span className="text-[8px] px-1.5 py-0.5 bg-green-500/20 text-green-400 rounded">{currentNPS} NPS</span>
+                        </div>
+                        <div className="text-[10px] text-slate-400">Grecco Motors · {totalResponses} respuestas · Sentiment AI</div>
+                    </div>
+                </div>
+
+                {/* Tabs */}
+                <div className="flex gap-1 p-2 bg-slate-900/50 border-b border-slate-800">
+                    {([
+                        { key: 'overview' as const, label: '📊 NPS' },
+                        { key: 'verbatims' as const, label: '💬 Verbatims' },
+                        { key: 'categories' as const, label: '📋 Categorías' },
+                    ]).map(t => (
+                        <button key={t.key} onClick={() => setTab(t.key)}
+                            className={`flex-1 py-1.5 rounded text-[9px] font-bold transition-all ${tab === t.key ? 'bg-pink-600/20 text-pink-400 border border-pink-500/30' : 'text-slate-500'
+                                }`}>
+                            {t.label}
+                        </button>
+                    ))}
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 overflow-y-auto p-3 space-y-3">
+
+                    {tab === 'overview' && (
+                        <>
+                            {/* NPS Score */}
+                            <div className="flex items-center gap-4 bg-slate-900/50 rounded-lg p-3 border border-slate-800">
+                                <div className="text-center">
+                                    <div className="text-3xl font-black text-green-400">{currentNPS}</div>
+                                    <div className="text-[9px] text-slate-500">NPS Score</div>
+                                    <div className={`text-[9px] font-bold ${currentNPS >= prevNPS ? 'text-green-400' : 'text-red-400'}`}>
+                                        {currentNPS >= prevNPS ? '↑' : '↓'} {Math.abs(currentNPS - prevNPS)} pts
+                                    </div>
+                                </div>
+                                <div className="flex-1 space-y-1.5">
+                                    <div className="flex items-center gap-2">
+                                        <ThumbsUp size={10} className="text-green-400" />
+                                        <span className="text-[9px] text-slate-400 w-20">Promotores</span>
+                                        <div className="flex-1 h-2 bg-slate-800 rounded-full">
+                                            <div className="h-full rounded-full bg-green-500" style={{ width: '72%' }} />
+                                        </div>
+                                        <span className="text-[9px] font-bold text-green-400">{promoters}</span>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                        <Meh size={10} className="text-yellow-400" />
+                                        <span className="text-[9px] text-slate-400 w-20">Pasivos</span>
+                                        <div className="flex-1 h-2 bg-slate-800 rounded-full">
+                                            <div className="h-full rounded-full bg-yellow-500" style={{ width: '18%' }} />
+                                        </div>
+                                        <span className="text-[9px] font-bold text-yellow-400">{passives}</span>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                        <ThumbsDown size={10} className="text-red-400" />
+                                        <span className="text-[9px] text-slate-400 w-20">Detractores</span>
+                                        <div className="flex-1 h-2 bg-slate-800 rounded-full">
+                                            <div className="h-full rounded-full bg-red-500" style={{ width: '10%' }} />
+                                        </div>
+                                        <span className="text-[9px] font-bold text-red-400">{detractors}</span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            {/* NPS Trend Chart */}
+                            <div className="bg-slate-900/50 rounded-lg p-3 border border-slate-800">
+                                <div className="text-[9px] text-slate-500 font-bold uppercase mb-2">Tendencia NPS · 6 meses</div>
+                                <svg viewBox="0 0 240 80" className="w-full">
+                                    {history.map((h, i) => {
+                                        const x = 20 + i * 38;
+                                        const barH = (h.score / maxScore) * 55;
+                                        return (
+                                            <React.Fragment key={h.month}>
+                                                <rect x={x} y={65 - barH} width={28} height={barH} rx={3}
+                                                    fill={h.score >= 90 ? '#22c55e' : h.score >= 80 ? '#3b82f6' : '#f59e0b'}
+                                                    opacity={0.7} />
+                                                <text x={x + 14} y={60 - barH} textAnchor="middle" fontSize="7" fontWeight="700"
+                                                    fill="white">{h.score}</text>
+                                                <text x={x + 14} y={75} textAnchor="middle" fontSize="6" fill="#64748b">{h.month}</text>
+                                            </React.Fragment>
+                                        );
+                                    })}
+                                </svg>
+                            </div>
+                        </>
+                    )}
+
+                    {tab === 'verbatims' && VERBATIMS.map((v, i) => (
+                        <div key={i} className="bg-slate-900/50 rounded-lg p-2.5 border border-slate-800"
+                            style={{ borderLeftWidth: '2px', borderLeftColor: v.sentiment === 'positive' ? '#22c55e' : v.sentiment === 'negative' ? '#ef4444' : '#f59e0b' }}>
+                            <div className="flex items-center justify-between mb-1">
+                                <div className="flex items-center gap-1.5">
+                                    {sentimentIcon(v.sentiment)}
+                                    <span className="text-[10px] font-bold">{v.name}</span>
+                                    <span className="text-[8px] text-slate-500">· {v.model}</span>
+                                </div>
+                                <div className="flex items-center gap-1">
+                                    {Array.from({ length: 5 }, (_, j) => (
+                                        <Star key={j} size={8} className={j < v.rating ? 'text-yellow-400 fill-yellow-400' : 'text-slate-700'} />
+                                    ))}
+                                </div>
+                            </div>
+                            <div className="text-[9px] text-slate-300 italic leading-relaxed">"{v.text}"</div>
+                            <div className="text-[8px] text-slate-600 mt-1">{v.date}</div>
+                        </div>
+                    ))}
+
+                    {tab === 'categories' && CATEGORIES.map(c => (
+                        <div key={c.label} className="bg-slate-900/50 rounded-lg p-2.5 border border-slate-800">
+                            <div className="flex items-center justify-between mb-1">
+                                <span className="text-[10px] font-bold">{c.label}</span>
+                                <div className="flex items-center gap-2">
+                                    <span className={`text-[8px] ${c.trend > 0 ? 'text-green-400' : 'text-red-400'}`}>
+                                        {c.trend > 0 ? '↑' : '↓'}{Math.abs(c.trend)}%
+                                    </span>
+                                    <span className="text-sm font-bold text-green-400">{c.score}</span>
+                                </div>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <div className="flex-1 h-1.5 bg-slate-800 rounded-full">
+                                    <div className="h-full rounded-full bg-linear-to-r from-pink-500 to-green-500 transition-all duration-700"
+                                        style={{ width: `${c.score}%` }} />
+                                </div>
+                                <span className="text-[8px] text-slate-500">{c.count} resp</span>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </BaseNode>
+    );
+};