// fc-more.jsx, the rest of the app: lifecycle gaps (no-camp, recovery, paused),
// weekly check-in, plan refinement, edit plan, profile, archive, learn.
// Shared kit only, native iOS patterns. Balanced styleKey.

// ── NO CAMP · Maintenance Today (§16) ────────────────────────────────────────
// `state`: 'in' (fight-ready range) | 'high' (drifting → anti-cycle nudge).
function TodayNoCamp({ styleKey = 'balanced', state = 'in' }) {
  const high = state === 'high';
  const current = high ? 87.5 : 80.6;
  const bodyTarget = 74.4, division = (window.FC && window.FC.division) || 'Lightweight';
  return (
    <Phone styleKey={styleKey} label="No Camp">
      <StatusBar />
      <window.DashBanner tone="muted" label="MAINTENANCE" meta="NO FIGHT BOOKED" />
      <LargeTitle title="Today" trailing={<GearButton />} />
      <div style={{ flex: 1, padding: '2px 20px 28px', display: 'flex', flexDirection: 'column', gap: 18 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginTop: 4 }}>
            <span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 104, lineHeight: 0.8, letterSpacing: '-0.035em', color: 'var(--ink)' }}>{current.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: high ? 'var(--mustard-deep)' : 'var(--ink-3)', fontWeight: 700, marginTop: 14 }}>{high ? 'Maintenance · drifting high' : 'Maintenance · fight-ready'}</div>
        </div>

        <window.MaintenanceCard current={current} bodyTarget={bodyTarget} division={division} width={331} />
        {high && <window.AntiCycleNudge current={current} bodyTarget={bodyTarget} />}
        <window.ReadinessCard current={current} bodyTarget={bodyTarget} division={division} width={331} />

        <div style={{ background: 'var(--paper)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', border: 'var(--card-border)', padding: '20px' }}>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 16, fontWeight: 700, color: 'var(--ink)' }}>Booked a fight?</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 6, textWrap: 'pretty' }}>Start a camp and we’ll map the cut back to {division}, paced to whatever date you set.</div>
          <button style={{ width: '100%', marginTop: 16, background: 'var(--ink)', color: 'var(--paper)', border: 'none', borderRadius: 'var(--radius-ctl)', minHeight: 52, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
            <span style={{ fontFamily: 'var(--display)', fontSize: 14, letterSpacing: '0.14em', fontWeight: 600 }}>START A CAMP</span>
          </button>
        </div>

        <div>
          <SectionHeader>Maintenance settings</SectionHeader>
          <GroupedList>
            <Row label="Weigh-in cadence" value="Daily" note="With no fight booked you can drop to weekly, less noise, less scale obsession. Switch back anytime." />
            <Row label="Walk-around target" value={`${(bodyTarget * 1.08).toFixed(1)}–${(bodyTarget * 1.15).toFixed(1)} kg`} last />
          </GroupedList>
        </div>
      </div>
      <TabBar active="home" /><HomeIndicator />
    </Phone>
  );
}

// ── RECOVERY · post-fight Today ──────────────────────────────────────────────
function TodayRecovery({ styleKey = 'balanced' }) {
  const steps = [
    { label: 'TODAY', title: 'Rehydrate fully', detail: 'Water + electrolytes back to baseline', state: 'now' },
    { label: 'DAYS 1–3', title: 'Refeed', detail: 'Carbs and protein, no restriction', state: 'todo' },
    { label: 'THIS WK', title: 'Light movement', detail: 'Flush, mobility, easy sessions', state: 'todo' },
    { label: 'NEXT', title: 'Reflect on the cut', detail: 'What to repeat, what to change', state: 'goal' },
  ];
  return (
    <Phone styleKey={styleKey} label="Recovery">
      <StatusBar />
      <window.DashBanner tone="green" label="RECOVERY" meta="POST-FIGHT" />
      <LargeTitle title="Recover" trailing={<GearButton />} />
      <div style={{ flex: 1, padding: '2px 20px 28px', display: 'flex', flexDirection: 'column', gap: 24 }}>
        <div style={{ fontFamily: 'var(--sans)', fontSize: 20, fontWeight: 600, lineHeight: 1.3, color: 'var(--ink)', marginTop: 4, textWrap: 'balance' }}>
          Fight's done. Now rebuild properly before you think about the next one.
        </div>
        <div>
          <SectionHeader>The next week</SectionHeader>
          <Card pad="6px 18px"><StepList steps={steps} /></Card>
        </div>
        <div>
          <SectionHeader>This camp</SectionHeader>
          <Card pad={20}>
            <div style={{ display: 'flex' }}>
              <Stat label="Cut" value="3.6" unit="kg" i={0} />
              <Stat label="Over" value="7 wks" i={1} />
              <Stat label="Result" value="Made it" color="var(--t-green)" i={1} />
            </div>
          </Card>
        </div>
      </div>
      <TabBar active="home" /><HomeIndicator />
    </Phone>
  );
}

// ── PAUSED · fight postponed ─────────────────────────────────────────────────
function CampPaused({ styleKey = 'balanced' }) {
  return (
    <Phone styleKey={styleKey} label="Camp Paused">
      <StatusBar />
      <window.DashBanner tone="amber" label="CAMP PAUSED" meta="PLAN HELD" />
      <LargeTitle title="Today" trailing={<GearButton />} />
      <div style={{ flex: 1, padding: '2px 20px 28px', display: 'flex', flexDirection: 'column', gap: 24 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginTop: 4 }}>
            <span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 112, lineHeight: 0.8, letterSpacing: '-0.035em', color: 'var(--ink)' }}>75.6</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(--t-amber)', fontWeight: 700, marginTop: 14 }}>Projection paused</div>
        </div>
        <div style={{ background: 'var(--paper)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', border: 'var(--card-border)', padding: '22px 20px' }}>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 19, fontWeight: 600, lineHeight: 1.3, color: 'var(--ink)', textWrap: 'balance' }}>Fight postponed.</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 14, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 8, textWrap: 'pretty' }}>We've held your plan and kept logging. Set a new date and the projection picks up where it left off.</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 18 }}>
            <button style={{ width: '100%', background: 'var(--ink)', color: 'var(--paper)', border: 'none', borderRadius: 'var(--radius-ctl)', minHeight: 52, fontFamily: 'var(--display)', fontSize: 14, letterSpacing: '0.14em', fontWeight: 600 }}>SET NEW DATE</button>
            <button style={{ width: '100%', background: 'transparent', color: 'var(--ink-3)', border: 'none', minHeight: 44, fontFamily: 'var(--sans)', fontSize: 15, fontWeight: 500 }}>End this camp</button>
          </div>
        </div>
      </div>
      <TabBar active="home" /><HomeIndicator />
    </Phone>
  );
}

// ── WEEKLY CHECK-IN · the Weeks view ─────────────────────────────────────────
function WeeklyCheckin({ styleKey = 'balanced' }) {
  const weeks = [
    ['Week 1', '7/7', '−0.5', 'On pace'], ['Week 2', '7/7', '−0.6', 'On pace'],
    ['Week 3', '6/7', '−0.3', 'Behind'], ['Week 4', '7/7', '−0.5', 'On pace'],
  ];
  return (
    <Phone styleKey={styleKey} label="Weekly Check-in">
      <StatusBar />
      <LargeTitle title="Weeks" trailing={<GearButton />} />
      <div style={{ flex: 1, padding: '2px 20px 28px', display: 'flex', flexDirection: 'column', gap: 24 }}>
        <div>
          <SectionHeader>This week · 4 of 7</SectionHeader>
          <Card pad={20}>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 19, fontWeight: 600, color: 'var(--ink)', textWrap: 'balance' }}>On pace. Target recalculated for next week.</div>
            <div style={{ display: 'flex', marginTop: 18, paddingTop: 18, borderTop: '1px solid var(--rule)' }}>
              <Stat label="Check-ins" value="4/7" i={0} />
              <Stat label="Lost" value="0.5" unit="kg" color="var(--t-green)" i={1} />
              <Stat label="Avg/day" value="0.07" unit="kg" i={1} />
            </div>
            <div style={{ display: 'flex', gap: 9, marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--rule)' }}>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--accent)', flexShrink: 0, marginTop: 5 }} />
              <span style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.5, textWrap: 'pretty' }}>You're in your luteal week, so you're holding about <strong style={{ fontWeight: 600 }}>+0.5 kg</strong> of water. Next week's target already accounts for it. The scale isn't the full story right now.</span>
            </div>
          </Card>
        </div>
        <div>
          <SectionHeader trailing={<TextButton>See all</TextButton>}>By week</SectionHeader>
          <GroupedList>
            {weeks.map((w, i) => (
              <Row key={w[0]} last={i === weeks.length - 1} label={w[0]}
                control={
                  <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                    <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-3)', fontWeight: 600 }}>{w[1]}</span>
                    <span style={{ fontFamily: 'var(--sans)', fontSize: 14, fontWeight: 600, color: w[3] === 'Behind' ? 'var(--t-amber)' : 'var(--t-green)', minWidth: 56, textAlign: 'right' }}>{w[2]} kg</span>
                    <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>
                } />
            ))}
          </GroupedList>
        </div>
      </div>
      <TabBar active="progress" /><HomeIndicator />
    </Phone>
  );
}

// ── SHARPEN YOUR PLAN · progressive refinement ───────────────────────────────
function SharpenPlan({ styleKey = 'balanced' }) {
  const items = [['Training load', 'Done', true], ['Refeed days', 'Done', true], ['Water-cut capacity', 'Add', false], ['Past cut history', 'Add', false], ['Sleep & stress', 'Add', false]];
  return (
    <Phone styleKey={styleKey} label="Sharpen Plan">
      <StatusBar />
      <CompactNav title="Sharpen your plan" trailing={<span style={{ width: 40 }} />} />
      <div style={{ flex: 1, padding: '6px 20px 28px', display: 'flex', flexDirection: 'column', gap: 22 }}>
        <div style={{ background: 'var(--paper)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', border: 'var(--card-border)', padding: '20px' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
            <span style={{ fontFamily: 'var(--display)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 600 }}>Plan accuracy</span>
            <span style={{ fontFamily: 'var(--num)', fontSize: 24, fontWeight: 300, color: 'var(--ink)' }}>60%</span>
          </div>
          <div style={{ marginTop: 12 }}><ProgressBar pct={0.6} tone="green" /></div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.5, marginTop: 12, textWrap: 'pretty' }}>Add three more details and your projection tightens from a range to a confident line.</div>
        </div>
        <div>
          <SectionHeader>Add detail</SectionHeader>
          <GroupedList>
            {items.map((it, i) => (
              <Row key={it[0]} last={i === items.length - 1} label={it[0]} chevron={!it[2]}
                value={it[2] ? it[1] : undefined} valueColor="var(--t-green)"
                control={it[2] ? <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--t-green)', fontWeight: 600 }}><svg width="13" height="10" viewBox="0 0 13 10" fill="none"><path d="M1 5 L4.5 8.5 L12 1" stroke="var(--t-green)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>Done</span> : undefined} />
            ))}
          </GroupedList>
        </div>
      </div>
      <HomeIndicator />
    </Phone>
  );
}

// ── EDIT PLAN ────────────────────────────────────────────────────────────────
function EditPlan({ styleKey = 'balanced' }) {
  return (
    <Phone styleKey={styleKey} label="Edit Plan">
      <StatusBar />
      <CompactNav title="Edit plan" trailing={<NavAction>Save</NavAction>} />
      <div style={{ flex: 1, padding: '6px 20px 28px', display: 'flex', flexDirection: 'column', gap: 22 }}>
        <div>
          <SectionHeader>The fight</SectionHeader>
          <GroupedList>
            <Row label="Division" value={(window.FC && window.FC.division) || 'Lightweight'} />
            <Row label="Weigh-in date" value="Sat 11 Jan" />
            <Row label="Cut rate" value="0.5% / wk" last />
          </GroupedList>
        </div>
        <div>
          <SectionHeader>Allowances</SectionHeader>
          <GroupedList>
            <Row label="Gear allowance" value="+0.5 kg" />
            <Row label="Rehydration cap" value="1%" last />
          </GroupedList>
        </div>
        <div style={{ background: 'var(--accent-soft)', borderRadius: 'var(--radius)', padding: '16px 18px' }}>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 1.5, color: 'var(--ink)', textWrap: 'pretty' }}>Changing any of these recalculates your targets, trend line and weekly pace.</div>
        </div>
      </div>
      <HomeIndicator />
    </Phone>
  );
}

// ── MORE / PROFILE ───────────────────────────────────────────────────────────
function ProfileMore({ styleKey = 'balanced' }) {
  return (
    <Phone styleKey={styleKey} label="More">
      <StatusBar />
      <LargeTitle title="More" trailing={<GearButton />} />
      <div style={{ flex: 1, padding: '2px 20px 28px', display: 'flex', flexDirection: 'column', gap: 22 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, background: 'var(--paper)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', border: 'var(--card-border)', padding: '18px 20px' }}>
          <window.CoachMark sport={(window.FC && window.FC.sport) || 'boxing'} size={48} />
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 17, fontWeight: 600, color: 'var(--ink)' }}>Alex Mercer</div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 13, color: 'var(--ink-3)', marginTop: 2 }}>{`${(window.FC && window.FC.sport) || 'MMA'} · ${(window.FC && window.FC.division) || 'Lightweight'}`}</div>
          </div>
          <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>
        <window.AvatarList gap={8}>
          <window.AvatarRow mode="nav" label="Past camps" sub="3 archived" icon={<window.UIIcon name="archive" size={24} color="currentColor" />} />
          <window.AvatarRow mode="nav" label="Learn" sub="Cut science, cycle, recovery" icon={<window.UIIcon name="learn" size={24} color="currentColor" />} />
          <window.AvatarRow mode="nav" label="Notifications" icon={<window.UIIcon name="bell" size={24} color="currentColor" />} />
          <window.AvatarRow mode="nav" label="Account & units" sub="Metric (kg)" icon={<window.UIIcon name="gear" size={24} color="currentColor" />} />
          <window.AvatarRow mode="nav" label="Help & feedback" icon={<window.UIIcon name="info" size={24} color="currentColor" />} />
        </window.AvatarList>
      </div>
      <TabBar active="more" /><HomeIndicator />
    </Phone>
  );
}

// ── PAST CAMPS · archive ─────────────────────────────────────────────────────
function PastCamps({ styleKey = 'balanced' }) {
  const sp = (window.FC && window.FC.sport) || 'MMA';
  const dv = (window.FC && window.FC.division) || 'Lightweight';
  const S = window.FC_SPORTS && window.FC_SPORTS[sp];
  const list = (S && S.divisions && S.divisions.men) || [];
  const idx = list.findIndex(d => d[0] === dv);
  const lighter = idx > 0 ? list[idx - 1][0] : dv;
  const camps = [
    [`${dv} · ${sp}`, '14 Sep 2025', 'Made · Won', 'var(--t-green)'],
    [`${dv} · ${sp}`, '02 May 2025', 'Made · Lost', 'var(--ink-2)'],
    [`${lighter} · ${sp}`, '18 Jan 2025', 'Missed', 'var(--t-red)'],
  ];
  return (
    <Phone styleKey={styleKey} label="Past Camps">
      <StatusBar />
      <CompactNav title="Past camps" trailing={<span style={{ width: 40 }} />} />
      <div style={{ flex: 1, padding: '6px 20px 28px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {camps.map((c, i) => (
          <div key={i} style={{ background: 'var(--paper)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', border: 'var(--card-border)', padding: '16px 18px', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'var(--sans)', fontSize: 16, fontWeight: 600, color: 'var(--ink)' }}>{c[0]}</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.06em', color: 'var(--ink-3)', fontWeight: 500, marginTop: 4 }}>{c[1].toUpperCase()}</div>
            </div>
            <span style={{ fontFamily: 'var(--display)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700, color: c[3] }}>{c[2]}</span>
            <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>
        ))}
      </div>
      <HomeIndicator />
    </Phone>
  );
}

// ── LEARN ────────────────────────────────────────────────────────────────────
function Learn({ styleKey = 'balanced' }) {
  const groups = [
    ['Cycle & health', [
      ['Why the scale lies in your luteal phase', 'Cycle · 4 min', false],
      ['Losing your period isn’t a flex', 'RED-S · 6 min', true],
      ['On birth control? Here’s what changes', 'Cycle · 4 min', false],
      ['Timing your cut around your cycle', 'Strategy · 5 min', false],
    ]],
    ['Fight week', [
      ['Water loading, explained', 'Fight week · 5 min', false],
      ['Rehydrate without bloating', 'Recovery · 5 min', false],
    ]],
    ['Tracking', [
      ['Why the trend beats the scale', 'Tracking · 4 min', false],
      ['Weigh in at the same time, every day', 'Tracking · 3 min', false],
    ]],
    ['Between camps', [
      ['What your walk-around weight says about your division', 'Maintenance · 5 min', false],
      ['Why ballooning between camps backfires', 'Maintenance · 4 min', true],
    ]],
  ];
  return (
    <Phone styleKey={styleKey} label="Learn">
      <StatusBar />
      <LargeTitle title="Learn" trailing={<GearButton />} />
      <div style={{ flex: 1, padding: '2px 20px 28px', display: 'flex', flexDirection: 'column', gap: 22, overflowY: 'auto' }} className="scroll">
        {groups.map(([title, arts]) => (
          <div key={title}>
            <SectionHeader>{title}</SectionHeader>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {arts.map((a, i) => {
                const health = a[2];
                return (
                  <div key={i} style={{ background: 'var(--paper)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', border: health ? '1px solid var(--mustard-deep)' : 'var(--card-border)', overflow: 'hidden' }}>
                    <div style={{ height: 84, background: health ? 'var(--t-amber-soft)' : i % 2 ? 'var(--ink)' : 'var(--accent-soft)', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', padding: 14 }}>
                      <span style={{ fontFamily: 'var(--display)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 700, color: health ? 'var(--mustard-deep)' : i % 2 ? 'rgba(255,255,255,0.7)' : 'var(--accent)' }}>{a[1]}</span>
                      {health && <svg width="16" height="16" viewBox="0 0 20 20" fill="none"><path d="M10 2 L18.5 17 H1.5 Z" stroke="var(--mustard-deep)" strokeWidth="1.6" strokeLinejoin="round"/><line x1="10" y1="8" x2="10" y2="12.5" stroke="var(--mustard-deep)" strokeWidth="1.6" strokeLinecap="round"/><circle cx="10" cy="15" r="0.9" fill="var(--mustard-deep)"/></svg>}
                    </div>
                    <div style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
                      <span style={{ fontFamily: 'var(--sans)', fontSize: 15.5, fontWeight: 600, color: 'var(--ink)', textWrap: 'balance' }}>{a[0]}</span>
                      <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>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>
      <TabBar active="more" /><HomeIndicator />
    </Phone>
  );
}

// ── CHANGE YOUR PLAN · triggered re-plan flow (§9.2) ─────────────────────────
// Launched when a re-plan trigger fires: (A) projected scale weight misses the
// limit (confirmed 2×), or (B) rate > 1%/wk. Calm, never alarmist. Presents the
// three safe ways through (same outs as the feasibility card) plus keep-current.
function ChangePlan({ styleKey = 'balanced', trigger = 'projection' }) {
  const FC = window.FC;
  const safety = trigger === 'safety';
  const eyebrow = safety ? 'Cutting faster than safe' : 'On pace to miss weight';
  const head = safety
    ? 'Your rate has crept past the safe ceiling.'
    : 'At this rate, you won’t make the limit by fight day.';
  const body = safety
    ? 'Over 1% of bodyweight a week. That’s where muscle and power go, even when the scale looks fine. Let’s ease it back before fight week.'
    : 'Two trend reads agree, not one noisy day. Still time to fix it. Here are the safe ways through.';
  const options = safety
    ? [['Add food back', 'Slow the cut to 1%/wk', 'Recommended'], ['Move up a division', 'Keep the fight, cut less', null], ['Talk it through', 'Open your AI corner', null]]
    : [['Push the fight date', 'Buy the weeks to do it safely', null], ['Move up a division', 'Less to cut, same fight', 'Recommended'], ['Hold at 1%/wk', 'Cut the max safe rate, reassess weekly', null]];
  return (
    <Phone styleKey={styleKey} label="Change Plan">
      <StatusBar />
      <CompactNav title="Change your plan" trailing={<span style={{ width: 40 }} />} />
      <div style={{ flex: 1, padding: '6px 20px 28px', display: 'flex', flexDirection: 'column', gap: 20 }}>
        <div style={{ background: 'rgba(176,67,47,0.06)', border: '1px solid color-mix(in srgb, var(--t-red) 30%, transparent)', borderRadius: 'var(--radius)', padding: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--t-red)', flexShrink: 0 }} />
            <span style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--t-red)', fontWeight: 700 }}>{eyebrow}</span>
          </div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 18, fontWeight: 700, lineHeight: 1.3, color: 'var(--ink)', marginTop: 11, textWrap: 'balance' }}>{head}</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 8, textWrap: 'pretty' }}>{body}</div>
        </div>

        <div>
          <SectionHeader>Your options</SectionHeader>
          <window.AvatarList gap={8}>
            {options.map(([t, d, tag], i) => (
              <button key={t} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '13px 15px', background: 'var(--paper)', border: `1.5px solid ${tag ? 'var(--accent)' : 'var(--rule)'}`, borderRadius: 14, width: '100%', textAlign: 'left' }}>
                <span style={{ flex: 1 }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ fontFamily: 'var(--sans)', fontSize: 16, fontWeight: 600, color: 'var(--ink)' }}>{t}</span>
                    {tag && <span style={{ fontFamily: 'var(--mono)', fontSize: 8.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 700, border: '1px solid color-mix(in srgb, var(--accent) 35%, transparent)', borderRadius: 100, padding: '2px 7px' }}>{tag}</span>}
                  </span>
                  <span style={{ display: 'block', fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-3)', marginTop: 3 }}>{d}</span>
                </span>
                <svg width="7" height="12" viewBox="0 0 7 12" fill="none" style={{ flexShrink: 0 }}><path d="M1 1 L6 6 L1 11" stroke="var(--rule-2)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </button>
            ))}
          </window.AvatarList>
        </div>

        <button style={{ width: '100%', background: 'transparent', color: 'var(--ink-3)', border: 'none', minHeight: 44, fontFamily: 'var(--sans)', fontSize: 14.5, fontWeight: 500 }}>Keep my current plan</button>
        <div style={{ fontFamily: 'var(--sans)', fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.5, textWrap: 'pretty', textAlign: 'center', padding: '0 8px' }}>Nothing changes until you choose. We’ll keep tracking either way.</div>
      </div>
      <HomeIndicator />
    </Phone>
  );
}

Object.assign(window, { TodayNoCamp, TodayRecovery, CampPaused, WeeklyCheckin, SharpenPlan, EditPlan, ProfileMore, PastCamps, Learn, ChangePlan });
