)}
);
}
// 3-up stat inside a hero card footer
function HeroStat({ label, value, accent }) {
return (
{label}
{value}
);
}
// little plant in a soft pot — stage grows with progress
function PlantStage({ pct, accent, icon }) {
return (
);
}
// big centerpiece: stylised growing tree (rings) for the reserves hero
function GrowthScene({ pct }) {
const rings = [
{ r: 46, c: 'var(--grow-ring-outer)' },
{ r: 34, c: 'var(--grow-ring-mid)' },
{ r: 22, c: 'var(--grow-ring-in)' },
];
const show = Math.ceil(pct / 100 * rings.length) || 1;
return (
);
}
// ════════════════════════════════════════════════════════════════════
// PLÁN lives in fa-plan.jsx (interactive: expandable income + categories,
// add/delete items, recurring, descriptions, structure graphics).
// ════════════════════════════════════════════════════════════════════
// ════════════════════════════════════════════════════════════════════
// TIPY — gentle conscious-spending tips
// ════════════════════════════════════════════════════════════════════
// deeper category explanations (Tipy) — keyed by category key
const CAT_EXPLAIN = {
nutne: 'Pevný základ života. Patří sem nájem, energie, jídlo, doprava — výdaje, které se opakují a drží tě v bezpečí. Cíl 50 % příjmu je zdravá hranice: když je nutné výrazně vyšší, je čas hledat, kde uvolnit tlak.',
budouci: 'Tvoje budoucí svoboda. Spoření, rezerva a investice, které dnes odkládáš pro sebe zítra. I 20 % dělá s časem a složeným úročením zázraky — důležitější než kolik je, že to děláš pravidelně.',
radost: 'Tvoje dnešní radost. Kavárny, výlety, koníčky a drobnosti, co ti dělají život hezčí. Plánovat radost naschvál je dovednost — utrácení bez viny tě udrží u rozpočtu mnohem déle než odříkání.',
};
function Tipy() {
return (
{L('Složené úročení znamená, že výnosy samy vydělávají další výnosy. Index S&P\u00a0500 historicky vynesl s reinvesticí dividend zhruba 7–10\u00a0% ročně. Graf je zjednodušená ilustrace — minulé výnosy nezaručují budoucí a nejde o investiční doporučení.')}
{L('Laskavé rady')}
{L('Malé návyky, které dělají velký klid. Klepni na kartu a otoč ji — čeká tě malá zajímavost.')}
{APP.tipy.map((t, i) => )}
{/* ── Tři kategorie, tři role — hlubší vysvětlení ── */}
{L('Tři kategorie, tři role')}
{APP.categories.map(c => (
{L(c.name)}
{L('cíl')} {c.targetPct} % {L('z příjmu')}
{L(CAT_EXPLAIN[c.key])}
))}
);
}
// flip card: front = tip, back = playful fact / financial literacy
function TipFlip({ t }) {
const [flipped, setFlipped] = useS2(false);
const faceBase = { padding: 18 };
return (
setFlipped(f => !f)} style={{ height: 172 }}>
{/* front */}
{L(t.t)}
{L(t.d)}
{L('Otoč pro zajímavost')}
{/* back */}
{L(t.factTitle)}
{L(t.fact)}
{L('Zpět na tip')}
);
}
// ════════════════════════════════════════════════════════════════════
// REFLEXE — monthly quiz with A/B/C/D answers + a graphic month review
// Each option scores 0–3; total maps to an assessment + tailored tip.
const REFLEX_QUIZ = [
{ q: 'Když tento měsíc přišly peníze, co se dělo?', icon: 'coins', accent: 'honey', opts: [
{ t: 'Hned se rozkutálely, ani nevím kam', s: 0 },
{ t: 'Něco jsem utratila, něco zůstalo náhodou', s: 1 },
{ t: 'Většinu jsem rozdělila podle plánu', s: 2 },
{ t: 'Nejdřív jsem odložila pro budoucí já, pak utrácela', s: 3 },
] },
{ q: 'Jak ses cítila u větších výdajů?', icon: 'blossom', accent: 'blush', opts: [
{ t: 'S úzkostí, často je lituju', s: 0 },
{ t: 'Napětí, ale nějak to šlo', s: 1 },
{ t: 'Klidně — byly promyšlené', s: 2 },
{ t: 'S radostí, věděla jsem, že si je můžu dovolit', s: 3 },
] },
{ q: 'Kolik šlo do „Budoucí já" (spoření a investice)?', icon: 'sprout', accent: 'moss', opts: [
{ t: 'Nic, nezbylo', s: 0 },
{ t: 'Pár korun na konci měsíce', s: 1 },
{ t: 'Skoro podle cíle', s: 2 },
{ t: 'Celý cíl, hned po výplatě', s: 3 },
] },
{ q: 'Jak to bylo s radostí a drobným potěšením?', icon: 'sun', accent: 'honey', opts: [
{ t: 'Buď vina, nebo úplné odříkání', s: 0 },
{ t: 'Náhodně, bez plánu', s: 1 },
{ t: 'Občas naplánované', s: 2 },
{ t: 'Vědomě naplánovaná, bez výčitek', s: 3 },
] },
];
const REFLEX_RESULT = {
tense: { key: 'tense', label: 'Stísněně', accent: 'clay', tip: 'Zkus jedinou změnu: hned po výplatě odlož 10 % stranou, než cokoli utratíš. Malý automatický krok ti vrátí pocit kontroly — a příští reflexe bude lehčí.' },
balance: { key: 'balance', label: 'V rovnováze', accent: 'honey', tip: 'Máš pevný základ. Tento měsíc zkus pojmenovat jeden konkrétní cíl a posílat na něj pravidelnou částku. Z rovnováhy se tak pomalu stane radost.' },
joy: { key: 'joy', label: 'S radostí', accent: 'moss', tip: 'Krásná práce. Udrž si to: zautomatizuj spoření a dopřej si bez výčitek jednu naplánovanou radost. Můžeš zvážit i mírné zvýšení investic.' },
};
function reflexBand(score, max) {
const pct = score / max;
if (pct < 0.42) return REFLEX_RESULT.tense;
if (pct < 0.75) return REFLEX_RESULT.balance;
return REFLEX_RESULT.joy;
}
function Reflexe({ month }) {
const mKey = month || APP.month;
const [answers, setAnswersRaw] = useS2(() => { try { const s = loadFaReflexe(); return (s[mKey] && s[mKey].answers) || {}; } catch (e) { return {}; } });
const setAnswers = (next) => { setAnswersRaw(next); const s = loadFaReflexe(); s[mKey] = { answers: next }; saveFaReflexe(s); };
const qKeys = Object.keys(answers);
const answered = qKeys.length;
const maxScore = REFLEX_QUIZ.length * 3;
const score = Object.values(answers).reduce((a, b) => a + b.s, 0);
const done = answered === REFLEX_QUIZ.length;
const band = reflexBand(score, maxScore);
const pct = Math.round(score / maxScore * 100);
return (
{L('Odpověz na pár otázek a podívej se, jak ti tento měsíc bylo s penězi.')}