// fc-screens-b.jsx, Your Camp (Plan), Plan Preview, Menstrual Cycle · v2
// iOS grouped lists, plain-language section intros, full-length.
const { FC, TONE, SHADOW, computePace, Phone, Eyebrow, Num, ToneBadge, HeroMotif,
Card, SectionHeader, Stat, StatusBar, HomeIndicator, LargeTitle, CompactNav,
NavAction, GearButton, TabBar, PrimaryButton, TextButton, GroupedList, Row,
Toggle, ProgressBar, getStyle } = window;
const BodyB = ({ children, gap = 18, pad = '4px 20px 26px' }) => (
{children}
);
// ── PROOF BAND ───────────────────────────────────────────────────────────────
// Shared social-proof treatment, used everywhere proof appears (paywall + Coach's
// Read) so it reads consistently — and deliberately NOT the rounded card component.
// A full-bleed editorial band: mono eyebrow → sport stat (hero) → supporting line →
// optional real fighter quote (serif italic, tap to cycle) → safety footnote.
// Content from FC_SOCIAL_PROOF / FC_FIGHTER_QUOTES (see Social Proof Research.md).
// Assumes a 20px-horizontal-padded parent (BodyB / the Coach's Read scroll).
function ProofBand({ sport, quote = false, compact = false }) {
const sp = window.socialProofFor ? window.socialProofFor(sport) : { stat: '60–80%', statOf: 'of combat-sport athletes cut weight', line: '', src: '' };
const Q = (quote && window.FC_FIGHTER_QUOTES) ? window.FC_FIGHTER_QUOTES : [];
const [qi, setQi] = React.useState(() => Q.length ? Math.floor(Math.random() * Q.length) : 0);
const q = Q.length ? Q[qi % Q.length] : null;
return (
{/* editorial section rule + scientific label */}
The evidence
{sport}
{/* stat hero — big light numeral (scientific/modern) */}
{sp.stat}
{sp.statOf}
{sp.line}
{!compact && sp.edge && (
{sp.edge.stat}
{sp.edge.line}
)}
{q && (
setQi((qi + 1) % Q.length)} style={{ margin: '17px 0 0', paddingTop: 16, borderTop: '1px solid var(--rule)', cursor: 'pointer', position: 'relative' }}>
”
“{q.quote}”
{q.who}
{q.cred}
{Q.length > 1 && {Q.map((_, i) => }
)}
{!compact && (
{window.FC_SOCIAL_PROOF_AUTHORITY}
)}
{/* citation pinned to the bottom of the card, with a source indicator */}
{window.SourceTag ?
: null}
{(startW - g * drop).toFixed(1)}
))}
{axis && KG }
{startW.toFixed(1)} }
{!axis && {targetW.toFixed(1)} }
0.04 ? 'var(--ink-3)' : 'var(--ink-2)'} fontWeight={tNow > 0.04 ? '600' : '700'}>{tNow > 0.04 ? 'START' : 'TODAY'}
{tNow > 0.04 && TODAY }
WEIGH-IN
);
}
function CampPlan({ styleKey = 'paper', sportKey = 'MMA' }) {
const st = getStyle(styleKey);
const [manage, setManage] = React.useState(false);
const S = window.FC_SPORTS[sportKey] || window.FC_SPORTS.MMA;
const amateur = true;
const planType = window.planTypeFor(sportKey, amateur);
const weighPhrase = _WEIGH_PHRASE[S.weighIn] || 'the day before';
const unverified = S.conf === 'structure';
return (
setManage(true)}>Manage} />
{/* summary hero */}
)}
About this camp
{FC.division.toUpperCase()} · {sportKey.toUpperCase()}
Fight night {FC.fightDateShort}, 2026 · weigh-in {weighPhrase}.
{S.equipmentReq
?
{/* THE CUT, focal visual + scannable key numbers (hierarchy + a visual) */}
{(() => {
const startW = FC.planStart, targetW = FC.goalWeight;
const drop = startW - targetW;
const campWeeks = Math.max(1, Math.round(FC.campDays / 7));
const todayWeek = FC.todayDay / 7;
const water = planType !== 'walk';
const stats = [
['To lose', drop.toFixed(1), 'kg'],
['Timeline', String(campWeeks), 'wks'],
['Pace', (drop / campWeeks).toFixed(2), 'kg/wk'],
];
return (
Your cut
{stats.map(([lb, v, u], i) => (
))}
Your descent to fight day
{window.PlanCutStrategy
?
:
}
);
})()}
{/* per-sport coaching read, the bespoke "why" */}
Competition rules
|
|
|
{S.equipmentReq
? |
: |
}
{/* plan type + rehydration, bespoke */}
Cut strategy
|
{S.reweigh
? |
: planType === 'walk'
? |
: |
}
{unverified && (
ⓘ These {sportKey} figures follow the standard structure. Always check your promotion's current rulebook, limits vary by sanctioning body.
)}
{/* customise */}
Daily weigh-in
|
|
} last />
{/* customise */}
Personalise your plan
Toggle a factor and your targets, trend line and alerts adjust on the spot.
{[['Menstrual cycle', true], ['Gear allowance', S.equipmentReq], ['Random re-weigh cap', !!S.reweigh], ['Hydration testing', false]].map((it, i, a) => (
|
} last={i === a.length - 1} />
))}
setManage(false)} />}
);
}
// ── WEEK-BY-WEEK ROADMAP ─────────────────────────────────────────────────────
// The plan made concrete: every week from camp start to fight night, with its
// target weight, the drop that week, and the milestones (camp start, fight-week
// water taper, weigh-in, fight day). Driven by the SAME math as the Strategy
// card and Coach's Read — real weight walked down across camp, fight-week water
// held for the final week — so the three screens never disagree.
// teaser = paywall mode: first `free` weeks clear, the rest blurred + locked.
function WeekRoadmap({ startW, goal, weeks = 8, water = true, fwWater = 0, weighInLabel = 'Weigh-in', teaser = false, free = 2, width = 309 }) {
const cut = Math.abs(startW - goal);
const campKg = +(cut - fwWater).toFixed(1); // real weight, across camp
const realWeeks = water ? Math.max(1, weeks - 1) : weeks;
const targetAt = (w) => {
if (w <= 0) return startW;
if (water && w >= weeks) return goal; // fight week ends on goal
return +(startW - campKg * Math.min(1, w / realWeeks)).toFixed(1);
};
const rows = [];
for (let w = 1; w <= weeks; w++) {
const t = targetAt(w), prev = targetAt(w - 1);
const isFight = w === weeks;
const milestone = w === 1 ? 'Camp starts'
: isFight ? (water ? 'Fight week · water cut' : 'Fight week')
: null;
rows.push({ w, out: weeks - w, target: t, drop: +(prev - t).toFixed(1), isFight, milestone, waterWeek: isFight && water });
}
const ACC = 'var(--accent)';
const Row = ({ r }) => {
const locked = teaser && r.w > free;
return (
{/* rail */}
{/* content */}
Wk {r.w}
{r.out === 0 ? 'FIGHT' : r.out + ' WK' + (r.out > 1 ? 'S' : '') + ' OUT'}
{r.target.toFixed(1)}
kg
{r.milestone || (r.drop > 0 ? 'Steady week' : 'Hold')}
{r.waterWeek && · {weighInLabel} }
{r.drop > 0 && {'\u2212'}{r.drop.toFixed(1)} kg }
{rows.map(r =>
|
)}
{teaser && (
{weeks - free} more weeks in your full plan
)}
);
}
// ── PLAN PREVIEW (onboarding / paywall) ──────────────────────────────────────
function PlanPreview({ styleKey = 'paper', paceKey = 'onTrack', sportKey, variant }) {
const st = getStyle(styleKey);
const p = computePace(paceKey);
const [plan, setPlan] = React.useState('annual');
const sport = sportKey || window.__sport || (window.FC && window.FC.sport) || 'MMA';
const v = variant || window.__paywallVariant || 'dashboard';
const today = p.hist[p.hist.length - 1][1];
const targetW = FC.goalWeight;
const startW = (FC.planStart != null ? FC.planStart : today);
const cut = Math.abs(startW - targetW);
// Onboarding paywall — fresh plan, 8 wks out (matches loading + Coach's Read).
// In production this is the real weeks-to-weigh-in.
const weeks = 8;
const ratePct = (cut / weeks / startW * 100);
const S = (window.FC_SPORTS && window.FC_SPORTS[sport]) || {};
const planType = window.planTypeFor ? window.planTypeFor(sport, true) : 'camp';
const division = (FC && FC.division) || null;
const campName = division ? ('Your ' + division + ' camp') : ('Your ' + sport + ' camp');
const water = planType !== 'walk';
const stratName = { camp: 'Camp cut + fight-week water', walk: 'Walk-it-down — real weight only', minimal: 'Conservative — minimal water' }[planType] || 'Camp cut + fight-week water';
const stratLine = water
? 'Most of the drop is true weight across camp, with a controlled water cut held for fight week.'
: 'No rehydration window, so the whole cut is real weight, walked down across camp.';
const fwWater = water ? +(cut * 0.28).toFixed(1) : 0;
const campKg = +(cut - fwWater).toFixed(1);
// ── shared pieces ──────────────────────────────────────────────────────────
const Header = (
{campName}
{weeks} wks out
{FC.firstName}{FC.firstName ? ',' : ''} here’s your road to fight night.
A {cut.toFixed(1)} kg cut over {weeks} weeks, at {ratePct.toFixed(2)}%/wk — paced to keep your power and make weight clean.
);
// intelligence strip — the read, as data (scientific)
const Intel = (
{[['CUT', '\u2212' + cut.toFixed(1), 'kg'], ['RATE', ratePct.toFixed(2), '%/wk'], ['CAMP', String(weeks), 'wks'], ['MAKE', targetW.toFixed(1), 'kg']].map((c, i) => (
))}
Your week-by-week road
Start → fight night
);
// the plan graph — the projection they're buying
const Graph = (
Projection to weigh-in
{weeks} WKS OUT
);
// a REAL plan module (cut strategy), shown — not a ticked feature
const Strategy = (
Your cut strategy
{sport}
{stratName}
{stratLine}
{[['True-weight cut', campKg.toFixed(1), 'kg', 'var(--ink)'], ['Fight-week water', fwWater.toFixed(1), 'kg', water ? 'var(--accent)' : 'var(--ink-3)'], ['Cut pace', ratePct.toFixed(2), '%/wk', 'var(--ink)']].map(([lb, vv, u, c], i) => (
))}
);
const Feas = window.FeasibilityCard ?
{[['annual', 'Annual', '\u00a359.99/yr', '\u00a35.00/mo', 'Save 50%'], ['monthly', 'Monthly', '\u00a39.99/mo', null, null]].map(([key, label, price, per, badge]) => {
const sel = plan === key;
return (
setPlan(key)} style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', textAlign: 'left', cursor: 'pointer', padding: '13px 15px', borderRadius: 13, background: sel ? 'var(--paper)' : 'transparent', border: '1.5px solid ' + (sel ? 'var(--paper)' : 'rgba(246,244,239,0.32)') }}>
{sel &&
{label}
{badge && {badge} }
{per && Just {per}, billed yearly }
{price}
);
})}
);
const Unlock = ({ showList }) => (
{showList ? 'GET YOUR FULL PLAN' : 'UNLOCK YOUR PLAN'}
{showList ? (
{['Week-by-week breakdown to fight day', 'Fight-week water taper, built in', 'A cut strategy tuned to your sport', 'Targets that adapt to your cycle'].map(tx => (
))}
Everything above goes live — week-by-week targets that adapt daily, your fight-week taper, and the verdict engine that reads your trend.
)}
A fight-camp nutritionist runs £80–150 a session.
Yours from £5/mo
{Plans}
Start 14-day free trial
{plan === 'annual' ? 'Then \u00a359.99/yr (\u00a35.00/mo)' : 'Then \u00a39.99/mo'} · cancel anytime.
);
// ── legacy 'features' hero card (kept for comparison) ────────────────────────
const LegacyHero = (
TODAY
{startW.toFixed(1)} kg
FIGHT WEIGHT
{targetW.toFixed(1)} kg
{'\u2212'}{cut.toFixed(1)}
KG IN {weeks} WEEKS
);
let body;
if (v === 'reveal') {
// Merged read + plan — the single screen that lands after "Building your camp".
const sex = window.__sex || 'M';
const weekly = cut / weeks;
const PlanDivider = (
Now — here’s the plan
);
// Bespoke sport × sex social proof — moved here from the biological-sex step,
// because the "in your class, fighters like you" framing only earns the claim
// once the division is set (which happens by the time the plan is revealed).
const bproof = window.bespokeProof ? window.bespokeProof(sport, sex) : null;
const sportLabel = sport === 'BJJ' ? 'BJJ' : sport;
const Bespoke = bproof ? (
{window.CoachMark &&
}
In {division ? division + ' ' : ''}{sportLabel}, {sex === 'F' ? 'women' : 'men'} like you
{bproof.who}
{bproof.cred}
{bproof.fact}
) : null;
body =
{window.CoachReadBody ? ;
} else if (v === 'roadmap') {
body = {Header}{Intel}{Roadmap}{Strategy}
;
} else if (v === 'features') {
body = {Header}{LegacyHero}
;
} else if (v === 'spotlight') {
body = {Header}{Graph}{Intel}
;
} else { // 'dashboard' (default)
body = {Header}{Intel}{Graph}{Feas}{Strategy}
;
}
return (
Skip} />
{body}
);
}
// CycleCurve, simple wave of expected water-weight across the cycle, with a
// "you're here" marker. Dips through follicular, peaks in late luteal.
function CycleCurve({ width = 309 }) {
const H = 104, padL = 8, padR = 8, padT = 12, padB = 24, days = 28, yMax = 1.3;
const off = (d) => -Math.cos(2 * Math.PI * (d - 10) / days); // -1 follicular low → +1 luteal peak
const xs = (d) => padL + (d / days) * (width - padL - padR);
const ys = (o) => padT + (1 - (o + yMax) / (2 * yMax)) * (H - padT - padB);
const pts = Array.from({ length: days + 1 }, (_, d) => [xs(d), ys(off(d))]);
const line = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ');
const area = `${line} L ${xs(days).toFixed(1)} ${ys(-yMax).toFixed(1)} L ${xs(0).toFixed(1)} ${ys(-yMax).toFixed(1)} Z`;
const baseY = ys(0), curD = 24, curX = xs(curD), curY = ys(off(curD));
const bands = [['Menses', 0, 5], ['Follicular', 5, 13], ['Ovul', 13, 16], ['Luteal', 16, 28]];
return (
{i > 0 && {b[0].toUpperCase()}
);
})}
);
}
// ── MENSTRUAL CYCLE ──────────────────────────────────────────────────────────
// Composes the §15 cycle-intelligence blocks by mode. `mode` / `flag` props let
// the canvas show the natural / contraception / absent states; an internal
// selector also lets you flip between them live.
function MenstrualCycle({ styleKey = 'paper', mode: modeProp = 'natural', flag = false }) {
const st = getStyle(styleKey);
const [mode, setMode] = React.useState(modeProp);
React.useEffect(() => setMode(modeProp), [modeProp]);
const natural = mode === 'natural';
// absent-cycle state: forced via prop, or shown in the 'absent' mode by default
const reds = flag || mode === 'absent';
return (
Save} />
Expected weight by phase
Folded into your weekly targets so a normal hormonal swing never reads as falling behind. Tuned to your own history where we have it.
|
|
|
|
)}
{mode === 'contraception' && (
)}
{mode === 'absent' && (
Cycle setup
|
{natural && |
}
{natural && |
}
|
} last />
);
}
Object.assign(window, { CampPlan, PlanPreview, WeekRoadmap, MenstrualCycle, CycleCurve, ProofBand, PlanGlide });