/* ═══════════════════════════════════════════════════════════════════
MENTALIDAD LIBRE — App v2 · AizuaLabs Academy
Gamified · Colorful · Fun · Bilingual ES/EN
═══════════════════════════════════════════════════════════════════ */
const { useState, useEffect, useRef } = React;
/* ── Translations ────────────────────────────────────────────────── */
const T = {
es: {
appTitle: "Mentalidad Libre",
appSubtitle: "Tu aventura financiera comienza aquí",
langToggle: "EN",
levelUp: "¡Subiste de nivel!",
xpEarned: "XP ganados",
streak: "Racha",
days: "días",
chooseProfile: "¿Quién eres hoy?",
profileSubtitle: "Elige tu aventurero y empieza a jugar",
profiles: {
kid: { label: "Explorador", emoji: "🌱", age: "3–8 años", level: "Nivel 1", color: "#29B6F6" },
teen: { label: "Navegante", emoji: "🚀", age: "9–13 años", level: "Nivel 2", color: "#29B6F6" },
older: { label: "Pionero", emoji: "⚡", age: "14–18 años", level: "Nivel 3", color: "#E8C96A" },
parent: { label: "Estratega", emoji: "💼", age: "Adulto", level: "Nivel 4", color: "#E8C96A" },
},
nav: {
dashboard: "Dashboard",
huchas: "3 Huchas",
method: "60/20/20",
retos: "Retos",
compound: "Interés",
},
dashboard: {
title: "¡Hola, aventurero!",
subtitle: "Aquí está tu resumen de hoy",
savings: "Ahorrado",
goal: "Objetivo",
xp: "XP Total",
streak: "Racha",
noGoal: "Sin objetivo",
tip: "Consejo del día",
tips: [
"💡 Invierte aunque sea 10€ al mes. En 20 años puede ser mucho más.",
"🎯 Un objetivo claro es más poderoso que una gran cantidad de dinero.",
"🌱 El hábito de ahorrar vale más que el monto que ahorras.",
"🔑 La libertad financiera se construye decisión a decisión.",
"🚀 Empieza hoy. Tu yo del futuro te lo agradecerá.",
],
},
huchas: {
title: "Las 3 Huchas",
subtitle: "Cada euro tiene una misión. ¡Repártelo!",
gastar: { label: "Gastar", emoji: "🛍️", pct: 60, color: "#0288D1" },
ahorrar: { label: "Ahorrar", emoji: "🐷", pct: 20, color: "#C9A84C" },
invertir: { label: "Invertir", emoji: "📈", pct: 20, color: "#E8C96A" },
incomeLabel: "¿Cuánto dinero tienes? (€)",
distribute: "¡Repartir!",
result: "Tu reparto:",
xpReward: "+15 XP por repartir tu dinero",
tip: "💡 Gastar 60%, Ahorrar 20%, Invertir 20% — la fórmula mágica.",
},
method: {
title: "Método 60/20/20",
subtitle: "El sistema familiar Mentalidad Libre",
categories: [
{ key: "vivir", label: "Vivir", emoji: "🏠", pct: 60, color: "#0288D1", desc: "Vivienda, comida, transporte, colegio" },
{ key: "crecer", label: "Crecer", emoji: "📈", pct: 20, color: "#C9A84C", desc: "Ahorro, inversión, fondos indexados" },
{ key: "libertad", label: "Libertad", emoji: "✨", pct: 20, color: "#E8C96A", desc: "Viajes, formación, ocio, experiencias" },
],
incomeLabel: "Ingresos netos mensuales (€)",
calculate: "Calcular",
result: "Tu distribución:",
monthlyLabel: "al mes",
tip: "💡 Automatiza las transferencias el día que cobres.",
},
retos: {
title: "Mini-Retos",
subtitle: "Completa retos y gana XP",
completed: "¡Hecho!",
pending: "Completar",
xpEach: "XP",
allDone: "¡Completaste todos los retos! 🏆",
challenges: [
{ id: "r1", emoji: "💰", text: "Abre una cuenta de ahorro separada", xp: 20 },
{ id: "r2", emoji: "📊", text: "Calcula tus gastos del mes pasado", xp: 15 },
{ id: "r3", emoji: "🎯", text: "Fija un objetivo financiero específico", xp: 15 },
{ id: "r4", emoji: "📚", text: "Lee 15 minutos sobre finanzas personales", xp: 10 },
{ id: "r5", emoji: "💬", text: "Habla con tus hijos sobre el dinero hoy", xp: 20 },
{ id: "r6", emoji: "🔄", text: "Automatiza una transferencia mensual", xp: 25 },
{ id: "r7", emoji: "🛑", text: "Cancela una suscripción que no usas", xp: 15 },
{ id: "r8", emoji: "🌱", text: "Investiga un fondo indexado", xp: 20 },
],
kidChallenges: [
{ id: "k1", emoji: "🐷", text: "Mete una moneda en tu hucha hoy", xp: 10 },
{ id: "k2", emoji: "🛒", text: "Ayuda a elegir algo barato en la tienda", xp: 10 },
{ id: "k3", emoji: "🎁", text: "Ahorra para comprar un regalo a alguien", xp: 15 },
{ id: "k4", emoji: "💡", text: "Apaga las luces al salir de la habitación", xp: 5 },
{ id: "k5", emoji: "📝", text: "Escribe 3 cosas que quieres comprar", xp: 10 },
],
},
compound: {
title: "Interés Compuesto",
subtitle: "El 8º milagro del mundo ✨",
capital: "Capital inicial (€)",
monthly: "Aportación mensual (€)",
years: "Años",
rate: "Rentabilidad anual (%)",
calculate: "Ver magia",
invested: "Invertido",
gains: "Beneficios",
total: "Total",
multiplier: "Multiplicador",
tip: "💡 \"El interés compuesto es la fuerza más poderosa del universo.\" — Einstein",
chartLabel: "Crecimiento de tu inversión",
},
},
en: {
appTitle: "Free Mindset",
appSubtitle: "Your financial adventure starts here",
langToggle: "ES",
levelUp: "You leveled up!",
xpEarned: "XP earned",
streak: "Streak",
days: "days",
chooseProfile: "Who are you today?",
profileSubtitle: "Choose your adventurer and start playing",
profiles: {
kid: { label: "Explorer", emoji: "🌱", age: "3–8 yrs", level: "Level 1", color: "#29B6F6" },
teen: { label: "Navigator", emoji: "🚀", age: "9–13 yrs", level: "Level 2", color: "#29B6F6" },
older: { label: "Pioneer", emoji: "⚡", age: "14–18 yrs", level: "Level 3", color: "#E8C96A" },
parent: { label: "Strategist", emoji: "💼", age: "Adult", level: "Level 4", color: "#E8C96A" },
},
nav: {
dashboard: "Dashboard",
huchas: "3 Buckets",
method: "60/20/20",
retos: "Quests",
compound: "Compound",
},
dashboard: {
title: "Hello, adventurer!",
subtitle: "Here's your summary for today",
savings: "Saved",
goal: "Goal",
xp: "Total XP",
streak: "Streak",
noGoal: "No goal set",
tip: "Tip of the day",
tips: [
"💡 Invest even just €10/month. In 20 years it could be much more.",
"🎯 A clear goal is more powerful than a large amount of money.",
"🌱 The saving habit is worth more than the amount you save.",
"🔑 Financial freedom is built decision by decision.",
"🚀 Start today. Your future self will thank you.",
],
},
huchas: {
title: "The 3 Buckets",
subtitle: "Every euro has a mission. Split it!",
gastar: { label: "Spend", emoji: "🛍️", pct: 60, color: "#0288D1" },
ahorrar: { label: "Save", emoji: "🐷", pct: 20, color: "#C9A84C" },
invertir: { label: "Invest", emoji: "📈", pct: 20, color: "#E8C96A" },
incomeLabel: "How much money do you have? (€)",
distribute: "Split it!",
result: "Your split:",
xpReward: "+15 XP for splitting your money",
tip: "💡 Spend 60%, Save 20%, Invest 20% — the magic formula.",
},
method: {
title: "60/20/20 Method",
subtitle: "The Free Mindset family system",
categories: [
{ key: "live", label: "Live", emoji: "🏠", pct: 60, color: "#0288D1", desc: "Housing, food, transport, school" },
{ key: "grow", label: "Grow", emoji: "📈", pct: 20, color: "#C9A84C", desc: "Savings, investment, index funds" },
{ key: "freedom", label: "Freedom", emoji: "✨", pct: 20, color: "#E8C96A", desc: "Travel, education, leisure, experiences" },
],
incomeLabel: "Monthly net income (€)",
calculate: "Calculate",
result: "Your distribution:",
monthlyLabel: "per month",
tip: "💡 Automate transfers on payday.",
},
retos: {
title: "Mini-Quests",
subtitle: "Complete quests and earn XP",
completed: "Done!",
pending: "Complete",
xpEach: "XP",
allDone: "You completed all quests! 🏆",
challenges: [
{ id: "r1", emoji: "💰", text: "Open a separate savings account", xp: 20 },
{ id: "r2", emoji: "📊", text: "Calculate your expenses from last month", xp: 15 },
{ id: "r3", emoji: "🎯", text: "Set a specific financial goal", xp: 15 },
{ id: "r4", emoji: "📚", text: "Read 15 minutes about personal finance", xp: 10 },
{ id: "r5", emoji: "💬", text: "Talk to your kids about money today", xp: 20 },
{ id: "r6", emoji: "🔄", text: "Automate a monthly transfer", xp: 25 },
{ id: "r7", emoji: "🛑", text: "Cancel a subscription you don't use", xp: 15 },
{ id: "r8", emoji: "🌱", text: "Research an index fund", xp: 20 },
],
kidChallenges: [
{ id: "k1", emoji: "🐷", text: "Put a coin in your piggy bank today", xp: 10 },
{ id: "k2", emoji: "🛒", text: "Help choose something cheaper at the store", xp: 10 },
{ id: "k3", emoji: "🎁", text: "Save up to buy a gift for someone", xp: 15 },
{ id: "k4", emoji: "💡", text: "Turn off the lights when leaving the room", xp: 5 },
{ id: "k5", emoji: "📝", text: "Write 3 things you want to buy", xp: 10 },
],
},
compound: {
title: "Compound Interest",
subtitle: "The 8th wonder of the world ✨",
capital: "Starting capital (€)",
monthly: "Monthly contribution (€)",
years: "Years",
rate: "Annual return (%)",
calculate: "See magic",
invested: "Invested",
gains: "Gains",
total: "Total",
multiplier: "Multiplier",
tip: "💡 \"Compound interest is the most powerful force in the universe.\" — Einstein",
chartLabel: "Growth of your investment",
},
},
};
/* ── Helpers ─────────────────────────────────────────────────────── */
function fmt(n) {
return new Intl.NumberFormat("es-ES", { minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(n);
}
function useLocalState(key, initial) {
const [val, setVal] = useState(() => {
try { const s = localStorage.getItem(key); return s ? JSON.parse(s) : initial; }
catch { return initial; }
});
useEffect(() => { try { localStorage.setItem(key, JSON.stringify(val)); } catch {} }, [key, val]);
return [val, setVal];
}
/* ── Donut Chart ─────────────────────────────────────────────────── */
function DonutChart({ segments, size = 160, strokeWidth = 22, animated }) {
const r = (size - strokeWidth) / 2;
const circ = 2 * Math.PI * r;
const cx = size / 2, cy = size / 2;
const [progress, setProgress] = useState(animated ? 0 : 1);
useEffect(() => {
if (!animated) { setProgress(1); return; }
setProgress(0);
const t = setTimeout(() => {
let start = null;
const dur = 800;
const step = (ts) => {
if (!start) start = ts;
const p = Math.min((ts - start) / dur, 1);
setProgress(p < 1 ? p : 1);
if (p < 1) requestAnimationFrame(step);
};
requestAnimationFrame(step);
}, 100);
return () => clearTimeout(t);
}, [animated, JSON.stringify(segments)]);
let offset = 0;
const total = segments.reduce((s, x) => s + x.value, 0) || 1;
return (
);
}
/* ── Animated Bar Chart ──────────────────────────────────────────── */
function BarChart({ data, height = 140 }) {
const [drawn, setDrawn] = useState(false);
useEffect(() => { const t = setTimeout(() => setDrawn(true), 200); return () => clearTimeout(t); }, [data]);
const max = Math.max(...data.map(d => d.value), 1);
const barW = Math.max(18, Math.floor(220 / data.length) - 6);
const gap = 6;
const totalW = data.length * (barW + gap);
return (
);
}
/* ── XP Toast ────────────────────────────────────────────────────── */
function XPToast({ amount, onDone }) {
useEffect(() => { const t = setTimeout(onDone, 2000); return () => clearTimeout(t); }, []);
return (
✨ +{amount} XP
);
}
/* ── Progress Ring ───────────────────────────────────────────────── */
function ProgressRing({ pct, size = 52, color, emoji }) {
const r = (size - 6) / 2;
const circ = 2 * Math.PI * r;
const dash = (pct / 100) * circ;
return (
);
}
/* ── Card ────────────────────────────────────────────────────────── */
function Card({ children, style, gradient }) {
return (
{children}
);
}
/* ── Slider ──────────────────────────────────────────────────────── */
function Slider({ label, value, min, max, step, onChange, color, unit }) {
return (
);
}
/* ── Profile Selector ────────────────────────────────────────────── */
function ProfileSelect({ lang, onSelect }) {
const t = T[lang];
const profiles = [
{ key: "kid", ...t.profiles.kid },
{ key: "teen", ...t.profiles.teen },
{ key: "older", ...t.profiles.older },
{ key: "parent", ...t.profiles.parent },
];
return (
🎮
{t.chooseProfile}
{t.profileSubtitle}
{profiles.map(p => (
))}
);
}
/* ── Dashboard Tab ───────────────────────────────────────────────── */
function DashboardTab({ lang, profile, xp, streak, savings, t }) {
const td = t.dashboard;
const tip = td.tips[Math.floor(Date.now() / 86400000) % td.tips.length];
const p = T[lang].profiles[profile];
const levelBadges = [
{ min: 0, label: lang === "es" ? "Semilla 🌰" : "Seed 🌰", color: "#C9A84C" },
{ min: 50, label: lang === "es" ? "Brote 🌱" : "Sprout 🌱", color: "#22c55e" },
{ min: 150, label: lang === "es" ? "Árbol 🌳" : "Tree 🌳", color: "#29B6F6" },
{ min: 300, label: lang === "es" ? "Experto ⭐" : "Expert ⭐", color: "#C9A84C" },
{ min: 500, label: lang === "es" ? "Maestro 🏆" : "Master 🏆", color: "#E8C96A" },
{ min: 800, label: lang === "es" ? "Leyenda 💎" : "Legend 💎", color: "#0288D1" },
];
const badge = [...levelBadges].reverse().find(b => xp >= b.min) || levelBadges[0];
const nextBadge = levelBadges[levelBadges.findIndex(b => b === badge) + 1];
const pctToNext = nextBadge ? Math.min(100, ((xp - badge.min) / (nextBadge.min - badge.min)) * 100) : 100;
return (
{/* Hero greeting */}
{p.emoji}
{p.level} · {p.label}
{td.title}
{td.subtitle}
{/* XP progress bar */}
{badge.label}
{nextBadge && {xp} / {nextBadge.min} XP}
{/* Stats row */}
🐷
{td.savings}
{fmt(savings)}€
⚡
🔥
{t.streak}
{streak} {t.days}
🏅
{lang === "es" ? "Insignia" : "Badge"}
{badge.label}
{/* Tip of the day */}
{td.tip}
{tip}
{th.title}
{th.subtitle}
{/* Legend */}
{buckets.map(b => (
{b.emoji} {b.label} {b.pct}%
))}
setIncome(e.target.value)}
placeholder="100"
style={{
flex: 1, padding: "12px 14px", borderRadius: 12,
border: "2px solid rgba(255,255,255,0.12)", fontSize: 16, fontWeight: 600,
outline: "none", color: "#FFFFFF", background: "#111D27",
}}
onFocus={e => e.target.style.borderColor = "#C9A84C"}
onBlur={e => e.target.style.borderColor = "rgba(255,255,255,0.12)"}
/>
{distributed && (
✅ {th.xpReward}
{buckets.map(b => (
{b.emoji}
{b.label}
{fmt(distributed[b.key])}€
))}
)}
{th.tip}
);
}
/* ── Method Tab ──────────────────────────────────────────────────── */
function MethodTab({ lang, onXP, t }) {
const tm = t.method;
const [income, setIncome] = useState("");
const [result, setResult] = useState(null);
function calculate() {
const n = parseFloat(income);
if (!n || n <= 0) return;
setResult(tm.categories.map(c => ({ ...c, amount: n * (c.pct / 100) })));
onXP(10);
}
return (
{tm.title}
{tm.subtitle}
{/* Visual bars */}
{tm.categories.map(c => (
))}
setIncome(e.target.value)}
placeholder="2000"
style={{
flex: 1, padding: "12px 14px", borderRadius: 12,
border: "2px solid rgba(255,255,255,0.12)", fontSize: 16, fontWeight: 600,
outline: "none", color: "#FFFFFF", background: "#111D27",
}}
onFocus={e => e.target.style.borderColor = "#E8C96A"}
onBlur={e => e.target.style.borderColor = "rgba(255,255,255,0.12)"}
/>
{result && (
✅ {tm.result}
{result.map(c => (
{c.emoji}
{c.label}
{fmt(c.amount)}€
{tm.monthlyLabel}
))}
)}
{tm.tip}
);
}
/* ── Retos Tab ───────────────────────────────────────────────────── */
function RetosTab({ lang, profile, onXP, t }) {
const tr = t.retos;
const isKid = profile === "kid";
const challenges = isKid ? tr.kidChallenges : tr.challenges;
const [done, setDone] = useLocalState(`retos_done_v2_${lang}_${profile}`, {});
function toggle(id, xp) {
if (done[id]) return;
setDone(prev => ({ ...prev, [id]: true }));
onXP(xp);
}
const doneCount = Object.keys(done).filter(k => challenges.find(c => c.id === k)).length;
const totalXP = challenges.filter(c => done[c.id]).reduce((s, c) => s + c.xp, 0);
const allDone = doneCount === challenges.length;
return (
{/* Header card */}
{tr.title}
{tr.subtitle}
{doneCount}/{challenges.length}
{lang === "es" ? "Completados" : "Completed"}
{allDone ? (
🏆
{tr.allDone}
) : (
challenges.map(c => {
const isDone = !!done[c.id];
return (
{c.emoji}
{c.text}
+{c.xp} {tr.xpEach}
);
})
)}
{tc.title}
{tc.subtitle}
{/* Results */}
{[
{ label: tc.invested, value: `${fmt(totalInvested)}€`, color: "#C9A84C", emoji: "💰" },
{ label: tc.gains, value: `${fmt(gains)}€`, color: "#29B6F6", emoji: "📈" },
{ label: tc.total, value: `${fmt(finalTotal)}€`, color: "#E8C96A", emoji: "🏆" },
{ label: tc.multiplier, value: `×${multiplier}`, color: "#0288D1", emoji: "🚀" },
].map((item, i) => (
{item.emoji}
{item.label}
{item.value}
))}
{/* Bar Chart */}
📊 {tc.chartLabel}
{showChart && }
{tc.tip}
);
}
/* ── Bottom Nav ──────────────────────────────────────────────────── */
function BottomNav({ tab, setTab, t }) {
const items = [
{ key: "dashboard", emoji: "🏠", label: t.nav.dashboard },
{ key: "huchas", emoji: "🪣", label: t.nav.huchas },
{ key: "method", emoji: "📊", label: t.nav.method },
{ key: "retos", emoji: "🎯", label: t.nav.retos },
{ key: "compound", emoji: "💸", label: t.nav.compound },
];
return (
{items.map(item => {
const active = tab === item.key;
return (
);
})}
);
}
/* ── Header ──────────────────────────────────────────────────────── */
function Header({ lang, setLang, profile, setProfile, xp, streak, t }) {
const p = T[lang].profiles[profile];
return (
⚡
{fmt(xp)}
🔥
{streak}
);
}
/* ── Global Styles (injected once) ──────────────────────────────── */
const GLOBAL_STYLE = `
@keyframes toastIn {
from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.9); }
to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #0C1E2B !important; }
input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 99px; outline: none; cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: currentColor; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 99px; }
`;
/* ══════════════════════════════════════════════════════════════════
MAIN APP
══════════════════════════════════════════════════════════════════ */
function App() {
const [lang, setLang] = useLocalState("ml_v2_lang", "es");
const [profile, setProfile] = useLocalState("ml_v2_profile", null);
const [tab, setTab] = useLocalState("ml_v2_tab", "dashboard");
const [xp, setXP] = useLocalState("ml_v2_xp", 0);
const [streak, setStreak] = useLocalState("ml_v2_streak", 1);
const [savings, setSavings] = useLocalState("ml_v2_savings", 0);
const [toast, setToast] = useState(null);
const styleRef = useRef(false);
// Inject global styles once
useEffect(() => {
if (styleRef.current) return;
styleRef.current = true;
const el = document.createElement("style");
el.textContent = GLOBAL_STYLE;
document.head.appendChild(el);
// Override body bg
document.body.style.background = "#0C1E2B";
document.body.style.minHeight = "100vh";
}, []);
// Streak logic: update on daily visit
useEffect(() => {
const key = "ml_v2_last_visit";
const today = new Date().toDateString();
const last = localStorage.getItem(key);
if (!last) { localStorage.setItem(key, today); return; }
if (last === today) return;
const yesterday = new Date(Date.now() - 86400000).toDateString();
if (last === yesterday) setStreak(s => s + 1);
else setStreak(1);
localStorage.setItem(key, today);
}, []);
function addXP(amount) {
setXP(x => x + amount);
setToast(amount);
}
const t = T[lang];
// No profile selected → show profile picker
if (!profile) {
return (
{/* Lang toggle on profile screen */}
{ setProfile(p); addXP(5); }} />
{tab === "dashboard" && }
{tab === "huchas" && }
{tab === "method" && }
{tab === "retos" && }
{tab === "compound" && }
{toast &&
setToast(null)} />}
);
}