@decido/shell 1.0.0 → 4.0.1

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

@@ -1,168 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    Target,
-    Users,
-    Eye,
-    Car,
-    FileText,
-    CheckCircle2,
-    TrendingDown,
-    Activity,
-    Smartphone,
-    Globe,
-    MapPin,
-    HelpCircle,
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA EMBUDO OVERVIEW NODE
-   Funnel visual animado con datos reales de Grecco Motors
-   ═══════════════════════════════════════════════════════════════ */
-
-const FUNNEL_STAGES = [
-    { key: 'oportunidades', label: 'Oportunidades', base: 437, icon: Users, color: '#6366f1' },
-    { key: 'citas', label: 'Citas', base: 284, cumpl: 65, icon: Target, color: '#8b5cf6' },
-    { key: 'showup', label: 'Show Up', base: 264, cumpl: 93, icon: Eye, color: '#3b82f6' },
-    { key: 'testdrive', label: 'Test Drive', base: 79, cumpl: 129, icon: Car, color: '#0ea5e9' },
-    { key: 'cotizacion', label: 'Cotización', base: 52, icon: FileText, color: '#22d3ee' },
-    { key: 'pedidos', label: 'Pedidos', base: 15, icon: CheckCircle2, color: '#22c55e' },
-    { key: 'entregas', label: 'Entregas / Matrículas', base: 30, icon: CheckCircle2, color: '#10b981' },
-];
-
-const CANALES = [
-    { name: 'Redes Sociales', pct: 54.7, icon: Smartphone, color: '#6366f1' },
-    { name: 'Walk-in', pct: 26.3, icon: MapPin, color: '#22c55e' },
-    { name: 'Google Ads', pct: 12.0, icon: Globe, color: '#f59e0b' },
-    { name: 'Otros', pct: 7.0, icon: HelpCircle, color: '#64748b' },
-];
-
-const jitter = (base: number, range: number) =>
-    base + Math.round((Math.random() - 0.5) * range);
-
-export const KiaEmbudoOverviewNode = (props: any) => {
-    const [tick, setTick] = useState(0);
-    const [animateIn, setAnimateIn] = useState(false);
-
-    /* Auto-refresh */
-    useEffect(() => {
-        setAnimateIn(true);
-        const iv = setInterval(() => setTick(t => t + 1), 10000);
-        return () => clearInterval(iv);
-    }, []);
-
-    /* Animated values */
-    const stages = FUNNEL_STAGES.map(s => ({
-        ...s,
-        value: jitter(s.base, Math.round(s.base * 0.05)),
-    }));
-
-    const maxVal = stages[0].value;
-
-    return (
-        <BaseNode {...props} title="Embudo Comercial — Grecco Motors" width={520} height={600}>
-            <div className="flex flex-col h-full bg-slate-900 text-white p-4 gap-3 overflow-hidden">
-
-                {/* Header */}
-                <div className="flex justify-between items-center">
-                    <div>
-                        <h2 className="text-sm font-bold tracking-wide">EMBUDO DE CONVERSIÓN</h2>
-                        <div className="flex items-center gap-2 mt-0.5">
-                            <span className="text-[10px] text-slate-400">Febrero 2026 · Grecco Motors</span>
-                            <span className="flex items-center gap-1 text-[10px] text-green-400 bg-green-500/10 px-1.5 rounded">
-                                <Activity size={8} className="animate-pulse" /> LIVE
-                            </span>
-                        </div>
-                    </div>
-                    <div className="flex items-center gap-2">
-                        <TrendingDown size={14} className="text-slate-500" />
-                        <span className="text-xs text-slate-400">Conversión: <span className="text-white font-bold">{((stages[5].value / stages[0].value) * 100).toFixed(1)}%</span></span>
-                    </div>
-                </div>
-
-                {/* Funnel Visual */}
-                <div className="flex-1 flex flex-col gap-1.5 py-2" key={tick}>
-                    {stages.map((stage, i) => {
-                        const widthPct = Math.max(20, (stage.value / maxVal) * 100);
-                        const conversion = i > 0 ? ((stage.value / stages[i - 1].value) * 100).toFixed(0) : null;
-                        const Icon = stage.icon;
-
-                        return (
-                            <div key={stage.key} className="relative group">
-                                {/* Conversion Arrow */}
-                                {conversion && (
-                                    <div className="text-[9px] text-slate-600 text-center mb-0.5">
-                                        ↓ {conversion}%
-                                    </div>
-                                )}
-
-                                {/* Bar */}
-                                <div className="flex items-center gap-2">
-                                    <div className="w-6 flex-shrink-0 flex justify-center">
-                                        <Icon size={13} style={{ color: stage.color }} />
-                                    </div>
-                                    <div className="flex-1 relative">
-                                        <div
-                                            className="rounded-md flex items-center justify-between px-3 py-2 transition-all duration-1000 ease-out cursor-pointer hover:brightness-125"
-                                            style={{
-                                                width: `${widthPct}%`,
-                                                background: `linear-gradient(90deg, ${stage.color}dd, ${stage.color}88)`,
-                                                boxShadow: `0 0 12px ${stage.color}22`,
-                                            }}
-                                        >
-                                            <span className="text-[11px] font-medium text-white truncate">{stage.label}</span>
-                                            <span className="text-sm font-bold text-white ml-2">{stage.value}</span>
-                                        </div>
-                                    </div>
-                                    {stage.cumpl && (
-                                        <span className={`text-[10px] font-mono w-10 text-right flex-shrink-0 ${stage.cumpl >= 100 ? 'text-green-400' : 'text-yellow-400'}`}>
-                                            {stage.cumpl}%
-                                        </span>
-                                    )}
-                                </div>
-                            </div>
-                        );
-                    })}
-                </div>
-
-                {/* Canales de Origen */}
-                <div className="bg-slate-800 p-3 rounded-xl border border-slate-700">
-                    <h3 className="text-[10px] uppercase text-slate-400 font-bold mb-2">Canales de Origen</h3>
-                    <div className="flex gap-1">
-                        {CANALES.map(c => (
-                            <div
-                                key={c.name}
-                                className="rounded transition-all hover:brightness-125 cursor-pointer flex flex-col items-center justify-center py-2"
-                                style={{
-                                    flex: c.pct,
-                                    background: `${c.color}22`,
-                                    borderLeft: `2px solid ${c.color}`,
-                                }}
-                            >
-                                <c.icon size={12} style={{ color: c.color }} />
-                                <span className="text-[9px] font-bold mt-1" style={{ color: c.color }}>{c.pct}%</span>
-                                <span className="text-[8px] text-slate-500 mt-0.5">{c.name}</span>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-
-                {/* Footer KPIs */}
-                <div className="grid grid-cols-3 gap-2">
-                    <div className="bg-slate-800 px-3 py-2 rounded-lg border border-slate-700 text-center">
-                        <div className="text-lg font-bold text-green-400">95.3%</div>
-                        <div className="text-[9px] text-slate-500">NPS Comercial</div>
-                    </div>
-                    <div className="bg-slate-800 px-3 py-2 rounded-lg border border-slate-700 text-center">
-                        <div className="text-lg font-bold text-blue-400">13.3%</div>
-                        <div className="text-[9px] text-slate-500">Market Share</div>
-                    </div>
-                    <div className="bg-slate-800 px-3 py-2 rounded-lg border border-slate-700 text-center">
-                        <div className="text-lg font-bold text-yellow-400">S</div>
-                        <div className="text-[9px] text-slate-500">Partner Prog</div>
-                    </div>
-                </div>
-            </div>
-        </BaseNode>
-    );
-};

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

@@ -1,169 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    PieChart, TrendingUp, DollarSign, Users, BarChart3,
-    Download, FileText, Calendar, ChevronUp, ChevronDown, Crown
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA EXECUTIVE NODE — Executive BI & Board Reports · Grecco
-   Board deck, sparklines, macro KPIs, scheduled reports
-   ═══════════════════════════════════════════════════════════════ */
-
-interface KPI {
-    label: string;
-    value: string;
-    prev: string;
-    trend: number;
-    unit: string;
-    sparkline: number[];
-}
-
-const KPIS: KPI[] = [
-    { label: 'RUNT Matriculas', value: '95', prev: '146', trend: -34.9, unit: 'uds', sparkline: [120, 110, 145, 130, 165, 182, 146, 95, 0, 0, 0, 0] },
-    { label: 'Vehículos', value: '156', prev: '142', trend: 9.9, unit: 'unid', sparkline: [40, 45, 42, 48, 55, 50, 58, 60, 65, 62, 70, 72] },
-    { label: 'NPS', value: '95.3', prev: '91.2', trend: 4.5, unit: 'pts', sparkline: [78, 80, 82, 81, 85, 87, 88, 90, 91, 93, 94, 95] },
-    { label: 'Market Share', value: '13.3%', prev: '12.1%', trend: 9.9, unit: '%', sparkline: [8, 9, 9, 10, 10, 11, 11, 11, 12, 12, 13, 13] },
-    { label: 'Partner Score', value: '91', prev: '87', trend: 4.6, unit: 'pts', sparkline: [72, 74, 76, 78, 80, 82, 84, 86, 87, 88, 89, 91] },
-    { label: 'Posventa', value: '128', prev: '115', trend: 11.3, unit: 'OTs', sparkline: [80, 85, 90, 88, 95, 98, 100, 105, 110, 115, 120, 128] },
-];
-
-const REPORTS = [
-    { name: 'KIA Board Deck Q1', frequency: 'Trimestral', lastRun: 'Ene 31', pages: 24, format: 'PDF' },
-    { name: 'Weekly Sales Report', frequency: 'Semanal', lastRun: 'Feb 14', pages: 8, format: 'PDF' },
-    { name: 'Partner Program Update', frequency: 'Mensual', lastRun: 'Feb 1', pages: 12, format: 'PDF' },
-    { name: 'Inventory Status', frequency: 'Diario', lastRun: 'Feb 17', pages: 4, format: 'Excel' },
-    { name: 'CX Dashboard Export', frequency: 'Semanal', lastRun: 'Feb 14', pages: 6, format: 'PDF' },
-];
-
-const TOP_MODELS = [
-    { model: 'Picanto', units: 46, revenue: '$2.8B', share: 48.4 },
-    { model: 'Sportage', units: 12, revenue: '$1.2B', share: 12.6 },
-    { model: 'K3 Cross', units: 10, revenue: '$580M', share: 10.5 },
-    { model: 'Stonic', units: 8, revenue: '$440M', share: 8.4 },
-    { model: 'Sonet', units: 7, revenue: '$350M', share: 7.4 },
-];
-
-export const KiaExecutiveNode = (props: any) => {
-    const [tab, setTab] = useState<'kpis' | 'reports' | 'models'>('kpis');
-
-    // Sparkline renderer
-    const Spark = ({ data, color }: { data: number[]; color: string }) => {
-        const max = Math.max(...data);
-        const min = Math.min(...data);
-        const range = max - min || 1;
-        const w = 80;
-        const h = 20;
-        const points = data.map((v, i) => `${(i / (data.length - 1)) * w},${h - ((v - min) / range) * h}`).join(' ');
-        return (
-            <svg width={w} height={h} className="inline-block">
-                <polyline points={points} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-        );
-    };
-
-    return (
-        <BaseNode {...props} title="Kia Executive BI" width={500} height={620}>
-            <div className="flex flex-col h-full bg-[#050810] text-white overflow-hidden">
-
-                {/* Header */}
-                <div className="flex items-center gap-3 p-3 bg-[#0a1020] border-b border-slate-800">
-                    <div className="w-10 h-10 rounded-full bg-linear-to-br from-yellow-500/20 to-amber-600/20 flex items-center justify-center border border-yellow-500/20">
-                        <Crown size={18} className="text-yellow-400" />
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
-                            EXECUTIVE BI
-                            <span className="text-[8px] px-1.5 py-0.5 bg-yellow-500/20 text-yellow-400 rounded font-normal">BOARD LEVEL</span>
-                        </div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · Febrero 2026 · Reporting Suite</div>
-                    </div>
-                </div>
-
-                {/* Tabs */}
-                <div className="flex gap-1 p-2 bg-[#080e1a] border-b border-slate-800">
-                    {([
-                        { key: 'kpis' as const, label: '📊 KPIs Macro' },
-                        { key: 'reports' as const, label: '📄 Reportes' },
-                        { key: 'models' as const, label: '🚗 Top Modelos' },
-                    ]).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-yellow-600/20 text-yellow-400 border border-yellow-500/30' : 'text-slate-500'
-                                }`}>
-                            {t.label}
-                        </button>
-                    ))}
-                </div>
-
-                {/* Content */}
-                <div className="flex-1 overflow-y-auto p-3 space-y-2">
-
-                    {tab === 'kpis' && KPIS.map(k => (
-                        <div key={k.label} className="bg-slate-900/50 rounded-lg p-3 border border-slate-800 flex items-center gap-3">
-                            <div className="flex-1">
-                                <div className="text-[9px] text-slate-500 uppercase font-bold">{k.label}</div>
-                                <div className="flex items-baseline gap-2">
-                                    <span className="text-xl font-black">{k.value}</span>
-                                    <span className={`text-[10px] flex items-center gap-0.5 font-bold ${k.trend > 0 ? 'text-green-400' : 'text-red-400'}`}>
-                                        {k.trend > 0 ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
-                                        {Math.abs(k.trend)}%
-                                    </span>
-                                </div>
-                                <div className="text-[8px] text-slate-500">Prev: {k.prev}</div>
-                            </div>
-                            <Spark data={k.sparkline} color={k.trend > 0 ? '#22c55e' : '#ef4444'} />
-                        </div>
-                    ))}
-
-                    {tab === 'reports' && (
-                        <>
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-1">Reportes Programados</div>
-                            {REPORTS.map(r => (
-                                <div key={r.name} className="bg-slate-900/50 rounded-lg p-2.5 border border-slate-800 flex items-center justify-between">
-                                    <div>
-                                        <div className="text-[11px] font-bold">{r.name}</div>
-                                        <div className="text-[9px] text-slate-500 flex items-center gap-2">
-                                            <span className="flex items-center gap-0.5"><Calendar size={8} />{r.frequency}</span>
-                                            <span>{r.pages}p</span>
-                                            <span className="text-slate-600">Último: {r.lastRun}</span>
-                                        </div>
-                                    </div>
-                                    <button className="flex items-center gap-1 px-2 py-1 bg-yellow-500/10 border border-yellow-500/20 rounded text-[9px] font-bold text-yellow-400 hover:bg-yellow-500/20 transition-all">
-                                        <Download size={9} /> {r.format}
-                                    </button>
-                                </div>
-                            ))}
-                        </>
-                    )}
-
-                    {tab === 'models' && (
-                        <>
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-1">Ranking Ventas por Modelo — Feb 2026</div>
-                            {TOP_MODELS.map((m, i) => (
-                                <div key={m.model} className="bg-slate-900/50 rounded-lg p-2.5 border border-slate-800">
-                                    <div className="flex items-center justify-between mb-1">
-                                        <div className="flex items-center gap-2">
-                                            <span className={`text-[10px] font-black w-5 text-center ${i === 0 ? 'text-yellow-400' : i === 1 ? 'text-slate-300' : i === 2 ? 'text-orange-400' : 'text-slate-500'}`}>
-                                                #{i + 1}
-                                            </span>
-                                            <span className="text-[11px] font-bold">{m.model}</span>
-                                        </div>
-                                        <span className="text-sm font-bold text-blue-400">{m.units}</span>
-                                    </div>
-                                    <div className="flex items-center gap-2">
-                                        <div className="flex-1 h-2 bg-slate-800 rounded-full">
-                                            <div className="h-full rounded-full bg-linear-to-r from-yellow-500 to-amber-500 transition-all"
-                                                style={{ width: `${m.share * 3}%` }} />
-                                        </div>
-                                        <span className="text-[9px] text-yellow-400 font-bold">{m.share}%</span>
-                                        <span className="text-[9px] text-slate-500">{m.revenue}</span>
-                                    </div>
-                                </div>
-                            ))}
-                        </>
-                    )}
-                </div>
-            </div>
-        </BaseNode>
-    );
-};

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

@@ -1,229 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    Trophy, Gift, PartyPopper, User, Phone, Mail,
-    ArrowRight, RotateCcw, Users, Activity, BarChart3, Zap
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA GAMIFICATION NODE — Showroom Experience · Grecco Motors
-   Lucky Drive: Ruleta lead-capture + KPIs de conversion
-   ═══════════════════════════════════════════════════════════════ */
-
-const PRIZES = [
-    { label: 'Mantenimiento Gratis', color: '#ef4444', value: '$850K' },
-    { label: 'Bono $500k Accesorios', color: '#f59e0b', value: '$500K' },
-    { label: 'Polarizado Nano-Cerámico', color: '#3b82f6', value: '$1.2M' },
-    { label: 'Kit de Carretera Premium', color: '#22c55e', value: '$320K' },
-    { label: '50% Dcto Alineación', color: '#a855f7', value: '$175K' },
-    { label: 'Lavado Ecológico x3', color: '#06b6d4', value: '$90K' },
-];
-
-export const KiaGamificationNode = (props: any) => {
-    const [step, setStep] = useState<'form' | 'game' | 'result'>('form');
-    const [lead, setLead] = useState({ name: '', phone: '', email: '', model: '' });
-    const [spinning, setSpinning] = useState(false);
-    const [prize, setPrize] = useState<(typeof PRIZES)[0] | null>(null);
-    const [totalLeads, setTotalLeads] = useState(347);
-    const [todayLeads, setTodayLeads] = useState(23);
-    const wheelRef = useRef<HTMLDivElement>(null);
-
-    /* Simulate growing leads */
-    useEffect(() => {
-        const iv = setInterval(() => {
-            if (Math.random() > 0.6) setTotalLeads(t => t + 1);
-        }, 12000);
-        return () => clearInterval(iv);
-    }, []);
-
-    const handleSpin = () => {
-        if (spinning) return;
-        setSpinning(true);
-
-        const randomDeg = 720 + Math.floor(Math.random() * 360);
-        const selectedIdx = Math.floor(Math.random() * PRIZES.length);
-
-        if (wheelRef.current) {
-            wheelRef.current.style.transition = 'transform 3s cubic-bezier(0.2, 0.8, 0.2, 1)';
-            wheelRef.current.style.transform = `rotate(${randomDeg}deg)`;
-        }
-
-        setTimeout(() => {
-            setPrize(PRIZES[selectedIdx]);
-            setStep('result');
-            setSpinning(false);
-            setTodayLeads(t => t + 1);
-            setTotalLeads(t => t + 1);
-        }, 3000);
-    };
-
-    const resetGame = () => {
-        setStep('form');
-        setPrize(null);
-        setLead({ name: '', phone: '', email: '', model: '' });
-        if (wheelRef.current) {
-            wheelRef.current.style.transition = 'none';
-            wheelRef.current.style.transform = 'rotate(0deg)';
-        }
-    };
-
-    const segmentAngle = 360 / PRIZES.length;
-
-    return (
-        <BaseNode {...props} title="Kia Showroom Experience" width={420} height={640}>
-            <div className="flex flex-col h-full bg-linear-to-b from-black to-slate-900 text-white relative overflow-hidden">
-
-                {/* Animated bg */}
-                <div className="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
-                    <div className="absolute top-[-20%] left-[-20%] w-[140%] h-[140%] bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-red-600 via-transparent to-transparent animate-pulse" />
-                </div>
-
-                {/* Header with Stats */}
-                <div className="flex items-center p-3 bg-black/40 z-10 border-b border-slate-800">
-                    <div className="flex-1">
-                        <h2 className="text-sm font-bold tracking-[0.15em] uppercase">Lucky Drive</h2>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · Lead Capture Gamificado</div>
-                    </div>
-                    <div className="flex gap-2">
-                        <div className="bg-slate-800 px-2 py-1 rounded text-center border border-slate-700">
-                            <div className="text-xs font-bold text-green-400">{todayLeads}</div>
-                            <div className="text-[8px] text-slate-500">Hoy</div>
-                        </div>
-                        <div className="bg-slate-800 px-2 py-1 rounded text-center border border-slate-700">
-                            <div className="text-xs font-bold text-blue-400">{totalLeads}</div>
-                            <div className="text-[8px] text-slate-500">Total</div>
-                        </div>
-                    </div>
-                </div>
-
-                {/* Content */}
-                <div className="flex-1 flex flex-col items-center justify-center p-5 z-10">
-
-                    {step === 'form' && (
-                        <div className="w-full space-y-3">
-                            <div className="text-center mb-4">
-                                <Trophy className="mx-auto text-yellow-400 mb-2" size={44} />
-                                <h3 className="text-lg font-bold">¡Gana Premios para tu Kia!</h3>
-                                <p className="text-xs text-slate-400">Regístrate y gira la ruleta.</p>
-                            </div>
-
-                            <div className="space-y-2">
-                                <InputField icon={User} placeholder="Tu Nombre" value={lead.name} onChange={(v: string) => setLead({ ...lead, name: v })} />
-                                <InputField icon={Phone} placeholder="Celular" value={lead.phone} onChange={(v: string) => setLead({ ...lead, phone: v })} type="tel" />
-                                <InputField icon={Mail} placeholder="Email" value={lead.email} onChange={(v: string) => setLead({ ...lead, email: v })} type="email" />
-                                <select
-                                    className="w-full bg-slate-800 border border-slate-700 rounded-lg py-2.5 px-3 text-sm text-white focus:outline-none focus:border-red-500"
-                                    value={lead.model}
-                                    onChange={e => setLead({ ...lead, model: e.target.value })}
-                                >
-                                    <option value="">¿Qué modelo te interesa?</option>
-                                    <option value="EV6">EV6</option>
-                                    <option value="Sportage">Sportage</option>
-                                    <option value="Seltos">Seltos</option>
-                                    <option value="K3 Cross">K3 Cross</option>
-                                    <option value="Picanto">Picanto</option>
-                                    <option value="Stonic">Stonic</option>
-                                    <option value="Sorento">Sorento</option>
-                                </select>
-                            </div>
-
-                            <button
-                                onClick={() => setStep('game')}
-                                disabled={!lead.name || !lead.phone}
-                                className="w-full bg-red-600 hover:bg-red-500 text-white font-bold py-3 rounded-lg flex items-center justify-center gap-2 mt-3 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-                            >
-                                Jugar Ahora <ArrowRight size={16} />
-                            </button>
-                            <p className="text-[9px] text-center text-slate-600">*Aceptas términos, condiciones y política de datos.</p>
-                        </div>
-                    )}
-
-                    {step === 'game' && (
-                        <div className="flex flex-col items-center">
-                            <div className="text-[10px] text-slate-400 mb-3">
-                                ¡Hola <span className="text-white font-bold">{lead.name.split(' ')[0]}</span>! Gira la ruleta 👇
-                            </div>
-                            <div className="relative w-56 h-56 mb-6">
-                                <div className="absolute -top-3 left-1/2 -translate-x-1/2 z-20 text-red-500 text-xl filter drop-shadow-lg">▼</div>
-                                <div
-                                    ref={wheelRef}
-                                    className="w-full h-full rounded-full border-4 border-slate-700 shadow-2xl relative overflow-hidden"
-                                    style={{
-                                        background: `conic-gradient(${PRIZES.map((p, i) => `${p.color} ${i * segmentAngle}deg ${(i + 1) * segmentAngle}deg`).join(', ')})`
-                                    }}
-                                >
-                                    {PRIZES.map((p, i) => (
-                                        <div
-                                            key={i}
-                                            className="absolute w-full h-full text-[8px] font-bold text-white flex justify-center pt-3"
-                                            style={{ transform: `rotate(${i * segmentAngle + segmentAngle / 2}deg)` }}
-                                        >
-                                            <span className="bg-black/50 px-1 py-0.5 rounded backdrop-blur-sm max-w-[70px] text-center block" style={{ transform: 'translateY(16px)' }}>
-                                                {p.label.split(' ').slice(0, 2).join(' ')}
-                                            </span>
-                                        </div>
-                                    ))}
-                                </div>
-                                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-lg z-10 border-4 border-slate-300">
-                                    <span className="text-red-600 font-bold text-[8px] tracking-widest">KIA</span>
-                                </div>
-                            </div>
-                            <button
-                                onClick={handleSpin}
-                                disabled={spinning}
-                                className="px-8 py-3 bg-linear-to-r from-red-600 to-red-500 rounded-full text-white font-bold text-lg shadow-lg hover:shadow-red-500/20 hover:scale-105 active:scale-95 transition-all disabled:opacity-50"
-                            >
-                                {spinning ? '🎰 Girando...' : '¡GIRAR!'}
-                            </button>
-                        </div>
-                    )}
-
-                    {step === 'result' && prize && (
-                        <div className="flex flex-col items-center text-center">
-                            <div className="w-20 h-20 bg-yellow-400/20 rounded-full flex items-center justify-center mb-4 animate-bounce">
-                                <Trophy className="text-yellow-400" size={40} />
-                            </div>
-                            <h3 className="text-xl font-bold mb-1">¡Felicidades {lead.name.split(' ')[0]}!</h3>
-                            <p className="text-slate-400 text-sm mb-4">Ganaste:</p>
-
-                            <div className="bg-slate-800 border p-5 rounded-xl w-full max-w-xs mb-4 shadow-[0_0_30px_rgba(220,38,38,0.2)]" style={{ borderColor: `${prize.color}66` }}>
-                                <Gift className="mx-auto mb-2" size={28} style={{ color: prize.color }} />
-                                <div className="text-lg font-bold text-white">{prize.label}</div>
-                                <div className="text-xs mt-1" style={{ color: prize.color }}>Valor: {prize.value}</div>
-                                <div className="text-[10px] text-slate-500 mt-2">Código: KIA-GRC-{Math.floor(Math.random() * 10000)}</div>
-                            </div>
-
-                            <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-2 text-[10px] text-green-300 w-full mb-4">
-                                ✅ Lead registrado en CRM · Asesor asignado automáticamente
-                            </div>
-
-                            <button onClick={resetGame} className="flex items-center gap-2 text-slate-400 hover:text-white transition-colors text-sm">
-                                <RotateCcw size={14} /> Siguiente Cliente
-                            </button>
-                        </div>
-                    )}
-                </div>
-
-                {/* Bottom Stats */}
-                <div className="flex items-center justify-between text-[10px] text-slate-500 p-2 border-t border-slate-800 z-10">
-                    <span>Conv. Rate: <span className="text-green-400 font-bold">34.2%</span></span>
-                    <span>Avg Ticket: <span className="text-blue-400 font-bold">$420K</span></span>
-                    <span className="flex items-center gap-1"><Activity size={8} className="text-green-400 animate-pulse" /> Live</span>
-                </div>
-            </div>
-        </BaseNode>
-    );
-};
-
-const InputField = ({ icon: Icon, placeholder, value, onChange, type = 'text' }: any) => (
-    <div className="relative">
-        <Icon className="absolute left-3 top-3 text-slate-500" size={14} />
-        <input
-            type={type}
-            placeholder={placeholder}
-            className="w-full bg-slate-800 border border-slate-700 rounded-lg py-2.5 pl-9 text-sm focus:outline-none focus:border-red-500 transition-colors"
-            value={value}
-            onChange={e => onChange(e.target.value)}
-        />
-    </div>
-);