);
}
// ─── OS-HRS SCALE — SYSTEM-LEVEL RULE (inverted: higher = healthier) ───
// 70–100 → healthy · 41–69 → moderate · 0–40 → high risk
// Baked in here so no screen re-specifies tier logic. tierForScore() is the
// single source of truth; ScoreRing & ScoreBreakdownBars both read from it.
const OS_HRS = {
tiers: {
healthy: { min: 70, max: 100, color: 'var(--path-healthy)', band: 'var(--band-healthy)', label: 'Healthy' },
moderate: { min: 41, max: 69, color: 'var(--path-moderate)', band: 'var(--band-moderate)', label: 'Moderate' },
high: { min: 0, max: 40, color: 'var(--path-high)', band: 'var(--band-high)', label: 'High risk' },
},
};
function tierForScore(score) {
if (score >= OS_HRS.tiers.healthy.min) return 'healthy';
if (score >= OS_HRS.tiers.moderate.min) return 'moderate';
return 'high';
}
// ─── ScoreRing — animated arc + serif numeral ──────────────────────────
// Tier is DERIVED from the score by default (system rule); pass `variant`
// only to force a colour against the scale (rare).
function ScoreRing({ score = 0, variant, size = 200, animate = false }) {
const tier = variant || tierForScore(score);
const stroke = 10;
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const pct = Math.min(score, 100) / 100;
const offset = c * (1 - pct);
return (
{Math.round(score)}
of 100
);
}
// ─── BreakdownBar ─────────────────────────────────────────────────────
function BreakdownBar({ name, value, color = 'var(--path-healthy)' }) {
return (
{name}
{value} / 100
);
}
// ─── ScoreBreakdownBars — the shared 3-bar result pattern ──────────────
// Appears on EVERY result tier (healthy / moderate / high). Built once.
// Labels are fixed: Oral Health, General Health, Lifestyle Factors.
// Bar colour derives from the OVERALL tier via the OS-HRS scale unless a
// `tier`/`color` is passed. Values are each out of 100.
function ScoreBreakdownBars({ oral, general, lifestyle, tier, color }) {
const overall = Math.round((oral + general + lifestyle) / 3);
const fill = color || OS_HRS.tiers[tier || tierForScore(overall)].color;
const rows = [
{ name: 'Oral Health', value: oral },
{ name: 'General Health', value: general },
{ name: 'Lifestyle Factors', value: lifestyle },
];
return (