@decido/shell 1.0.0 → 4.0.1

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

@@ -1,177 +0,0 @@
-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

@@ -1,223 +0,0 @@
-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

@@ -1,214 +0,0 @@
-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>
-    );
-};