// fc-reveal-poster2.jsx — FIVE more "Your camp" reveal treatments, each built
// around a specific, research-backed psychological mechanism that the first three
// (Editorial / Dashboard / Checklist) don't lead with. Same engine numbers
// (windorp2w.useCampData), same warm clay system — divergent in WHAT they make the
// athlete feel at the aha moment.
//
//   4 · Your Corner      — the calm expert cornerman. Combat-psych research: a
//                          fighter's corner regulates emotion; most get cut advice
//                          from peers, not pros. OnWeight is the qualified corner.
//                          Leads with what the cut PROTECTS (sport-specific).
//   5 · The Descent      — goal-gradient + endowed progress + Goal-Attainment
//                          Theory: a big cut broken into weekly rungs keeps the
//                          athlete in control. A vertical week-by-week ladder to
//                          fight day; week 0 already ticked.
//   6 · The Edge         — loss aversion reframed POSITIVELY (BFM framing): making
//                          weight is the psychological edge / professionalism, not
//                          the fear of missing. Fight-promo poster + social proof
//                          + a real fighter quote.
//   7 · Showing the Work — labour illusion + curiosity gap: itemise the reasoning
//                          the engine just ran so the "Building your camp" wait
//                          pays off as visible intelligence. Authority beat.
//   8 · Quiet Confidence — System-1 / peak-end / calm-corner minimalism: one number,
//                          one line, almost zero cognitive load. The emotional peak.
//
// Separate babel scope → everything shared comes through windorp2w.

const rp2w = window;
const CLAY = '#e9ddcd';

// ── small shared atoms ───────────────────────────────────────────────────────
function MakeWeightReadout({ d, size = 72, weight = 300 }) {
  const Num = rp2w.Num, ToneBadge = rp2w.ToneBadge;
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.18em', color: 'var(--ink-3)', fontWeight: 600 }}>MAKE-WEIGHT TARGET</span>
        {ToneBadge ? <ToneBadge tone="green">SAFE PACE</ToneBadge> : null}
      </div>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 12, marginTop: 12 }}>
        {Num ? <Num size={size} weight={weight} color="var(--ink)">{d.targetW.toFixed(1)}</Num> : <span style={{ fontFamily: 'var(--num)', fontWeight: weight, fontSize: size }}>{d.targetW.toFixed(1)}</span>}
        <div style={{ paddingBottom: 9 }}>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink-3)', fontWeight: 600 }}>KG</div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--accent)', fontWeight: 700, marginTop: 5 }}>−{d.cut.toFixed(1)} FROM TODAY</div>
        </div>
      </div>
    </div>
  );
}

function Matchup({ d, c, tint = 'var(--ink-3)' }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
      <span style={{ fontFamily: 'var(--display)', fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 600 }}>{d.firstName ? `${d.firstName}’s camp` : 'Your camp'}</span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 9.5, letterSpacing: '0.05em', textTransform: 'uppercase', color: tint, fontWeight: 600 }}>{d.weeks} wks out</span>
        {c.glyph && rp2w.SportGlyph && <rp2w.SportGlyph name={c.glyph} size={28} ink="var(--ink)" accent="var(--accent)" />}
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════════════════
// 4 · YOUR CORNER — the calm, qualified cornerman. Opens by naming what the cut
// is built to PROTECT (sport-specific, from FC_SPORT_PROTECT) — the corner's job
// is to keep you sharp, not just light. Reassuring, solution-focused voice.
// ═════════════════════════════════════════════════════════════════════════════
function RevealCorner() {
  const c = rp2w.usePosterData(); const { d, locked, total } = c;
  if (!c.c.tip) return null;
  const tip = c.c.tip;
  const Kicker = rp2w.Kicker, PlanTicks = rp2w.PlanTicks;
  const PROT = (rp2w.FC_SPORT_PROTECT || {})[d.sport] || (rp2w.FC_SPORT_PROTECT || {}).Other || { tag: 'Strength · gas', protect: 'your strength and stamina across the whole fight.' };

  return (
    <rp2w.RevealFrame label="Reveal · Your Corner" footer={<rp2w.PrimaryNext sub="Your corner’s got the weight. You handle the work." />}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        {/* corner masthead */}
        <div style={{ background: CLAY, color: 'var(--ink)', padding: '24px 24px 26px' }}>
          <Matchup d={d} c={c} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: 16 }}>
            <span style={{ width: 26, height: 26, borderRadius: '50%', background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M3 7.5 L6 10.5 L11 4" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </span>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 700 }}>Your corner has read the cut</span>
          </div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 22, fontWeight: 700, lineHeight: 1.24, color: 'var(--ink)', marginTop: 11, textWrap: 'balance' }}>{tip.headline}</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 9, textWrap: 'pretty' }}>{tip.body}</div>
        </div>

        <div style={{ padding: '20px 22px 24px', display: 'flex', flexDirection: 'column', gap: 22 }}>
          {/* what we're protecting — the corner's actual job */}
          <div style={{ background: 'var(--green-soft)', border: '1px solid color-mix(in srgb, var(--green) 26%, transparent)', borderRadius: 'var(--radius)', padding: '16px 17px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <Kicker color="var(--green)">What this cut protects</Kicker>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 8.5, letterSpacing: '0.05em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--green)', background: 'var(--paper)', border: '1px solid color-mix(in srgb, var(--green) 30%, transparent)', borderRadius: 100, padding: '3px 8px' }}>{PROT.tag}</span>
            </div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 14, lineHeight: 1.5, color: 'var(--ink)', marginTop: 10, textWrap: 'pretty' }}>We pace you so the cut never takes {PROT.protect}</div>
          </div>

          {/* the number */}
          <MakeWeightReadout d={d} />

          {/* trend proof — quiet, the corner's reassurance */}
          <div style={{ borderTop: '1px solid var(--rule)', paddingTop: 18 }}>
            <Kicker color="var(--accent)">Why you can trust the number</Kicker>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 16.5, fontWeight: 700, lineHeight: 1.28, color: 'var(--ink)', marginTop: 8, textWrap: 'balance' }}>One bad morning isn’t a bad week.</div>
            <div style={{ marginTop: 13 }}><rp2w.PosterGlide c={c} width={349} height={188} /></div>
            <div style={{ marginTop: 11 }}><rp2w.TrendLegend /></div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 13, color: 'var(--ink-2)', marginTop: 11, lineHeight: 1.5, textWrap: 'pretty' }}>A good corner doesn’t panic at the scale. We read the trend under the daily water and only call it when the cut is genuinely drifting — so you never crash-cut off one scary number.</div>
          </div>

          {/* plan */}
          <PlanTicks locked={locked} total={total} />
        </div>
      </div>
    </rp2w.RevealFrame>
  );
}

// ═════════════════════════════════════════════════════════════════════════════
// 5 · THE DESCENT — goal-gradient + endowed progress. The cut is shown as a
// vertical ladder of weeks down to fight day; today's rung is already ticked
// ("you've started"), and the rungs brighten as the goal nears. Reframes a big
// scary number as one controllable week at a time.
// ═════════════════════════════════════════════════════════════════════════════
function RevealDescent() {
  const c = rp2w.usePosterData(); const { d, locked, total } = c;
  if (!c.c.tip) return null;
  const Kicker = rp2w.Kicker;
  const N = d.weeks;
  // per-week target weights, today (wk0) → fight day (wkN)
  const rows = Array.from({ length: N + 1 }, (_, i) => {
    const wt = d.startW - (d.cut * i / N);
    return { i, wt, today: i === 0, fight: i === N };
  });

  return (
    <rp2w.RevealFrame label="Reveal · The Descent" footer={<rp2w.PrimaryNext sub="One week at a time. We’ll walk it down with you." />}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        {/* countdown masthead */}
        <div style={{ background: CLAY, color: 'var(--ink)', padding: '24px 24px 24px' }}>
          <Matchup d={d} c={c} />
          <div style={{ fontFamily: 'var(--display)', fontSize: 28, letterSpacing: '0.01em', fontWeight: 600, lineHeight: 1.0, color: 'var(--ink)', marginTop: 15 }}>{(d.division || d.sport).toUpperCase()} · {d.sport.toUpperCase()}</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 13 }}>
            <span style={{ fontFamily: 'var(--num)', fontWeight: 200, fontSize: 52, lineHeight: 0.9, letterSpacing: '-0.03em', color: 'var(--ink)' }}>{N}</span>
            <span style={{ fontFamily: 'var(--display)', fontSize: 15, letterSpacing: '0.08em', fontWeight: 600, color: 'var(--ink-3)' }}>WEEKS TO FIGHT DAY</span>
          </div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 1.5, color: 'var(--ink-2)', marginTop: 11, textWrap: 'pretty' }}>−{d.cut.toFixed(1)} kg is a lot to look at in one go. So we don’t. It’s about <strong style={{ fontWeight: 600 }}>{d.weekly.toFixed(1)} kg a week</strong> — a rung at a time, every one inside the safe line.</div>
        </div>

        <div style={{ padding: '22px 22px 24px', display: 'flex', flexDirection: 'column', gap: 22 }}>
          {/* the ladder */}
          <div>
            <Kicker color="var(--accent)">Your descent</Kicker>
            <div style={{ marginTop: 14, position: 'relative' }}>
              {/* spine */}
              <div style={{ position: 'absolute', left: 8, top: 10, bottom: 10, width: 2, background: 'var(--rule)' }} />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
                {rows.map((r) => {
                  const prog = r.i / N; // 0 today → 1 fight day
                  const dotColor = r.today ? 'var(--green)' : r.fight ? 'var(--accent)' : 'var(--rule-2)';
                  return (
                    <div key={r.i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '9px 0' }}>
                      <span style={{ flexShrink: 0, width: 18, height: 18, borderRadius: '50%', background: r.today || r.fight ? dotColor : 'var(--paper)', border: r.today || r.fight ? 'none' : `2px solid ${dotColor}`, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', zIndex: 1, marginLeft: -1 }}>
                        {r.today && <svg width="9" height="7" viewBox="0 0 11 9" fill="none"><path d="M1 4.5 L4 7.5 L10 1" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>}
                        {r.fight && <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--paper)' }} />}
                      </span>
                      <span style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 10, opacity: 0.45 + 0.55 * prog }}>
                        <span style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 700, color: r.today ? 'var(--green)' : r.fight ? 'var(--accent)' : 'var(--ink-3)' }}>
                          {r.today ? 'This week · today' : r.fight ? 'Fight week · make-weight' : `Week ${r.i}`}
                        </span>
                        <span style={{ display: 'flex', alignItems: 'baseline', gap: 3 }}>
                          <span style={{ fontFamily: 'var(--num)', fontWeight: r.fight ? 600 : 400, fontSize: r.fight ? 22 : 18, letterSpacing: '-0.02em', color: r.fight ? 'var(--accent)' : 'var(--ink)' }}>{r.wt.toFixed(1)}</span>
                          <span style={{ fontFamily: 'var(--mono)', fontSize: 9.5, color: 'var(--ink-3)', fontWeight: 600 }}>kg</span>
                        </span>
                      </span>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>

          {/* control note — the goal-attainment reframe */}
          <div style={{ background: 'var(--paper-2)', border: '1px solid var(--rule)', borderRadius: 'var(--radius)', padding: '15px 16px', display: 'flex', gap: 12, alignItems: 'flex-start' }}>
            <span style={{ flexShrink: 0, width: 18, height: 18, borderRadius: '50%', background: 'var(--green)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 1 }}><svg width="9" height="7" viewBox="0 0 11 9" fill="none"><path d="M1 4.5 L4 7.5 L10 1" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 13, lineHeight: 1.5, color: 'var(--ink-2)', textWrap: 'pretty' }}>Paced at <strong style={{ fontWeight: 700, color: 'var(--ink)' }}>{d.ratePct.toFixed(2)}%/wk</strong>, under the sub-1% line. Hitting each rung is the win that carries you to the next — the part of the cut you actually control.</div>
          </div>

          {/* compact plan line */}
          <div style={{ borderTop: '1px solid var(--rule)', paddingTop: 16 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 10 }}>
              <span style={{ fontFamily: 'var(--sans)', fontSize: 14.5, fontWeight: 700, color: 'var(--ink)' }}>Your plan</span>
              <span style={{ fontFamily: 'var(--sans)', fontSize: 12.5, fontWeight: 600, color: 'var(--ink-2)' }}><span style={{ color: 'var(--ink)', fontWeight: 700 }}>{locked.length}</span> of {total} set</span>
            </div>
            <div style={{ marginTop: 10, fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-3)', lineHeight: 1.5 }}>{locked.map(i => i.t).join(' · ')} — <span style={{ color: 'var(--green)', fontWeight: 600 }}>locked</span>.</div>
          </div>
        </div>
      </div>
    </rp2w.RevealFrame>
  );
}

// ═════════════════════════════════════════════════════════════════════════════
// 6 · THE EDGE — loss aversion flipped to the upside. Making weight isn't the
// thing to fear; it's the edge you walk in with. Fight-promo confidence: bold
// matchup, the number as a guarantee, social proof + a real fighter quote.
// ═════════════════════════════════════════════════════════════════════════════
function RevealEdge() {
  const c = rp2w.usePosterData(); const { d } = c;
  if (!c.c.tip) return null;
  const Kicker = rp2w.Kicker;
  const sp = rp2w.socialProofFor ? rp2w.socialProofFor(d.sport) : null;
  const Q = (rp2w.FC_FIGHTER_QUOTES || [])[1] || null; // Harrison — "chosen suffering… worth it"

  return (
    <rp2w.RevealFrame label="Reveal · The Edge" footer={<rp2w.PrimaryNext label="See my full plan" sub="Make weight. Walk in sharp." />}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        {/* dark fight-promo hero */}
        <div style={{ background: '#15140f', color: '#faf7f1', padding: '24px 24px 28px', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', right: -70, top: -70, width: 220, height: 220, borderRadius: '50%', border: '34px solid rgba(224,86,61,0.16)', pointerEvents: 'none' }} />
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
            <span style={{ fontFamily: 'var(--display)', fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#e0563d', fontWeight: 600 }}>{d.firstName ? `${d.firstName}’s camp` : 'Your camp'}</span>
            {c.glyph && rp2w.SportGlyph && <rp2w.SportGlyph name={c.glyph} size={30} ink="#faf7f1" accent="#e0563d" />}
          </div>
          <div style={{ position: 'relative', fontFamily: 'var(--display)', fontSize: 30, letterSpacing: '0.01em', fontWeight: 700, lineHeight: 1.0, marginTop: 16 }}>{(d.division || d.sport).toUpperCase()}</div>
          <div style={{ position: 'relative', fontFamily: 'var(--display)', fontSize: 16, letterSpacing: '0.12em', fontWeight: 500, color: 'rgba(250,247,241,0.6)', marginTop: 4 }}>{d.sport.toUpperCase()} · {d.weeks} WEEKS OUT</div>
          <div style={{ position: 'relative', fontFamily: 'var(--sans)', fontSize: 23, fontWeight: 700, lineHeight: 1.22, marginTop: 18, textWrap: 'balance' }}>Make weight and you’ve won the first exchange — before the bell.</div>
          {sp && <div style={{ position: 'relative', display: 'flex', alignItems: 'baseline', gap: 9, marginTop: 16, paddingTop: 15, borderTop: '1px solid rgba(250,247,241,0.16)' }}>
            <span style={{ fontFamily: 'var(--display)', fontSize: 24, fontWeight: 700, color: '#e0563d' }}>{sp.stat}</span>
            <span style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'rgba(250,247,241,0.72)', lineHeight: 1.4 }}>{sp.statOf}. The edge isn’t whether you cut — it’s cutting like a pro.</span>
          </div>}
        </div>

        <div style={{ padding: '22px 22px 24px', display: 'flex', flexDirection: 'column', gap: 22 }}>
          {/* the guarantee — number as edge */}
          <div style={{ textAlign: 'center' }}>
            <Kicker color="var(--accent)">Your make-weight</Kicker>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 10, marginTop: 10 }}>
              <span style={{ fontFamily: 'var(--num)', fontWeight: 200, fontSize: 92, lineHeight: 0.88, letterSpacing: '-0.04em', color: 'var(--ink)' }}>{d.targetW.toFixed(1)}</span>
              <span style={{ fontFamily: 'var(--display)', fontSize: 22, letterSpacing: '0.06em', fontWeight: 600, color: 'var(--ink-3)' }}>KG</span>
            </div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11.5, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 700, marginTop: 8 }}>−{d.cut.toFixed(1)} kg · {d.ratePct.toFixed(2)}%/wk · inside the safe line</div>
          </div>

          {/* proof */}
          <div style={{ background: 'var(--paper)', border: '1px solid var(--rule)', borderRadius: 'var(--radius)', padding: '15px 16px 16px' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 10 }}>
              <span style={{ fontFamily: 'var(--sans)', fontSize: 14.5, fontWeight: 700, color: 'var(--ink)' }}>Trend, not noise</span>
              <rp2w.TrendLegend />
            </div>
            <div style={{ marginTop: 12 }}><rp2w.PosterGlide c={c} width={313} height={172} /></div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-2)', marginTop: 11, lineHeight: 1.5, textWrap: 'pretty' }}>A +1 kg water morning never moved your trend — so it never moved your plan. We flag drift only when it’s real.</div>
          </div>

          {/* fighter quote — borrowed credibility */}
          {Q && <blockquote style={{ margin: 0, borderLeft: '3px solid var(--accent)', paddingLeft: 15 }}>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 18, fontStyle: 'italic', lineHeight: 1.35, color: 'var(--ink)', textWrap: 'pretty' }}>“{Q.quote}”</div>
            <div style={{ marginTop: 9, fontFamily: 'var(--mono)', fontSize: 9.5, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600 }}>{Q.who} · {Q.cred}</div>
          </blockquote>}
        </div>
      </div>
    </rp2w.RevealFrame>
  );
}

// ═════════════════════════════════════════════════════════════════════════════
// 7 · SHOWING THE WORK — labour illusion + curiosity. The "Building your camp"
// wait pays off as a visible audit of what the engine reasoned about THIS athlete.
// Each line is a calculation it ran, with the result. Ends on the authority beat.
// ═════════════════════════════════════════════════════════════════════════════
function RevealWork() {
  const c = rp2w.usePosterData(); const { d, S, locked, total } = c;
  if (!c.c.tip) return null;
  const Kicker = rp2w.Kicker;
  const steps = [
    { t: 'Pulled your division’s rulebook', s: `${d.sport} · ${c.weighShort} weigh-in${c.equip ? ` · +${S.equipmentKg} kg gear` : ''}` },
    { t: 'Set a target that’s already legal', s: `${d.targetW.toFixed(1)} kg make-weight, ${d.cut.toFixed(1)} kg to lose` },
    { t: 'Sized the cut against the safe ceiling', s: `${d.ratePct.toFixed(2)}%/wk over ${d.weeks} wks — under the 1%/wk line` },
    { t: d.water ? 'Modelled water vs real weight' : 'Ruled out water tricks for your weigh-in', s: d.water ? `taper sits on a ${d.campKg.toFixed(1)} kg real-weight base` : 'no rehydration window — it’s all real weight' },
    { t: 'Tuned the trend filter to your noise', s: 'reads through daily water so one spike never reads as off-track' },
  ];

  return (
    <rp2w.RevealFrame label="Reveal · Showing the Work" footer={<rp2w.PrimaryNext sub="The maths is done. Your camp is yours to keep." />}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ background: CLAY, color: 'var(--ink)', padding: '24px 24px 22px' }}>
          <Matchup d={d} c={c} />
          <div style={{ fontFamily: 'var(--sans)', fontSize: 24, fontWeight: 700, lineHeight: 1.2, color: 'var(--ink)', marginTop: 15, textWrap: 'balance' }}>Here’s what we worked out while you waited.</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 1.5, color: 'var(--ink-2)', marginTop: 9, textWrap: 'pretty' }}>Five things, from your answers and your sport’s rules — so the number you’re about to see is reasoned, not guessed.</div>
        </div>

        <div style={{ padding: '20px 22px 24px', display: 'flex', flexDirection: 'column', gap: 22 }}>
          {/* the audit list */}
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {steps.map((st, i) => (
              <div key={i} style={{ display: 'flex', gap: 13, padding: '13px 0', borderTop: i ? '1px solid var(--rule)' : 'none' }}>
                <span style={{ flexShrink: 0, fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 700, color: 'var(--ink-3)', width: 18, paddingTop: 2 }}>{String(i + 1).padStart(2, '0')}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                    <span style={{ flexShrink: 0, width: 16, height: 16, borderRadius: '50%', background: 'var(--green-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><svg width="9" height="7" viewBox="0 0 11 9" fill="none"><path d="M1 4.5 L4 7.5 L10 1" stroke="var(--green)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                    <span style={{ fontFamily: 'var(--sans)', fontSize: 14.5, fontWeight: 600, color: 'var(--ink)' }}>{st.t}</span>
                  </div>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 11.5, letterSpacing: '0.01em', color: 'var(--ink-3)', marginTop: 6, marginLeft: 25, lineHeight: 1.45 }}>{st.s}</div>
                </div>
              </div>
            ))}
          </div>

          {/* the payoff number */}
          <div style={{ borderTop: '1px solid var(--rule)', paddingTop: 20 }}>
            <MakeWeightReadout d={d} />
          </div>

          {/* proof chart */}
          <div>
            <div style={{ marginTop: 2 }}><rp2w.PosterGlide c={c} width={349} height={184} /></div>
            <div style={{ marginTop: 11 }}><rp2w.TrendLegend /></div>
          </div>

          {/* authority beat */}
          <div style={{ background: 'var(--paper-2)', border: '1px solid var(--rule)', borderRadius: 'var(--radius)', padding: '15px 16px' }}>
            <Kicker color="var(--ink-3)">The standard we build to</Kicker>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 13, lineHeight: 1.5, color: 'var(--ink-2)', marginTop: 9, textWrap: 'pretty' }}>{rp2w.FC_SOCIAL_PROOF_AUTHORITY || 'Keep a cut under ~5% of bodyweight and it won’t cost you performance. Every OnWeight plan is built to that ceiling.'}</div>
          </div>

          {/* plan strip */}
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 10 }}>
            <span style={{ fontFamily: 'var(--sans)', fontSize: 13, color: 'var(--ink-3)' }}>{locked.length} of {total} of your plan is already locked.</span>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 9.5, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--green)', fontWeight: 700 }}>Ready</span>
          </div>
        </div>
      </div>
    </rp2w.RevealFrame>
  );
}

// ═════════════════════════════════════════════════════════════════════════════
// 8 · QUIET CONFIDENCE — System-1 / peak-end minimalism. The whole screen is the
// number and one calm line; everything else is one optional disclosure. Lowest
// cognitive load, the emotional peak — the calm corner, distilled.
// ═════════════════════════════════════════════════════════════════════════════
function RevealQuiet() {
  const c = rp2w.usePosterData(); const { d, locked, total } = c;
  if (!c.c.tip) return null;
  const [open, setOpen] = React.useState(false);
  const Chevron = rp2w.Chevron;

  return (
    <rp2w.RevealFrame label="Reveal · Quiet Confidence" footer={<rp2w.PrimaryNext sub="Your camp is ready — yours to keep." />}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '0 26px' }}>
        {/* peak — centered, generous air */}
        <div style={{ flex: '0 0 auto', paddingTop: 54, textAlign: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9 }}>
            {c.glyph && rp2w.SportGlyph && <rp2w.SportGlyph name={c.glyph} size={22} ink="var(--ink-3)" accent="var(--accent)" />}
            <span style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600 }}>{d.firstName ? `${d.firstName}’s make-weight` : 'Your make-weight'}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 12, marginTop: 22 }}>
            <span style={{ fontFamily: 'var(--num)', fontWeight: 200, fontSize: 116, lineHeight: 0.82, letterSpacing: '-0.05em', color: 'var(--ink)' }}>{d.targetW.toFixed(1)}</span>
            <span style={{ fontFamily: 'var(--display)', fontSize: 24, letterSpacing: '0.06em', fontWeight: 500, color: 'var(--ink-3)' }}>KG</span>
          </div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 700, marginTop: 16 }}>−{d.cut.toFixed(1)} over {d.weeks} weeks · {d.ratePct.toFixed(2)}%/wk</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 19, fontWeight: 600, lineHeight: 1.35, color: 'var(--ink)', marginTop: 30, textWrap: 'balance' }}>You train.<br />We hold the number.</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 1.55, color: 'var(--ink-3)', marginTop: 12, maxWidth: 280, marginLeft: 'auto', marginRight: 'auto', textWrap: 'pretty' }}>It’s paced under the safe line and reads the trend through the daily water. Nothing for you to work out.</div>
        </div>

        {/* one disclosure — the detail is here if you want it, not before */}
        <div style={{ marginTop: 'auto', paddingTop: 30, paddingBottom: 18 }}>
          <button onClick={() => setOpen(!open)} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '12px 0' }}>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 700 }}>{open ? 'Hide what’s inside' : 'See what’s inside'}</span>
            {Chevron ? <Chevron open={open} /> : <span style={{ color: 'var(--ink-3)' }}>{open ? '▲' : '▼'}</span>}
          </button>
          {open && (
            <div style={{ marginTop: 6 }}>
              <div style={{ background: 'var(--paper)', border: '1px solid var(--rule)', borderRadius: 'var(--radius)', padding: '14px 16px 16px' }}>
                <rp2w.PosterGlide c={c} width={297} height={158} />
                <div style={{ marginTop: 10 }}><rp2w.TrendLegend /></div>
              </div>
              <div style={{ marginTop: 12 }}>
                {locked.map((it, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '9px 0', borderTop: i ? '1px solid var(--rule)' : 'none' }}>
                    <span style={{ flexShrink: 0, width: 16, height: 16, borderRadius: '50%', background: 'var(--green-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><svg width="9" height="7" viewBox="0 0 11 9" fill="none"><path d="M1 4.5 L4 7.5 L10 1" stroke="var(--green)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                    <span style={{ flex: 1, minWidth: 0, fontFamily: 'var(--sans)', fontSize: 13.5, fontWeight: 600, color: 'var(--ink)' }}>{it.t}</span>
                    <span style={{ flexShrink: 0, fontFamily: 'var(--sans)', fontSize: 12, color: 'var(--ink-3)', textAlign: 'right', maxWidth: '46%' }}>{it.s}</span>
                  </div>
                ))}
                <div style={{ marginTop: 8, fontFamily: 'var(--mono)', fontSize: 9.5, letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600 }}>{locked.length} of {total} set · the rest sharpens in setup</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </rp2w.RevealFrame>
  );
}

// ═════════════════════════════════════════════════════════════════════════════
// 9 · FIGHT-WEEK DASHBOARD — the reveal rendered in the live Fight-Week dashboard
// shell: warm deepened-clay surface, accent phase banner, hero make-weight
// numeral, a working-target card with a stat row, a safe-pace progress card, and
// the descent StepList. Same components + ordering as DashFightWeek, carrying the
// plan-reveal message instead of the daily state.
// ═════════════════════════════════════════════════════════════════════════════
function RevealFightWeek() {
  const data = rp2w.usePosterData(); const { c, d } = data;
  if (!c.tip) return null;
  const Card = rp2w.Card, SectionHeader = rp2w.SectionHeader, Stat = rp2w.Stat,
        StepList = rp2w.StepList, DashBanner = rp2w.DashBanner, GearButton = rp2w.GearButton,
        ProgressBar = rp2w.ProgressBar;
  // fight-week theme shift — warm, deepened clay surface + intensified accents
  const FWV = { '--paper': '#fdf9f3', '--rule': '#ddd0bb', '--card-shadow': '0 1px 3px rgba(40,28,12,0.06), 0 10px 26px rgba(40,28,12,0.08)' };
  const FW_S = '#e9ddcd';
  const pacePct = Math.min(1, d.ratePct / 1.0);
  const steps = [
    { label: 'TODAY', title: `Start · ${d.startW.toFixed(1)} kg`, detail: 'We begin reading your trend from your first weigh-in.', state: 'now' },
    { label: `WK 1–${Math.max(1, d.weeks - 1)}`, title: `Walk it down · ${d.weekly.toFixed(1)} kg/wk`, detail: 'Steady real-weight loss, every week under the safe line.', state: 'todo' },
    { label: 'FIGHT WK', title: `Make ${d.targetW.toFixed(1)} kg`, detail: 'Land on weight and walk in strong.', state: 'goal', tag: 'Goal' },
  ];
  return (
    <rp2w.RevealFrame label="Reveal · Fight-Week Dashboard" footer={<rp2w.PrimaryNext sub="Your camp is ready — yours to keep." />}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', ...FWV, background: FW_S }}>
        {/* accent phase banner — reused shared OnWeight phase strip */}
        <DashBanner tone="accent" label="YOUR CAMP" meta={`${d.weeks} WEEKS TO FIGHT`} />
        <div style={{ padding: '10px 20px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={{ fontFamily: 'var(--title-font)', fontSize: 27, fontWeight: 700, letterSpacing: 'var(--title-spacing)', color: 'var(--ink)' }}>Your plan</span>
          <GearButton />
        </div>
        <div style={{ flex: 1, padding: '12px 20px 28px', display: 'flex', flexDirection: 'column', gap: 22 }}>

          {/* HERO — the make-weight number + the one human read */}
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 11, marginTop: 4 }}>
              <span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 112, lineHeight: 0.8, letterSpacing: '-0.035em', color: 'var(--ink)' }}>{d.targetW.toFixed(1)}</span>
              <div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.18em', color: 'var(--ink-3)', fontWeight: 600 }}>KG</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.04em', color: 'var(--accent)', fontWeight: 700, marginTop: 6 }}>−{d.cut.toFixed(1)} FROM TODAY</div>
              </div>
            </div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 20, fontWeight: 600, lineHeight: 1.25, color: 'var(--ink)', marginTop: 16, textWrap: 'balance' }}>{c.tip.headline}</div>
          </div>

          {/* YOUR TARGET — the headline breakdown, with a stat row */}
          <div>
            <SectionHeader>Your target</SectionHeader>
            <Card pad={20}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 11 }}>
                <span style={{ flexShrink: 0, width: 18, height: 18, borderRadius: '50%', background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><svg width="9" height="7" viewBox="0 0 11 9" fill="none"><path d="M1 4.5 L4 7.5 L10 1" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                <span style={{ fontFamily: 'var(--display)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 600 }}>Built from your answers</span>
              </div>
              <div style={{ fontFamily: 'var(--sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--ink)', textWrap: 'pretty' }}>
                Your {(d.division || d.sport)} limit is <strong>{d.targetW.toFixed(1)} kg</strong>. From <strong>{d.startW.toFixed(1)} kg</strong> today, that&rsquo;s a {d.cut.toFixed(1)} kg cut across {d.weeks} weeks — paced to protect your power.
              </div>
              <div style={{ display: 'flex', marginTop: 20, paddingTop: 18, borderTop: '1px solid var(--rule)' }}>
                <Stat label="Today" value={d.startW.toFixed(1)} unit="kg" i={0} />
                <Stat label="Make-weight" value={d.targetW.toFixed(1)} unit="kg" color="var(--accent)" i={1} />
                <Stat label="To lose" value={'−' + d.cut.toFixed(1)} unit="kg" color="var(--ink-2)" i={1} />
              </div>
            </Card>
          </div>

          {/* SAFE PACE — the reassurance, as a progress read */}
          <div>
            <SectionHeader>Safe pace</SectionHeader>
            <Card pad={20}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
                <span style={{ fontFamily: 'var(--sans)', fontSize: 19, fontWeight: 600, color: 'var(--ink)' }}>Cut pace</span>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.04em', color: 'var(--ink-2)', fontWeight: 600 }}>{d.ratePct.toFixed(2)} / 1.00 %/wk</span>
              </div>
              <div style={{ marginTop: 13 }}><ProgressBar pct={pacePct} tone="green" /></div>
              <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 1.5, color: 'var(--ink-2)', marginTop: 13, textWrap: 'pretty' }}>Under the 1%/wk line that costs muscle and power. You lose fat, not strength — and make weight with something left.</div>
            </Card>
          </div>

          {/* THE DESCENT — the plan arc, shared StepList */}
          <div>
            <SectionHeader>The descent</SectionHeader>
            <Card pad="6px 18px"><StepList steps={steps} /></Card>
          </div>

        </div>
      </div>
    </rp2w.RevealFrame>
  );
}

Object.assign(window, { RevealCorner, RevealDescent, RevealEdge, RevealWork, RevealQuiet, RevealFightWeek, RevealFightWeekEditorial });

// ═════════════════════════════════════════════════════════════════════════════
// 10 · FIGHT-WEEK DASHBOARD · EDITORIAL — same live dashboard shell as #9, but
// carrying the fuller Editorial (#1) information and ordering: the coach's read
// LEADS as the hero, then the make-weight readout, the trend-proof chart, the
// locked-plan ticks, and the expandable "sharpens in setup" levers.
// ═════════════════════════════════════════════════════════════════════════════
function RevealFightWeekEditorial() {
  const data = rp2w.usePosterData(); const { c, d, locked, total } = data;
  const [openKey, setOpenKey] = React.useState('strategy');
  if (!c.tip) return null;
  const Card = rp2w.Card, SectionHeader = rp2w.SectionHeader, Stat = rp2w.Stat,
        DashBanner = rp2w.DashBanner, GearButton = rp2w.GearButton,
        Num = rp2w.Num, ToneBadge = rp2w.ToneBadge, Kicker = rp2w.Kicker, CoachTip = rp2w.CoachTip,
        PlanTicks = rp2w.PlanTicks, PosterGlide = rp2w.PosterGlide, TrendLegend = rp2w.TrendLegend,
        Chevron = rp2w.Chevron;
  const FWV = { '--paper': '#fdf9f3', '--rule': '#ddd0bb', '--card-shadow': '0 1px 3px rgba(40,28,12,0.06), 0 10px 26px rgba(40,28,12,0.08)' };
  const FW_S = '#e9ddcd';
  const levers = rp2w.buildLevers(data);
  return (
    <rp2w.RevealFrame label="Reveal · Fight-Week Dashboard (editorial)" footer={<rp2w.PrimaryNext sub="Your camp is ready — yours to keep." />}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', ...FWV, background: FW_S }}>
        <DashBanner tone="accent" label="YOUR CAMP" meta={`${d.weeks} WEEKS TO FIGHT`} />
        <div style={{ padding: '10px 20px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={{ fontFamily: 'var(--title-font)', fontSize: 27, fontWeight: 700, letterSpacing: 'var(--title-spacing)', color: 'var(--ink)' }}>Your plan</span>
          <GearButton />
        </div>
        <div style={{ flex: 1, padding: '12px 20px 28px', display: 'flex', flexDirection: 'column', gap: 22 }}>

          {/* HERO — the make-weight number leads, dashboard-style */}
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 11, marginTop: 4 }}>
              <span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 112, lineHeight: 0.8, letterSpacing: '-0.035em', color: 'var(--ink)' }}>{d.targetW.toFixed(1)}</span>
              <div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.18em', color: 'var(--ink-3)', fontWeight: 600 }}>KG</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.04em', color: 'var(--accent)', fontWeight: 700, marginTop: 6 }}>−{d.cut.toFixed(1)} FROM TODAY</div>
              </div>
            </div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 20, fontWeight: 600, lineHeight: 1.25, color: 'var(--ink)', marginTop: 16, textWrap: 'balance' }}>Your {d.weeks}-week cut to make-weight — paced to protect your power.</div>
          </div>

          {/* COACH'S READ — the fight summary, as a coach card */}
          <div>
            <SectionHeader>Coach&rsquo;s read</SectionHeader>
            {CoachTip ? <CoachTip headline={c.tip.headline} body={c.tip.body} /> : null}
          </div>

          {/* THE BREAKDOWN — the numbers behind it, with a stat row */}
          <div>
            <SectionHeader>The breakdown</SectionHeader>
            <Card pad={20}>
              <div style={{ fontFamily: 'var(--sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--ink)', textWrap: 'pretty' }}>Your {(d.division || d.sport)} limit is <strong>{d.targetW.toFixed(1)} kg</strong> — a {d.cut.toFixed(1)} kg cut from <strong>{d.startW.toFixed(1)} kg</strong> today, across {d.weeks} weeks.</div>
              <div style={{ display: 'flex', marginTop: 20, paddingTop: 18, borderTop: '1px solid var(--rule)' }}>
                <Stat label="Today" value={d.startW.toFixed(1)} unit="kg" i={0} />
                <Stat label="To lose" value={'−' + d.cut.toFixed(1)} unit="kg" color="var(--accent)" i={1} />
                <Stat label="Safe pace" value={d.ratePct.toFixed(2)} unit="%/wk" color="var(--ink-2)" i={1} />
              </div>
            </Card>
          </div>

          {/* WHY YOU CAN TRUST THE NUMBER — the proof chart */}
          <div>
            <SectionHeader>Why you can trust it</SectionHeader>
            <Card pad={20}>
              <div style={{ fontFamily: 'var(--sans)', fontSize: 17, fontWeight: 700, lineHeight: 1.25, letterSpacing: '-0.01em', color: 'var(--ink)', textWrap: 'balance' }}>We read the trend, not the noise.</div>
              {PosterGlide && <div style={{ marginTop: 14 }}><PosterGlide c={c} width={313} height={182} /></div>}
              {TrendLegend && <div style={{ marginTop: 12 }}><TrendLegend /></div>}
              <div style={{ fontFamily: 'var(--sans)', fontSize: 13, lineHeight: 1.5, color: 'var(--ink-2)', marginTop: 12, textWrap: 'pretty' }}>A water spike doesn&rsquo;t move the trend — so it doesn&rsquo;t move your plan. <strong style={{ fontWeight: 600 }}>You train; we do the weight math</strong> and flag you only when it&rsquo;s real.</div>
            </Card>
          </div>

          {/* YOUR PLAN — locked ticks */}
          <div>
            <SectionHeader>Your camp is set</SectionHeader>
            <Card pad={20}><PlanTicks locked={locked} total={total} /></Card>
          </div>

          {/* SHARPENS IN SETUP — expandable levers */}
          <div>
            <SectionHeader>Sharpens in setup</SectionHeader>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
              {levers.map((lv) => {
                const open = openKey === lv.key;
                return (
                  <div key={lv.key} style={{ background: 'var(--paper)', border: '1px solid var(--rule)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', overflow: 'hidden' }}>
                    <button onClick={() => setOpenKey(open ? null : lv.key)} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 12, padding: '15px 16px', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer' }}>
                      <span style={{ flexShrink: 0, width: 18, height: 18, borderRadius: '50%', border: '1.5px solid var(--rule-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{open && <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--accent)' }} />}</span>
                      <span style={{ flex: 1, minWidth: 0 }}>
                        <span style={{ display: 'block', fontFamily: 'var(--sans)', fontSize: 14.5, fontWeight: 600, color: 'var(--ink)' }}>{lv.title}</span>
                        <span style={{ display: 'block', fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-3)', marginTop: 2, lineHeight: 1.4 }}>{lv.summary}</span>
                      </span>
                      {Chevron && <Chevron open={open} />}
                    </button>
                    {open && <div style={{ padding: '0 16px 16px 46px' }}><div style={{ borderTop: '1px solid var(--rule)', paddingTop: 13 }}>{lv.body}</div></div>}
                  </div>
                );
              })}
            </div>
          </div>

        </div>
      </div>
    </rp2w.RevealFrame>
  );
}
