@decido/shell 1.0.0

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

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

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

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