// mnm-auth.jsx — Login + Register + Onboarding (3 steps) const { useState } = React; /* ─── ENTRY METHOD ICONS (20px) ──────────────────────────────────────────────── */ const IcForm = ()=>; const IcBubble= ()=>; const IcMicSm = ()=>; const IcFolder= ()=>; const IcBank = ()=>; const IcMsg = ()=>; /* ─── ONBOARDING STEP 1 ICONS (24px) ────────────────────────────────────────── */ const IcSeedling = ()=>; const IcTrendUp = ()=>; const IcBuildings= ()=>; /* ─── AUTH SHELL ─────────────────────────────────────────────────────────────── */ function AuthShell({ onBack, title, subtitle, children }) { return (
{/* Top bar */}
MN
Mi Negocio en Números
{/* Form area */}

{title}

{subtitle &&

{subtitle}

} {children}
); } /* ─── OAUTH BUTTONS ──────────────────────────────────────────────────────────── */ function OAuthButtons({ label }) { const base = {width:'100%',padding:'11px',borderRadius:'100px',fontSize:'13.5px',fontWeight:600,cursor:'pointer',fontFamily:'var(--font)',display:'flex',alignItems:'center',justifyContent:'center',gap:'10px',transition:'opacity 0.15s'}; return (
); } /* ─── DIVIDER ────────────────────────────────────────────────────────────────── */ function Divider() { return (
o continúa con email
); } /* ─── FIELD ──────────────────────────────────────────────────────────────────── */ function Field({label,type='text',value,onChange,placeholder,error}) { return (
onChange(e.target.value)} placeholder={placeholder} style={{width:'100%',padding:'11px 14px',borderRadius:'var(--radius-sm)',fontSize:'13.5px',borderColor:error?'var(--s-red)':'var(--border)'}}/> {error&&

{error}

}
); } /* ─── LOGIN ──────────────────────────────────────────────────────────────────── */ function LoginPage({ onBack, onSuccess, onRegister }) { const [email,setEmail] = useState(''); const [pass,setPass] = useState(''); const [err,setErr] = useState(''); const submit = ()=>{ if(!email.trim()||!pass.trim()){setErr('Completa todos los campos');return;} onSuccess(); }; return ( {err&&

{err}

}

¿No tienes cuenta?

Demo rápido

Accede sin crear cuenta para explorar el prototipo.

 ); } /* ─── REGISTER ───────────────────────────────────────────────────────────────── */ function RegisterPage({ onBack, onSuccess, onLogin }) { const [nombre,setNombre] = useState(''); const [email,setEmail] = useState(''); const [pass,setPass] = useState(''); const [errors,setErrors] = useState({}); const submit = ()=>{ const e={}; if(!nombre.trim()) e.nombre='Requerido'; if(!email.trim()) e.email='Requerido'; if(pass.length<6) e.pass='Mínimo 6 caracteres'; setErrors(e); if(!Object.keys(e).length) onSuccess(); }; return (

Al registrarte aceptas los Términos de Servicio y la Política de Privacidad.

¿Ya tienes cuenta?

); } /* ─── ONBOARDING ─────────────────────────────────────────────────────────────── */ const VERTICALS = ['Restaurante / Food service','Retail / E-commerce','Servicios profesionales','SaaS / Tech','Manufactura','Salud y bienestar','Educación','Construcción','Otro']; const ENTRY_METHODS = [ {id:'form', icon:, label:'Formulario manual', desc:'Lleno los campos paso a paso.'}, {id:'chat', icon:, label:'Chat con IA', desc:'La IA me pregunta y yo respondo.'}, {id:'voice',icon:, label:'Nota de voz', desc:'Grabo un audio describiendo mis números.'}, {id:'file', icon:, label:'Importar archivo', desc:'Subo un CSV o Excel de mi contabilidad.'}, {id:'bank', icon:, label:'Conectar banco', desc:'Open Banking — el banco más seguro.'}, {id:'wp', icon:, label:'WhatsApp', desc:'Mando fotos o texto a nuestro número.'}, ]; function OnboardingPage({ onComplete, onSkip }) { const [step,setStep] = useState(0); const [etapa,setEtapa] = useState(''); const [vertical,setVertical] = useState(''); const [metodo,setMetodo] = useState(''); const STEPS = [ { title:'¿En qué etapa está tu empresa?', subtitle:'Configuramos tu dashboard según esto.', content:(
{[ {id:'pre', icon:, l:'Todavía no facturo (pre-revenue)',d:'Estoy construyendo o validando la idea'}, {id:'op', icon:, l:'Ya facturo (en operación)',d:'Tengo ventas, aunque sean irregulares'}, {id:'multi',icon:,l:'Tengo varias empresas',d:'Administro más de una entidad o marca'}, ].map(o=>( ))}
), canNext: !!etapa, }, { title:'¿En qué industria operas?', subtitle:'Pre-seleccionamos los KPIs más relevantes para tu sector.', content:(
{VERTICALS.map(v=>( ))}
), canNext: !!vertical, }, { title:'¿Cómo prefieres ingresar tus datos?', subtitle:'Puedes cambiar esto en cualquier momento.', content:(
{ENTRY_METHODS.map(m=>( ))}
), canNext: !!metodo, }, ]; const cur = STEPS[step]; return (
{/* Top bar */}
MN
Configuración inicial
{STEPS.map((_,i)=>(
))} Paso {step+1} de {STEPS.length}

{cur.title}

{cur.subtitle}

{cur.content}
{step>0 ? :
}
); } Object.assign(window, { LoginPage, RegisterPage, OnboardingPage });