@decido/shell 1.0.0 → 4.0.1

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

@@ -1,191 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    Megaphone, TrendingUp, DollarSign, Users, BarChart3,
-    Target, Zap, Eye, MousePointer, ArrowRight, CheckCircle
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA CAMPAIGN NODE — Marketing Campaign Engine · Grecco Motors
-   Campañas activas, A/B testing, ROI por canal, budget
-   ═══════════════════════════════════════════════════════════════ */
-
-interface Campaign {
-    name: string;
-    channel: string;
-    status: 'active' | 'paused' | 'completed';
-    budget: number;
-    spent: number;
-    leads: number;
-    conversions: number;
-    cpl: number;
-    roi: number;
-}
-
-const CAMPAIGNS: Campaign[] = [
-    { name: 'EV6 Launch', channel: 'Meta Ads', status: 'active', budget: 15000000, spent: 11200000, leads: 234, conversions: 18, cpl: 47863, roi: 342 },
-    { name: 'Sportage HEV Q1', channel: 'Google Ads', status: 'active', budget: 12000000, spent: 8600000, leads: 178, conversions: 14, cpl: 48315, roi: 285 },
-    { name: 'Test Drive Weekend', channel: 'Instagram', status: 'active', budget: 5000000, spent: 4100000, leads: 89, conversions: 22, cpl: 46067, roi: 412 },
-    { name: 'Posventa Fidelización', channel: 'WhatsApp', status: 'active', budget: 3000000, spent: 2100000, leads: 156, conversions: 45, cpl: 13462, roi: 890 },
-    { name: 'EV9 Preventa', channel: 'LinkedIn', status: 'paused', budget: 8000000, spent: 2400000, leads: 34, conversions: 5, cpl: 70588, roi: 156 },
-];
-
-const AB_TESTS = [
-    { name: 'CTA Color Test', variantA: 'Rojo KIA', variantB: 'Azul Premium', liftA: 12.3, liftB: 8.7, winner: 'A', confidence: 94 },
-    { name: 'Landing Page Test', variantA: 'Video Hero', variantB: 'Imagen Estática', liftA: 18.5, liftB: 11.2, winner: 'A', confidence: 97 },
-    { name: 'Subject Line Email', variantA: 'Tu EV6 te espera', variantB: 'Oferta limitada', liftA: 22.1, liftB: 24.8, winner: 'B', confidence: 89 },
-];
-
-const CHANNEL_ROI = [
-    { channel: 'WhatsApp Bot', leads: 156, cost: 2100000, cpl: 13462, roi: 890, color: '#22c55e' },
-    { channel: 'Instagram', leads: 89, cost: 4100000, cpl: 46067, roi: 412, color: '#e040fb' },
-    { channel: 'Meta Ads', leads: 234, cost: 11200000, cpl: 47863, roi: 342, color: '#3b82f6' },
-    { channel: 'Google Ads', leads: 178, cost: 8600000, cpl: 48315, roi: 285, color: '#f59e0b' },
-    { channel: 'LinkedIn', leads: 34, cost: 2400000, cpl: 70588, roi: 156, color: '#06b6d4' },
-];
-
-const fmtMoney = (n: number) => `$${(n / 1000000).toFixed(1)}M`;
-
-export const KiaCampaignNode = (props: any) => {
-    const [tab, setTab] = useState<'campaigns' | 'ab' | 'roi'>('campaigns');
-    const [campaigns, setCampaigns] = useState(CAMPAIGNS.map(c => ({ ...c })));
-
-    const totalBudget = campaigns.reduce((s, c) => s + c.budget, 0);
-    const totalSpent = campaigns.reduce((s, c) => s + c.spent, 0);
-    const totalLeads = campaigns.reduce((s, c) => s + c.leads, 0);
-    const totalConversions = campaigns.reduce((s, c) => s + c.conversions, 0);
-
-    // Jitter
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setCampaigns(prev => prev.map(c => c.status === 'active' ? {
-                ...c,
-                spent: Math.min(c.budget, c.spent + Math.floor(Math.random() * 50000)),
-                leads: c.leads + (Math.random() > 0.7 ? 1 : 0),
-            } : c));
-        }, 5000);
-        return () => clearInterval(interval);
-    }, []);
-
-    return (
-        <BaseNode {...props} title="Kia Campaign Engine" width={500} 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-fuchsia-600/20 flex items-center justify-center border border-fuchsia-500/30">
-                        <Megaphone size={16} className="text-fuchsia-400" />
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide">CAMPAIGN ENGINE</div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · {campaigns.filter(c => c.status === 'active').length} campañas activas</div>
-                    </div>
-                </div>
-
-                {/* Tabs */}
-                <div className="flex gap-1 p-2 bg-slate-900/50 border-b border-slate-800">
-                    {([
-                        { key: 'campaigns' as const, label: '📢 Campañas' },
-                        { key: 'ab' as const, label: '🧪 A/B Tests' },
-                        { key: 'roi' as const, label: '💰 ROI Canal' },
-                    ]).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-fuchsia-600/20 text-fuchsia-400 border border-fuchsia-500/30' : 'text-slate-500'
-                                }`}>
-                            {t.label}
-                        </button>
-                    ))}
-                </div>
-
-                {/* KPIs */}
-                <div className="flex gap-1 px-3 py-2 border-b border-slate-800">
-                    {[
-                        { label: 'Budget', val: fmtMoney(totalBudget), color: 'text-blue-400' },
-                        { label: 'Spent', val: fmtMoney(totalSpent), color: 'text-yellow-400' },
-                        { label: 'Leads', val: totalLeads.toString(), color: 'text-green-400' },
-                        { label: 'Conv', val: totalConversions.toString(), color: 'text-purple-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-1.5">
-
-                    {tab === 'campaigns' && campaigns.map(c => (
-                        <div key={c.name} className="bg-slate-900/50 rounded-lg p-2.5 border border-slate-800">
-                            <div className="flex items-center justify-between mb-1">
-                                <div>
-                                    <span className="text-[11px] font-bold">{c.name}</span>
-                                    <span className="text-[9px] text-slate-500 ml-1.5">{c.channel}</span>
-                                </div>
-                                <span className={`text-[8px] px-1.5 py-0.5 rounded font-bold ${c.status === 'active' ? 'bg-green-500/20 text-green-400' :
-                                        c.status === 'paused' ? 'bg-yellow-500/20 text-yellow-400' :
-                                            'bg-slate-700 text-slate-400'
-                                    }`}>{c.status.toUpperCase()}</span>
-                            </div>
-                            <div className="flex items-center gap-2 mb-1">
-                                <div className="flex-1 h-1.5 bg-slate-800 rounded-full">
-                                    <div className="h-full rounded-full bg-linear-to-r from-fuchsia-500 to-blue-500"
-                                        style={{ width: `${(c.spent / c.budget) * 100}%` }} />
-                                </div>
-                                <span className="text-[8px] text-slate-500">{fmtMoney(c.spent)}/{fmtMoney(c.budget)}</span>
-                            </div>
-                            <div className="flex gap-3 text-[9px]">
-                                <span className="text-slate-400">Leads: <span className="font-bold text-blue-400">{c.leads}</span></span>
-                                <span className="text-slate-400">Conv: <span className="font-bold text-green-400">{c.conversions}</span></span>
-                                <span className="text-slate-400">CPL: <span className="font-bold text-yellow-400">{fmtMoney(c.cpl)}</span></span>
-                                <span className="text-slate-400">ROI: <span className="font-bold text-purple-400">{c.roi}%</span></span>
-                            </div>
-                        </div>
-                    ))}
-
-                    {tab === 'ab' && AB_TESTS.map(t => (
-                        <div key={t.name} className="bg-slate-900/50 rounded-lg p-3 border border-slate-800">
-                            <div className="text-[11px] font-bold mb-2">{t.name}</div>
-                            <div className="space-y-1.5">
-                                {['A', 'B'].map(v => {
-                                    const isA = v === 'A';
-                                    const variant = isA ? t.variantA : t.variantB;
-                                    const lift = isA ? t.liftA : t.liftB;
-                                    const isWinner = t.winner === v;
-                                    return (
-                                        <div key={v} className={`flex items-center gap-2 p-1.5 rounded ${isWinner ? 'bg-green-500/10 border border-green-500/20' : 'bg-slate-800/50'}`}>
-                                            <span className={`text-[9px] font-bold w-4 ${isWinner ? 'text-green-400' : 'text-slate-500'}`}>{v}</span>
-                                            <span className="text-[9px] flex-1">{variant}</span>
-                                            <div className="w-16 h-1 bg-slate-800 rounded-full">
-                                                <div className={`h-full rounded-full ${isWinner ? 'bg-green-500' : 'bg-slate-600'}`}
-                                                    style={{ width: `${lift * 3}%` }} />
-                                            </div>
-                                            <span className={`text-[9px] font-bold ${isWinner ? 'text-green-400' : 'text-slate-500'}`}>{lift}%</span>
-                                            {isWinner && <CheckCircle size={10} className="text-green-400" />}
-                                        </div>
-                                    );
-                                })}
-                            </div>
-                            <div className="text-[8px] text-slate-500 mt-1">Confianza: {t.confidence}%</div>
-                        </div>
-                    ))}
-
-                    {tab === 'roi' && CHANNEL_ROI.map(ch => (
-                        <div key={ch.channel} className="bg-slate-900/50 rounded-lg p-2.5 border border-slate-800"
-                            style={{ borderLeftWidth: '2px', borderLeftColor: ch.color }}>
-                            <div className="flex items-center justify-between mb-1">
-                                <span className="text-[11px] font-bold">{ch.channel}</span>
-                                <span className="text-sm font-bold text-green-400">{ch.roi}%</span>
-                            </div>
-                            <div className="flex gap-3 text-[9px]">
-                                <span className="text-slate-400">Leads: <span className="font-bold" style={{ color: ch.color }}>{ch.leads}</span></span>
-                                <span className="text-slate-400">Costo: <span className="font-bold text-yellow-400">{fmtMoney(ch.cost)}</span></span>
-                                <span className="text-slate-400">CPL: <span className="font-bold text-orange-400">{fmtMoney(ch.cpl)}</span></span>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </BaseNode>
-    );
-};

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

@@ -1,140 +0,0 @@
-import React, { useState } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    Shield, FileCheck, AlertTriangle, Clock, CheckCircle,
-    Bell, Calendar, FileText, PenTool, Lock
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA COMPLIANCE NODE — Compliance & Docs · Grecco Motors
-   SOAT, tecno-mecánica, garantías, firma digital, alertas
-   ═══════════════════════════════════════════════════════════════ */
-
-const COMPLIANCE_ITEMS = [
-    { vehicle: 'ABC-123 · Sportage 2023', soat: { exp: 'Mar 15, 2026', days: 26, status: 'ok' as const }, tecno: { exp: 'Jun 1, 2026', days: 104, status: 'ok' as const }, warranty: { exp: 'Sep 2027', km: '18.5k/100k', status: 'ok' as const } },
-    { vehicle: 'DEF-456 · EV6 2024', soat: { exp: 'Feb 28, 2026', days: 11, status: 'warning' as const }, tecno: { exp: 'Ago 2026', days: 165, status: 'ok' as const }, warranty: { exp: 'Dic 2029', km: '5.2k/160k', status: 'ok' as const } },
-    { vehicle: 'GHI-789 · K3 2021', soat: { exp: 'Feb 22, 2026', days: 5, status: 'critical' as const }, tecno: { exp: 'Mar 5, 2026', days: 16, status: 'warning' as const }, warranty: { exp: 'Feb 2024', km: 'N/A', status: 'expired' as const } },
-    { vehicle: 'JKL-012 · Picanto 2022', soat: { exp: 'May 2026', days: 73, status: 'ok' as const }, tecno: { exp: 'Feb 20, 2026', days: 3, status: 'critical' as const }, warranty: { exp: 'Jul 2025', km: '35k/100k', status: 'ok' as const } },
-];
-
-const DOCUMENTS = [
-    { name: 'Contrato Compraventa — María Gómez', type: 'Contrato', date: 'Feb 15', signed: true, pages: 8 },
-    { name: 'Acta Entrega — EV6 GT Moonscape', type: 'Acta', date: 'Feb 14', signed: true, pages: 4 },
-    { name: 'Crédito Bancolombia — Carlos Ruiz', type: 'Crédito', date: 'Feb 13', signed: false, pages: 12 },
-    { name: 'Póliza Todo-Riesgo — Sportage #ABC-123', type: 'Póliza', date: 'Feb 12', signed: true, pages: 6 },
-    { name: 'Garantía Extendida — Seltos #DEF-456', type: 'Garantía', date: 'Feb 10', signed: false, pages: 3 },
-];
-
-const RECALLS = [
-    { id: 'RC-2026-003', model: 'Sportage 2023', issue: 'Actualización software ADAS v2.1', affected: 12, completed: 8, priority: 'media' as const },
-    { id: 'RC-2026-001', model: 'EV6 2024', issue: 'Revisión conector carga DC', affected: 4, completed: 4, priority: 'alta' as const },
-];
-
-export const KiaComplianceNode = (props: any) => {
-    const [tab, setTab] = useState<'tracking' | 'docs' | 'recalls'>('tracking');
-
-    const alerts = COMPLIANCE_ITEMS.reduce((s, c) => {
-        if (c.soat.status === 'critical' || c.tecno.status === 'critical') return s + 1;
-        return s;
-    }, 0);
-    const warnings = COMPLIANCE_ITEMS.reduce((s, c) => {
-        if (c.soat.status === 'warning' || c.tecno.status === 'warning') return s + 1;
-        return s;
-    }, 0);
-    const statusIcon = (s: string) =>
-        s === 'ok' ? <CheckCircle size={10} className="text-green-400" /> :
-            s === 'warning' ? <Clock size={10} className="text-yellow-400" /> :
-                s === 'critical' ? <AlertTriangle size={10} className="text-red-400 animate-pulse" /> :
-                    <AlertTriangle size={10} className="text-slate-600" />;
-
-    return (
-        <BaseNode {...props} title="Kia Compliance" width={500} 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-teal-600/20 flex items-center justify-center border border-teal-500/30">
-                        <Shield size={16} className="text-teal-400" />
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
-                            COMPLIANCE & DOCS
-                            {alerts > 0 && <span className="text-[8px] px-1.5 py-0.5 bg-red-500/20 text-red-400 rounded animate-pulse">{alerts} CRÍTICO</span>}
-                        </div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · {COMPLIANCE_ITEMS.length} vehículos · {DOCUMENTS.length} documentos</div>
-                    </div>
-                </div>
-
-                {/* Tabs */}
-                <div className="flex gap-1 p-2 bg-slate-900/50 border-b border-slate-800">
-                    {([
-                        { key: 'tracking' as const, label: '🛡️ Tracking' },
-                        { key: 'docs' as const, label: '📄 Documentos' },
-                        { key: 'recalls' as const, label: '⚠️ Recalls' },
-                    ]).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-teal-600/20 text-teal-400 border border-teal-500/30' : 'text-slate-500'
-                                }`}>
-                            {t.label}
-                        </button>
-                    ))}
-                </div>
-
-                <div className="flex-1 overflow-y-auto p-3 space-y-1.5">
-
-                    {tab === 'tracking' && COMPLIANCE_ITEMS.map((c, i) => (
-                        <div key={i} className="bg-slate-900/50 rounded-lg p-2.5 border border-slate-800">
-                            <div className="text-[10px] font-bold mb-1.5">{c.vehicle}</div>
-                            <div className="grid grid-cols-3 gap-1.5 text-[8px]">
-                                <div className={`rounded p-1.5 text-center ${c.soat.status === 'ok' ? 'bg-green-500/10' : c.soat.status === 'warning' ? 'bg-yellow-500/10' : 'bg-red-500/10'}`}>
-                                    <div className="flex items-center justify-center gap-0.5 mb-0.5">{statusIcon(c.soat.status)} SOAT</div>
-                                    <div className="font-bold">{c.soat.days}d</div>
-                                </div>
-                                <div className={`rounded p-1.5 text-center ${c.tecno.status === 'ok' ? 'bg-green-500/10' : c.tecno.status === 'warning' ? 'bg-yellow-500/10' : 'bg-red-500/10'}`}>
-                                    <div className="flex items-center justify-center gap-0.5 mb-0.5">{statusIcon(c.tecno.status)} Tecno</div>
-                                    <div className="font-bold">{c.tecno.days}d</div>
-                                </div>
-                                <div className={`rounded p-1.5 text-center ${c.warranty.status === 'ok' ? 'bg-green-500/10' : c.warranty.status === 'expired' ? 'bg-slate-800/50' : 'bg-yellow-500/10'}`}>
-                                    <div className="flex items-center justify-center gap-0.5 mb-0.5">{statusIcon(c.warranty.status)} Garantía</div>
-                                    <div className="font-bold">{c.warranty.km}</div>
-                                </div>
-                            </div>
-                        </div>
-                    ))}
-
-                    {tab === 'docs' && DOCUMENTS.map((d, i) => (
-                        <div key={i} className="bg-slate-900/50 rounded-lg p-2.5 border border-slate-800 flex items-center gap-2">
-                            <FileText size={14} className="text-slate-600 shrink-0" />
-                            <div className="flex-1 min-w-0">
-                                <div className="text-[10px] font-bold truncate">{d.name}</div>
-                                <div className="text-[8px] text-slate-500">{d.type} · {d.pages}p · {d.date}</div>
-                            </div>
-                            {d.signed ? (
-                                <span className="text-[8px] px-1.5 py-0.5 bg-green-500/20 text-green-400 rounded flex items-center gap-0.5"><PenTool size={7} /> Firmado</span>
-                            ) : (
-                                <button className="text-[8px] px-1.5 py-0.5 bg-yellow-500/20 text-yellow-400 rounded font-bold animate-pulse">✍️ Firmar</button>
-                            )}
-                        </div>
-                    ))}
-
-                    {tab === 'recalls' && RECALLS.map(r => (
-                        <div key={r.id} className="bg-slate-900/50 rounded-lg p-3 border border-slate-800"
-                            style={{ borderLeftWidth: '2px', borderLeftColor: r.priority === 'alta' ? '#ef4444' : '#f59e0b' }}>
-                            <div className="flex items-center justify-between mb-1">
-                                <span className="text-[10px] font-bold">{r.id}</span>
-                                <span className={`text-[8px] px-1.5 py-0.5 rounded font-bold ${r.priority === 'alta' ? 'bg-red-500/20 text-red-400' : 'bg-yellow-500/20 text-yellow-400'}`}>{r.priority.toUpperCase()}</span>
-                            </div>
-                            <div className="text-[9px] text-slate-400 mb-1">{r.model} — {r.issue}</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-teal-500" style={{ width: `${(r.completed / r.affected) * 100}%` }} />
-                                </div>
-                                <span className="text-[9px] font-bold text-teal-400">{r.completed}/{r.affected}</span>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </BaseNode>
-    );
-};

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

@@ -1,220 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    MapPin, Clock, Phone, Car, Wrench, CreditCard, Star, Gift,
-    ChevronRight, RefreshCw, Bell, Sparkles, TrendingUp, Heart
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA CUSTOMER JOURNEY NODE — Journey Orchestration · Grecco Motors
-   Lead → Test Drive → Pedido → Entrega → Servicio → Recompra
-   ═══════════════════════════════════════════════════════════════ */
-
-interface JourneyStage {
-    id: string;
-    label: string;
-    icon: React.ElementType;
-    color: string;
-    timestamp: string;
-    status: 'completed' | 'active' | 'pending';
-    detail: string;
-}
-
-interface Trigger {
-    condition: string;
-    action: string;
-    channel: string;
-    color: string;
-    active: boolean;
-}
-
-const CUSTOMERS = [
-    { name: 'María Gómez', model: 'EV6 GT', avatar: '👩‍💼', retention: 92, ltv: '$185M', stage: 3, since: 'Nov 2025' },
-    { name: 'Carlos Ruiz', model: 'Sportage HEV', avatar: '👨‍💼', retention: 78, ltv: '$124M', stage: 5, since: 'Jun 2024' },
-    { name: 'Laura Mejía', model: 'Seltos', avatar: '👩', retention: 85, ltv: '$97M', stage: 4, since: 'Ene 2025' },
-    { name: 'Andrés Vélez', model: 'K3 Cross', avatar: '👨', retention: 65, ltv: '$72M', stage: 2, since: 'Feb 2026' },
-];
-
-const JOURNEY_STAGES: JourneyStage[] = [
-    { id: 'lead', label: 'Lead', icon: Phone, color: '#3b82f6', timestamp: 'Día 1', status: 'completed', detail: 'Facebook Ads → WhatsApp Bot' },
-    { id: 'contact', label: 'Contacto', icon: Bell, color: '#06b6d4', timestamp: 'Día 1', status: 'completed', detail: 'Asesor Johan llamó en < 30 min' },
-    { id: 'showup', label: 'Show Up', icon: MapPin, color: '#a855f7', timestamp: 'Día 3', status: 'completed', detail: 'Visita showroom + Lucky Drive' },
-    { id: 'testdrive', label: 'Test Drive', icon: Car, color: '#8b5cf6', timestamp: 'Día 3', status: 'active', detail: 'EV6 GT — Ruta premium 15 min' },
-    { id: 'cotizacion', label: 'Cotización', icon: CreditCard, color: '#f59e0b', timestamp: 'Día 4', status: 'pending', detail: 'Leasing Bancolombia 1.18%' },
-    { id: 'pedido', label: 'Pedido', icon: Star, color: '#22c55e', timestamp: 'Día 7', status: 'pending', detail: 'Pedido + separación $5M' },
-    { id: 'entrega', label: 'Entrega', icon: Gift, color: '#ef4444', timestamp: 'Día 45', status: 'pending', detail: 'PDI + accesorios instalados' },
-    { id: 'servicio', label: 'Servicio', icon: Wrench, color: '#14b8a6', timestamp: '5,000 km', status: 'pending', detail: 'Primer mantenimiento gratis' },
-    { id: 'recompra', label: 'Recompra', icon: RefreshCw, color: '#ec4899', timestamp: '36 meses', status: 'pending', detail: 'Retoma + upgrade modelo' },
-];
-
-const TRIGGERS: Trigger[] = [
-    { condition: 'Lead sin contacto > 2h', action: 'WhatsApp auto + alerta asesor', channel: '📱 WhatsApp', color: '#ef4444', active: true },
-    { condition: 'No show up after 5 días', action: 'Email con oferta exclusiva', channel: '📧 Email', color: '#f59e0b', active: true },
-    { condition: 'Cotización sin cierre > 7 días', action: 'Llamada gerente comercial', channel: '📞 Llamada', color: '#a855f7', active: true },
-    { condition: 'Vehículo a 5,000 km', action: 'Agendar mantenimiento auto', channel: '📱 Push', color: '#22c55e', active: true },
-    { condition: 'NPS < 70 post-servicio', action: 'Escalación CX manager', channel: '🚨 Alerta', color: '#ef4444', active: false },
-    { condition: '30 meses de antigüedad', action: 'Campaña retoma + upgrade', channel: '📧 Email', color: '#06b6d4', active: true },
-];
-
-export const KiaCustomerJourneyNode = (props: any) => {
-    const [selectedCustomer, setSelectedCustomer] = useState(0);
-    const [tab, setTab] = useState<'journey' | 'triggers' | 'crosssell'>('journey');
-    const [activeStage, setActiveStage] = useState(3);
-
-    const customer = CUSTOMERS[selectedCustomer];
-
-    // Animate active stage
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setActiveStage(prev => prev < JOURNEY_STAGES.length - 1 ? prev + 1 : 3);
-        }, 12000);
-        return () => clearInterval(interval);
-    }, []);
-
-    const stages = JOURNEY_STAGES.map((s, i) => ({
-        ...s,
-        status: i < activeStage ? 'completed' as const : i === activeStage ? 'active' as const : 'pending' as const,
-    }));
-
-    const CROSSSELL = [
-        { product: 'Polarizado Nano-Cerámico', reason: 'Compró EV6 → 82% compran polarizado', prob: 94, value: '$1.2M' },
-        { product: 'Seguro Premium Sura', reason: 'Ticket > $150M → Alta correlación', prob: 78, value: '$3.1M/año' },
-        { product: 'Kit Carga Hogar 7.4kW', reason: 'EV owner sin cargador registrado', prob: 91, value: '$4.8M' },
-        { product: 'Extensión Garantía 7 años', reason: 'Modelo > $100M → 67% aceptan', prob: 67, value: '$2.4M' },
-    ];
-
-    return (
-        <BaseNode {...props} title="Kia Customer Journey" width={500} 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">CUSTOMER JOURNEY</div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · Orchestration 360° · {CUSTOMERS.length} clientes</div>
-                    </div>
-                    <div className="flex gap-1 bg-slate-900 rounded-lg p-0.5 border border-slate-800">
-                        {(['journey', 'triggers', 'crosssell'] as const).map(t => (
-                            <button key={t} onClick={() => setTab(t)}
-                                className={`px-2 py-1 rounded text-[9px] font-bold transition-all ${tab === t ? 'bg-red-600 text-white' : 'text-slate-500 hover:text-slate-300'
-                                    }`}>
-                                {t === 'journey' ? '🗺️ Journey' : t === 'triggers' ? '⚡ Triggers' : '🎯 Cross-sell'}
-                            </button>
-                        ))}
-                    </div>
-                </div>
-
-                {/* Customer Selector */}
-                <div className="flex gap-1 p-2 bg-[#0a0f1a] border-b border-slate-800 overflow-x-auto">
-                    {CUSTOMERS.map((c, i) => (
-                        <button key={c.name} onClick={() => setSelectedCustomer(i)}
-                            className={`flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-[10px] whitespace-nowrap transition-all ${selectedCustomer === i
-                                    ? 'bg-red-600/20 border border-red-500/30 text-white'
-                                    : 'bg-slate-900 border border-slate-800 text-slate-400'
-                                }`}>
-                            <span>{c.avatar}</span>
-                            <div>
-                                <div className="font-semibold">{c.name}</div>
-                                <div className="text-[8px] text-slate-500">{c.model}</div>
-                            </div>
-                        </button>
-                    ))}
-                </div>
-
-                {/* Customer Stats */}
-                <div className="flex gap-1 px-3 py-2 border-b border-slate-800">
-                    {[
-                        { label: 'Retention', val: `${customer.retention}%`, color: customer.retention > 80 ? 'text-green-400' : 'text-yellow-400' },
-                        { label: 'LTV', val: customer.ltv, color: 'text-blue-400' },
-                        { label: 'Stage', val: `${customer.stage}/9`, color: 'text-purple-400' },
-                        { label: 'Since', val: customer.since, 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">
-
-                    {tab === 'journey' && stages.map((stage, i) => {
-                        const Icon = stage.icon;
-                        return (
-                            <div key={stage.id} className="flex items-start gap-2">
-                                {/* Timeline connector */}
-                                <div className="flex flex-col items-center w-6 flex-shrink-0">
-                                    <div className={`w-5 h-5 rounded-full flex items-center justify-center border ${stage.status === 'completed' ? 'bg-green-500/20 border-green-500/40' :
-                                            stage.status === 'active' ? 'bg-yellow-500/20 border-yellow-500/40 animate-pulse' :
-                                                'bg-slate-800 border-slate-700'
-                                        }`}>
-                                        <Icon size={10} className={
-                                            stage.status === 'completed' ? 'text-green-400' :
-                                                stage.status === 'active' ? 'text-yellow-400' :
-                                                    'text-slate-500'
-                                        } />
-                                    </div>
-                                    {i < stages.length - 1 && (
-                                        <div className={`w-0.5 h-6 ${stage.status === 'completed' ? 'bg-green-500/30' : 'bg-slate-800'
-                                            }`} />
-                                    )}
-                                </div>
-                                {/* Stage content */}
-                                <div className={`flex-1 rounded-lg p-2 border ${stage.status === 'active'
-                                        ? 'bg-yellow-500/5 border-yellow-500/20'
-                                        : 'bg-slate-900/50 border-slate-800/50'
-                                    }`}>
-                                    <div className="flex items-center justify-between">
-                                        <span className="text-[10px] font-bold" style={{ color: stage.color }}>{stage.label}</span>
-                                        <span className="text-[8px] text-slate-500 font-mono">{stage.timestamp}</span>
-                                    </div>
-                                    <div className="text-[9px] text-slate-400 mt-0.5">{stage.detail}</div>
-                                </div>
-                            </div>
-                        );
-                    })}
-
-                    {tab === 'triggers' && TRIGGERS.map((trigger, i) => (
-                        <div key={i} className={`rounded-lg p-2.5 border ${trigger.active ? 'bg-slate-900/50 border-slate-800' : 'bg-slate-900/20 border-slate-800/30 opacity-50'
-                            }`}>
-                            <div className="flex items-center justify-between mb-1">
-                                <div className="flex items-center gap-1.5">
-                                    <Sparkles size={10} style={{ color: trigger.color }} />
-                                    <span className="text-[10px] font-semibold text-slate-300">{trigger.condition}</span>
-                                </div>
-                                <span className={`text-[8px] px-1.5 py-0.5 rounded ${trigger.active ? 'bg-green-500/20 text-green-400' : 'bg-slate-800 text-slate-500'}`}>
-                                    {trigger.active ? 'ACTIVO' : 'OFF'}
-                                </span>
-                            </div>
-                            <div className="text-[9px] text-slate-400 flex items-center gap-1">
-                                <ChevronRight size={8} /> {trigger.action}
-                            </div>
-                            <div className="text-[8px] text-slate-500 mt-0.5">{trigger.channel}</div>
-                        </div>
-                    ))}
-
-                    {tab === 'crosssell' && CROSSSELL.map((item, i) => (
-                        <div key={i} 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 text-white">{item.product}</span>
-                                <span className="text-[9px] font-bold text-green-400">{item.value}</span>
-                            </div>
-                            <div className="text-[9px] text-slate-400 mb-1.5">{item.reason}</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-blue-500 to-purple-500"
-                                        style={{ width: `${item.prob}%` }} />
-                                </div>
-                                <span className="text-[9px] font-bold text-blue-400">{item.prob}%</span>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </BaseNode>
-    );
-};