// fc-onboarding.jsx, Two first-run flows hinged on the paywall, native iOS patterns.
//
// FLOW 1 · ONBOARDING ("OnWeight Setup"), pre-paywall signup that produces a plan.
// Launch → Account → Sport → Fight date → Sex → Current wt → Goal wt →
// Cut rate → Cut strategies → Building → Plan Preview · Paywall
//
// FLOW 2 · REFINE PLAN, post-paywall refinement, launched from the
// paywall or from Plan. Adds the precision the first pass can't:
// Intro → Weigh-in time → Morning reminder → [female] Cycle on? → Period date →
// Cycle length → Phase weight changes → Competition rules → Check details →
// Refining → Home (plan-shape choice is future state, see fc-future)
//
// Shared template OnbStep: back + progress + flow eyebrow, large title, content, CTA.
// Reuses the shared kit (GroupedList, Row, Stat, Toggle, IOSNumberPad, etc).
const FB = '#a32a18';
// Champion fact with its leading name removed, so it reads as a clean fragment
// under the name hero (which already shows the name). Drops a leading linking
// verb too ("Amanda Nunes is the only…" → "The only…"); keeps action verbs
// ("…won…" → "Won…"). Returns null when the fact isn't name-led, so the caller
// falls back to the credential line.
function championFactFragment(fact, who) {
if (fact && who && fact.startsWith(who + ' ')) {
let rest = fact.slice(who.length + 1).replace(/^(is|was|are)\s+/i, '');
return rest.charAt(0).toUpperCase() + rest.slice(1);
}
return null;
}
// Shared tick row for the toned onboarding coach cards (sport / sex). Accent check
// + plain-sans line, matching the resolved card system.
function OnbTick({ children }) {
return (
{children}
);
}
// Per-sport coach tip, shown the moment a sport is picked (OnbSport). Each frames
// the cut around that sport's weigh-in reality + the one thing it must protect.
const SPORT_PICK_TIP = {
BJJ: { chip: 'Weigh in dressed', headline: 'You weigh in dressed, right before you roll.',
bullets: ['No time to rehydrate after', 'Keep the cut real and conservative', 'Guards grip and gas tank'] },
Boxing: { chip: 'Same-day weigh-in', headline: 'Amateur weigh-ins are same day.',
bullets: ['Whole cut is real weight, not water', 'No water cut to lean on', 'Guards your reach and hand speed'] },
Judo: { chip: '+5% morning check', headline: 'Evening weigh-in, random +5% morning check.',
bullets: ['The cap stops you over-dehydrating', 'Gradual is the only way', 'Guards power and grip'] },
MMA: { chip: 'Day-before weigh-in', headline: 'Day-before weigh-in buys time to rebuild.',
bullets: ['A moderate water cut works', 'Pace it to protect recovery', 'Guards your round-to-round engine'] },
'Muay Thai': { chip: 'No fixed classes', headline: 'No universal class table here.',
bullets: ['Set the limit your promotion gave', 'Where same-day, cut real weight only', 'Guards clinch strength and pace'] },
Taekwondo: { chip: '+5% same-day control', headline: 'Day-before, with a +5% same-day control.',
bullets: ['The cap rewards a steady cut', 'Guards your explosive kicks', 'Power off both legs, every round'] },
Wrestling: { chip: 'Same-day weigh-in', headline: 'You weigh in and wrestle same day.',
bullets: ['No time to rehydrate', 'Make it real weight, not water', 'Guards scramble power and gas tank'] },
Other: { chip: 'Your rules', headline: 'Not listed? We’ll work from your numbers.',
bullets: ['Set your promotion’s limit and weigh-in timing', 'We keep the cut gradual and real', 'Guards your strength and stamina'] },
};
// Per-sport size/leverage edge you gain dropping below your natural class.
const SPORT_EDGE = {
Boxing: 'reach over smaller opponents',
MMA: 'a size and strength edge',
BJJ: 'strength and grip on the mat',
'BJJ (no-gi)': 'grip and scramble speed',
Taekwondo: 'reach and leverage on kicks',
Judo: 'grip and strength in the exchange',
Wrestling: 'leverage in the scramble',
};
// Short phrase for the performance the cut must protect, per sport.
const SPORT_GUARD = {
Boxing: 'your reach and hand speed',
MMA: 'your round-to-round engine',
'Muay Thai': 'your clinch and pace',
BJJ: 'your grip and gas tank',
'BJJ (no-gi)': 'your grip and scramble speed',
Taekwondo: 'your explosive kicks',
Judo: 'your power and grip',
Wrestling: 'your scramble power and gas',
Other: 'your strength and stamina',
};
// ── Limit-screen coaching tip (OnbGoalWeight) ────────────────────────────────
// The limit screen's job is to REACT to the number just chosen. So the tip's
// headline is the sport × pace read (SPORT_PACE_TIP), and the bullets carry the
// hard rate + where the limit sits vs the natural class. The deeper synthesis —
// real vs water, cycle, what to protect, social proof — is the Coach's Read
// screen's job, not this tip. (The old standalone "Cut Rate (derived)" screen
// is folded in here: with a fight date, paceVerdict() derives %bw/wk and the
// coach's verdict the instant a limit is picked; with no date it defers pace.)
function paceVerdict(cut, current, weeks) {
if (!weeks || cut <= 0) return null;
const kgWk = cut / weeks;
const pct = (kgWk / current) * 100;
let tone, tier, word;
if (pct >= 1.0) { tone = 'red'; tier = 'veryfast'; word = 'past the 1%/wk ceiling — that’s muscle, not water'; }
else if (pct > 0.75) { tone = 'amber'; tier = 'fast'; word = 'aggressive — doable, but fuel hard'; }
else if (pct >= 0.45) { tone = 'green'; tier = 'ideal'; word = 'right in the 0.5%/wk pocket'; }
else { tone = 'green'; tier = 'ideal'; word = 'gentle — runway to spare'; }
return { tone, pct, kgWk, tier, line: cut.toFixed(1) + ' kg over ' + weeks + ' wks → ' + pct.toFixed(2) + '%/wk, ' + word };
}
const TONE_RANK = { green: 0, amber: 1, red: 2 };
// The limit card reads as one of three surfaces: green when the cut is recommended,
// beige when it's workable but worth care, red when it's past the safe ceiling.
// The verdict tone is passed through untouched so an amber caution keeps its
// quiet-dot markers instead of the green endorsement ticks.
const goalCardSurface = (t) => (t === 'amber' ? 'accent' : t);
const worseTone = (a, b) => (TONE_RANK[b] > TONE_RANK[a] ? b : a);
const TIER_LABEL = { ideal: 'Steady', fast: 'Fast', veryfast: 'Very fast' };
// Sport × pace headline matrix — the emotional read on the chosen limit, in the
// sport's own currency (punch power, scrambles, kicks…). Three pace tiers map to
// paceVerdict's tier: ideal (< 0.75%/wk), fast (0.75–1.0), veryfast (≥ 1.0).
const SPORT_PACE_TIP = {
Boxing: { ideal: 'This steady cut buys time to keep your punch power.', fast: 'This quick cut works, but you’ll fight to stay sharp late.', veryfast: 'This aggressive cut can bring range, but it costs endurance.' },
MMA: { ideal: 'This balanced cut keeps you ready in every phase.', fast: 'A fast cut trades comfort for competitiveness.', veryfast: 'This steep cut gives size, but you’ll feel the drain.' },
'Muay Thai': { ideal: 'This steady cut keeps your kicks and clinch sharp.', fast: 'This fast cut can test your conditioning and rhythm.', veryfast: 'This aggressive cut can sap explosiveness and timing.' },
BJJ: { ideal: 'This steady cut lets you roll with stamina and control.', fast: 'You’ll make the division, but scrambles may feel heavier.', veryfast: 'This aggressive cut can cost you strength and guard work.' },
'BJJ (no-gi)': { ideal: 'This steady cut lets you roll with stamina and control.', fast: 'You’ll make the division, but scrambles may feel heavier.', veryfast: 'This aggressive cut can cost you strength and guard work.' },
Taekwondo: { ideal: 'This steady cut protects your kicking speed.', fast: 'This fast cut may tighten up your flexibility.', veryfast: 'This steep cut risks slowing your reactions.' },
Judo: { ideal: 'This gradual cut protects your power and grip.', fast: 'This fast cut can stiffen your grip and spike injury risk.', veryfast: 'This steep cut can drain the power your throws need.' },
Wrestling: { ideal: 'This steady cut keeps your scramble power and gas.', fast: 'This fast cut can leave your scrambles flat.', veryfast: 'This steep cut risks gassing you in the first period.' },
Other: { ideal: 'This steady cut protects your strength and stamina.', fast: 'This fast cut gets you lighter, but it tests endurance.', veryfast: 'This steep cut gets you down, but performance may dip.' },
};
function sportPaceTip(sportKey, tier) {
const m = SPORT_PACE_TIP[sportKey] || SPORT_PACE_TIP.Other;
return m[tier] || m.ideal;
}
function goalTip(sportKey, current, entered, rec, weeks) {
if (!entered || isNaN(entered) || entered <= 0) return null;
const note = 'Just to get started. We refine with your rules and fight-week strategies next.';
const cut = +(current - entered).toFixed(1);
if (cut <= 0) {
return { tone: 'amber', surface: goalCardSurface('amber'), chip: rec ? rec.name : 'Custom limit', headline: 'At or above your walk-around weight.',
bullets: ['No cut needed for this', 'You give up size to bigger athletes'], note };
}
// Where the limit sits vs the athlete's natural class.
let cls;
if (rec) {
if (entered < rec.bodyTarget - 0.05) cls = { tone: 'green', headline: 'Below ' + rec.name + ', your natural class.', detail: 'Bigger and stronger than smaller opponents' };
else if (entered > rec.limitKg + 0.05) cls = { tone: 'green', headline: 'Above ' + rec.name + ', your natural class.', detail: 'Easy weight to hold — may give up size' };
else cls = { tone: 'green', headline: rec.name + ' is your natural class.', detail: 'Make weight without crashing' };
} else {
cls = { tone: 'green', headline: 'Set your promotion’s limit.', detail: 'No universal class table for your sport' };
}
const pv = paceVerdict(cut, current, weeks);
if (!pv) {
// No fight date: the rate can't be derived — lead on class, defer pace.
return { tone: cls.tone, surface: goalCardSurface(cls.tone), chip: rec ? rec.name : 'Custom limit', headline: cls.headline,
bullets: [cls.detail, 'You set the cut pace next — no fight date yet'], note };
}
// Dated: headline is the sport × pace read; bullets carry the rate + class.
return {
tone: pv.tone,
surface: goalCardSurface(pv.tone),
chip: (rec ? rec.name : 'Custom limit') + ' · ' + TIER_LABEL[pv.tier],
headline: sportPaceTip(sportKey, pv.tier),
bullets: [pv.line, cls.headline],
note,
};
}
// ── shared chrome ────────────────────────────────────────────────────────────
function OnbHeader({ step, total }) {
return (
);
}
// Flow eyebrow, the single clearest signal of WHICH flow you're in.
function FlowTag({ flow }) {
const goal = flow === 'goal';
const text = goal ? 'Refine your plan' : '';
if (!text) return null;
return (
{/* mark holds the splash's centre position, wordmark + tagline settle in below */}
{window.AppMark ? : null}
OnWeight
Make weight. Stay sharp. Every camp.
);
}
// ── 1 · CREATE ACCOUNT ───────────────────────────────────────────────────────
// DEPRECATED (B5): superseded by the social-first `CreateAccount` (fc-account-
// safety.jsx), which is now the single canonical sign-up. Kept only so older
// references don't break; do not route new flows here.
function OnbAccount() {
const field = (label, val, ph) => (
By continuing you agree to the Terms and Privacy Policy.
);
}
// ── 2 · SPORT ────────────────────────────────────────────────────────────────
// Sport picker. Opens with NOTHING selected; tapping a sport selects it, enables
// the CTA, and reveals that sport's bespoke coach tip. Listed alphabetically.
// `sportKey` seeds a preset selection (used by the design-canvas variant artboards).
function OnbSport({ sportKey = null }) {
const sports = [
['BJJ', 'BJJ', 'bjj'],
['Boxing', 'Boxing', 'boxing'],
['Judo', 'Judo', 'judo'],
['MMA', 'MMA', 'mma'],
['Muay Thai', 'Muay Thai', 'muaythai'],
['Taekwondo', 'Taekwondo', 'taekwondo'],
['Wrestling', 'Wrestling', 'wrestling'],
['Other sport', 'Other', 'other'],
];
const [sel, setSel] = React.useState(sportKey);
React.useEffect(() => { window.__sport = sel; }, [sel]);
const Glyph = window.SportGlyph;
const tip = sel ? SPORT_PICK_TIP[sel] : null;
const proof = sel && window.socialProofFor ? window.socialProofFor(sel) : null;
const footer = tip ? (
Your sport{sel}
{proof && (
{proof.stat}
{proof.statOf}.
)}
{tip.headline}
{tip.bullets.map((b, i) => {b})}
{proof && }
) : null;
// Avatar list: the shared standard for icon-bearing select lists. Each option is
// led by its bespoke sport glyph in a tinted tile.
return (
{sports.map(s => {
const on = s[1] === sel;
// "Other" has no bespoke glyph — give it a neutral target mark so the row
// still carries an icon tile like every other option.
const ic = s[1] === 'Other'
?
: (Glyph ? : null);
return setSel(s[1])} icon={ic} />;
})}
);
}
// ── 3 · FIGHT DATE ───────────────────────────────────────────────────────────
function Calendar({ month = 'January 2026', start = 4, days = 31, sel = 11 }) {
const cells = [...Array(start).fill(null), ...Array.from({ length: days }, (_, i) => i + 1)];
return (
);
}
function OnbFightDate() {
const sport = window.__sport || (window.FC && window.FC.sport) || 'MMA';
return (
Your fight
8 weeks
until you step on the scale.
We read your trend, not the daily scale.
On track
Daily noiseReal trend
A morning up +1.1 kg is water, not the cut. The trend didn’t budge — you’re still on track.
} secondary="No fight booked yet">
);
}
// ── 4 · WEIGH-IN WINDOW ──────────────────────────────────────────────────────
// The rehydration window is what decides how much of the cut can be water, so we
// ask it rather than infer it. Most sports have a probable rule (§FC_SPORTS), so
// we pre-select it and say so — the athlete only has to correct us.
const WEIGH_WINDOW_OPTS = [
['multiday', 'Multi-day event', 'You re-weigh each morning you compete'],
['sameday-lt2', 'Same day — under 2 hours', 'Almost no time to rehydrate'],
['sameday-gte2', 'Same day — 2 hours or more', 'A small rehydration window'],
['daybefore', 'Day before', 'Around 24 hours to rebuild'],
['unsure', 'Not sure yet', 'We’ll plan conservatively until you confirm'],
];
const SPORT_WEIGH_RULE = {
MMA: { likely: 'daybefore', chip: 'MMA', line: 'Nearly all MMA promotions weigh in the day before — that ~24h is why a measured water cut is on the table at all.' },
BJJ: { likely: 'sameday-lt2', chip: 'IBJJF', line: 'Most BJJ comps use this rule: you weigh in, in your gi, minutes before you roll. No rehydration window, so the cut has to be real weight.' },
'BJJ (no-gi)': { likely: 'sameday-lt2', chip: 'IBJJF', line: 'Most no-gi comps use this rule: you weigh in, in your rashguard, right before you roll. No time to rebuild.' },
Wrestling: { likely: 'sameday-gte2', chip: 'UWW', line: 'UWW weighs in the morning you wrestle. If your event runs across days, pick multi-day — you’ll re-weigh each morning.' },
Judo: { likely: 'daybefore', chip: 'IJF', line: 'IJF weighs in the evening before, then a random morning control caps you at +5% of your category.' },
Taekwondo: { likely: 'daybefore', chip: 'WT', line: 'Day-before weigh-in, plus a random same-day control that caps you at +5% of your category.' },
Boxing: { likely: null, chip: 'Boxing', line: 'This one splits: amateur boxing weighs in the same day, pro is the day before. Check your bout sheet.' },
'Muay Thai': { likely: null, chip: 'Muay Thai', line: 'No single standard — pros weigh in around 24 hours out, IFMA amateurs weigh in same-day in fight attire.' },
Other: { likely: null, chip: 'Your promotion', line: 'We don’t have your promotion’s rule book, so tell us the timing and we’ll build the cut around it.' },
};
function OnbWeighInWindow({ sportKey = (window.__sport || 'MMA') }) {
const sport = sportKey || 'MMA';
const rule = SPORT_WEIGH_RULE[sport] || SPORT_WEIGH_RULE.Other;
const [sel, setSel] = React.useState(rule.likely || 'daybefore');
React.useEffect(() => { window.__weighWindow = sel; }, [sel]);
return (
}>
{WEIGH_WINDOW_OPTS.map((o, i) => {
const on = sel === o[0], likely = rule.likely === o[0];
return (
{i < WEIGH_WINDOW_OPTS.length - 1 && }
);
})}
);
}
// Recommended vs not-recommended cut strategies + social proof, surfaced in the
// biological-sex read. Strategy set transcribed from the Figma cut-strategy
// frames; Water Load is the only sex-split item (not advised for female athletes).
// Exact strategy is refined later in the Plan. (StratRow / SubLabel are the shared
// read-card primitives from fc-shared, so this card and the coach cards match.)
function fighterQuoteFor(sex) {
const Q = window.FC_FIGHTER_QUOTES || [];
const who = sex === 'F' ? 'Kayla Harrison' : 'Robert Whittaker';
return Q.find(x => x.who === who) || Q[0] || null;
}
function SexCutRead({ sex, sport }) {
const female = sex === 'F';
const rec = female
? ['Low-fibre & low-sodium days', 'Sweat-out — capped at 5% of bodyweight']
: ['Low-fibre & low-sodium days', 'Sweat-out — capped at 5% of bodyweight', 'Water load — a temporary ~0.5% drop'];
const avoid = female
? ['Low-carb — carbs fuel your performance', 'Water loading — not advised for female athletes']
: ['Low-carb — carbs fuel your performance'];
return (
Recommended
{rec.map((r, i) => )}
Not recommended
{avoid.map((r, i) => )}
{female &&
Got a menstrual cycle? We build your weigh-in water swings into the plan when you refine.
}
);
}
// ── 4 · BIOLOGICAL SEX ───────────────────────────────────────────────────────
// Biological sex. Value-focused: we optimise the cut for THIS athlete — cutting
// methods chosen for their physiology, and (carefully — never assuming every
// female athlete currently cycles) menstrual-cycle weigh-in swings built into the
// targets later when the plan is refined.
// Per-sport fun fact — shown on the biological-sex step when the athlete picks
// "Prefer not to say" (no sex to match a champion on). Light, true, sourced from
// sport history (ancient-Olympics dates per Britannica / Olympics.com; Pankration
// 648 BC; judo first Olympic martial art 1964).
const SPORT_FUN_FACT = {
MMA: 'Pankration — boxing and wrestling with kicks, holds and chokes — was an Olympic event back in 648 BC. MMA’s ancestor is over 2,600 years old.',
Boxing: 'Boxing has been an Olympic sport since 688 BC — fought bare-knuckle, with no rounds and no weight classes.',
BJJ: 'Brazilian jiu-jitsu grew out of judo — brought to Brazil and reworked by the Gracie family in the 1920s.',
'BJJ (no-gi)': 'Brazilian jiu-jitsu grew out of judo — brought to Brazil and reworked by the Gracie family in the 1920s.',
Judo: 'Judo means “the gentle way” — and in 1964 it became the first martial art ever contested at the Olympics.',
'Muay Thai': 'Muay Thai is “the art of eight limbs” — it scores with fists, elbows, knees and shins.',
Taekwondo: 'Taekwondo means “the way of the foot and fist” — and a spinning head kick scores the most points in the sport.',
Wrestling: 'Wrestling is the oldest combat sport at the Olympics — contested since 708 BC, just 32 years after the very first Games.',
Other: 'Combat sports punch above their weight at the Olympics — they account for around a quarter of all the medals on offer.',
};
// Biological-sex coach card. Class isn't known yet at this step, so the social
// proof is matched on SPORT + SEX only (no division claim), framed warmly
// ("You're in good company"). Carries one tick on the physiology-specialised cut
// strategy, and — only for female athletes, and never assuming a cycle — a
// conditional line about cycle-aware targets.
// ── Cycle water-weight graph for the biological-sex screen ───────────────────
// Three tweakable treatments, all built on the same model as the §15 CycleCurve
// (water sits low through follicular, peaks in late luteal) and styled to match
// the clay proof cards: ink curve, accent for the luteal emphasis, mono micro
// labels, hairlines at rgba(21,20,15,0.12). No "you're here" marker — tracking
// isn't set up yet, so this shows the shape we plan around, not their position.
const SEX_CYCLE_PHASES = [['Menses', 0, 5], ['Follicular', 5, 13], ['Ovul', 13, 16], ['Luteal', 16, 28]];
const SEX_CYCLE_DAYS = 28;
function sexCycleGeom(width, H, padT, padB, padL = 2, padR = 2, yMax = 1.25) {
const off = (d) => -Math.cos(2 * Math.PI * (d - 10) / SEX_CYCLE_DAYS);
const xs = (d) => padL + (d / SEX_CYCLE_DAYS) * (width - padL - padR);
const ys = (o) => padT + (1 - (o + yMax) / (2 * yMax)) * (H - padT - padB);
const pts = Array.from({ length: SEX_CYCLE_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(SEX_CYCLE_DAYS).toFixed(1)} ${ys(-yMax).toFixed(1)} L ${xs(0).toFixed(1)} ${ys(-yMax).toFixed(1)} Z`;
return { off, xs, ys, line, area, baseY: ys(0), yMax };
}
// A · PHASED CURVE — the CycleCurve treatment, phase bands named underneath.
// Most consistent with the cycle screens the athlete meets later.
function SexCycleA({ width = 305 }) {
// Generous top padding is the annotation lane — the callout sits ABOVE the
// peak with a leader down to it, so nothing overlaps the curve.
const H = 134, padT = 36, padB = 22, padL = 6, padR = 6, yMax = 1.15;
const g = sexCycleGeom(width, H, padT, padB, padL, padR, yMax);
const peakX = g.xs(24), peakY = g.ys(1);
return (
);
}
// B · ANNOTATED — adds the magnitude, so the value prop is quantified rather
// than only shaped. Phases become a slim segmented rail above the curve.
function SexCycleB({ width = 305 }) {
const H = 108, padT = 22, padB = 18;
const g = sexCycleGeom(width, H, padT, padB);
const peakX = g.xs(24), peakY = g.ys(g.off(24));
return (
);
}
// C · PHASE BARS — no curve. Water level per phase as a column, which reads
// fastest at card scale and keeps the card's hierarchy on the copy.
function SexCycleC({ width = 305 }) {
const H = 92, padT = 6, padB = 20, gap = 5;
const levels = { Menses: 0.42, Follicular: 0.18, Ovul: 0.5, Luteal: 1 };
const plotH = H - padT - padB;
const unit = (width - gap * (SEX_CYCLE_PHASES.length - 1)) / SEX_CYCLE_DAYS;
let x = 0;
return (
);
}
function SexCycleGraph({ variant = 'phased', width = 305 }) {
if (variant === 'annotated') return ;
if (variant === 'bars') return ;
return ;
}
function SexProofCard({ sex, sport, cycleVariant = 'phased' }) {
const female = sex === 'F';
const proof = (sex === 'F' || sex === 'M') && window.bespokeProof ? window.bespokeProof(sport, sex) : null;
const funFact = SPORT_FUN_FACT[sport] || SPORT_FUN_FACT.Other;
const Tick = ({ children }) => (
{children}
);
return (
{proof ? 'You’re in good company' : 'Did you know'}
Athletes who menstruate carry more water some weeks. We plan around it.
02
A strategy for {sport} and your body
We leave water loading out of your fight week — the evidence doesn’t support it for female athletes.
}
);
}
function OnbSex({ sportKey = (window.__sport || 'MMA'), cycleVariant = 'phased' }) {
const sport = sportKey || 'MMA';
const sportLabel = sport === 'BJJ' ? 'BJJ' : sport;
const opts = ['Female', 'Male', 'Prefer not to say'];
const [sel, setSel] = React.useState('Female');
React.useEffect(() => { window.__sex = sel === 'Female' ? 'F' : sel === 'Male' ? 'M' : 'N'; }, [sel]);
const sexCode = sel === 'Female' ? 'F' : sel === 'Male' ? 'M' : 'N';
const chip = sexCode === 'F' ? sportLabel + ' · ♀' : sexCode === 'M' ? sportLabel + ' · ♂' : sportLabel;
const headline = sexCode === 'F' ? 'Built for female ' + sportLabel + ' fighters.'
: sexCode === 'M' ? 'Built for male ' + sportLabel + ' fighters.' : 'Tuned to you either way.';
const note = sexCode === 'N' ? 'If you menstruate, switch on cycle tracking when you refine — we’ll tune the strategy then too.'
: 'We refine your exact strategy with you when you set up the plan.';
// Custom Phone (not OnbStep): options + the coach’s read flow together in a
// scroll region, with the CTA pinned — so the read never clips on a real device
// and there’s no dead gap when the list is short.
return (
Your biological sex
It sets your cutting strategy and how we read your weight near weigh-in.
);
}
// ── 7 · CUT RATE ─────────────────────────────────────────────────────────────
function OnbCutRate() {
const rates = [
['0.25', 'Conservative', 'Slow and steady. Needs a longer runway.', false],
['0.5', 'Optimal', 'Preserves muscle and power. The sweet spot.', true],
['0.75', 'Aggressive', 'Effective, but can bite into performance.', false],
['1.0', 'Maximum', 'The safety limit. Faster is over-cutting.', false],
];
const [sel, setSel] = React.useState(1);
return (
}>
{rates.map((r, i) => {
const on = i === sel;
return (
{i < rates.length - 1 && }
);
})}
);
}
// ── CUT RATE (DERIVED) — folded into the Goal Weight tip ─────────────────────
// When there's a fight date, the rate isn't a choice — it's gap ÷ weeks. We no
// longer ask for it on its own screen; goalTip()/paceVerdict() above compute it
// and state the coach's verdict the instant the athlete picks their limit. The
// no-date pace picker (OnbCutRate) still exists for the no-fight-booked case.
// ── 8 · CUT STRATEGIES ───────────────────────────────────────────────────────
function StrategyCard({ name, desc, warn, on, muted, onClick }) {
return (
);
}
function GroupLabel({ children }) {
return
{children}
;
}
function OnbCutStrategy() {
const [sel, setSel] = React.useState(() => new Set(['Low Fibre Diet']));
const toggle = (name) => setSel(s => { const n = new Set(s); n.has(name) ? n.delete(name) : n.add(name); return n; });
return (
Recommended for you
);
}
// ── COACH'S READ · the proof moment before the plan builds ───────────────────
// The payoff of everything they entered: a named coach interprets their sport,
// timeline and numbers in plain language. This is where onboarding earns trust,
// the app demonstrably reasoned about THEM, not a template.
// CoachReadBody = just the read (header + safe-line scale + insights), reusable
// inside the standalone Coach's Read screen and the merged Plan reveal.
function CoachReadBody({ sportKey = 'MMA', sex = (window.__sex || 'M'), variant }) {
const FC = window.FC, S = (window.FC_SPORTS || {})[sportKey] || {}, P = (window.FC_SPORT_PROTECT || {})[sportKey] || {};
const v = variant || window.__coachVariant || 'insight';
const isFemale = sex === 'F';
const startW = FC.planStart, goal = FC.goalWeight, drop = startW - goal, weeks = 8;
const pct = (drop / weeks / startW) * 100; // weekly %
const cutPct = (drop / startW) * 100; // total cut as % of bodyweight
const weekly = drop / weeks; // kg per week
const division = (FC && FC.division) || null;
const campName = division ? ('Your ' + division + ' camp') : ('Your ' + sportKey + ' camp');
const planType = window.planTypeFor ? window.planTypeFor(sportKey, true) : 'camp';
const waterKg = planType === 'walk' ? 0 : planType === 'minimal' ? +(drop * 0.10).toFixed(1) : +(drop * 0.28).toFixed(1);
const realKg = +(drop - waterKg).toFixed(1);
const whenPhrase = { 'day-before': 'the day before', 'same-day': 'the morning you fight', 'within-2h': 'in your gi, minutes before you roll', 'same-or-day-before': 'same-day as an amateur, the day before as a pro' }[S.weighIn] || 'on your promotion’s schedule';
// VALUE-FIRST insights — true, specific, useful even if they never pay. About THE FIGHTER.
const insights = [];
insights.push({ dot: 'var(--t-green)', label: 'YOUR PACE', head: 'Aim for about ' + weekly.toFixed(1) + ' kg a week.',
body: 'Quick self-check: if you’re not down roughly ' + weekly.toFixed(1) + ' kg after seven days, tighten your food before you ever touch water.' });
if (waterKg > 0) insights.push({ dot: 'var(--accent)', label: 'REAL VS WATER', head: 'Only ~' + waterKg.toFixed(1) + ' kg of this should be water.',
body: 'You weigh in ' + whenPhrase + ', so about ' + waterKg.toFixed(1) + ' kg can come off as fight-week water and go back on after. The other ' + realKg.toFixed(1) + ' kg has to be real weight, off across camp — so start now.' });
else insights.push({ dot: 'var(--accent)', label: 'REAL VS WATER', head: 'All of it has to be real weight.',
body: 'You weigh in ' + whenPhrase + ' — no time to rehydrate. Any weight you pull with water, you carry into the fight as weakness. Walk it down in camp instead.' });
if (isFemale) insights.push({ dot: 'var(--mustard-deep)', label: 'YOUR CYCLE', head: 'Expect ~0.5 kg of water in your back half.',
body: 'If the scale jumps in the luteal phase, that’s water, not fat — don’t panic-cut it. Hold your pace and it comes off on its own.' });
else if (P.protect) insights.push({ dot: 'var(--ink)', label: 'PROTECT', head: 'Guard what wins ' + sportKey + ' fights.', body: P.protect });
const leadHead = cutPct <= 5 ? (drop.toFixed(1) + ' kg is ' + cutPct.toFixed(1) + '% of your bodyweight.') : (drop.toFixed(1) + ' kg is ' + cutPct.toFixed(1) + '% — a big cut, but it maps out.');
const leadSub = cutPct <= 5
? 'That’s in the range you can make on real weight — if you start now and keep it gradual. Here’s what that means for you.'
: 'A cut this size needs a long, clean runway — gradual every week, no crash. Here’s what that means for you.';
const Header = (
The corner’s read{weeks} wks out
{leadHead}
{leadSub}
);
// a slim scientific anchor: where their cut sits vs the safe lines
const Scale = (
5% · SAFE OVER A CAMP10%+ · DANGER
);
const List = (compact) => (
What this means for you
{insights.map((f, i) => (
{f.head}{f.label}
{!compact &&
{f.body}
}
))}
);
const Narrative = (
“Aim for about {weekly.toFixed(1)} kilos a week — if you’re not down that after seven days, tighten the food before you touch water. {waterKg > 0 ? 'You weigh in ' + whenPhrase + ', so maybe ' + waterKg.toFixed(1) + ' kilos can be fight-week water; the other ' + realKg.toFixed(1) + ' has to be real, off in camp.' : 'You weigh in ' + whenPhrase + ' — no rehydration window, so every kilo has to be real weight.'} {isFemale ? 'And when the scale jumps in your back half, that’s water — hold your pace.' : (P.protect || '')}”
Your corner · {sportKey}
);
const body = v === 'narrative' ? Narrative : List(v === 'brief');
return {Header}{Scale}{body};
}
// Your first 7 days — turns the read into the immediate next move. The bridge
// from "here's the science" to "here's what you do tomorrow morning." Reused on
// the standalone Coach's Read and on the merged Plan reveal.
function FirstWeekCard({ startW = 78.4, weekly = 0.5, weighInTime = '06:30' }) {
const firstWeekTarget = +(startW - weekly).toFixed(1);
return (
YOUR FIRST 7 DAYSSTARTS TOMORROW AM
{[
{ k: 'TARGET', head: 'Reach ' + firstWeekTarget.toFixed(1) + ' kg by next week', sub: 'About ' + weekly.toFixed(1) + ' kg off — all from food, not water.' },
{ k: 'HABIT', head: 'Weigh in every morning, fasted', sub: 'Same time daily at ' + weighInTime + '. Consistency beats the exact hour.' },
{ k: 'TODAY', head: 'Log your starting weight', sub: 'One number sets your baseline — the daily verdict starts from there.' },
].map((s, i, a) => (
{s.k}
{s.head}
{s.sub}
))}
);
}
// Standalone Coach's Read — kept for the design showcase (insight / narrative /
// brief variants, per-sport). In the live flow the read is folded into the Plan
// reveal (PlanPreview variant="reveal"), so loading → one combined screen.
function OnbCoachsRead({ sportKey = 'MMA', sex = (window.__sex || 'M'), variant }) {
const FC = window.FC;
const startW = FC.planStart, weekly = (FC.planStart - FC.goalWeight) / 8;
return (
That’s your read — yours to keep. Inside, it becomes daily targets that adjust as your body responds.
{window.ProofBand ? : null}
);
}
// ── LOADING (shared by both flows) ───────────────────────────────────────────
// Inject the loading-screen keyframes once.
if (typeof document !== 'undefined' && !document.getElementById('ow-build-kf')) {
const st = document.createElement('style');
st.id = 'ow-build-kf';
st.textContent =
'@keyframes owSpin{to{transform:rotate(360deg)}}' +
'@keyframes owRowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}' +
'@keyframes owPop{0%{transform:scale(.4)}60%{transform:scale(1.12)}100%{transform:scale(1)}}';
document.head.appendChild(st);
}
// "Building your camp" — the anticipation beat between the last input and the
// Coach's Read. Instead of a bare spinner, it runs the build as a sequence of
// steps that each double as a UVP, written from the athlete's REAL numbers
// (cut size, pace, fight-week water, sport, cycle). Plays once on mount; the
// end state is all-complete so print/export shows a finished list, not mid-run.
function OnbLoading({ refine = false }) {
const FC = window.FC || {};
const sport = FC.sport || 'MMA';
const water = (window.planTypeFor ? window.planTypeFor(sport, true) : 'camp') !== 'walk';
// A few short build lines, value-tinted but terse — no numbers, no paragraphs.
const steps = [
'Pacing your cut to protect your power',
water ? 'Building your fight-week taper' : 'Setting a real-weight cut',
`Tuning to ${sport} rules`,
'Arming your daily verdict',
];
const PER = 600;
const reduce = typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
const [done, setDone] = React.useState(reduce ? steps.length : 0);
React.useEffect(() => {
if (reduce) return;
let n = 0;
const id = setInterval(() => { n += 1; setDone(n); if (n >= steps.length) clearInterval(id); }, PER);
return () => clearInterval(id);
}, []);
const allDone = done >= steps.length;
const DARK = { '--paper': '#15140f', '--paper-2': '#211f18', '--ink': '#faf7f1', '--ink-2': 'rgba(250,247,241,0.80)', '--ink-3': 'rgba(250,247,241,0.52)', '--rule': 'rgba(250,247,241,0.14)' };
const ACC = '#e0563d';
return (
{window.OWMark
?
: }
{refine ? 'Refining your plan' : 'Building your camp'}
{/* short build lines, one active at a time */}
{steps.map((label, i) => {
const state = i < done ? 'done' : i === done && !allDone ? 'active' : 'pending';
return (
Miss a day and we hold the trend rather than guess. The line only moves on real data.
);
}
// ── 3 · CYCLE TRACKING (female branch) ───────────────────────────────────────
function OnbCycle() {
return (
} last />
);
}
// ── 4 · PERIOD DATE ──────────────────────────────────────────────────────────
function OnbPeriod() {
return (
);
}
// ── 5 · CYCLE LENGTH ─────────────────────────────────────────────────────────
function OnbCycleLength() {
const stepper = (v, unit) => (
{v}{unit}
);
return (
Cycle length
{stepper(28, 'days')}
Period length
{stepper(5, 'days')}
);
}
// ── 6 · PHASE WEIGHT CHANGES ─────────────────────────────────────────────────
function PhaseField({ phase, when, est, val, note, last }) {
return (
{phase} · {when}
{est}
{val}kg
{note &&
{note}
}
);
}
function OnbPhaseChanges() {
return (
);
}
// ── 7 · COMPETITION RULES ────────────────────────────────────────────────────
function OnbCompRules({ sportKey = 'MMA' }) {
const S = (window.FC_SPORTS || {})[sportKey] || (window.FC_SPORTS || {}).MMA || {};
const weighVal = S.weighIn === 'within-2h' ? 'Same day, in the gi' : S.weighIn === 'same-or-day-before' ? 'Same day / day before' : S.weighIn === 'same-day' ? 'Same day' : 'Day before';
const weighShort = S.weighIn === 'same-day' ? 'the morning you compete' : S.weighIn === 'within-2h' ? 'in the gi, minutes before you roll' : S.weighIn === 'same-or-day-before' ? 'the same day (amateur)' : 'the day before';
const ruleBullets = [
'Weighs in ' + weighShort,
S.equipmentReq ? ('Counts your ' + S.equipmentKg + ' kg of gear in the target') : 'No gear — your body target is the class limit',
S.reweigh ? ('Leaves room for the +' + S.reweighPct + '% re-weigh control') : 'Single weigh-in, so we keep the cut conservative',
];
return (
);
}
// ── 9 · CHOOSE PLAN (Tapered / Linear) ───────────────────────────────────────
function PlanSpark({ tapered }) {
// 309-wide mini chart. Tapered = steep then flatten; linear = straight.
const W = 285, H = 96, padL = 6, padR = 6, padT = 10, padB = 8;
const x = (t) => padL + t * (W - padL - padR);
const y = (v) => padT + (1 - v) * (H - padT - padB);
const N = 24;
const pts = Array.from({ length: N + 1 }, (_, i) => {
const t = i / N;
const v = tapered ? 1 - (1 - Math.pow(1 - t, 2.2)) : 1 - t; // tapered eases out, linear straight
return [x(t), y(v)];
});
const line = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ');
const area = `${line} L ${x(1).toFixed(1)} ${y(0).toFixed(1)} L ${x(0).toFixed(1)} ${y(0).toFixed(1)} Z`;
return (
);
}
function PlanCard({ name, desc, tapered, on }) {
return (
{name}
{on && Recommended}
{on && }
{desc}
{['Wk 1', 'Wk 4', 'Fight'].map(l => {l})}
);
}
function OnbPlanOptions() {
return (
Choose your plan shape
Same fight-day target, two ways to get there. You can switch any time.
);
}
// ── CYCLE REGULARITY (female branch, step 4) ─────────────────────────────────
// Captures whether the athlete is cycling normally. Hard camps and aggressive cuts
// frequently disrupt or stop periods, and a lost period can flag low energy
// availability (RED-S). When irregular/absent we lean on logged data or switch the
// cycle math off entirely, and surface a gentle, non-diagnostic safety note.
function OnbCycleRegularity() {
return (
}>
);
}
// ── CYCLE CHECK-IN (ongoing), "where am I, and is it right?" with help ───────
function CycleTimeline({ today = 24, length = 28 }) {
const PH = [
{ label: 'Menses', days: 5, color: '#b0432f' },
{ label: 'Follicular', days: 8, color: '#6b8f5a' },
{ label: 'Ovulation', days: 3, color: '#c08a2e' },
{ label: 'Luteal', days: 12, color: '#8a6d9b' },
];
const pct = (today / length) * 100;
return (
{PH.map((p) => )}
{PH.map(p => (
{p.label}
))}
);
}
function CycleCheckIn() {
return (
Your cycle
Day 24 of 28
Late luteal, your heaviest week.
Expect to be holding around +0.5 kg of water. Read the trend line, not today’s number.
Across your last three cycles, the scale rose about +0.8 kg in your luteal week, more than the +0.5 kg default we started with. Want to use your own number?
Based on cycles logged during an active cut, so we round conservatively. Not medical advice.