// Forge in-app screen mocks. These mirror the actual app UI from the codebase
// (Home / Today / Exercise detail / Food / Measure) so the marketing site
// shows what the product really looks like, not generic placeholders.
//
// All screens are 390x844 (iPhone 14/15 logical points). Wrap each in IOSDevice.

// Real theme tokens from src/theme/colors.ts (dark theme)
const ORANGE = '#E8640C';        // colors.primary
const INK = '#111010';            // colors.background
const CARD = '#1C1B1A';           // colors.card
const TEXT = '#F2EDEA';           // colors.text
const TEXT_SECONDARY = '#9E9690'; // colors.textSecondary
const TEXT_MUTED = '#655F5C';     // colors.textMuted
const BORDER = 'rgba(255,255,255,0.09)';
const BORDER_STRONG = 'rgba(255,255,255,0.16)';

const RED = '#F87171';
const GREEN = '#4ADE80';
const AMBER = '#FBBF24';
const PURPLE = '#A78BFA';
const TEAL = '#2DD4BF';

// Real muscle accents from src/theme/colors.ts
const M_CHEST = '#FB923C';        // orange-400
const M_SHOULDERS = '#A78BFA';    // violet-400
const M_TRICEPS = '#22D3EE';      // cyan-400
const M_QUADS = '#FBBF24';        // amber-400

const screenStyles = {
  screen: { background: INK, height: '100%', overflow: 'hidden', fontFamily: '-apple-system, "SF Pro", system-ui, sans-serif', color: TEXT },
  scroll: { padding: '8px 16px 100px', overflowY: 'auto', height: '100%', boxSizing: 'border-box' },
  header: { padding: '8px 0 12px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 },
  title: { fontSize: 28, fontWeight: 700, color: TEXT, letterSpacing: '-0.02em', margin: 0 },
  subtitle: { fontSize: 13, color: TEXT_SECONDARY, marginTop: 2 },
  card: { background: CARD, border: `0.5px solid ${BORDER}`, borderRadius: 14, padding: 14, marginBottom: 12 },
  sectionLabel: { fontSize: 11, fontWeight: 600, color: TEXT_MUTED, letterSpacing: '0.08em', textTransform: 'uppercase', margin: '20px 4px 10px' },
  pillBtn: { display: 'inline-flex', alignItems: 'center', gap: 4, padding: '5px 9px', borderRadius: 999, fontSize: 11, fontWeight: 600, color: ORANGE, background: 'rgba(232,100,12,0.10)' },
};

// ── Home screen (real Home / index.tsx) ─────────────────────
function HomeScreen() {
  const s = screenStyles;
  return (
    <div style={s.screen}>
      <div style={s.scroll}>
        <div style={s.header}>
          <div style={{ flex: 1 }}>
            <h1 style={s.title}>Home</h1>
            <div style={s.subtitle}>Monday — push day</div>
          </div>
          <div style={s.pillBtn}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={ORANGE} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Export
          </div>
        </div>

        {/* Phase pills with trend icons (Cut=down, Maintain=flat, Bulk=up) */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginTop: 8, marginBottom: 14 }}>
          {[
            { label: 'Cut', tint: ORANGE, active: true, icon: 'down' },
            { label: 'Maintain', tint: GREEN, active: false, icon: 'flat' },
            { label: 'Bulk', tint: AMBER, active: false, icon: 'up' },
          ].map(({ label, tint, active, icon }) => {
            const stroke = active ? '#fff' : tint;
            return (
              <div key={label} style={{
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                padding: '10px 0', borderRadius: 999,
                background: active ? tint : CARD,
                color: active ? '#fff' : TEXT,
                fontSize: 13, fontWeight: 500,
                border: active ? 'none' : `0.5px solid ${BORDER_STRONG}`,
              }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  {icon === 'down' && <><polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/></>}
                  {icon === 'flat' && <line x1="5" y1="12" x2="19" y2="12"/>}
                  {icon === 'up' && <><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></>}
                </svg>
                {label}
              </div>
            );
          })}
        </div>

        {/* Big orange session card (the dominant CTA) */}
        <div style={{ background: ORANGE, borderRadius: 14, marginTop: 14, marginBottom: 12, padding: '20px 18px', display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1.2, color: 'rgba(255,255,255,0.55)' }}>MONDAY</div>
            <div style={{ fontSize: 22, fontWeight: 700, color: '#fff', marginTop: 3 }}>Push day — heavy</div>
            <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 1 }}>12 / 30 sets done</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, background: 'rgba(255,255,255,0.12)', padding: '9px 14px', borderRadius: 999 }}>
            <div style={{ color: '#fff', fontSize: 13, fontWeight: 700 }}>Resume</div>
            <div style={{ color: '#fff', fontSize: 15, fontWeight: 700 }}>→</div>
          </div>
        </div>

        {/* Today's nutrition — macro rings with values inside + "/ goal" labels */}
        <div style={s.card}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: TEXT }}>Today's nutrition</div>
            <div style={{ fontSize: 12, fontWeight: 600, color: ORANGE }}>Food →</div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            {[
              { label: 'Kcal',    val: '1.8k', goal: '2.5k', pct: 0.74, color: ORANGE },
              { label: 'Protein', val: '162',  goal: '180',  pct: 0.90, color: PURPLE },
              { label: 'Fat',     val: '64',   goal: '80',   pct: 0.80, color: AMBER  },
              { label: 'Carbs',   val: '168',  goal: '250',  pct: 0.67, color: TEAL   },
            ].map((m) => (
              <MacroRing key={m.label} {...m} />
            ))}
          </div>
        </div>

        {/* Goal progress card — weight + body fat % bars */}
        <div style={s.card}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: TEXT }}>Goal progress</div>
            <div style={{ fontSize: 12, fontWeight: 600, color: ORANGE }}>Measure →</div>
          </div>
          {[
            { label: 'Weight',   current: '188.4 lb', goal: '185 lb', pct: 0.7,  remain: '3.4 lb to go' },
            { label: 'Body fat', current: '11.2%',    goal: '8%',     pct: 0.62, remain: '3.2% to go'   },
          ].map((g) => (
            <div key={g.label} style={{ marginBottom: 10 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
                <span style={{ fontSize: 13, fontWeight: 500, color: TEXT }}>{g.label}</span>
                <span style={{ fontSize: 12, color: TEXT_SECONDARY, fontVariant: 'tabular-nums' }}>
                  <span>{g.current}</span>
                  <span style={{ color: TEXT_MUTED, margin: '0 5px' }}>→</span>
                  <span>{g.goal}</span>
                </span>
              </div>
              <div style={{ height: 6, background: 'rgba(255,255,255,0.06)', borderRadius: 3, overflow: 'hidden' }}>
                <div style={{ width: `${g.pct * 100}%`, height: '100%', background: ORANGE }} />
              </div>
              <div style={{ fontSize: 11, color: TEXT_MUTED, marginTop: 4, fontVariant: 'tabular-nums' }}>{g.remain}</div>
            </div>
          ))}
        </div>

        {/* Weekly split */}
        <div style={s.sectionLabel}>Weekly split</div>
        <div style={{ background: CARD, borderRadius: 14, border: `0.5px solid ${BORDER}`, padding: '14px 0', display: 'flex', justifyContent: 'space-around', marginBottom: 12 }}>
          {['M','T','W','T','F','S','S'].map((d, i) => {
            const status = ['done','done','done','today','plan','plan','rest'][i];
            const dotMap = { done: { bg: GREEN, br: GREEN }, today: { bg: ORANGE, br: ORANGE }, plan: { bg: 'transparent', br: BORDER_STRONG }, rest: { bg: 'transparent', br: BORDER } };
            const isToday = status === 'today';
            const dot = dotMap[status];
            return (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                <div style={{ width: isToday ? 12 : 10, height: isToday ? 12 : 10, borderRadius: 999, background: dot.bg, border: `1.5px solid ${dot.br}` }} />
                <div style={{ fontSize: 11, fontWeight: 500, color: isToday ? ORANGE : TEXT_SECONDARY }}>{d}</div>
              </div>
            );
          })}
        </div>

        {/* Cardio */}
        <div style={s.sectionLabel}>Cardio</div>
        <div style={s.card}>
          <div style={{ fontSize: 14, fontWeight: 600, color: TEXT }}>Incline treadmill walk</div>
          <div style={{ fontSize: 12, color: TEXT_SECONDARY, marginTop: 2 }}>12° / 3 mph / 20–30 min</div>
          <div style={{ height: 4, background: 'rgba(255,255,255,0.06)', borderRadius: 2, overflow: 'hidden', marginTop: 12 }}>
            <div style={{ width: '50%', height: '100%', background: ORANGE }} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }}>
            <div style={{ fontSize: 12, color: TEXT_SECONDARY, fontVariant: 'tabular-nums' }}>2 / 4 sessions this week</div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '7px 12px', borderRadius: 999, background: ORANGE }}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
              <span style={{ color: '#fff', fontSize: 12, fontWeight: 600 }}>Log</span>
            </div>
          </div>
        </div>
      </div>
      <TabBar active="home" />
    </div>
  );
}

function MacroRing({ label, val, goal, pct, color }) {
  // Real app: 56px ring, 5px stroke, value rendered inside in ring color
  const SIZE = 56, STROKE = 5;
  const r = (SIZE - STROKE) / 2;
  const c = 2 * Math.PI * r;
  const filled = c * pct;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, flex: 1 }}>
      <div style={{ position: 'relative', width: SIZE, height: SIZE }}>
        <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`} style={{ display: 'block' }}>
          <circle cx={SIZE/2} cy={SIZE/2} r={r} stroke="rgba(255,255,255,0.10)" strokeWidth={STROKE} fill="none" />
          <circle cx={SIZE/2} cy={SIZE/2} r={r} stroke={color} strokeWidth={STROKE} fill="none"
            strokeDasharray={`${filled} ${c}`} strokeLinecap="round"
            transform={`rotate(-90 ${SIZE/2} ${SIZE/2})`} />
        </svg>
        <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
          <div style={{ fontSize: 11, fontWeight: 700, color, fontVariant: 'tabular-nums' }}>{val}</div>
        </div>
      </div>
      <div style={{ fontSize: 11, fontWeight: 600, color: TEXT_SECONDARY }}>{label}</div>
      <div style={{ fontSize: 10, color: TEXT_MUTED, fontVariant: 'tabular-nums', marginTop: -2 }}>/ {goal}</div>
    </div>
  );
}

// ── Today (Session) screen ──────────────────────────────────
function SessionScreen() {
  const s = screenStyles;
  const exercises = [
    { group: 'CHEST', accent: M_CHEST, items: [
      { name: 'Flat barbell bench press', meta: '4 sets · 6–10', last: '185 lb × 8', done: 4, total: 4 },
      { name: 'Incline dumbbell press', meta: '3 sets · 10–12', last: '70 lb × 10', done: 2, total: 3 },
      { name: 'Machine chest fly', meta: '2 sets · 12–15', last: '110 lb × 14', done: 0, total: 2 },
    ]},
    { group: 'SHOULDERS', accent: M_SHOULDERS, items: [
      { name: 'Dumbbell lateral raise', meta: '5 sets · 12–15', last: '20 lb × 13', done: 0, total: 5 },
      { name: 'Cable face pull', meta: '4 sets · 15', last: '40 lb × 15', done: 0, total: 4 },
    ]},
  ];
  return (
    <div style={s.screen}>
      <div style={s.scroll}>
        <div style={s.header}>
          <div>
            <h1 style={s.title}>Push day — heavy</h1>
            <div style={s.subtitle}>Monday · 9 exercises</div>
          </div>
        </div>
        {exercises.map((g, gi) => (
          <div key={g.group}>
            <div style={{ ...s.sectionLabel, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span>{g.group}</span>
              {g.group === 'SHOULDERS' && (
                <span style={{ fontSize: 9, fontWeight: 700, color: PURPLE, background: 'rgba(167,139,250,0.13)', padding: '3px 7px', borderRadius: 999, letterSpacing: '0.06em' }}>PRIORITY</span>
              )}
            </div>
            {g.items.map((ex, i) => (
              <div key={i} style={{ background: CARD, border: `0.5px solid ${BORDER}`, borderRadius: 14, display: 'flex', alignItems: 'stretch', overflow: 'hidden', marginBottom: 8 }}>
                <div style={{ width: 3, background: g.accent, margin: '10px 0 10px 10px', borderRadius: 2 }} />
                <div style={{ flex: 1, padding: '13px 16px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <div style={{ fontSize: 14, fontWeight: 600, color: TEXT, flex: 1, paddingRight: 12 }}>{ex.name}</div>
                    <div style={{ fontSize: 12, fontWeight: 600, color: ex.done === ex.total && ex.total > 0 ? GREEN : TEXT_SECONDARY, fontVariant: 'tabular-nums' }}>{ex.done}/{ex.total}</div>
                  </div>
                  <div style={{ fontSize: 12, color: TEXT_SECONDARY, marginTop: 2 }}>{ex.meta}</div>
                  <div style={{ fontSize: 12, color: ORANGE, fontWeight: 500, marginTop: 2 }}>Last: {ex.last}</div>
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>
      <TabBar active="today" />
    </div>
  );
}

// ── Exercise detail ──────────────────────────────────────────
function ExerciseDetailScreen() {
  const s = screenStyles;
  const sets = [
    { n: 1, w: 185, r: 8, done: true },
    { n: 2, w: 185, r: 8, done: true },
    { n: 3, w: 195, r: 6, done: true },
    { n: 4, w: 195, r: 6, done: false },
  ];
  return (
    <div style={s.screen}>
      <div style={{ ...s.scroll, padding: '8px 16px 100px' }}>
        {/* Header bar (chevron back, title, edit) */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0 12px' }}>
          <div style={{ width: 32, height: 32, display: 'grid', placeItems: 'center' }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={TEXT} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 18, fontWeight: 700, color: TEXT, letterSpacing: '-0.01em' }}>Flat barbell bench press</div>
            <div style={{ fontSize: 12, color: TEXT_SECONDARY, marginTop: 2 }}>4 sets · 6–10 reps</div>
          </div>
          <div style={{ width: 32, height: 32, display: 'grid', placeItems: 'center' }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={TEXT} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>
          </div>
        </div>

        {/* Beat this card */}
        <div style={{ ...s.card, display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 38, height: 38, borderRadius: 10, background: 'rgba(232,100,12,0.15)', display: 'grid', placeItems: 'center' }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={ORANGE} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: TEXT_MUTED, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Beat this</div>
            <div style={{ fontSize: 18, fontWeight: 600, color: TEXT, marginTop: 2 }}>185 lb × 8</div>
            <div style={{ fontSize: 11, color: ORANGE, marginTop: 2, fontWeight: 500 }}>Tap to see history →</div>
          </div>
          {/* sparkline */}
          <svg width="64" height="32" viewBox="0 0 64 32">
            <polyline fill="none" stroke={ORANGE} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
              points="2,24 12,20 22,22 32,16 42,14 52,8 62,10" />
          </svg>
        </div>

        {/* Sets table header */}
        <div style={{ ...s.sectionLabel, marginTop: 14 }}>Sets</div>
        <div style={{ display: 'grid', gridTemplateColumns: '32px 1fr 1fr 32px', padding: '0 14px 8px', fontSize: 11, color: TEXT_MUTED, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase' }}>
          <div>Set</div><div>Weight (lb)</div><div>Reps</div><div></div>
        </div>

        {/* Set logging table */}
        <div style={{ background: CARD, border: `0.5px solid ${BORDER}`, borderRadius: 14, overflow: 'hidden', marginBottom: 12 }}>
          {sets.map((set, idx) => (
            <div key={set.n} style={{ display: 'grid', gridTemplateColumns: '32px 1fr 1fr 32px', padding: '14px', alignItems: 'center', borderBottom: idx < sets.length - 1 ? `0.5px solid ${BORDER}` : 'none' }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: TEXT_SECONDARY, fontVariant: 'tabular-nums' }}>{set.n}</div>
              <div style={{ fontSize: 15, fontWeight: 500, color: TEXT, fontVariant: 'tabular-nums' }}>{set.w}</div>
              <div style={{ fontSize: 15, fontWeight: 500, color: TEXT, fontVariant: 'tabular-nums' }}>{set.r}</div>
              <div style={{
                width: 26, height: 26, borderRadius: 999,
                background: set.done ? ORANGE : 'transparent',
                border: set.done ? 'none' : `1.5px solid ${BORDER_STRONG}`,
                display: 'grid', placeItems: 'center', justifySelf: 'end',
              }}>
                {set.done && <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>}
              </div>
            </div>
          ))}
        </div>

        {/* Rest timer — preset chips left, active time + pause + skip right */}
        <div style={{
          background: CARD, border: `0.5px solid ${BORDER}`, borderRadius: 14,
          padding: '8px 10px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, marginBottom: 12,
        }}>
          {/* Preset segment */}
          <div style={{ display: 'flex', gap: 4, background: INK, borderRadius: 8, padding: 3 }}>
            {[
              { label: '1m', active: true },
              { label: '2m', active: false },
              { label: '3m', active: false },
              { label: '5m', active: false },
            ].map((p) => (
              <div key={p.label} style={{
                padding: '5px 10px', borderRadius: 6,
                background: p.active ? ORANGE : 'transparent',
                color: p.active ? '#fff' : TEXT_SECONDARY,
                fontSize: 12, fontWeight: 600, fontVariant: 'tabular-nums',
              }}>{p.label}</div>
            ))}
          </div>

          {/* Active controls: Timer icon + time + pause + skip */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={ORANGE} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="13" r="8"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="9" y1="2" x2="15" y2="2"/>
              </svg>
              <div style={{ fontSize: 15, fontWeight: 600, color: TEXT, fontVariant: 'tabular-nums', minWidth: 42, textAlign: 'right' }}>0:42</div>
            </div>
            <div style={{ width: 28, height: 28, display: 'grid', placeItems: 'center' }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={TEXT} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>
              </svg>
            </div>
            <div style={{ width: 28, height: 28, display: 'grid', placeItems: 'center' }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={TEXT_SECONDARY} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19"/>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <TabBar active="today" />
    </div>
  );
}

// ── Food log screen (real /food) ─────────────────────────────
function FoodScreen() {
  const s = screenStyles;
  const goals = [
    { label: 'Calories', val: 1840, goal: 2400, unit: 'cal', color: RED, iconPath: 'M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z' },
    { label: 'Protein', val: 162, goal: 200, unit: 'g', color: TEAL, iconPath: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z' },
    { label: 'Fat', val: 64, goal: 80, unit: 'g', color: AMBER, iconPath: 'M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z' },
    { label: 'Carbs', val: 168, goal: 240, unit: 'g', color: PURPLE, iconPath: 'M12 2L2 7l10 5 10-5-10-5z M2 17l10 5 10-5 M2 12l10 5 10-5' },
  ];
  return (
    <div style={s.screen}>
      <div style={s.scroll}>
        <div style={s.header}>
          <div style={{ flex: 1 }}>
            <h1 style={s.title}>Food</h1>
            <div style={s.subtitle}>Wednesday, April 29</div>
          </div>
          <div style={s.pillBtn}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={ORANGE} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>
            Goals
          </div>
        </div>

        {/* Macros (GoalRow style — icons + bars, NOT rings) */}
        <div style={s.card}>
          {goals.map((g, i) => (
            <div key={g.label} style={{ marginTop: i === 0 ? 0 : 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={g.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d={g.iconPath}/></svg>
                <div style={{ fontSize: 13, fontWeight: 500, color: TEXT, flex: 1 }}>{g.label}</div>
                <div style={{ fontSize: 12, color: TEXT_SECONDARY, fontVariant: 'tabular-nums' }}>{g.val} / {g.goal} {g.unit}</div>
              </div>
              <div style={{ height: 4, background: 'rgba(255,255,255,0.06)', borderRadius: 2, overflow: 'hidden' }}>
                <div style={{ width: `${Math.min(100, (g.val / g.goal) * 100)}%`, height: '100%', background: g.color }} />
              </div>
            </div>
          ))}
        </div>

        {/* Log food form */}
        <div style={s.sectionLabel}>Log food</div>
        <div style={s.card}>
          {/* Name */}
          <div style={{ fontSize: 11, fontWeight: 600, color: TEXT_MUTED, letterSpacing: '0.05em', textTransform: 'uppercase', marginBottom: 6 }}>Name</div>
          <div style={{
            background: INK, border: `0.5px solid ${BORDER}`, borderRadius: 10,
            padding: '11px 12px', fontSize: 14, color: TEXT_MUTED, marginBottom: 12,
          }}>e.g. Chicken breast</div>

          {/* Calories + Protein */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 12 }}>
            <div>
              <div style={{ fontSize: 11, fontWeight: 600, color: TEXT_MUTED, letterSpacing: '0.05em', textTransform: 'uppercase', marginBottom: 6 }}>Calories</div>
              <div style={{ background: INK, border: `0.5px solid ${BORDER}`, borderRadius: 10, padding: '11px 12px', fontSize: 14, color: TEXT_MUTED }}>165</div>
            </div>
            <div>
              <div style={{ fontSize: 11, fontWeight: 600, color: TEXT_MUTED, letterSpacing: '0.05em', textTransform: 'uppercase', marginBottom: 6 }}>Protein (g)</div>
              <div style={{ background: INK, border: `0.5px solid ${BORDER}`, borderRadius: 10, padding: '11px 12px', fontSize: 14, color: TEXT_MUTED }}>31</div>
            </div>
          </div>

          {/* Fat + Carbs */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 14 }}>
            <div>
              <div style={{ fontSize: 11, fontWeight: 600, color: TEXT_MUTED, letterSpacing: '0.05em', textTransform: 'uppercase', marginBottom: 6 }}>Fat (g)</div>
              <div style={{ background: INK, border: `0.5px solid ${BORDER}`, borderRadius: 10, padding: '11px 12px', fontSize: 14, color: TEXT_MUTED }}>7</div>
            </div>
            <div>
              <div style={{ fontSize: 11, fontWeight: 600, color: TEXT_MUTED, letterSpacing: '0.05em', textTransform: 'uppercase', marginBottom: 6 }}>Carbs (g)</div>
              <div style={{ background: INK, border: `0.5px solid ${BORDER}`, borderRadius: 10, padding: '11px 12px', fontSize: 14, color: TEXT_MUTED }}>0</div>
            </div>
          </div>

          {/* Add button (full width, orange) */}
          <div style={{
            background: ORANGE, borderRadius: 10, padding: '12px',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            marginBottom: 8,
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            <span style={{ fontSize: 13, fontWeight: 600, color: '#fff' }}>Add</span>
          </div>

          {/* Secondary actions */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            <div style={{
              padding: '10px 12px', background: 'rgba(232,100,12,0.10)', borderRadius: 10,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={ORANGE} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="8" y1="6" x2="16" y2="6"/><line x1="8" y1="10" x2="16" y2="10"/><line x1="8" y1="14" x2="13" y2="14"/></svg>
              <span style={{ fontSize: 12, fontWeight: 600, color: ORANGE }}>Calculate macros</span>
            </div>
            <div style={{
              padding: '10px 12px', background: 'rgba(232,100,12,0.10)', borderRadius: 10,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={ORANGE} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><line x1="7" y1="7" x2="7" y2="17"/><line x1="11" y1="7" x2="11" y2="17"/><line x1="15" y1="7" x2="15" y2="17"/></svg>
              <span style={{ fontSize: 12, fontWeight: 600, color: ORANGE }}>Scan barcode</span>
            </div>
          </div>
        </div>

        {/* Recent — horizontal scrolling chips */}
        <div style={s.sectionLabel}>Recent — tap to re-add</div>
        <div style={{ display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 6, marginBottom: 12 }}>
          {[
            ['Greek yogurt + berries', 280, 22, 6, 32],
            ['Chicken thigh + rice', 620, 48, 18, 64],
            ['Whey shake', 180, 32, 2, 8],
          ].map(([name, c, p, f, ca], i) => (
            <div key={i} style={{
              flex: '0 0 auto', minWidth: 180,
              background: CARD, border: `0.5px solid ${BORDER}`, borderRadius: 12,
              padding: '10px 12px',
            }}>
              <div style={{ fontSize: 13, fontWeight: 500, color: TEXT }}>{name}</div>
              <div style={{ fontSize: 11, color: TEXT_SECONDARY, marginTop: 3, fontVariant: 'tabular-nums' }}>{c} cal · P {p}g · F {f}g · C {ca}g</div>
            </div>
          ))}
        </div>

        {/* Today's log */}
        <div style={s.sectionLabel}>Today's log</div>
        <div style={{ background: CARD, border: `0.5px solid ${BORDER}`, borderRadius: 14, overflow: 'hidden', marginBottom: 12 }}>
          {[
            { name: 'Steel-cut oats + whey', cal: 420, p: 38, f: 8, c: 52 },
            { name: 'Chicken thigh + rice', cal: 620, p: 48, f: 18, c: 64 },
            { name: 'Greek yogurt + berries', cal: 280, p: 22, f: 6, c: 32 },
            { name: 'Whey shake',            cal: 180, p: 32, f: 2,  c: 8  },
            { name: 'Apple + peanut butter', cal: 340, p: 8,  f: 18, c: 38 },
          ].map((e, i, arr) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '14px 16px',
              borderBottom: i < arr.length - 1 ? `0.5px solid ${BORDER}` : 'none',
            }}>
              <div style={{ flex: 1, minWidth: 0, paddingRight: 12 }}>
                <div style={{ fontSize: 14, fontWeight: 500, color: TEXT, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{e.name}</div>
                <div style={{ fontSize: 11, color: TEXT_SECONDARY, marginTop: 2, fontVariant: 'tabular-nums' }}>P {e.p}g · F {e.f}g · C {e.c}g</div>
              </div>
              <div style={{ fontSize: 15, fontWeight: 600, color: TEXT, fontVariant: 'tabular-nums' }}>
                {e.cal.toLocaleString()}<span style={{ fontSize: 11, color: TEXT_SECONDARY, fontWeight: 400 }}> cal</span>
              </div>
            </div>
          ))}
        </div>

        {/* Last 14 days — 4 stacked mini bar charts */}
        <div style={s.sectionLabel}>Last 14 days</div>
        <div style={s.card}>
          <MacroBarChart label="Calories" goal="2,500" goalDisplay="2.5k" iconColor={RED} barColor={RED} overColor={'#FB923C'} pattern={[1740, 2200, 2120, 1980, 2350, 1840, 0, 2410, 2180, 1900, 2260, 1840, 2050, 1840]} />
          <MacroBarChart label="Protein"  goal="180g" goalDisplay="180" iconColor={TEAL} barColor={TEAL} metColor={GREEN} pattern={[150, 178, 165, 142, 192, 168, 0, 184, 172, 158, 188, 162, 175, 162]} kind="protein" />
          <MacroBarChart label="Fat"      goal="80g"  goalDisplay="80"  iconColor={AMBER} barColor={AMBER} overColor={'#FB923C'} pattern={[58, 72, 68, 64, 78, 60, 0, 82, 70, 65, 75, 64, 68, 64]} />
          <MacroBarChart label="Carbs"    goal="250g" goalDisplay="250" iconColor={PURPLE} barColor={PURPLE} overColor={'#FB923C'} pattern={[180, 220, 210, 195, 240, 168, 0, 252, 218, 198, 235, 168, 205, 168]} />
        </div>
      </div>
      <TabBar active="food" />
    </div>
  );
}

// Mini bar chart used by Food's "Last 14 days" trend section.
// Real component (NutritionTrendChart): icon + label on left, "goal X" on right,
// 14 bars below, dashed goal line. Bars turn warning-orange when over goal
// (calories/fat/carbs), or green when goal met (protein).
function MacroBarChart({ label, goal, iconColor, barColor, overColor, metColor, pattern, kind }) {
  // Match real chart: 110px tall, 14 bars, ~55% bar width per slot
  const W = 290, H = 80, PAD = 4;
  const innerW = W - PAD * 2;
  const slot = innerW / pattern.length;
  const barW = Math.max(4, slot * 0.55);
  // For protein, "goal value" is what triggers met=true; for others, over-goal triggers warning
  const goalValue = kind === 'protein' ? Math.max(...pattern) * 0.75 : Math.max(...pattern) * 0.85;
  const max = Math.max(1, ...pattern, goalValue);
  const goalY = PAD + (1 - goalValue / max) * (H - PAD * 2);

  // Icon paths — Flame (cal/red), Zap (protein/teal), Droplets (fat/amber), Layers (carbs/purple)
  const icons = {
    Calories: 'M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z',
    Protein: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z',
    Fat: 'M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z',
    Carbs: 'M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5',
  };

  return (
    <div style={{ marginTop: label === 'Calories' ? 0 : 14 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={iconColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d={icons[label]}/>
          </svg>
          <span style={{ fontSize: 12, fontWeight: 600, color: TEXT }}>{label}</span>
        </div>
        <span style={{ fontSize: 11, color: TEXT_MUTED, fontVariant: 'tabular-nums' }}>goal {goal}</span>
      </div>
      <svg width="100%" height={H} viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" style={{ display: 'block' }}>
        {/* Dashed goal line */}
        <line x1={PAD} x2={W - PAD} y1={goalY} y2={goalY} stroke={BORDER_STRONG} strokeWidth="1" strokeDasharray="3 3" />
        {pattern.map((v, i) => {
          const valH = (v / max) * (H - PAD * 2);
          const x = PAD + i * slot + (slot - barW) / 2;
          const y = H - PAD - valH;
          // Color logic: protein turns green when met; others turn warning when over
          let fill = barColor;
          if (kind === 'protein' && metColor && v >= goalValue && v > 0) fill = metColor;
          else if (kind !== 'protein' && overColor && v > goalValue) fill = overColor;
          const opacity = v === 0 ? 0.2 : 1;
          const h = v === 0 ? 0 : Math.max(2, valH);
          return <rect key={i} x={x} y={H - PAD - h} width={barW} height={h} rx="1.5" fill={fill} opacity={opacity} />;
        })}
      </svg>
    </div>
  );
}

// ── Measurements screen (real /measure) ──────────────────────
function MeasureScreen() {
  const s = screenStyles;
  // sectionLabel small uppercase in textSecondary tracking 0.6 (smaller than home's textMuted)
  const goalsHeaderLabel = { fontSize: 11, fontWeight: 600, color: TEXT_SECONDARY, letterSpacing: '0.06em', textTransform: 'uppercase' };
  // Real measurement values used in mock
  const circ = [
    { label: 'Shoulders',      val: '52.0', delta: 0.3, up: true,  good: true  },
    { label: 'Waist',          val: '32.5', delta: 0.4, up: false, good: true  }, // waist down = good (green down arrow)
    { label: 'Arms (flexed)',  val: '17.2', delta: 0.1, up: true,  good: true  },
    { label: 'Chest',          val: '46.0', delta: 0.2, up: true,  good: true  },
    { label: 'Quads',          val: '25.8', delta: 0.0, up: null,  good: null  },
  ];

  return (
    <div style={s.screen}>
      <div style={s.scroll}>
        <div style={{ ...s.header, alignItems: 'center' }}>
          <div style={{ flex: 1 }}>
            <h1 style={s.title}>Measurements</h1>
            <div style={s.subtitle}>Shoulder-to-waist ratio · target 1.618</div>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            <div style={s.pillBtn}>Goals</div>
            <div style={s.pillBtn}>
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={ORANGE} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>
              Update
            </div>
          </div>
        </div>

        {/* Stats grid: Weight (neutral) / Body fat (good=down) / Lean mass (good=up) */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 2 }}>
          {[
            { label: 'Weight',    val: '188.4', unit: 'lbs', d: 0.6, up: false, neutral: true,  good: null  },
            { label: 'Body fat',  val: '11.2',  unit: '%',   d: 0.3, up: false, neutral: false, good: true  }, // BF down = good
            { label: 'Lean mass', val: '167.3', unit: 'lbs', d: 0.4, up: true,  neutral: false, good: true  }, // lean up = good
          ].map((c) => {
            const tint = c.neutral ? TEXT_SECONDARY : (c.good ? GREEN : RED);
            return (
              <div key={c.label} style={{ background: CARD, border: `0.5px solid ${BORDER}`, borderRadius: 14, padding: 12 }}>
                <div style={{ fontSize: 10, color: TEXT_SECONDARY, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{c.label}</div>
                <div style={{ fontSize: 20, fontWeight: 600, color: TEXT, marginTop: 3, fontVariant: 'tabular-nums' }}>{c.val}</div>
                <div style={{ fontSize: 11, color: TEXT_SECONDARY, marginBottom: 2 }}>{c.unit}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 2, height: 18 }}>
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={tint} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    {c.up ? <><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></> : <><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></>}
                  </svg>
                  <span style={{ fontSize: 11, fontWeight: 600, color: tint, fontVariant: 'tabular-nums' }}>{c.d.toFixed(1)}{c.unit === '%' ? '%' : ' lbs'}</span>
                </div>
              </div>
            );
          })}
        </div>

        {/* Profile collapsible header */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 0', marginTop: 8 }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: TEXT_SECONDARY, letterSpacing: '0.07em', textTransform: 'uppercase' }}>Profile</div>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={TEXT_SECONDARY} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
        </div>

        {/* Goals card — small uppercase header, GoalProgressRow with current → goal in header */}
        <div style={{ background: CARD, border: `0.5px solid ${BORDER}`, borderRadius: 14, padding: 14, marginTop: 6, marginBottom: 12 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
            <div style={goalsHeaderLabel}>Goals</div>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={TEXT_SECONDARY} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>
          </div>
          {[
            { label: 'Weight',   current: '188.4 lbs', target: '185 lbs', pct: 0.7,  hint: '3.4 lbs to go' },
            { label: 'Body fat', current: '11.2%',     target: '8%',      pct: 0.62, hint: '3.2% to go'   },
          ].map((g, i) => (
            <div key={g.label} style={{ marginTop: i === 0 ? 0 : 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
                <span style={{ fontSize: 13, fontWeight: 500, color: TEXT }}>{g.label}</span>
                <span style={{ fontSize: 13, fontWeight: 600, color: TEXT, fontVariant: 'tabular-nums' }}>
                  {g.current}
                  <span style={{ fontSize: 12, fontWeight: 400, color: TEXT_SECONDARY }}> → {g.target}</span>
                </span>
              </div>
              <div style={{ height: 6, background: 'rgba(255,255,255,0.06)', borderRadius: 3, overflow: 'hidden' }}>
                <div style={{ width: `${g.pct * 100}%`, height: '100%', background: ORANGE }} />
              </div>
              <div style={{ fontSize: 11, color: TEXT_SECONDARY, marginTop: 3 }}>{g.hint}</div>
            </div>
          ))}
        </div>

        {/* Shoulder-to-waist ratio card — full orange border, big 34px value, "/ 1.618" target inline, % off, italic hint */}
        <div style={{ background: CARD, borderRadius: 14, border: `1px solid ${ORANGE}`, padding: 16, marginTop: 6, marginBottom: 12 }}>
          <div style={{ fontSize: 11, color: TEXT_SECONDARY, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Shoulder-to-waist ratio</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 4 }}>
            <span style={{ fontSize: 34, fontWeight: 600, color: TEXT, fontVariant: 'tabular-nums' }}>1.60</span>
            <span style={{ fontSize: 14, color: TEXT_SECONDARY }}>/ 1.618</span>
          </div>
          <div style={{ height: 6, background: 'rgba(255,255,255,0.06)', borderRadius: 3, overflow: 'hidden', marginTop: 10 }}>
            <div style={{ width: '99%', height: '100%', background: ORANGE }} />
          </div>
          <div style={{ fontSize: 12, color: TEXT_SECONDARY, fontWeight: 500, marginTop: 8 }}>1.1% off target</div>
          <div style={{ fontSize: 12, color: TEXT_MUTED, marginTop: 4, fontStyle: 'italic' }}>Expand shoulders or tighten waist to close the gap.</div>
        </div>

        {/* Current — circumference list */}
        <div style={{ ...s.sectionLabel, color: TEXT_SECONDARY }}>Current</div>
        <div style={{ background: CARD, border: `0.5px solid ${BORDER}`, borderRadius: 14, overflow: 'hidden', marginBottom: 12 }}>
          {circ.map((c, i) => {
            // Delta tint: neutral if 0, else green when good direction, red when bad
            const isZero = c.delta === 0;
            const tint = isZero ? TEXT_MUTED : (c.good ? GREEN : RED);
            return (
              <div key={c.label} style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '13px 16px',
                borderBottom: i < circ.length - 1 ? `0.5px solid ${BORDER}` : 'none',
              }}>
                <span style={{ fontSize: 14, fontWeight: 500, color: TEXT }}>{c.label}</span>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ fontSize: 15, color: TEXT, fontVariant: 'tabular-nums' }}>{c.val}″</span>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                    {isZero ? (
                      <>
                        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={tint} strokeWidth="2.5" strokeLinecap="round"><line x1="5" y1="12" x2="19" y2="12"/></svg>
                        <span style={{ fontSize: 11, fontWeight: 600, color: tint }}>0</span>
                      </>
                    ) : (
                      <>
                        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={tint} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                          {c.up ? <><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></> : <><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></>}
                        </svg>
                        <span style={{ fontSize: 11, fontWeight: 600, color: tint, fontVariant: 'tabular-nums' }}>{c.delta.toFixed(1)}″</span>
                      </>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Trends — 2-line chart (Weight orange + Body fat warning-orange) */}
        <div style={{ ...s.sectionLabel, color: TEXT_SECONDARY }}>Trends</div>
        <div style={s.card}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: TEXT }}>Weight</div>
            <div style={{ fontSize: 11, color: TEXT_SECONDARY, fontVariant: 'tabular-nums' }}>188.4 lbs</div>
          </div>
          <svg viewBox="0 0 300 70" style={{ width: '100%', height: 70, display: 'block' }}>
            <polyline fill="none" stroke={ORANGE} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
              points="10,20 50,24 90,30 130,28 170,38 210,42 250,50 290,56" />
            {[[10,20],[50,24],[90,30],[130,28],[170,38],[210,42],[250,50],[290,56]].map(([x,y]) => (
              <circle key={`${x}-${y}`} cx={x} cy={y} r="2.5" fill={ORANGE} />
            ))}
          </svg>

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', margin: '20px 0 8px' }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: TEXT }}>Body fat</div>
            <div style={{ fontSize: 11, color: TEXT_SECONDARY, fontVariant: 'tabular-nums' }}>11.2%</div>
          </div>
          <svg viewBox="0 0 300 70" style={{ width: '100%', height: 70, display: 'block' }}>
            <polyline fill="none" stroke={'#FB923C'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
              points="10,12 50,18 90,22 130,30 170,32 210,42 250,48 290,54" />
            {[[10,12],[50,18],[90,22],[130,30],[170,32],[210,42],[250,48],[290,54]].map(([x,y]) => (
              <circle key={`${x}-${y}`} cx={x} cy={y} r="2.5" fill={'#FB923C'} />
            ))}
          </svg>
        </div>
      </div>
      <TabBar active="measure" />
    </div>
  );
}

// ── Tab bar (matches actual (tabs)/_layout.tsx: Home / Today / Food / Measure with House/Dumbbell/Apple/Ruler) ─
function TabBar({ active }) {
  const tabs = [
    // House icon
    ['home', 'Home', (
      <g><path d="M3 9.5L12 3l9 6.5V20a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z"/></g>
    )],
    // Dumbbell icon (lucide)
    ['today', 'Today', (
      <g><path d="M14.4 14.4L9.6 9.6"/><path d="M18.657 21.485a2 2 0 1 1-2.829-2.828l-1.767 1.768a2 2 0 1 1-2.829-2.829l6.364-6.364a2 2 0 1 1 2.829 2.829l-1.768 1.767a2 2 0 1 1 2.828 2.829z"/><path d="M21.5 21.5l-1.4-1.4"/><path d="M3.9 3.9L2.5 2.5"/><path d="M6.404 12.768a2 2 0 1 1-2.829-2.829l1.768-1.767a2 2 0 1 1-2.828-2.829l2.828-2.828a2 2 0 1 1 2.829 2.828l1.767-1.768a2 2 0 1 1 2.829 2.829z"/></g>
    )],
    // Apple icon (lucide)
    ['food', 'Food', (
      <g><path d="M19 5c-1.5 0-2.8 1.4-3 2-3.5-1.5-7.5 0-7.5 5 0 5 4 8 7.5 6.5"/><path d="M12 7c0-2.5-2-5-5-5"/></g>
    )],
    // Ruler icon (lucide)
    ['measure', 'Measure', (
      <g><path d="M21.3 15.3L8.7 2.7a1 1 0 0 0-1.4 0L2.7 7.3a1 1 0 0 0 0 1.4l12.6 12.6a1 1 0 0 0 1.4 0l4.6-4.6a1 1 0 0 0 0-1.4z"/><path d="M14.5 12.5l-2 2"/><path d="M11.5 9.5l-2 2"/><path d="M8.5 6.5l-2 2"/><path d="M17.5 15.5l-2 2"/></g>
    )],
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      background: CARD, borderTop: `0.5px solid ${BORDER}`,
      display: 'flex', justifyContent: 'space-around', padding: '8px 0 18px',
      height: 74, boxSizing: 'border-box',
    }}>
      {tabs.map(([id, label, icon]) => {
        const isActive = active === id;
        return (
          <div key={id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
              stroke={isActive ? ORANGE : TEXT_SECONDARY} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
              {icon}
            </svg>
            <div style={{ fontSize: 11, fontWeight: 500, color: isActive ? ORANGE : TEXT_SECONDARY }}>{label}</div>
          </div>
        );
      })}
    </div>
  );
}

window.ForgeScreens = {
  HomeScreen,
  // Backwards-compat alias so the existing index.html mount code keeps working.
  TodayScreen: HomeScreen,
  SessionScreen,
  ExerciseDetailScreen,
  FoodScreen,
  MeasureScreen,
};