// fc-reveal-recommended-options.jsx — three decluttered directions for the
// "★ Recommended" plan-reveal screen. The brief: the current screen stacks five
// similar-weight blocks (masthead → number card → coach card → a dense 5-row
// Use/Cap/Skip table → a hollow-ring list), so nothing leads and the strategy
// table reads like a spreadsheet. Each direction below fixes that a different way:
//
// B · The Verdict — one unified clay poster carries goal + hero number; the
// strategy collapses into calm USING / SKIPPING groups.
// C · Native — the app's own SectionHeader + grouped-list vocabulary;
// hierarchy from clear labels, not decoration. Feels iOS.
// D · Editorial — maximum restraint: one focal number, the proof chart,
// one read, strategy as one prose line. Breathes.
//
// Same engine numbers (usePosterData) as the ★ Recommended so they compare 1:1.
const rro = window;
// ── shared helpers (uniquely named to avoid global collisions) ───────────────
function rroStratGroups(strats) {
return {
using: strats.filter((s) => s.tone === 'green'),
cap: strats.filter((s) => s.tone === 'amber'),
skip: strats.filter((s) => s.tone === 'red'),
};
}
const RRO_GREEN = 'var(--green, #2f5a24)';
const RRO_AMBER = 'var(--mustard, #a87b22)';
const RRO_CLAY = window.POSTER_CLAY || '#e9ddcd';
function RROTick({ color = RRO_GREEN }) {
return (
);
}
// ════════════════════════════════════════════════════════════════════════════
// B · THE VERDICT — the top is a single clay poster: eyebrow, goal echo, then a
// hairline and the giant make-weight number with the cut read. No competing white
// hero card. The strategy stops being a 5-row colour table and becomes two calm
// groups (USING / SKIPPING) with one capped note. Locked plan is the strong close.
// ════════════════════════════════════════════════════════════════════════════
function RevealRecommendedB() {
const data = rro.usePosterData();
const { c, d, strats, stratIntro } = data;
if (!c.tip) return null;
const { Num, CoachTip, SportGlyph } = rro;
const g = rroStratGroups(strats);
const divisionLabel = d.division || d.sport;
const dateStr = c.FC.fightDateShort || 'Jan 1';
return (
}>
{/* ══ ONE POSTER: goal echo + hero number, together ══ */}
{d.sport} · {c.weighShort} weigh-in · {d.weeks} weeks out
{d.firstName ? `${d.firstName}, your ` : 'Your '}safe line to make {divisionLabel} by {dateStr}.
{/* ══ CUT STRATEGY — calm USING / SKIPPING groups, not a colour table ══ */}
Recommended cut strategy
{stratIntro}
Using
{g.using.map((s, i) => (
{s.t} — {s.s}
))}
{g.cap.length > 0 && (
Cap
{g.cap[0].t} — {g.cap[0].s}
)}
{g.skip.length > 0 && (
Skipping
{g.skip.map((s) => s.t).join(' and ')} — hard to time and not worth the muscle. We leave them off.
)}
{/* ══ LOCKED PLAN — the strong close ══ */}
Your day-by-day plan is ready
All {d.weeks * 7} days, mapped to fight day.
Cycle-aware targets, weigh-in reminders and your event's exact caps fine-tune once you set up camp.
);
}
// ════════════════════════════════════════════════════════════════════════════
// C · NATIVE — the reveal built from the app's own list vocabulary. A single clean
// number card, then labelled sections (SectionHeader) each holding one grouped
// list. Hierarchy comes from consistent labels + white cards on the off-white
// surface, not from five different decorations. Reads calm and iOS-native.
// ════════════════════════════════════════════════════════════════════════════
function RevealRecommendedC() {
const data = rro.usePosterData();
const { c, d, strats, stratIntro } = data;
if (!c.tip) return null;
const { Num, SectionHeader } = rro;
const g = rroStratGroups(strats);
const divisionLabel = d.division || d.sport;
const dateStr = c.FC.fightDateShort || 'Jan 1';
const ceiling = 1.0;
const pacePos = Math.min(100, (d.ratePct / ceiling) * 100);
const Group = ({ children }) => (
{children}
);
return (
}>
{/* ══ goal echo — quiet, one line ══ */}
{d.sport} · {c.weighShort} weigh-in · {d.weeks} weeks out
{d.firstName ? `${d.firstName}, your ` : 'Your '}safe line to make {divisionLabel} by {dateStr}.
{/* ══ HERO number card — the focal point, pace as a clean labelled bar ══ */}
MAKE-WEIGHT TARGETSafe pace
{Num ? {d.targetW.toFixed(1)} : null}
KG
−{d.cut.toFixed(1)} FROM TODAY
Your pace · {d.ratePct.toFixed(2)}%/wk1%/wk ceiling
{/* ══ COACH'S READ ══ */}
The coach's read
{c.tip.headline}
{c.tip.body}
{/* ══ CUT STRATEGY — one grouped list; ticks for use, dashes for skip ══ */}
Recommended cut strategy
{stratIntro}
{g.using.map((s, i) => (
{s.t}
{s.s}
))}
{g.cap.map((s, i) => (
{s.t} · capped
{s.s}
))}
{g.skip.map((s, i) => (
{s.t}
{s.s}
))}
{/* ══ LOCKED ══ */}
Your day-by-day plan for all {d.weeks * 7} days is ready.
);
}
// ════════════════════════════════════════════════════════════════════════════
// D · EDITORIAL — maximum restraint. One focal number on paper, the proof chart
// (daily noise vs. the trend we read through it), one line of read, and the
// strategy compressed to a single prose line. Almost no rules. Breathes.
// ════════════════════════════════════════════════════════════════════════════
function RevealRecommendedD() {
const data = rro.usePosterData();
const { c, d, strats, stratIntro } = data;
if (!c.tip) return null;
const { Num, HeroGlide } = rro;
const g = rroStratGroups(strats);
const divisionLabel = d.division || d.sport;
const dateStr = c.FC.fightDateShort || 'Jan 1';
const usingNames = g.using.map((s) => s.t.toLowerCase()).join(' and ');
const skipNames = g.skip.map((s) => s.t.toLowerCase()).join(' and ');
return (
}>
{/* ══ goal echo ══ */}
{d.sport} · {c.weighShort} weigh-in · {d.weeks} wks out
{d.firstName ? `${d.firstName}, your ` : 'Your '}safe line to make {divisionLabel} by {dateStr}.
{/* ══ THE NUMBER — editorial hero, no card ══ */}
{Num ? {d.targetW.toFixed(1)} : null}
KG
−{d.cut.toFixed(1)}
Safe pace·{d.ratePct.toFixed(2)}%/wk — under the 1% ceiling
{/* ══ THE PROOF — one chart, the trend under the daily noise ══ */}
{HeroGlide && (
{g.skip.map((s) => s.t).join(' and ')} — hard to time and not worth the muscle. We leave them off.
)}
{/* ══ LOCKED — quiet close ══ */}
Your day-by-day plan for all {d.weeks * 7} days is ready.
);
}
// ── FIGHT-WEEK CUT STRATEGY CHART ─────────────────────────────────────────
// A fight-week timeline. Coloured section bands mark the stages in the order &
// rough timing a combat athlete runs them: water load → low-fibre → low sodium
// → sweat/sauna → weigh-in. The line holds flat through the water-load plateau
// then steps down through each water tactic, landing exactly on make-weight.
// Grounded in the app's logic — fight-week water = cut × 0.28 (d.fwWater), split
// across the three tactics by typical yield (fibre ~1% bw, sodium ~0.75%, sauna ~1%).
// monotone cubic (Fritsch–Carlson) through x-increasing points — smooth but
// never overshoots, so a descent can't bow below the make-weight floor.
function _rroMono(pts) {
const n = pts.length;
if (n < 2) return '';
const xs = pts.map((p) => p[0]), ys = pts.map((p) => p[1]);
const dx = [], sl = [];
for (let i = 0; i < n - 1; i++) { dx[i] = xs[i + 1] - xs[i]; sl[i] = (ys[i + 1] - ys[i]) / dx[i]; }
const m = [sl[0]];
for (let i = 1; i < n - 1; i++) {
if (sl[i - 1] * sl[i] <= 0) { m[i] = 0; }
else { const w1 = 2 * dx[i] + dx[i - 1], w2 = dx[i] + 2 * dx[i - 1]; m[i] = (w1 + w2) / (w1 / sl[i - 1] + w2 / sl[i]); }
}
m[n - 1] = sl[n - 2];
let path = `M ${xs[0].toFixed(2)} ${ys[0].toFixed(2)}`;
for (let i = 0; i < n - 1; i++) {
const c1x = xs[i] + dx[i] / 3, c1y = ys[i] + m[i] * dx[i] / 3;
const c2x = xs[i + 1] - dx[i] / 3, c2y = ys[i + 1] - m[i + 1] * dx[i] / 3;
path += ` C ${c1x.toFixed(2)} ${c1y.toFixed(2)}, ${c2x.toFixed(2)} ${c2y.toFixed(2)}, ${xs[i + 1].toFixed(2)} ${ys[i + 1].toFixed(2)}`;
}
return path;
}
// One combined plan: the whole cut on a single timeline — real weight coming
// off gradually across camp, then the fight-week water tactics (low-fibre, low
// sodium, sweat/sauna) stepping the last kilos off, landing on make-weight.
function RROStrategyDescent({ d, width = 341, height = 244 }) {
const fwWater = d.fwWater || 0;
const target = d.targetW;
const campKg = d.campKg != null ? d.campKg : Math.max(0, (d.cut || 0) - fwWater);
const hasWater = !!d.water && fwWater > 0;
const startW = +(target + campKg + fwWater).toFixed(1);
const fwStart = +(target + fwWater).toFixed(1);
const yields = [1.0, 0.75, 1.0];
const ysum = yields[0] + yields[1] + yields[2];
const drops = yields.map((y) => fwWater * y / ysum);
// stages left→right: the camp (real weight, the bulk) then the fight-week tactics
const bands = hasWater ? [
{ name: 'Camp · real weight', frac: 0.44, drop: campKg, color: '#4f7a86', camp: true },
{ name: 'Low-fibre', frac: 0.17, drop: drops[0], color: '#6b8f5a' },
{ name: 'Low sodium', frac: 0.16, drop: drops[1], color: '#c79a3a' },
{ name: 'Sweat / sauna', frac: 0.23, drop: drops[2], color: 'var(--accent)' },
] : [
{ name: 'Camp · real weight', frac: 1, drop: campKg + fwWater, color: '#4f7a86', camp: true },
];
const boundaryWhen = hasWater
? ['Start', 'Fight wk', '48h', '24h', 'Weigh-in']
: ['Start', 'Weigh-in'];
const W = width, H = height, padL = 12, padR = 42, padT = 34, padB = 30;
const innerW = W - padL - padR, innerH = H - padT - padB;
const bandTop = padT, bandBot = H - padB;
const xs = [padL];
bands.forEach((b) => xs.push(+(xs[xs.length - 1] + b.frac * innerW).toFixed(2)));
// boundary weights (for nodes / dividers)
const wts = [startW];
let cur = startW;
bands.forEach((b) => { cur = +(cur - b.drop).toFixed(3); wts.push(cur); });
const span = Math.max(0.4, startW - target);
const wTop = startW + span * 0.10, wBot = target - span * 0.16;
const yAt = (w) => bandTop + innerH * (1 - (w - wBot) / (wTop - wBot));
// line points: the camp band is sampled into an eased curve (loss decelerates);
// the fight-week bands stay as clean straight steps between boundaries.
const linePts = [[xs[0], yAt(startW)]];
bands.forEach((b, i) => {
if (b.camp) {
const n = 4, x0 = xs[i], w0 = wts[i];
for (let k = 1; k <= n; k++) {
const t = k / n, ease = 1 - Math.pow(1 - t, 1.8);
linePts.push([x0 + (xs[i + 1] - x0) * t, yAt(w0 - b.drop * ease)]);
}
} else {
linePts.push([xs[i + 1], yAt(wts[i + 1])]);
}
});
const linePath = _rroMono(linePts);
const yTarget = yAt(target);
const yStart = yAt(startW);
return (
);
}
// ════════════════════════════════════════════════════════════════════════════
// E · EDITORIAL + STRATEGY DESCENT — the D layout, but the proof is the cut-
// strategy graph: fight-week weight stepping down as low-fibre, low sodium and
// sweat/sauna come in. No trend chart, no pace-vs-ceiling caption.
// ════════════════════════════════════════════════════════════════════════════
function RevealRecommendedE() {
const data = rro.usePosterData();
const { c, d, strats, stratIntro } = data;
if (!c.tip) return null;
const { Num } = rro;
const g = rroStratGroups(strats);
const divisionLabel = d.division || d.sport;
const dateStr = c.FC.fightDateShort || 'Jan 1';
return (
}>
{/* ══ goal echo ══ */}
{d.sport} · {c.weighShort} weigh-in · {d.weeks} wks out
{d.firstName ? `${d.firstName}, your ` : 'Your '}safe line to make {divisionLabel} by {dateStr}.
{/* ══ THE NUMBER — editorial hero; KG baseline-aligned to the number ══ */}
{Num ? {d.targetW.toFixed(1)} : null}
KG
Safe pace·−{d.cut.toFixed(1)} kg in {d.weeks} weeks
{/* ══ THE READ — editorial (no box); the sport read + what this cut protects,
combined. Bespoke to the sport and their pace. ══ */}
{(() => {
const pr = (rro.FC_SPORT_PROTECT || {})[d.sport] || (rro.FC_SPORT_PROTECT || {}).Other || { protect: 'your strength and stamina across the whole fight.' };
const safe = d.ratePct <= (rro.SAFE_RATE_PCT || 1.0) + 0.005;
return (
{c.tip.headline}
{c.tip.body}
{pr.protect}{' '}
{safe
? At {d.ratePct.toFixed(2)}%/wk you’re inside the safe line, so the weight comes off as fat, not muscle — that stays intact.
: At {d.ratePct.toFixed(2)}%/wk you’re past the 1%/wk line — the point where that starts to erode. Give the cut more time and it holds.}
);
})()}
{/* ══ CUT STRATEGY — one merged beat: the recommended personalised cut on one
timeline (real weight across camp → fight-week water tactics), then the
Using / Capped / Skipping breakdown. ══ */}
{/* the whole cut on one timeline — real weight across camp, then fight-week water */}
{/* what's been done vs what sharpens later — the honest split */}
What's set
{d.campKg.toFixed(1)} kg of real weight comes off across camp{(!!d.water && (d.fwWater || 0) > 0) ? `, then the final ${d.fwWater.toFixed(1)} kg is water in fight week` : ''} — that's your recommended cut strategy today.
Sharpens later
We refine the pace and the fight-week tactics week to week as you log — this is the starting line, not the final call.
Using
{g.using.map((s, i) => (
{s.t}
{s.s}
))}
{g.cap.length > 0 && (
Capped
{g.cap[0].t}
{g.cap[0].s}
)}
{g.skip.length > 0 && (
Skipping
{g.skip.map((s) => s.t).join(' and ')} — hard to time and not worth the muscle. We leave them off.
)}
{/* ══ LOCKED — quiet close ══ */}
Your day-by-day plan for all {d.weeks * 7} days is ready.
);
}
// ════════════════════════════════════════════════════════════════════════════
// ★ MERGED — the chosen direction: merges 9 + 10 + E.
// · Top: E's editorial masthead through the safe-pace line.
// · "Your target": #9's card, bespoke like E, concise — proves it's built from
// their answers by citing the derived numbers, never by claiming it.
// · "Why you can trust it": #10's trend-not-noise proof chart.
// · "Your camp is set": locked plan — ready now, more sharpens as they go.
// · "Sharpens in setup": #10's levers, all open, no selector circle. The cut
// strategy proves it's bespoke to this fighter / sport / gender / formulas.
// ════════════════════════════════════════════════════════════════════════════
// bespoke cut strategy — used tactics are little green versions of the skip
// treatment (same compact row, green marker); skipped ones keep the muted ✕.
// No "Cap": sweat/sauna is a Use with its 5%-bodyweight ceiling in the detail.
function MergedStrategyBody({ data }) {
const { c, d, strats } = data;
const sex = window.__sex || (window.FC && window.FC.sex) || 'M';
const use = strats.filter((s) => s.tone !== 'red');
const skip = strats.filter((s) => s.tone === 'red');
const Row = ({ green, t, s }) => (
{green
?
: }
{t}
{s}
);
return (
{/* why THIS strategy — proves it's derived from their sport, weigh-in rule, formulas, sex */}
Your {d.sport} weighs in {c.weighPhrase || (d.water ? 'the day before' : 'the same day')} — {d.water
? <>{d.rehyd}, so a measured water taper is safe on top of your {d.campKg.toFixed(1)} kg real-weight base. Sweat stays capped at 5% of bodyweight, inside that window.
: <>no rehydration window, so every kilo is real weight. Water tricks are ruled out.}
{sex === 'F' && <> Because you train through a cycle, we hold these targets against your luteal-phase water — a hormonal swing never reads as behind.}
{use.map((s, i) => )}
{skip.map((s, i) => )}
);
}
function RevealMerged() {
const data = rro.usePosterData();
const { c, d, strats } = data;
if (!c.tip) return null;
const { Num, Card, SectionHeader, Stat, PlanTicks, PosterGlide, TrendLegend } = rro;
const { locked, total } = data;
const divisionLabel = d.division || d.sport;
const dateStr = c.FC.fightDateShort || 'Jan 1';
const pr = (rro.FC_SPORT_PROTECT || {})[d.sport] || (rro.FC_SPORT_PROTECT || {}).Other || { tag: 'Strength · gas', protect: 'your strength and stamina across the whole fight.' };
const tagPhrase = pr.tag.toLowerCase().replace(/\s*·\s*/, ' and ').replace(/^your\s+/, '');
// sharpen levers — reuse the shared set, but swap in the bespoke cut strategy.
// Each carries its own CTA — the actual setup step that sharpens it.
const MERGED_CTA = { strategy: 'Review my cut strategy', rules: 'Confirm my rules', cycle: 'Set up cycle tracking', weighin: 'Set my weigh-in time' };
const levers = rro.buildLevers(data).map((lv) => ({
...lv,
cta: MERGED_CTA[lv.key] || 'Set this up',
body: lv.key === 'strategy' ? : lv.body,
}));
return (
}>
{/* ══ TOP — from E, through the safe-pace line ══ */}
{d.sport} · {c.weighShort} weigh-in · {d.weeks} wks out
{d.firstName ? `${d.firstName}, your ` : 'Your '}safe line to make {divisionLabel} by {dateStr}.
{Num ? {d.targetW.toFixed(1)} : null}
KG
Safe pace·−{d.cut.toFixed(1)} kg in {d.weeks} weeks
{/* ══ YOUR TARGET — #9's card, bespoke + concise; proves it's built from their answers ══ */}
Your target
Your {divisionLabel} limit is {d.targetW.toFixed(1)} kg. From {d.startW.toFixed(1)} kg today that’s a {d.cut.toFixed(1)} kg cut over {d.weeks} weeks — {d.ratePct.toFixed(2)}%/wk, under the 1% line that costs muscle. Paced to protect {tagPhrase}.
{/* ══ WHY YOU CAN TRUST IT — #10's trend-not-noise proof chart ══ */}
Why you can trust it
We read the trend, not the noise.
{PosterGlide &&
}
{TrendLegend &&
}
A water spike doesn’t move the trend — so it doesn’t move your plan. You train; we do the weight math and flag you only when it’s real.
{/* ══ YOUR CAMP IS SET — locked plan, ready now with more to refine ══ */}
Your camp is set
Ready to run today. The rest sharpens as you set up camp and start logging — nothing’s locked for good.
{/* ══ SHARPENS IN SETUP — #10's levers, all open, no selector circle ══ */}
Sharpens in setup
{levers.map((lv) => (
{lv.title}
{lv.summary}
{lv.body}
))}
);
}
// Shared strategy helpers — also consumed by the ★ Recommended (fc-reveal-recommended.jsx)
// so the two screens group Using / Cap / Skip identically.
Object.assign(window, { RevealRecommendedB, RevealRecommendedC, RevealRecommendedD, RevealRecommendedE, RevealMerged, RROStrategyDescent, rroStratGroups, RROTick, RRO_GREEN, RRO_AMBER });