// fc-states.jsx, lifecycle dashboard states + the always-available "Manage fight"
// control. Shared kit only, Balanced styleKey. These fill the gaps in the camp
// state machine: unrefined plan, fight week → weigh-in → made/missed →
// rebuild → fight day → result. Fight-intensity screens get a warm, deepened
// surface so the final stretch feels different without leaving the design system.

const { FC: SFC, TONE: STONE, computePace: SComputePace, Phone: SPhone, Eyebrow: SEyebrow,
        Num: SNum, Card: SCard, SectionHeader: SSection, StatusBar: SStatusBar,
        HomeIndicator: SHome, LargeTitle: SLargeTitle, GearButton: SGear, TabBar: STabBar,
        Stat: SStat, Row: SRow, GroupedList: SGroup, StepList: SStepList, ProgressBar: SProg } = window;

// Warm, deepened surface for fight-intensity screens (fight week, rebuild, fight day).
// Overrides CSS vars on a wrapper so every Card/rule inside inherits the shift.
const FW_SURFACE = '#e9ddcd';                 // warm clay page
const FW_VARS = { '--paper': '#fdf9f3', '--paper-2': FW_SURFACE, '--rule': '#ddd0bb', '--card-shadow': '0 1px 3px rgba(40,28,12,0.06), 0 10px 26px rgba(40,28,12,0.08)' };

// ── fight-status indicator, at-a-glance countdown / date (display only) ──────
// Not a control: managing the fight lives in the Plan tab's camp screen.
function FightStatusChip({ label = 'Sat 11 Jan', tone = 'var(--ink-3)' }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'var(--paper)', border: '1px solid var(--rule)', borderRadius: 100, padding: '7px 13px', boxShadow: 'var(--card-shadow)' }}>
      <svg width="13" height="13" viewBox="0 0 14 14" fill="none" aria-hidden="true"><rect x="1.5" y="2.5" width="11" height="10" rx="2" stroke={tone} strokeWidth="1.4"/><path d="M1.5 5.5 H12.5 M4.5 1 V3.5 M9.5 1 V3.5" stroke={tone} strokeWidth="1.4" strokeLinecap="round"/></svg>
      <span style={{ fontFamily: 'var(--display)', fontSize: 11.5, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--ink)' }}>{label}</span>
    </div>
  );
}

// ── MANAGE FIGHT · bottom sheet, reachable at all times ───────────────────────
// Reschedule, postpone, log the result (won/lost/draw/no-contest), or cancel.
function ManageFightSheet({ onClose, result = null }) {
  const SheetRow = ({ icon, label, sub, color = 'var(--ink)', chevron = true, last }) => (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '0 18px', minHeight: 54 }}>
        <span style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--paper-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{icon}</span>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 15.5, color, fontWeight: 500 }}>{label}</div>
          {sub && <div style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-3)', marginTop: 1 }}>{sub}</div>}
        </div>
        {chevron && <svg width="7" height="12" viewBox="0 0 7 12" fill="none"><path d="M1 1 L6 6 L1 11" stroke="var(--rule-2)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>}
      </div>
      {!last && <div style={{ height: 1, background: 'var(--rule)', marginLeft: 61 }} />}
    </div>
  );
  const gl = (c) => ({ width: 16, height: 16 });
  const results = [['Won', 'var(--t-green)'], ['Lost', 'var(--ink-2)'], ['Draw', 'var(--ink-2)'], ['No contest', 'var(--ink-2)']];
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 50, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(20,18,12,0.45)' }} />
      <div style={{ position: 'relative', background: 'var(--paper-2)', borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: '12px 16px 18px', boxShadow: '0 -12px 44px rgba(0,0,0,0.24)', maxHeight: '92%', overflowY: 'auto' }}>
        <div style={{ width: 38, height: 5, borderRadius: 3, background: 'var(--rule-2)', opacity: 0.5, margin: '0 auto 16px' }} />
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', padding: '0 4px 14px' }}>
          <div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 21, fontWeight: 700, letterSpacing: '-0.01em', color: 'var(--ink)' }}>Manage fight</div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 13, color: 'var(--ink-3)', marginTop: 2 }}>{`${(window.FC && window.FC.division) || 'Lightweight'} \u00b7 ${(window.FC && window.FC.sport) || 'MMA'} \u00b7 Sat 11 Jan`}</div>
          </div>
          <button onClick={onClose} style={{ fontFamily: 'var(--sans)', fontSize: 15, fontWeight: 600, color: 'var(--accent)', minHeight: 44 }}>Done</button>
        </div>

        <div style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600, margin: '4px 4px 9px' }}>Reschedule</div>
        <SGroup>
          <SheetRow icon={<svg {...gl()} viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="11" rx="2" stroke="var(--ink)" strokeWidth="1.4"/><path d="M2 6.5 H14 M5.5 1.5 V4 M10.5 1.5 V4" stroke="var(--ink)" strokeWidth="1.4" strokeLinecap="round"/></svg>} label="Change weigh-in date" sub="Recalculates your whole plan" />
          <SheetRow icon={<svg {...gl()} viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.3" stroke="var(--ink)" strokeWidth="1.4"/><path d="M6 5.5 V10.5 M10 5.5 V10.5" stroke="var(--ink)" strokeWidth="1.4" strokeLinecap="round"/></svg>} label="Postpone fight" sub="Hold the plan, keep logging" last />
        </SGroup>

        <div style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600, margin: '18px 4px 9px' }}>Log the result</div>
        <div style={{ display: 'flex', gap: 8 }}>
          {results.map(r => {
            const on = result === r[0];
            return (
              <button key={r[0]} style={{ flex: 1, minHeight: 52, borderRadius: 'var(--radius-ctl)', border: `1.5px solid ${on ? 'var(--accent)' : 'var(--rule)'}`, background: on ? 'var(--accent-soft)' : 'var(--paper)', fontFamily: 'var(--display)', fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600, color: on ? 'var(--accent)' : 'var(--ink)', padding: '0 4px' }}>{r[0]}</button>
            );
          })}
        </div>

        <div style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600, margin: '18px 4px 9px' }}>End</div>
        <SGroup>
          <SheetRow icon={<svg {...gl()} viewBox="0 0 16 16" fill="none"><path d="M4 4 L12 12 M12 4 L4 12" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round"/></svg>} label="Cancel this fight" sub="Fight's off, keep the camp data" color="var(--accent)" />
          <SheetRow icon={<svg {...gl()} viewBox="0 0 16 16" fill="none"><rect x="3" y="3" width="10" height="10" rx="2" stroke="var(--accent)" strokeWidth="1.5"/></svg>} label="End camp" sub="Archive and return to no-camp" color="var(--accent)" last />
        </SGroup>
      </div>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════════════════════
// UNREFINED PLAN, onboarded and subscribed, plan is live, but the optional
// refinement steps aren't done yet. Targets are an estimate (a range, not a line)
// and a persistent nudge offers to refine. No tiers, this is post-paywall.
// ══════════════════════════════════════════════════════════════════════════════
function DashBasicPlan({ styleKey = 'balanced' }) {
  const [manage, setManage] = React.useState(false);
  const today = 78.0, goal = SFC.goalWeight, lo = 74.0, hi = 75.2;
  return (
    <SPhone styleKey={styleKey} label="Unrefined Plan">
      <SStatusBar />
      <window.DashBanner tone="ink" label="IN CAMP" meta="32 DAYS OUT" />
      <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)' }}>Today</span>
        <SGear />
      </div>
      <div style={{ flex: 1, padding: '12px 20px 28px', display: 'flex', flexDirection: 'column', gap: 22, overflow: 'hidden' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginTop: 2 }}>
            <span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 112, lineHeight: 0.8, letterSpacing: '-0.035em', color: 'var(--ink)' }}>{today.toFixed(1)}</span>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.16em', color: 'var(--ink-3)', fontWeight: 600 }}>KG</span>
          </div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 700, marginTop: 14 }}>Estimate · refine for precision</div>
        </div>

        {/* the daily loop works even before refining — log + trend always available */}
        {window.HeroButton ? <window.HeroButton label="ADD TODAY’S WEIGHT" /> : null}

        <div>
          <SSection>Your trend</SSection>
          <SCard pad={'14px 10px 12px'}>
            {window.FCChart ? <window.FCChart paceKey="trailing" width={325} height={200} /> : null}
          </SCard>
        </div>

        {/* the nudge, refine for precise targets (post-paywall, no tiers) */}
        <div style={{ background: 'var(--ink)', color: 'var(--paper)', borderRadius: 'var(--radius)', padding: '20px', position: 'relative', overflow: 'hidden' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
            <span style={{ fontFamily: 'var(--display)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(246,244,239,0.6)', fontWeight: 600 }}>Refine your plan · 2 min</span>
          </div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 18, fontWeight: 600, lineHeight: 1.3, marginTop: 12, textWrap: 'balance' }}>Refine for exact targets.</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 1.55, color: 'rgba(246,244,239,0.82)', marginTop: 8, textWrap: 'pretty' }}>Add your weigh-in timing, cycle and competition rules and we turn this estimate into a precise, day-by-day cut.</div>
          <div style={{ display: 'flex', gap: 7, marginTop: 16 }}>
            {['Weigh-in time', 'Cycle', 'Comp rules'].map(t => (
              <span key={t} style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.04em', color: 'rgba(246,244,239,0.7)', border: '1px solid rgba(246,244,239,0.25)', borderRadius: 100, padding: '4px 9px' }}>{t}</span>
            ))}
          </div>
          <button style={{ width: '100%', marginTop: 18, background: 'var(--paper)', color: 'var(--ink)', border: 'none', borderRadius: 'var(--radius-ctl)', minHeight: 50, fontFamily: 'var(--display)', fontSize: 13, letterSpacing: '0.14em', fontWeight: 600 }}>REFINE MY PLAN</button>
        </div>

        {/* tracking, a RANGE, because precision waits on the refinement steps */}
        <div>
          <SSection>Rough projection</SSection>
          <SCard pad={20}>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 16.5, fontWeight: 600, color: 'var(--ink)', textWrap: 'balance' }}>On track to land near the limit.</div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5, marginTop: 6, textWrap: 'pretty' }}>Without your cycle and gear rules we project a range, not an exact number.</div>
            <div style={{ display: 'flex', marginTop: 18, paddingTop: 18, borderTop: '1px solid var(--rule)' }}>
              <SStat label="Projected" value={`${lo}–${hi}`} unit="kg" valueSize={18} i={0} />
              <SStat label="Limit" value={goal.toFixed(1)} unit="kg" color="var(--accent)" valueSize={18} i={1} />
              <SStat label="Confidence" value="Est." sub="Unrefined" subColor="var(--t-amber)" color="var(--t-amber)" valueSize={18} i={1} />
            </div>
          </SCard>
        </div>
      </div>
      <STabBar active="home" /><SHome />
      {manage && <ManageFightSheet onClose={() => setManage(false)} />}
    </SPhone>
  );
}

// ══════════════════════════════════════════════════════════════════════════════
// REBUILD, between weigh-in and fight. Weight made; the job flips from cutting to
// rehydrating. Warm intensity surface. Countdown to the bout + rebuild protocol.
// ══════════════════════════════════════════════════════════════════════════════
function DashRebuild({ styleKey = 'balanced' }) {
  const [manage, setManage] = React.useState(false);
  const official = 74.2, now = 76.9, regain = +(now - official).toFixed(1);
  const fuel = { logged: 1.4, target: 2.5 };
  const steps = [
    { label: 'DONE', title: 'Fluids + electrolytes', detail: '1.5 L with sodium, sipped', state: 'now' },
    { label: 'NOW', title: 'First real meal', detail: 'Easy carbs, lean protein, low fibre', state: 'now' },
    { label: 'TONIGHT', title: 'Top up + sleep', detail: 'Keep sipping, bank a full night', state: 'todo' },
    { label: 'SAT 8PM', title: 'Fight', detail: 'Walk in rebuilt and sharp', state: 'goal' },
  ];
  return (
    <SPhone styleKey={styleKey} label="Rebuild">
      <SStatusBar />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', ...FW_VARS, background: FW_SURFACE }}>
        {/* made-weight confirmation, shared phase banner, green */}
        <window.DashBanner tone="green" label="MADE WEIGHT" meta={`OFFICIAL ${official.toFixed(1)} KG`}
          icon={<svg width="13" height="13" viewBox="0 0 15 15" fill="none"><circle cx="7.5" cy="7.5" r="7" fill="currentColor"/><path d="M4 7.5 L6.5 10 L11 5" stroke="var(--paper)" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>} />
        <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)' }}>Rebuild</span>
          <SGear />
        </div>
        <div style={{ flex: 1, padding: '12px 20px 28px', display: 'flex', flexDirection: 'column', gap: 22, overflowY: 'auto' }}>
          {/* hero, climbing back up is the LIMIT now */}
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 11, marginTop: 2 }}>
              <span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 112, lineHeight: 0.8, letterSpacing: '-0.035em', color: 'var(--ink)' }}>{now.toFixed(1)}</span>
              <div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.16em', color: 'var(--ink-3)', fontWeight: 600 }}>KG</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.08em', color: 'var(--t-green)', fontWeight: 700, marginTop: 6 }}>+{regain.toFixed(1)} REBUILT</div>
              </div>
            </div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 19, fontWeight: 600, lineHeight: 1.3, color: 'var(--ink)', marginTop: 16, textWrap: 'balance' }}>Weight's done. Now put it back on right, fuel and fluids to fight strong.</div>
          </div>

          {/* fuel progress, today's rebuild job */}
          <SCard pad={20}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
              <span style={{ fontFamily: 'var(--sans)', fontSize: 17, fontWeight: 600, color: 'var(--ink)' }}>Rehydration</span>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-2)', fontWeight: 600 }}>{fuel.logged.toFixed(1)} / {fuel.target} L</span>
            </div>
            <div style={{ marginTop: 13 }}><SProg pct={fuel.logged / fuel.target} tone="green" /></div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 1.5, color: 'var(--ink-2)', marginTop: 13, textWrap: 'pretty' }}>Steady sips with electrolytes beat chugging. Aim to be back to {(official + 2.8).toFixed(1)} kg by tonight.</div>
          </SCard>

          {/* rebuild protocol */}
          <div>
            <SSection>Next 22 hours</SSection>
            <SCard pad="6px 18px"><SStepList steps={steps} /></SCard>
          </div>
        </div>
      </div>
      <STabBar active="home" /><SHome />
      {manage && <ManageFightSheet onClose={() => setManage(false)} />}
    </SPhone>
  );
}

// ══════════════════════════════════════════════════════════════════════════════
// MISSED, between weigh-in and fight, but over the limit. Calm, factual, options.
// The re-weigh window (if any), or move to catchweight / manage the fight.
// ══════════════════════════════════════════════════════════════════════════════
function DashMissed({ styleKey = 'balanced' }) {
  const [manage, setManage] = React.useState(false);
  const official = 75.0, limit = SFC.goalWeight, over = +(official - limit).toFixed(1);
  return (
    <SPhone styleKey={styleKey} label="Missed Weight">
      <SStatusBar />
      <window.DashBanner tone="amber" label="MISSED WEIGHT" meta={`OVER BY ${over.toFixed(1)} KG`}
        icon={<svg width="13" height="13" viewBox="0 0 15 15" fill="none"><circle cx="7.5" cy="7.5" r="7" stroke="currentColor" strokeWidth="1.5"/><path d="M7.5 4 V8.2 M7.5 10.4 V10.6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>} />
      <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)' }}>What now</span>
        <SGear />
      </div>
      <div style={{ flex: 1, padding: '12px 20px 28px', display: 'flex', flexDirection: 'column', gap: 22, overflowY: 'auto' }}>
        <div style={{ fontFamily: 'var(--sans)', fontSize: 19, fontWeight: 600, lineHeight: 1.32, color: 'var(--ink)', marginTop: 2, textWrap: 'balance' }}>
          {over.toFixed(1)} kg over. You have a 2-hour window to try again, calmly.
        </div>

        {/* the re-cut window option */}
        <SCard pad={20}>
          <SEyebrow color="var(--accent)">Option · use the window</SEyebrow>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 16.5, fontWeight: 600, color: 'var(--ink)', marginTop: 10, textWrap: 'balance' }}>A short, safe re-cut.</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 1.5, color: 'var(--ink-2)', marginTop: 7, textWrap: 'pretty' }}>{over.toFixed(1)} kg is reachable with a light sweat and a bathroom break. We'll guide the next 2 hours and stop you well short of anything risky.</div>
          <button style={{ width: '100%', marginTop: 16, background: 'var(--ink)', color: 'var(--paper)', border: 'none', borderRadius: 'var(--radius-ctl)', minHeight: 50, fontFamily: 'var(--display)', fontSize: 13, letterSpacing: '0.14em', fontWeight: 600 }}>START GUIDED RE-CUT</button>
        </SCard>

        {/* alternative paths */}
        <div>
          <SSection>Or change the plan</SSection>
          <SGroup>
            <SRow label="Agree a catchweight" note="Fight on at the higher weight by mutual agreement." />
            <SRow label="Manage the fight" note="Postpone, cancel, or log how it played out." last />
          </SGroup>
        </div>

        <div style={{ fontFamily: 'var(--sans)', fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.5, textWrap: 'pretty', padding: '0 2px' }}>However this goes, it happens to the best in the sport. The data from this camp makes the next cut smarter.</div>
      </div>
      <STabBar active="home" /><SHome />
      {manage && <ManageFightSheet onClose={() => setManage(false)} />}
    </SPhone>
  );
}

// ══════════════════════════════════════════════════════════════════════════════
// FIGHT DAY, the bout itself. Warm intensity surface, countdown, and the single
// always-available action that matters tonight: log the result.
// ══════════════════════════════════════════════════════════════════════════════
function DashFightDay({ styleKey = 'balanced' }) {
  const [manage, setManage] = React.useState(false);
  return (
    <SPhone styleKey={styleKey} label="Fight Day">
      <SStatusBar />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', ...FW_VARS, background: FW_SURFACE }}>
        <window.DashBanner tone="accent" label="FIGHT DAY" meta="TONIGHT · 8PM" />
        <div style={{ padding: '10px 20px 4px', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
          <span />
          <SGear />
        </div>
        <div style={{ flex: 1, padding: '8px 22px 28px', display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontFamily: 'var(--title-font)', fontSize: 34, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--ink)', marginTop: 8, lineHeight: 1.05 }}>It's tonight.</div>

          {/* big countdown */}
          <div style={{ marginTop: 36, textAlign: 'center' }}>
            <div style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 96, lineHeight: 0.85, letterSpacing: '-0.03em', color: 'var(--ink)' }}>6:12</div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600, marginTop: 12 }}>Until walk-out</div>
          </div>

          <div style={{ marginTop: 36 }}>
            <SCard pad={20}>
              <div style={{ display: 'flex' }}>
                <SStat label="Weighed in" value="74.2" unit="kg" color="var(--t-green)" i={0} />
                <SStat label="Rebuilt to" value="77.4" unit="kg" i={1} />
                <SStat label="Walk-around" value="80.2" unit="kg" i={1} />
              </div>
            </SCard>
          </div>

          <div style={{ fontFamily: 'var(--serif)', fontSize: 16, fontStyle: 'italic', lineHeight: 1.5, color: 'var(--ink)', marginTop: 24, textWrap: 'pretty' }}>&ldquo;Cut's behind you and the tank's full. Go and do what the camp built.&rdquo;</div>
          <div style={{ fontFamily: 'var(--display)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600, marginTop: 10 }}>, Coach Donnelly</div>

          <div style={{ flex: 1 }} />
          <button onClick={() => setManage(true)} style={{ width: '100%', background: 'var(--ink)', color: 'var(--paper)', border: 'none', borderRadius: 'var(--radius-ctl)', minHeight: 56, fontFamily: 'var(--display)', fontSize: 14, letterSpacing: '0.14em', fontWeight: 600 }}>LOG THE RESULT</button>
        </div>
      </div>
      <STabBar active="home" /><SHome />
      {manage && <ManageFightSheet onClose={() => setManage(false)} />}
    </SPhone>
  );
}

// Demo artboard, Today (active camp) with Manage fight open, to show the control.
function DashManageFight({ styleKey = 'balanced' }) {
  return (
    <SPhone styleKey={styleKey} label="Manage Fight">
      <SStatusBar />
      <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)' }}>Today</span>
        <SGear />
      </div>
      <div style={{ flex: 1, padding: '12px 20px', opacity: 0.5 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
          <span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 96, lineHeight: 0.8, letterSpacing: '-0.035em', color: 'var(--ink)' }}>76.0</span>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.16em', color: 'var(--ink-3)', fontWeight: 600 }}>KG</span>
        </div>
      </div>
      <STabBar active="home" /><SHome />
      <ManageFightSheet onClose={() => {}} />
    </SPhone>
  );
}

Object.assign(window, {
  FightStatusChip, ManageFightSheet, DashBasicPlan, DashRebuild, DashMissed, DashFightDay, DashManageFight,
});
