);
}
function bandColor(s) { return s >= 67 ? "#36d27a" : s >= 40 ? "#f5b942" : "#ff5c6b"; }
function Result({ score, stage, breakdown, onRetake, onHome }) {
const r = pickResult(score);
const stageObj = STAGES.find((s) => s.id === stage) || STAGES[0];
const [fill, setFill] = useState(0);
const [count, setCount] = useState(0);
useEffect(() => {
const t = setTimeout(() => setFill(score), 250);
let n = 0;
const iv = setInterval(() => { n += Math.ceil(score / 28); if (n >= score) { n = score; clearInterval(iv); } setCount(n); }, 28);
return () => { clearTimeout(t); clearInterval(iv); };
}, [score]);
// real breakdown, or synthesize a plausible one (for previews) so the scorecard always shows
const data = (breakdown && breakdown.length ? breakdown : (window.getQuestions ? window.getQuestions(stage) : []).map((q, i) => ({
id: q.id, name: q.name, icon: q.icon, s: Math.max(4, Math.min(99, Math.round(score + Math.sin(i * 1.9) * 24))), w: q.weight || 1
}))).map((d) => ({ ...d, s: Math.round(d.s) }));
const sorted = [...data].sort((a, b) => b.s - a.s);
const greens = sorted.filter((d) => d.s >= 72).slice(0, 4);
const reds = sorted.filter((d) => d.s <= 42).slice(-4).reverse();
const top = sorted[0];
const low = sorted[sorted.length - 1];
const flagCount = data.filter((d) => d.s <= 33).length;
const art = { firstdate: PAINT.swing(700), month: PAINT.primavera(800), threemonth: PAINT.bronzino(700), year: PAINT.klimt(700) }[stage];
return (
{stageObj.label} · the verdict
Compatibility score
{count}%
{greens.length} green flags·{flagCount} red flags·{data.length} traits scored
{r.emoji}
The court rules
{r.title}
{r.copy}
verdict{r.verdict}
💘
{score < 42 ? "🚩" : "✨"}
{/* ---- the receipts ---- */}
The receipts
Every trait, scored
{data.map((d) => (
{d.icon}{d.name}{d.w < 1 ? ½ : null}{d.s}
))}
{/* ---- advice + cheeky take ---- */}
Green flags — lean in
{greens.length ? greens.map((d) => (
{d.icon}{d.name}{d.s}
)) :
Slim pickings up here, babe. Be honest with yourself.
}
Watch-outs — handle with care
{reds.length ? reds.map((d) => (
{d.icon}{d.name}{d.s}
)) :
Genuinely no red flags. Suspicious, but we'll allow it.
}
Cupid's unsolicited advice
Strongest: {top.name} ({top.s}). {top.s >= 70 ? "Whatever's working here, protect it — it's rarer than you think." : "Even your best score is lukewarm. That's the headline."}
Weakest: {low.name} ({low.s}). {low.s <= 33 ? "That's not a vibe, that's a conversation. Have it before you get more attached." : low.s <= 55 ? "Keep an eye on this one — it's the crack the relationship will widen." : "Even your low score is decent. Genuinely promising."}
{adviceTake(score, stage)}
results are 100% scientifically vibes-based ✨
);
}
function adviceTake(score, stage) {
const yr = stage === "year";
if (score >= 86) return yr ? "A year in and scoring this high? This is the one your friends will be insufferably happy about. Don't overthink it." : "Early, but this is rare air. Keep showing up and let it cook.";
if (score >= 65) return "Real potential. The bones are good — the work now is consistency, not chemistry. Stop waiting for a reason to bail.";
if (score >= 42) return "Genuinely a coin-flip. Define what you actually want, then see if they're building it with you — or just keeping you around. No more vibes-only.";
if (score >= 20) return "The fun is loud and the warnings are louder. Have one honest conversation; if nothing changes, believe the data, not the butterflies.";
return "We say this with love: the score isn't shy. Protect your peace, keep your standards, and free up the calendar for someone who clears the bar.";
}
Object.assign(window, { Result, pickResult, bandColor, adviceTake });