// Screen 4: Processing & Screen 5: Report function ProcessingScreen({ T, t, accent, theme, onDone }) { const steps = [t.proc1, t.proc2, t.proc3, t.proc4]; const [active, setActive] = React.useState(0); const [done, setDone] = React.useState([]); React.useEffect(() => { if (active >= steps.length) { const id = setTimeout(() => onDone(), 600); return () => clearTimeout(id); } const id = setTimeout(() => { setDone(d => [...d, active]); setActive(a => a + 1); }, 1400); return () => clearTimeout(id); }, [active]); return (
{t.procKicker}
{t.procTitle}
{t.procSub}
{/* Step checklist */}
{steps.map((s, i) => { const isDone = done.includes(i); const isActive = active === i; return (
{isDone ? ( ) : isActive ? (
) : null}
{s} {isActive && ( )}
); })}
); } function ScanDots() { const [n, setN] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setN(x => (x + 1) % 4), 350); return () => clearInterval(id); }, []); return {".".repeat(n)}; } // ─── REPORT ───────────────────────────────────────────────────── function RadialDial({ score, accent, T, size = 180, variant = "single" }) { const r = size / 2 - 14; const c = 2 * Math.PI * r; const dash = (score / 100) * c; const cx = size / 2, cy = size / 2; return (
{variant === "rings" && [0.85, 0.72, 0.78, 0.65].map((p, i) => ( ))}
{score}
/ 100
); } function ScoreCard({ label, score, max = 100, accent, T, color }) { const pct = score / max; const grade = score >= 80 ? "A" : score >= 65 ? "B" : score >= 50 ? "C" : "D"; return (
{label}
{grade}
{score}
); } function ReportScreen({ T, t, accent, theme, name, alloc, onRestart, onOptimize, vizVariant }) { // derive synthetic scores from alloc const overall = 72; const items = [ { label: t.inflation, score: 68, color: accent.chart[2] }, { label: t.diversification, score: 81, color: accent.chart[1] }, { label: t.liquidity, score: 76, color: accent.chart[3] }, { label: t.goalAlign, score: 64, color: accent.chart[4] }, ]; const allocItems = [ { key: "bank", label: t.bank, c: accent.chart[0], you: alloc.bank, sug: 25 }, { key: "realEstate", label: t.realEstate, c: accent.chart[1], you: alloc.realEstate, sug: 25 }, { key: "stocks", label: t.stocks, c: accent.chart[2], you: alloc.stocks, sug: 25 }, { key: "bonds", label: t.bonds, c: accent.chart[3], you: alloc.bonds, sug: 10 }, { key: "gold", label: t.gold, c: accent.chart[4], you: alloc.gold, sug: 10 }, { key: "crypto", label: t.crypto, c: accent.chart[5], you: alloc.crypto, sug: 5 }, ]; return (
{t.reportKicker}
{t.reportTitle}
{t.reportFor} {name || "Investor"} · {new Date().toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })}
{/* Hero score */}
{vizVariant === "editorial" ? (
{t.overallLabel}
{overall}
B+ · {t.of100}
) : (
{t.overallLabel}
{t.grade}: B+
{t.of100}
)}
{/* Scorecards grid */}
{items.map(i => )}
{/* Pull quote — Lucy commentary */}
“
{t.aiCommentary}

{t.quote}

{/* Allocation comparison: bullet bars */}
{t.benchmark}
{allocItems.map(a => (
{a.label} {a.you}% → {a.sug}%
{/* user — gray ghost */}
{/* suggested — accent line */}
))}
{/* Actions */}
{t.actions}
{[t.action1, t.action2, t.action3].map((a, i) => (
{`0${i+1}`} {a}
))}
{/* Asset simulation block */}
{/* Primary CTA — Optimize with Lucy */}
); } function Legend({ color, label, T }) { return (
{label}
); } Object.assign(window, { ProcessingScreen, ReportScreen });