A fight-camp nutritionist runs £80–150 a session.Yours from £5/mo
{Plans}
{plan === 'annual' ? 'Then £59.99/yr (£5.00/mo)' : 'Then £9.99/mo'} · cancel anytime. We’ll remind you 2 days before your trial ends.
);
}
// ═══════════════════════════════════════════════════════════════════════════
// POST-PAYWALL — "First 7 days" activation (where the first-week card belongs now)
// Research: after the paywall converts, run a brief premium onboarding that
// guides the user to their first premium action.
// ═══════════════════════════════════════════════════════════════════════════
function PostPaywallActivation() {
const d = useReveal();
return (
You’re in. Camp starts now.
Three things to set you up for week one.
{window.FirstWeekCard && }
);
}
// ═══════════════════════════════════════════════════════════════════════════
// REVEAL B+C — "The Starting Plan" · FRONT-RUNNER (user pick)
// B's glanceable numbers + safety read + C's projection chart, framed as a
// *first cut* that visibly sharpens once camp is set up. The refinement teaser
// doubles as an intelligence showcase (the levers we haven't pulled yet) AND a
// reason to push through the paywall into setup.
// ═══════════════════════════════════════════════════════════════════════════
function RevealRefine() {
const d = useReveal();
const pillars = [
['Real weight', d.campKg.toFixed(1), 'kg', 'across ' + d.weeks + ' wks', 'var(--ink)'],
['Fight-week water', d.fwWater.toFixed(1), 'kg', d.water ? 'final week' : 'none', d.water ? 'var(--accent)' : 'var(--ink-3)'],
['Pace', d.ratePct.toFixed(2), '%/wk', 'under 1% line', 'var(--green)'],
];
return (
}>
Your starting plan
{/* hero (B) */}
{d.startW.toFixed(1)} kg today → {d.targetW.toFixed(1)} kg make-weight
{/* sport-specific coaching tip — the Coach Insight Card (sport × cut-rate tier) */}
{(() => {
const tier = window.paceTierFromRate ? window.paceTierFromRate(d.ratePct) : 'ideal';
const tip = window.coachTip ? window.coachTip(d.sport, tier) : null;
if (!tip) return null;
return (
Coaching tip
{tip.headline}
{tip.body}
);
})()}
{/* pillars (B) */}
{pillars.map(([lb, v, u, sub, c], i) => (
{lb}
{v}{u}
{sub}
))}
{/* safety meter (B) */}
{/* projection chart (C) */}
Projection to weigh-in{d.weeks} WKS
{window.PlanGlide
?
: }
{/* refinement teaser — the "rough starting point gets sharper" beat */}
);
}
// ── refinement teaser — the levers that sharpen the plan in setup (Flow 2) ──
// Reused by the Starting Plan and Your Camp reveals. Doubles as an intelligence
// showcase (the inputs we haven't pulled yet) AND a reason to push into setup.
function RefineTeaser({ title = 'This sharpens in setup' }) {
const levers = [
{
icon: <>,
t: 'Competition rules', s: 'Your gear allowance, exact rehydration window and any re-weigh cap — so the make-weight is to the gram.',
},
{
icon: <>,
t: 'Your cycle', s: 'Cycle-aware targets, so a normal hormonal water swing never reads as off-track.', tag: 'if tracked',
},
{
icon: <>,
t: 'Cut strategy', s: 'How hard the fight-week water cut runs, and how the refeed is staged.',
},
{
icon: <>,
t: 'Weigh-in & reminders', s: 'Your daily fasted check, locked to your morning routine.',
},
];
return (
{title}4 more inputs
This is your first cut from sport and timeline. Once camp’s set up, we factor in:
{levers.map((lv) => (
{lv.t}
{lv.tag && {lv.tag}}
{lv.s}
))}
);
}
// ═══════════════════════════════════════════════════════════════════════════
// REVEAL ★ — "Your Camp preview" · FRONT-RUNNER
// Built from the REAL in-app "Your Camp" components (hero card, the cut card +
// descent chart, the CoachTip read) so the aha moment previews exactly what the
// athlete gets — then optimised for conversion: goal-echo header, a pace-aware
// Coach's Read, the "sharpens in setup" teaser, and one CTA to the paywall.
// ═══════════════════════════════════════════════════════════════════════════
// shared camp data for the Your Camp reveal variants
function useCampData() {
const d = useReveal();
const FC = window.FC || {};
const S = (window.FC_SPORTS || {})[d.sport] || {};
const equip = !!S.equipmentReq;
const tier = window.paceTierFromRate ? window.paceTierFromRate(d.ratePct) : 'ideal';
const tip = window.coachTip ? window.coachTip(d.sport, tier) : null;
const GLYPH = { MMA: 'mma', Boxing: 'boxing', BJJ: 'bjj', 'BJJ (no-gi)': 'bjj', Judo: 'judo', 'Muay Thai': 'muaythai', Taekwondo: 'taekwondo', Wrestling: 'wrestling' };
const glyph = GLYPH[d.sport];
const weighPhrase = { 'day-before': 'the day before', 'same-day': 'the same day', 'within-2h': 'in the gi, just before you compete', 'same-or-day-before': 'same day / day before' }[d.weighIn] || 'the day before';
const weighShort = { 'day-before': 'day before', 'same-day': 'same day', 'within-2h': 'in gi, pre-comp', 'same-or-day-before': 'same / day before' }[d.weighIn] || 'day before';
const chipTier = tier === 'ideal' ? 'CAMP' : tier === 'fast' ? 'FAST' : 'STEEP';
// What the engine already knows by this point — from sport, gender, timeline,
// and the sport's standard competition rules: the recommended cut strategy and
// the common gear / re-weigh caps are pre-set, not left for the athlete to find.
const included = [
{ t: 'Sport & weigh-in rules', s: `${d.sport} · ${weighShort}` },
{ t: 'Class limit & body target', s: `${d.targetW.toFixed(1)} kg${equip ? ` · ${S.equipmentKg} kg gear` : ''}` },
{ t: 'Cut size & timeline', s: `${d.cut.toFixed(1)} kg over ${d.weeks} wks` },
{ t: 'Safe cut pace', s: `${d.ratePct.toFixed(2)}%/wk` },
{ t: 'Recommended cut strategy', s: d.water ? `water taper on a ${d.campKg.toFixed(1)} kg real-weight base` : 'walk-it-down — all real weight' },
...(equip ? [{ t: 'Typical gear & re-weigh cap', s: `${S.equipmentKg} kg gear · sport-standard re-weigh` }] : []),
];
// What still genuinely needs the athlete in setup — the personal pieces only.
const pending = [
...(equip ? [{ t: 'Confirm your event’s exact caps', s: 'gear allowance & re-weigh vary by promotion' }] : []),
{ t: 'Cycle-aware targets', s: 'a hormonal water swing never reads as off-track', tag: 'if tracked' },
{ t: 'Weigh-in time & reminders', s: 'your daily fasted check, locked to your morning' },
];
return { d, FC, S, equip, tier, tip, glyph, weighPhrase, weighShort, chipTier, included, pending };
}
// a single checklist row, two states: done (accent tick) / pending (hollow ring)
function CheckRow({ done, t, s, tag, last }) {
return (
{done && }
{t}
{tag && {tag}}
{s &&
{s}
}
);
}
// shared atoms reused across variants
function GroupLabel({ children, color = 'var(--ink-3)' }) {
return
{children}
;
}
// editorial bare number (lives outside any card) — A
function BareNum({ label, value, unit, sub, color = 'var(--ink)', pad }) {
return (
{label}
{value}{unit}
{sub &&
{sub}
}
);
}
// dotted-rule spec row — C dossier
function SpecRow({ k, v, accent, last }) {
return (
{k}{v}
);
}
// segmented progress — C dossier (one tick per plan input)
function Seg({ total, done, dark }) {
return (
{Array.from({ length: total }).map((_, i) => (
))}
);
}
// rounded progress bar — A & B (the one you liked)
function ProgressBar({ done, total, dark }) {
const pct = Math.round((done / total) * 100);
return (
);
}
// shared "paced under the line" reassurance strip
function PacedLine({ ratePct, dark, refineNote }) {
return (
Paced at {ratePct.toFixed(2)}%/wk — inside the safe sub-1% line.
{refineNote &&
A starting cut — the pace tightens once you finish setting up camp.
}
);
}
// descent chart with a heading + kg unit, y-axis weights, x-axis markers
function DescentChart({ c }) {
const d = c.d;
return (
Your descent to fight dayBody weight · kg
{window.PlanGlide && }
);
}
// ═══════════════════════════════════════════════════════════════════════════
// REVEAL ★ — "Your Camp" · NEW ORDER (Coach's read → details → cut → checklist)
// Three treatments of the same content + order. The checklist is two-state:
// everything the engine already locked is ticked; the goal-setting levers are
// unticked, so the athlete sees exactly what's done and what sharpens in setup.
// ═══════════════════════════════════════════════════════════════════════════
// ── condensed-A shared atoms ────────────────────────────────────────────────
// compact matchup + key numbers band (merges "About this camp" + cut stats)
function CampBand({ c }) {
const d = c.d;
const stats = [
{ lb: 'Class limit', v: (c.equip ? (c.FC.maxWithGi || d.targetW) : d.targetW).toFixed(1), u: 'kg' },
{ lb: 'Body target', v: d.targetW.toFixed(1), u: 'kg', accent: true },
{ lb: 'To lose', v: d.cut.toFixed(1), u: 'kg' },
{ lb: 'Timeline', v: String(d.weeks), u: 'wks' },
];
return (
{stats.map((s, i) => (
{s.lb}
{s.v}{s.u}
))}
);
}
// the coach's read kicker + headline + body, type-led (condensed)
function CoachRead({ c }) {
if (!c.tip) return null;
return (
Fight night {c.FC.fightDateShort || 'Jan 1'} · weigh-in {c.weighShort}
{c.glyph && window.SportGlyph &&
}
{c.tip.headline}
{c.tip.body}
);
}
// the "sharpens in setup" value row — title + supporting value copy (hollow ring)
function SharpenRow({ t, s, tag, first }) {
return (
{t}
{tag && {tag}}
{s}
);
}
// collapses the ticked essentials into one confirmation line
function LockedSummary({ included }) {
return (
{included.length} essentials locked in
{included.map(i => i.t).join(' · ')}
);
}
// A1 · CONDENSED EDITORIAL — merged camp band, locked collapsed, value-copy pending
function RevealCampA() {
const c = useCampData(); const d = c.d;
const total = c.included.length + c.pending.length;
const Rule = ({ m = 18 }) => ;
return (
}>
{/* YOUR PLAN — collapsed locked + value-copy pending */}
Your plan
{c.included.length} of {total} set
Sharpens once camp is set up
{c.pending.map((it, i) => )}
);
}
// A3 · VALUE BLOCK — locked as one progress line; the sharpen-later value copy
// gets its own tinted block so the upside reads loud (conversion lean).
function RevealCampA3() {
const c = useCampData(); const d = c.d;
const total = c.included.length + c.pending.length;
const Rule = ({ m = 18 }) => ;
return (
}>
{/* locked as a single progress line */}
The {c.included.length} essentials are locked in
{/* value block — what sharpens next */}
Sharpens in setup{c.pending.length} more
{c.pending.map((it, i) => )}
);
}
// ═══════════════════════════════════════════════════════════════════════════
// MODULAR BLOCKS — composable pieces for the reveal explorations (E-series),
// so order + hierarchy can be remixed without re-writing markup each time.
// ═══════════════════════════════════════════════════════════════════════════
function MetaHeader({ c, dark }) {
const sub = dark ? 'rgba(250,247,241,0.7)' : 'var(--ink-3)';
const kAcc = dark ? '#e0563d' : 'var(--accent)';
return (
Fight night {c.FC.fightDateShort || 'Jan 1'} · weigh-in {c.weighShort}
{c.glyph && window.SportGlyph &&
}
);
}
function ReadBody({ c, dark, compact }) {
if (!c.tip) return null;
const ink = dark ? '#faf7f1' : 'var(--ink)';
const ink2 = dark ? 'rgba(250,247,241,0.78)' : 'var(--ink-2)';
return (
{c.tip.headline}
{!compact &&
{c.tip.body}
}
);
}
// the dominant cut figure — the focal point that fixes the flatness
function HeroCut({ c, dark, size = 76 }) {
const d = c.d;
const ink = dark ? '#faf7f1' : 'var(--ink)';
const sub = dark ? 'rgba(250,247,241,0.6)' : 'var(--ink-3)';
const acc = dark ? '#e0563d' : 'var(--accent)';
return (
{d.startW.toFixed(1)} → {d.targetW.toFixed(1)} kg make-weight
−{d.cut.toFixed(1)}KG
in {d.weeks} weeks
);
}
function CampStats({ c, cols, dark }) {
const ink = dark ? '#faf7f1' : 'var(--ink)';
const sub = dark ? 'rgba(250,247,241,0.55)' : 'var(--ink-3)';
const rule = dark ? 'rgba(250,247,241,0.16)' : 'var(--rule)';
const acc = dark ? '#e0563d' : 'var(--accent)';
return (
);
}
// plan as a tinted value block — locked in one line, pending value copy highlighted
function PlanValueBlock({ c }) {
const total = c.included.length + c.pending.length;
return (
The {c.included.length} essentials are locked in
Sharpens in setup{c.pending.length} more
{c.pending.map((it, i) => )}
);
}
// E1 · NUMBER LEADS — the −cut figure is the hero; read supports, chart proves.
function RevealE1() {
const c = useCampData(); const d = c.d;
const Rule = ({ m = 18 }) => ;
return (
}>
);
}
// E2 · DARK HERO REMIX — dark band leads with meta + hero figure + read;
// the proof (stats, chart, plan) lands on paper. Strong figure-ground + focal.
function RevealE2() {
const c = useCampData(); const d = c.d;
return (
}>
{c.glyph && window.SportGlyph &&
}
);
}
// E3 · PROOF CARD — read first; the numbers + chart live in one contained
// "proof" card (paper-2) to break the flat flow; plan as a tinted value block.
function RevealE3() {
const c = useCampData(); const d = c.d;
return (
}>
{/* contained proof card */}
);
}
// ═══════════════════════════════════════════════════════════════════════════
// POLISHED DIRECTIONS (P-series) — built from the crit: one clear hero, a real
// type scale, minimal labels, the accent used with conviction, a confident
// chart that carries the numbers (shaded make-weight zone + annotated drop),
// and the plan collapsed to a locked-line + the value copy that sharpens it.
// ═══════════════════════════════════════════════════════════════════════════
// one sparse mono kicker — used sparingly so labels actually rank
function Kicker({ children, color = 'var(--ink-3)' }) {
return {children};
}
// confident descent chart: shaded make-weight zone, annotated drop, endpoints
// labelled — so the numbers live ON the chart instead of repeating as stats.
function HeroGlide({ c, dark, width = 341, height = 184, annotate = true }) {
const d = c.d;
const W = width, H = height, padL = 16, padR = 16, padT = 40, padB = 30;
const innerW = W - padL - padR, innerH = H - padT - padB;
const drop = (d.startW - d.targetW) || 1;
const x = (t) => padL + t * innerW;
const y = (v) => padT + ((d.startW - v) / drop) * innerH;
const sx = x(0), sy = y(d.startW), ex = x(1), ey = y(d.targetW);
const mx = (sx + ex) / 2, my = (sy + ey) / 2;
const lineD = `M ${sx} ${sy} L ${ex} ${ey}`;
const areaD = `${lineD} L ${ex} ${padT + innerH} L ${sx} ${padT + innerH} Z`;
const ink = dark ? '#faf7f1' : 'var(--ink)';
const sub = dark ? 'rgba(250,247,241,0.55)' : 'var(--ink-3)';
const acc = dark ? '#e0563d' : 'var(--accent)';
const paper = dark ? '#15140f' : 'var(--paper)';
const gid = dark ? 'hgD' : 'hgL';
return (
);
}
// plan collapsed to a locked-line + the value copy that sharpens it
function PlanFooter({ c, dark }) {
const total = c.included.length + c.pending.length;
const ink = dark ? '#faf7f1' : 'var(--ink)';
const ink2 = dark ? 'rgba(250,247,241,0.78)' : 'var(--ink-2)';
const sub = dark ? 'rgba(250,247,241,0.55)' : 'var(--ink-3)';
return (
Your plan{c.included.length} of {total} set
{c.included.map(i => i.t).join(' · ')} — locked.
Sharpens once you set up camp
{c.pending.map((it, i) => )}
);
}
// P1 · CINEMATIC — dark hero carries the read headline (dominant); the chart is
// the hero on paper. Read → chart → quiet plan.
// P1 colour themes — non-black hero grounds drawn from the OnWeight palette
const P1_THEMES = {
clay: { bg: '#8a2c1a', ink: '#fbeee6', sub: 'rgba(251,238,230,0.74)', kicker: '#f4b8a3' },
forest: { bg: '#21401d', ink: '#eef3e6', sub: 'rgba(238,243,230,0.74)', kicker: '#a6c992' },
espresso: { bg: '#2c2620', ink: '#f6efe6', sub: 'rgba(246,239,230,0.74)', kicker: '#e0866a' },
mustard: { bg: '#473a18', ink: '#f7f0dd', sub: 'rgba(247,240,221,0.76)', kicker: '#edc878' },
};
function RevealP1({ theme = 'clay' }) {
const c = useCampData(); const d = c.d;
if (!c.tip) return null;
const TH = P1_THEMES[theme] || P1_THEMES.clay;
return (
}>
A starting cut — the pace tightens once you finish setting up camp.
);
}
// P2 · THE NUMBER — the −cut figure is enormous and is the whole top of the
// screen; the read is one supporting line; the chart proves it underneath.
function RevealP2() {
const c = useCampData(); const d = c.d;
if (!c.tip) return null;
return (
}>
{d.startW.toFixed(1)} → {d.targetW.toFixed(1)} kg make-weight
−{d.cut.toFixed(1)}KG
{d.weeks} weeks · {d.ratePct.toFixed(2)}%/wk · under the safe line
{/* one-line read */}
{c.tip.headline}
{c.tip.body}
{/* secondary chart */}
Your descent to fight night
A starting cut — the pace tightens once you finish setting up camp.
);
}
// P3 · BRIEFING CARD — the camp is one elevated object: a dark header strip +
// the read + the chart, contained in a card with depth. Plan sits on paper below.
function RevealP3() {
const c = useCampData(); const d = c.d;
if (!c.tip) return null;
return (
}>
A starting cut — the pace tightens once you finish setting up camp.
);
}
// CLAY + NUMBER — clay poster banner with the giant −cut figure as the hero
// moment inside it; the read, chart and plan land on paper below.
function RevealClayNumber() {
const c = useCampData(); const d = c.d;
if (!c.tip) return null;
return (
}>
);
}
// PLAN STYLE — mirrors the in-app Plan screen: "About this camp" hero card,
// "Your cut" card + descent, the CoachTip read, then grouped-list rows for the
// plan (locked, with values) and what sharpens in setup.
function RevealPlan() {
const c = useCampData(); const d = c.d;
const SH = window.SectionHeader, GL = window.GroupedList, Row = window.Row;
const cuts = [['To lose', d.cut.toFixed(1), 'kg'], ['Timeline', String(d.weeks), 'wks'], ['Pace', (d.cut / d.weeks).toFixed(2), 'kg/wk']];
const check = ;
return (
}>
);
}
// plan as a scannable list — locked items get a green check + their value;
// the sharpen items keep their value copy. Replaces the dense run-on line.
function PlanList({ c }) {
const total = c.included.length + c.pending.length;
return (
Your plan{c.included.length} of {total} set
{c.included.map((it, i) => (
{it.t}{it.s}
))}
Sharpens once you set up camp
{c.pending.map((it, i) => )}
);
}
// NEW A · CLAY + CHECKLIST — clay hero carries the −cut figure once; the chart
// shows only the endpoints (no repeat); the plan is the scannable green-check list.
function RevealClayList() {
const c = useCampData(); const d = c.d;
if (!c.tip) return null;
return (
}>
{d.startW.toFixed(1)} → {d.targetW.toFixed(1)} kg make-weight
−{d.cut.toFixed(1)}KG
{d.weeks} weeks · {d.ratePct.toFixed(2)}%/wk · under the safe line
{/* paper */}
{c.tip.headline}
{c.tip.body}
Your descent to fight night
);
}
// NEW B · TICKET — the camp as a single fight-ticket / weigh-in card: clay stub
// with the matchup + −cut, a tear-line, then the plan as receipt line items.
function RevealTicket() {
const c = useCampData(); const d = c.d;
if (!c.tip) return null;
const total = c.included.length + c.pending.length;
const Perf = () => (