// TopSet — Summary, History, Progress, modals, Settings, Paywall

// ── Workout Summary ─────────────────────────────────────────────────
function SummaryScreen() {
  return (
    <div className="ts phone">
      <StatusBar/>
      <div style={{ padding: '8px 20px 8px', display: 'flex', justifyContent: 'space-between' }}>
        <button className="icon-btn"><Ico.Close/></button>
        <span className="kicker">SESSION COMPLETE</span>
      </div>

      <div style={{ padding: '8px 20px 0', flex: 1, overflow: 'hidden' }}>
        <div className="kicker">DEADLIFT · CYCLE 05 · W1 · TW 14</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 4 }}>
          <h1 style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.03em', margin: 0 }}>Wed · May 14</h1>
          <span className="mono" style={{ fontSize: 13, color: 'var(--ts-text-mute)' }}>7:42 PM · 38 min</span>
        </div>

        {/* hero amrap card */}
        <div style={{
          marginTop: 16,
          padding: '18px 18px',
          background: 'var(--ts-accent)',
          color: '#000',
          borderRadius: 16,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase' }}>AMRAP · 85% TM</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11, fontWeight: 700 }}>
              <span style={{ width: 14, height: 14 }}><Ico.Star/></span> PR
            </span>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 6 }}>
            <span style={{ fontFamily: 'var(--ts-mono)', fontSize: 80, fontWeight: 800, letterSpacing: '-0.08em', lineHeight: 0.85 }}>9</span>
            <span className="mono" style={{ fontSize: 18, fontWeight: 700 }}>reps</span>
            <span className="mono" style={{ marginLeft: 'auto', fontSize: 24, fontWeight: 700 }}>@315</span>
          </div>
          <div className="mono" style={{ fontSize: 11, fontWeight: 600, marginTop: 6, opacity: 0.8 }}>e1RM 409 · ↑ 37 lb vs cycle 04</div>
        </div>

        {/* stats strip */}
        <div style={{
          marginTop: 12, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
          gap: 1, background: 'var(--ts-border)', border: '1px solid var(--ts-border)', borderRadius: 12, overflow: 'hidden',
        }}>
          {[['VOL', '14,535 lb'],['SETS', '11'],['REPS', '52']].map(([k,v]) => (
            <div key={k} style={{ background: 'var(--ts-surface)', padding: '12px 12px' }}>
              <div className="kicker" style={{ fontSize: 9 }}>{k}</div>
              <div className="mono" style={{ fontSize: 16, fontWeight: 700, marginTop: 2 }}>{v}</div>
            </div>
          ))}
        </div>

        {/* set list */}
        <div style={{ marginTop: 14, background: 'var(--ts-surface)', border: '1px solid var(--ts-border)', borderRadius: 12, overflow: 'hidden' }}>
          <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--ts-border)', display: 'flex', justifyContent: 'space-between' }}>
            <span className="kicker">PRESCRIBED · ACTUAL</span>
            <span className="kicker">RPE</span>
          </div>
          {[
            ['W1', 140, 5, 5, '5'],
            ['W2', 185, 5, 5, '5'],
            ['01', 235, 5, 5, '6'],
            ['02', 275, 5, 5, '7.5'],
            ['03', 315, '5+', 9, '9 ★'],
          ].map((row, i, arr) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '36px 1fr auto auto',
              alignItems: 'center', gap: 10, padding: '10px 14px',
              borderTop: i === 0 ? 'none' : '1px solid var(--ts-border)',
              background: row[0] === '03' ? 'var(--ts-accent-soft)' : 'transparent',
            }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--ts-text-dim)' }}>{row[0]}</span>
              <span className="mono" style={{ fontSize: 13 }}>{row[1]} × {row[2]}</span>
              <span className="mono" style={{ fontSize: 14, fontWeight: 600, color: row[0]==='03' ? 'var(--ts-accent)' : 'var(--ts-text)' }}>= {row[3]}</span>
              <span className="mono" style={{ fontSize: 12, color: 'var(--ts-text-mute)', width: 36, textAlign: 'right' }}>{row[4]}</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 12, padding: '12px 14px', background: 'var(--ts-surface-2)', borderRadius: 10 }}>
          <div className="kicker" style={{ marginBottom: 6 }}>TRAINING WEEK 14 · PROGRESS</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ display: 'flex', gap: 4 }}>
              {['SQ','BP','DL','OH'].map((a, i) => (
                <span key={a} style={{
                  width: 28, height: 28, borderRadius: 6,
                  background: i < 3 ? 'var(--ts-text)' : 'var(--ts-surface-3)',
                  color: i < 3 ? '#000' : 'var(--ts-text-mute)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--ts-mono)', fontSize: 10, fontWeight: 700,
                }}>{a}</span>
              ))}
            </span>
            <span style={{ fontSize: 13, color: 'var(--ts-text-mute)' }}>3 of 4 done · OHP remaining</span>
          </div>
        </div>
      </div>

      <div style={{ padding: '14px 16px 36px', display: 'flex', gap: 10 }}>
        <button className="ts-btn">Next lift · OHP</button>
        <button className="ts-btn secondary" style={{ flex: 0, padding: '0 16px' }}>Share</button>
      </div>
    </div>
  );
}

// ── History — calendar ──────────────────────────────────────────────
function HistoryCalendar() {
  // dummy month data
  const month = Array.from({ length: 35 }).map((_, i) => {
    const day = i - 2; // shift
    if (day < 1 || day > 31) return { day: '', lifts: [] };
    // sprinkle lifts
    const lifts = {
      1: ['S'], 2: [], 3: ['B'], 4: [], 5: ['D'], 6: [], 7: [],
      8: ['O'], 9: [], 10: ['S'], 11: [], 12: ['B'], 13: ['D'], 14: ['O'],
      15: [], 16: ['S'], 17: [], 18: ['B'], 19: [], 20: ['D'], 21: ['O'],
      22: ['S','B'], 23: [], 24: ['D'], 25: [], 26: ['O'], 27: [], 28: ['S'],
      29: [], 30: ['B', 'D'], 31: [],
    }[day] || [];
    return { day, lifts };
  });

  return (
    <div className="ts phone">
      <StatusBar/>
      <header style={{ padding: '8px 24px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
        <div>
          <div className="kicker">HISTORY</div>
          <h1 style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.03em', margin: '4px 0 0' }}>May 2026</h1>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="icon-btn"><span style={{ transform: 'rotate(180deg)', display: 'flex' }}><Ico.Chevron/></span></button>
          <button className="icon-btn"><Ico.Chevron/></button>
        </div>
      </header>

      {/* training-week strip */}
      <div style={{ padding: '0 24px 14px' }}>
        <div style={{ display: 'flex', gap: 8, fontSize: 10, color: 'var(--ts-text-dim)' }}>
          {['TW 12','TW 13','TW 14','TW 15'].map((w, i) => (
            <div key={w} style={{
              flex: 1, padding: '6px 8px',
              background: i === 2 ? 'var(--ts-surface)' : 'transparent',
              border: '1px solid ' + (i === 2 ? 'var(--ts-border-2)' : 'var(--ts-border)'),
              borderRadius: 8,
              textAlign: 'center',
            }}>
              <div className="mono" style={{ fontSize: 10, color: i === 2 ? 'var(--ts-text)' : 'var(--ts-text-dim)', fontWeight: 600 }}>{w}</div>
              <div className="mono" style={{ fontSize: 9, color: 'var(--ts-text-dim)', marginTop: 2 }}>
                {['W1','W2','W3','D'][i]}
              </div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: '0 16px' }}>
        {/* dow labels */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', padding: '0 0 8px' }}>
          {['S','M','T','W','T','F','S'].map((d, i) => (
            <div key={i} className="kicker" style={{ textAlign: 'center', fontSize: 9 }}>{d}</div>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 0, background: 'var(--ts-border)', border: '1px solid var(--ts-border)', borderRadius: 8, overflow: 'hidden' }}>
          {month.map((c, i) => {
            const isToday = c.day === 14;
            return (
              <div key={i} style={{
                background: isToday ? 'var(--ts-surface)' : 'var(--ts-bg)',
                aspectRatio: '1',
                padding: 6,
                border: isToday ? '1px solid var(--ts-text)' : 'none',
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                gap: 4,
              }}>
                <span className="mono" style={{ fontSize: 11, fontWeight: isToday ? 700 : 500, color: c.day ? (isToday ? 'var(--ts-text)' : 'var(--ts-text-mute)') : 'transparent' }}>{c.day}</span>
                <div style={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
                  {c.lifts.map((l, j) => (
                    <span key={j} style={{
                      width: 12, height: 12, borderRadius: 3,
                      background: { S: 'var(--ts-text)', B: 'var(--ts-text-mute)', D: 'var(--ts-text)', O: 'var(--ts-text-mute)' }[l],
                      color: '#000', display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: 'var(--ts-mono)', fontSize: 8, fontWeight: 700,
                    }}>{l}</span>
                  ))}
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ display: 'flex', gap: 14, marginTop: 14, fontSize: 11, color: 'var(--ts-text-mute)' }}>
          {[['S','Squat'],['B','Bench'],['D','Deadlift'],['O','OHP']].map(([k, n], i) => (
            <span key={k} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 10, height: 10, borderRadius: 2,
                background: i % 2 === 0 ? 'var(--ts-text)' : 'var(--ts-text-mute)',
                color: '#000', display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--ts-mono)', fontSize: 7, fontWeight: 700,
              }}>{k}</span>
              {n}
            </span>
          ))}
        </div>
      </div>

      {/* upcoming sessions for selected day */}
      <div style={{ padding: '20px 16px 0', flex: 1, overflow: 'hidden' }}>
        <div className="kicker" style={{ marginBottom: 10 }}>WED · MAY 14 · 1 SESSION</div>
        <div style={{ padding: '14px 16px', background: 'var(--ts-surface)', borderRadius: 12, border: '1px solid var(--ts-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Deadlift <span style={{ color: 'var(--ts-accent)', marginLeft: 4 }}>★ PR</span></div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ts-text-mute)', marginTop: 4 }}>9+ @ 315 · 7:42 PM · 38 min</div>
          </div>
          <span style={{ color: 'var(--ts-text-dim)' }}><Ico.Chevron/></span>
        </div>
      </div>

      <TabBar active="history"/>
      <Home/>
    </div>
  );
}

// ── History — session detail ────────────────────────────────────────
function HistorySession() {
  return (
    <div className="ts phone">
      <StatusBar/>
      <div style={{ padding: '8px 20px 8px', display: 'flex', justifyContent: 'space-between' }}>
        <button className="icon-btn"><span style={{ transform: 'rotate(180deg)', display: 'flex' }}><Ico.Chevron/></span></button>
        <span style={{ display: 'flex', gap: 8 }}>
          <button className="icon-btn">⋯</button>
        </span>
      </div>

      <div style={{ padding: '8px 20px 0', flex: 1, overflow: 'hidden' }}>
        <div className="kicker">CYCLE 05 · WEEK 1 · TW 14</div>
        <h1 style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.03em', margin: '4px 0 0' }}>Deadlift</h1>
        <div style={{ display: 'flex', gap: 8, marginTop: 6, fontSize: 12, color: 'var(--ts-text-mute)' }}>
          <span>Wed May 14 · 7:42 PM</span><span>·</span><span>38 min</span><span>·</span><span>BW 187</span>
        </div>

        {/* PR pill */}
        <div style={{ marginTop: 14, padding: '10px 14px', background: 'var(--ts-accent-soft)', border: '1px solid var(--ts-accent-line)', borderRadius: 10, display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ color: 'var(--ts-accent)' }}><Ico.Star/></span>
          <span style={{ fontSize: 12, color: 'var(--ts-text)', fontWeight: 500 }}>PR · 9 reps @ 315 (best at 85% TM)</span>
          <span className="mono" style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--ts-accent)' }}>e1RM 409</span>
        </div>

        {/* set table */}
        <div style={{ marginTop: 14 }}>
          <div className="kicker" style={{ marginBottom: 6 }}>SETS</div>
          <div style={{ background: 'var(--ts-surface)', border: '1px solid var(--ts-border)', borderRadius: 12, overflow: 'hidden' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '32px 80px 1fr 60px 60px', padding: '10px 14px', borderBottom: '1px solid var(--ts-border)' }}>
              {['#','PRESCR.','ACTUAL','RPE','REST'].map((h, i) => <span key={i} className="kicker" style={{ fontSize: 9, textAlign: i > 1 ? 'right' : 'left' }}>{h}</span>)}
            </div>
            {[
              ['W1', '140×5', '5', '5', '—'],
              ['W2', '185×5', '5', '5', '1:00'],
              ['01', '235×5', '5', '6', '2:00'],
              ['02', '275×5', '5', '7.5', '2:30'],
              ['03', '315×5+', '9 ★', '9', '—'],
            ].map((r, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '32px 80px 1fr 60px 60px',
                padding: '12px 14px', borderTop: i === 0 ? 'none' : '1px solid var(--ts-border)',
                background: r[0] === '03' ? 'var(--ts-accent-soft)' : 'transparent',
              }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ts-text-dim)' }}>{r[0]}</span>
                <span className="mono" style={{ fontSize: 12, color: 'var(--ts-text-mute)' }}>{r[1]}</span>
                <span className="mono" style={{ fontSize: 14, fontWeight: 600, color: r[0]==='03' ? 'var(--ts-accent)' : 'var(--ts-text)' }}>{r[2]}</span>
                <span className="mono" style={{ fontSize: 12, textAlign: 'right' }}>{r[3]}</span>
                <span className="mono" style={{ fontSize: 12, color: 'var(--ts-text-mute)', textAlign: 'right' }}>{r[4]}</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 14 }}>
          <div className="kicker" style={{ marginBottom: 6 }}>NOTES</div>
          <div style={{ padding: '12px 14px', background: 'var(--ts-surface)', border: '1px solid var(--ts-border)', borderRadius: 12, fontSize: 13, color: 'var(--ts-text)', lineHeight: 1.5 }}>
            Belt for top set. Bar speed great through rep 7, last two slow but clean. Slept 8h.
          </div>
        </div>
      </div>

      <div style={{ padding: '14px 16px 36px', display: 'flex', gap: 10 }}>
        <button className="ts-btn secondary">Edit</button>
        <button className="ts-btn">Share PR card</button>
      </div>
    </div>
  );
}

// ── Progress screen ─────────────────────────────────────────────────
function ProgressScreen() {
  return (
    <div className="ts phone">
      <StatusBar/>
      <header style={{ padding: '8px 24px 16px' }}>
        <div className="kicker">PROGRESS</div>
        <h1 style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.03em', margin: '4px 0 0' }}>Numbers, up.</h1>
      </header>

      <div style={{ padding: '0 16px', flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {/* per-lift cards row */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {[
            { ab: 'SQ', name: 'Squat',    tm: 295, delta: '+10', e: 358, stall: false },
            { ab: 'BP', name: 'Bench',    tm: 220, delta: '+5',  e: 256, stall: false },
            { ab: 'DL', name: 'Deadlift', tm: 365, delta: '+15', e: 409, stall: false, pr: true },
            { ab: 'OH', name: 'Press',    tm: 130, delta: '—',  e: 152, stall: true },
          ].map(l => (
            <div key={l.ab} style={{ padding: 12, background: 'var(--ts-surface)', border: '1px solid var(--ts-border)', borderRadius: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span className="kicker" style={{ fontSize: 10 }}>{l.name}</span>
                {l.pr && <span style={{ color: 'var(--ts-accent)' }}><Ico.Star/></span>}
                {l.stall && <span style={{ color: 'var(--ts-warning)' }}><Ico.Flag/></span>}
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 6 }}>
                <span className="mono" style={{ fontSize: 26, fontWeight: 700, letterSpacing: '-0.04em' }}>{l.tm}</span>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ts-text-mute)' }}>lb TM</span>
              </div>
              {/* tiny sparkline */}
              <svg viewBox="0 0 100 28" width="100%" height="28" style={{ marginTop: 4 }}>
                <polyline points="0,24 12,22 24,18 36,16 48,14 60,11 72,9 84,7 100,4" fill="none"
                  stroke={l.stall ? 'var(--ts-warning)' : 'var(--ts-text)'} strokeWidth="1.5"/>
                <circle cx="100" cy="4" r="2" fill={l.pr ? 'var(--ts-accent)' : 'var(--ts-text)'}/>
              </svg>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}>
                <span className="mono" style={{ fontSize: 10, color: l.stall ? 'var(--ts-warning)' : 'var(--ts-success)' }}>Δ {l.delta}</span>
                <span className="mono" style={{ fontSize: 10, color: 'var(--ts-text-dim)' }}>e1RM {l.e}</span>
              </div>
            </div>
          ))}
        </div>

        {/* tonnage card */}
        <div style={{ padding: 14, background: 'var(--ts-surface)', border: '1px solid var(--ts-border)', borderRadius: 12 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span className="kicker">TONNAGE</span>
            <span style={{ display: 'flex', gap: 4 }}>
              {['week','cycle','life'].map((p, i) => (
                <span key={p} className="ts-chip" style={{
                  height: 22, fontSize: 10,
                  background: i === 1 ? 'var(--ts-text)' : 'transparent',
                  color: i === 1 ? '#000' : 'var(--ts-text-mute)',
                  border: '1px solid var(--ts-border)',
                }}>{p}</span>
              ))}
            </span>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 8 }}>
            <span className="mono" style={{ fontSize: 36, fontWeight: 700, letterSpacing: '-0.05em' }}>198,420</span>
            <span className="mono" style={{ fontSize: 12, color: 'var(--ts-text-mute)' }}>lb · cycle 05</span>
          </div>
          {/* bar grid */}
          <div style={{ display: 'flex', gap: 3, marginTop: 12, height: 36, alignItems: 'flex-end' }}>
            {[18,24,22,30,28,34,40,38,44,52,48,58,62,72].map((h, i) => (
              <div key={i} style={{
                flex: 1, height: `${h}%`,
                background: i === 13 ? 'var(--ts-accent)' : 'var(--ts-text-mute)',
                opacity: i > 9 ? 1 : 0.6,
              }}/>
            ))}
          </div>
        </div>

        {/* PR feed */}
        <div style={{ padding: 14, background: 'var(--ts-surface)', border: '1px solid var(--ts-border)', borderRadius: 12, flex: 1 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span className="kicker">RECENT PRS</span>
            <span className="mono" style={{ fontSize: 10, color: 'var(--ts-text-mute)' }}>4 this cycle</span>
          </div>
          <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column' }}>
            {[
              ['Deadlift', '9 @ 315', 'May 14', 'e1RM 409'],
              ['Squat',    '8 @ 240', 'May 12', 'e1RM 298'],
              ['Bench',    '7 @ 175', 'May 11', 'e1RM 217'],
            ].map((r, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '1fr auto auto',
                padding: '10px 0', borderTop: i === 0 ? 'none' : '1px solid var(--ts-border)',
                alignItems: 'center', gap: 10,
              }}>
                <div>
                  <span style={{ fontSize: 13, fontWeight: 600 }}>{r[0]}</span>
                  <span className="mono" style={{ marginLeft: 6, fontSize: 12, color: 'var(--ts-accent)' }}>{r[1]}+</span>
                </div>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ts-text-mute)' }}>{r[3]}</span>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ts-text-dim)' }}>{r[2]}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <TabBar active="progress"/>
      <Home/>
    </div>
  );
}

// ── Plate calculator modal ──────────────────────────────────────────
function PlateCalc() {
  return (
    <div className="ts phone">
      <StatusBar/>
      {/* dimmed bg */}
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.6)' }}/>
      {/* sheet */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        background: 'var(--ts-surface)',
        borderTopLeftRadius: 24, borderTopRightRadius: 24,
        padding: '14px 0 36px',
        border: '1px solid var(--ts-border)',
      }}>
        <div style={{ width: 40, height: 4, borderRadius: 2, background: 'var(--ts-border-2)', margin: '0 auto 14px' }}/>

        <div style={{ padding: '0 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div>
            <div className="kicker">PLATE CALCULATOR</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 4 }}>
              <span className="mono" style={{ fontSize: 56, fontWeight: 800, letterSpacing: '-0.06em' }}>315</span>
              <span className="mono" style={{ fontSize: 14, color: 'var(--ts-text-mute)' }}>lb</span>
            </div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ts-text-mute)', marginTop: 2 }}>= 45 bar + 4 plates per side</div>
          </div>
          <button className="icon-btn"><Ico.Close/></button>
        </div>

        {/* bar visual */}
        <div style={{ marginTop: 16, padding: '14px 0', background: 'var(--ts-bg)', borderTop: '1px solid var(--ts-border)', borderBottom: '1px solid var(--ts-border)' }}>
          <PlateStack plates={[45, 45, 25, 10, 5]} height={140}/>
          <div className="mono" style={{ textAlign: 'center', fontSize: 11, color: 'var(--ts-text-dim)', marginTop: 6, letterSpacing: '0.1em' }}>45 · 45 · 25 · 10 · 5  /  PER SIDE 135</div>
        </div>

        {/* plate buttons */}
        <div style={{ padding: '14px 20px' }}>
          <div className="kicker" style={{ marginBottom: 8 }}>TAP TO ADD · LONG-PRESS TO REMOVE</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8 }}>
            {[45, 35, 25, 10, 5, 2.5].map(w => (
              <button key={w} style={{
                padding: '14px 0', borderRadius: 10,
                background: 'var(--ts-surface-2)', border: '1px solid var(--ts-border)',
                color: 'var(--ts-text)', cursor: 'pointer',
              }}>
                <div style={{ height: 24, display: 'flex', justifyContent: 'center', alignItems: 'flex-end' }}>
                  <div style={{ width: PLATE_VIS[w].w, height: PLATE_VIS[w].h * 0.18, background: PLATE_VIS[w].color, borderRadius: 1.5 }}/>
                </div>
                <div className="mono" style={{ fontSize: 13, fontWeight: 600, marginTop: 6 }}>{w}</div>
              </button>
            ))}
          </div>

          <div style={{ marginTop: 14, padding: '10px 12px', background: 'var(--ts-surface-2)', borderRadius: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontSize: 12, color: 'var(--ts-text-mute)' }}>Round to my plate set</span>
            <span style={{ width: 36, height: 20, borderRadius: 10, background: 'var(--ts-text)', position: 'relative' }}>
              <span style={{ position: 'absolute', right: 2, top: 2, width: 16, height: 16, borderRadius: 8, background: '#000' }}/>
            </span>
          </div>

          <button className="ts-btn" style={{ marginTop: 14 }}>Set as session weight</button>
        </div>
      </div>
      <Home/>
    </div>
  );
}

// ── AI Coach ────────────────────────────────────────────────────────
function AICoach() {
  return (
    <div className="ts phone">
      <StatusBar/>
      <div style={{ padding: '8px 20px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <button className="icon-btn"><span style={{ transform: 'rotate(180deg)', display: 'flex' }}><Ico.Chevron/></span></button>
          <div>
            <div style={{ fontSize: 15, fontWeight: 600 }}>Coach</div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--ts-text-mute)' }}>HAIKU · 8/50 THIS MONTH</div>
          </div>
        </div>
        <span className="ts-chip accent" style={{ height: 22 }}>PREMIUM</span>
      </div>

      <div style={{ padding: '8px 16px', flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {/* user msg */}
        <div style={{ alignSelf: 'flex-end', maxWidth: '78%', padding: '10px 14px', background: 'var(--ts-text)', color: 'var(--ts-bg)', borderRadius: 14, borderBottomRightRadius: 4, fontSize: 14 }}>
          Should I increase my squat TM next cycle? Last AMRAP was 8 reps.
        </div>

        {/* ai msg */}
        <div style={{ alignSelf: 'flex-start', maxWidth: '90%', padding: '12px 14px', background: 'var(--ts-surface)', borderRadius: 14, borderBottomLeftRadius: 4, fontSize: 14, lineHeight: 1.45, color: 'var(--ts-text)' }}>
          8 reps @ 85% TM (235 lb) gives <span className="mono">e1RM ≈ 298</span>. That's a solid clearance over your current TM 265.
          <br/><br/>
          Bar speed was decent and you didn't grind. I'd recommend the standard <span className="mono">+10 lb</span> bump for lower-body lifts next cycle.
        </div>

        {/* tool call card */}
        <div style={{ alignSelf: 'flex-start', maxWidth: '100%', padding: '14px', background: 'var(--ts-surface-2)', borderRadius: 14, borderBottomLeftRadius: 4, border: '1px dashed var(--ts-border-2)' }}>
          <div className="kicker" style={{ marginBottom: 8 }}>PROPOSED CHANGE · REQUIRES TAP</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ts-text-mute)' }}>SQUAT TM</span>
            <span className="mono" style={{ fontSize: 16, color: 'var(--ts-text-mute)', textDecoration: 'line-through' }}>265</span>
            <span className="mono" style={{ fontSize: 22, fontWeight: 700, color: 'var(--ts-success)' }}>→ 275 lb</span>
          </div>
          <div style={{ marginTop: 4, fontSize: 11, color: 'var(--ts-text-dim)' }}>Effective Cycle 06 · W1 onward.</div>
          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
            <button className="ts-btn sm" style={{ background: 'var(--ts-success)', color: '#000', flex: 1 }}>Apply</button>
            <button className="ts-btn sm secondary" style={{ flex: 1 }}>Decline</button>
          </div>
        </div>

        {/* suggestion chips */}
        <div style={{ marginTop: 'auto', paddingTop: 6 }}>
          <div style={{ display: 'flex', gap: 6, overflow: 'hidden', marginBottom: 10 }}>
            {['Apply to all lifts?', 'What is BBB?', 'Reset Bench TM'].map(s => (
              <span key={s} className="ts-chip outline" style={{ height: 28, fontSize: 11, whiteSpace: 'nowrap' }}>{s}</span>
            ))}
          </div>
          <div style={{
            display: 'flex', padding: '10px 14px',
            background: 'var(--ts-surface)', border: '1px solid var(--ts-border)', borderRadius: 12,
            gap: 8, alignItems: 'center',
          }}>
            <span style={{ flex: 1, color: 'var(--ts-text-dim)', fontSize: 14 }}>Ask Coach…</span>
            <span style={{ color: 'var(--ts-text-mute)' }}><Ico.Plus/></span>
          </div>
        </div>
      </div>
      <Home/>
    </div>
  );
}

// ── Paywall ────────────────────────────────────────────────────────
function Paywall() {
  const rows = [
    ['Core 5/3/1 tracking', true, true],
    ['Plate calculator',    true, true],
    ['Basic charts',        true, true],
    ['BBB + assistance',    false, true],
    ['Advanced analytics',  false, true],
    ['Cloud sync',          false, true],
    ['Apple Watch / Wear',  false, true],
    ['AI Coach',            false, true],
  ];
  return (
    <div className="ts phone">
      <StatusBar/>
      <div style={{ padding: '8px 20px 8px', display: 'flex', justifyContent: 'flex-end' }}>
        <button className="icon-btn"><Ico.Close/></button>
      </div>

      <div style={{ padding: '8px 24px 0', flex: 1, overflow: 'hidden' }}>
        <div className="kicker accent">TOPSET PREMIUM</div>
        <h1 style={{ fontSize: 36, fontWeight: 600, letterSpacing: '-0.03em', margin: '8px 0 4px', textWrap: 'pretty' }}>
          Earn the right<br/>to <span style={{ color: 'var(--ts-accent)' }}>add weight</span>.
        </h1>
        <p style={{ color: 'var(--ts-text-mute)', fontSize: 14, lineHeight: 1.4 }}>Everything you need for serious 5/3/1.</p>

        {/* feature compare */}
        <div style={{ marginTop: 22, background: 'var(--ts-surface)', border: '1px solid var(--ts-border)', borderRadius: 14, overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 60px 60px', padding: '10px 14px', borderBottom: '1px solid var(--ts-border)' }}>
            <span className="kicker">FEATURE</span>
            <span className="kicker" style={{ textAlign: 'center' }}>FREE</span>
            <span className="kicker accent" style={{ textAlign: 'center' }}>PRO</span>
          </div>
          {rows.map(([f, free, pro], i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 60px 60px', padding: '10px 14px', borderTop: i === 0 ? 'none' : '1px solid var(--ts-border)' }}>
              <span style={{ fontSize: 13, color: 'var(--ts-text)' }}>{f}</span>
              <span style={{ textAlign: 'center', color: free ? 'var(--ts-text)' : 'var(--ts-text-dim)' }}>
                {free ? <Ico.Check/> : '—'}
              </span>
              <span style={{ textAlign: 'center', color: 'var(--ts-accent)' }}>
                {pro ? <Ico.Check/> : '—'}
              </span>
            </div>
          ))}
        </div>

        {/* plan selector */}
        <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { tag: 'BEST VALUE', name: 'Annual', sub: '$5.99 / mo · billed $71.88', selected: true },
            { tag: null,         name: 'Monthly', sub: '$8.99 / mo', selected: false },
            { tag: 'ONE TIME',   name: 'Lifetime', sub: '$149.99 · forever', selected: false },
          ].map(p => (
            <div key={p.name} style={{
              padding: '12px 14px',
              border: '2px solid ' + (p.selected ? 'var(--ts-text)' : 'var(--ts-border)'),
              borderRadius: 12,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              background: p.selected ? 'var(--ts-surface)' : 'transparent',
            }}>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ fontSize: 15, fontWeight: 600 }}>{p.name}</span>
                  {p.tag && <span className="ts-chip accent" style={{ height: 18, fontSize: 9 }}>{p.tag}</span>}
                </div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--ts-text-mute)', marginTop: 4 }}>{p.sub}</div>
              </div>
              <div style={{
                width: 20, height: 20, borderRadius: 10,
                border: '2px solid ' + (p.selected ? 'var(--ts-text)' : 'var(--ts-text-dim)'),
                position: 'relative',
              }}>
                {p.selected && <div style={{ position: 'absolute', inset: 3, borderRadius: 6, background: 'var(--ts-text)' }}/>}
              </div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: '14px 16px 36px', textAlign: 'center' }}>
        <button className="ts-btn" style={{ height: 60 }}>Start 7-day free trial</button>
        <div style={{ marginTop: 10, display: 'flex', justifyContent: 'center', gap: 14 }}>
          <span style={{ fontSize: 11, color: 'var(--ts-text-mute)' }}>Restore purchases</span>
          <span style={{ fontSize: 11, color: 'var(--ts-text-mute)' }}>Terms · Privacy</span>
        </div>
      </div>
      <Home/>
    </div>
  );
}

// ── Settings ────────────────────────────────────────────────────────
function Settings() {
  const groups = [
    ['PROFILE', [
      ['Name', 'Marcus C.'],
      ['Email', 'marcus@—'],
      ['Units', 'lb'],
    ]],
    ['EQUIPMENT', [
      ['Bar weight', '45 lb'],
      ['Plate set', '45 / 25 / 10 / 5 / 2.5'],
    ]],
    ['PROGRAM', [
      ['Boring But Big (BBB)', 'On · 50% TM'],
      ['Deload week', 'Take'],
      ['Training Max %', '90%'],
      ['Increment per cycle', '+10 / +5 lb'],
    ]],
    ['', [
      ['Lift order', 'SQ → BP → DL → OH'],
      ['Notifications', '3 enabled'],
      ['Sync & Account', 'Signed in'],
      ['Subscription', 'Annual'],
    ]],
  ];
  return (
    <div className="ts phone">
      <StatusBar/>
      <header style={{ padding: '8px 24px 14px' }}>
        <div className="kicker">SETTINGS</div>
        <h1 style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.03em', margin: '4px 0 0' }}>Configure.</h1>
      </header>

      <div style={{ padding: '0 16px', flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 18 }}>
        {groups.map(([title, items], gi) => (
          <div key={gi}>
            {title && <div className="kicker" style={{ marginBottom: 8, paddingLeft: 4 }}>{title}</div>}
            <div style={{ background: 'var(--ts-surface)', border: '1px solid var(--ts-border)', borderRadius: 12, overflow: 'hidden' }}>
              {items.map(([label, value], i) => (
                <div key={label} style={{
                  display: 'grid', gridTemplateColumns: '1fr auto 12px',
                  alignItems: 'center', gap: 10, padding: '12px 14px',
                  borderTop: i === 0 ? 'none' : '1px solid var(--ts-border)',
                }}>
                  <span style={{ fontSize: 14 }}>{label}</span>
                  <span className="mono" style={{ fontSize: 12, color: 'var(--ts-text-mute)' }}>{value}</span>
                  <span style={{ color: 'var(--ts-text-dim)' }}><Ico.Chevron/></span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      <TabBar active="settings"/>
      <Home/>
    </div>
  );
}

// ── Persistent session banner (open question #1 — recommended: yes) ──
function PersistentBanner() {
  return (
    <div className="ts phone">
      <StatusBar/>
      <header style={{ padding: '8px 24px 14px' }}>
        <div className="kicker">PROGRESS · DEMO OF SESSION BANNER</div>
        <h1 style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em', margin: '4px 0 0' }}>Mid-rest, on another tab</h1>
      </header>

      <div style={{ padding: '0 16px', flex: 1 }}>
        <div style={{ padding: 14, background: 'var(--ts-surface)', border: '1px solid var(--ts-border)', borderRadius: 12, opacity: 0.5 }}>
          <div className="kicker">RECENT PRS</div>
          <div style={{ marginTop: 8, fontSize: 13 }}>Deadlift · 9 @ 315 · May 14</div>
        </div>
      </div>

      {/* persistent banner */}
      <div style={{
        position: 'absolute', left: 12, right: 12, bottom: 96,
        padding: 12,
        background: 'var(--ts-surface-2)',
        border: '1px solid var(--ts-accent-line)',
        borderRadius: 14,
        backdropFilter: 'blur(20px)',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <RestRing size={42} progress={0.45} label="1:08" accent strokeWidth={3}/>
        <div style={{ flex: 1 }}>
          <div className="kicker accent" style={{ fontSize: 9 }}>SESSION IN PROGRESS</div>
          <div className="mono" style={{ fontSize: 13, fontWeight: 600, marginTop: 2 }}>Deadlift · Set 02 of 03</div>
        </div>
        <button className="ts-btn sm" style={{ background: 'var(--ts-text)', color: '#000' }}>Resume</button>
      </div>

      <TabBar active="progress"/>
      <Home/>
    </div>
  );
}

Object.assign(window, {
  SummaryScreen, HistoryCalendar, HistorySession,
  ProgressScreen, PlateCalc, AICoach, Paywall, Settings, PersistentBanner,
});