// client-screens.jsx — iPhone screens for clients

// ─────────────────────────────────────────────────────────────
// Reusable phone shell — aurora bg behind whatever screen
// ─────────────────────────────────────────────────────────────
function PhoneShell({ children, tab = 'workout' }) {
  return (
    <IOSDevice dark={true} width={390} height={844}>
      <AuroraBG variant="phone" style={{ width: '100%', height: '100%' }}>
        <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
          <div style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden', paddingTop: 54 }}>
            {children}
          </div>
          <ClientTabBar active={tab} />
        </div>
      </AuroraBG>
    </IOSDevice>
  );
}

function ClientTabBar({ active = 'workout' }) {
  const items = [
    { id: 'workout', label: 'Today', icon: 'flame' },
    { id: 'plan',    label: 'Plan',  icon: 'cal'   },
    { id: 'chat',    label: 'Coach', icon: 'chat'  },
    { id: 'profile', label: 'You',   icon: 'user'  },
  ];
  return (
    <div style={{
      position: 'relative', padding: '8px 14px 28px', display: 'flex', justifyContent: 'center',
    }}>
      <Glass radius={32} strength="strong" style={{
        display: 'flex', padding: 6, gap: 2, width: '100%',
      }}>
        {items.map(it => {
          const on = it.id === active;
          return (
            <div key={it.id} style={{
              flex: 1, height: 52, borderRadius: 26,
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
              gap: 2, position: 'relative',
              background: on ? 'rgba(110,231,168,0.16)' : 'transparent',
              border: on ? '0.5px solid rgba(110,231,168,0.35)' : '0.5px solid transparent',
            }}>
              <Icon name={it.icon} size={20} color={on ? 'var(--accent-mint)' : 'rgba(255,255,255,0.55)'} />
              <div style={{ fontSize: 10, fontWeight: 500, letterSpacing: 0.2, color: on ? 'var(--accent-mint)' : 'rgba(255,255,255,0.55)' }}>{it.label}</div>
            </div>
          );
        })}
      </Glass>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// HERO: today's workout — interactive
// ─────────────────────────────────────────────────────────────
function ClientWorkout({ accent = 'mint' }) {
  const accentColor = accent === 'mint' ? '#6ee7a8' : accent === 'teal' ? '#22d3ee' : '#fbbf24';
  const [expanded, setExpanded] = React.useState(1);
  const [completed, setCompleted] = React.useState({});  // exId -> Set of completed set indexes
  const [difficulty, setDifficulty] = React.useState({}); // exId -> 'easy' | 'normal' | 'hard'

  const toggleSet = (exId, setIdx) => {
    setCompleted(prev => {
      const s = new Set(prev[exId] || []);
      s.has(setIdx) ? s.delete(setIdx) : s.add(setIdx);
      return { ...prev, [exId]: s };
    });
  };

  const totalSets = exercisesToday.reduce((a, e) => a + e.sets, 0) + drillsToday.reduce((a, e) => a + e.sets, 0);
  const doneSets = Object.values(completed).reduce((a, s) => a + (s?.size || 0), 0);
  const progress = doneSets / totalSets;

  return (
    <PhoneShell tab="workout">
      <div style={{ padding: '0 18px 8px' }}>
        {/* header */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: 1.4, color: accentColor, textTransform: 'uppercase' }}>Wed · Week 8 · Block C</div>
          <Avatar src={photos.coach.marcus} size={32} />
        </div>
        <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 38, lineHeight: 1.05, letterSpacing: -0.5, marginTop: 6, marginBottom: 2 }}>
          Lower body
          <span style={{ color: 'rgba(255,255,255,0.4)' }}> · strength</span>
        </div>
        <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 14 }}>
          7 exercises · 3 drills · ~62 min
        </div>

        {/* progress + 1RM mini card */}
        <Glass radius={22} style={{ padding: 14, marginBottom: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
            <div>
              <div style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: 0.4, textTransform: 'uppercase', fontWeight: 600 }}>Session progress</div>
              <div style={{ fontSize: 22, fontWeight: 600, marginTop: 2 }}>{doneSets} <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>/ {totalSets} sets</span></div>
            </div>
            <div style={{ width: 52, height: 52, position: 'relative' }}>
              <svg width="52" height="52" viewBox="0 0 52 52">
                <circle cx="26" cy="26" r="22" fill="none" stroke="rgba(255,255,255,0.10)" strokeWidth="4" />
                <circle cx="26" cy="26" r="22" fill="none" stroke={accentColor} strokeWidth="4"
                  strokeDasharray={2 * Math.PI * 22}
                  strokeDashoffset={2 * Math.PI * 22 * (1 - progress)}
                  strokeLinecap="round"
                  transform="rotate(-90 26 26)" />
              </svg>
              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 600 }}>
                {Math.round(progress * 100)}%
              </div>
            </div>
          </div>
          <OneRMSpark accent={accentColor} />
        </Glass>

        {/* exercise section header */}
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', margin: '6px 4px 8px' }}>
          <div style={{ fontSize: 18, fontWeight: 600 }}>Main work</div>
          <div style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>7 exercises</div>
        </div>

        {/* exercises */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {exercisesToday.map((ex, idx) => (
            <ExerciseCard
              key={ex.id}
              ex={ex}
              idx={idx + 1}
              expanded={expanded === ex.id}
              onExpand={() => setExpanded(expanded === ex.id ? null : ex.id)}
              completedSets={completed[ex.id] || new Set()}
              onToggleSet={(i) => toggleSet(ex.id, i)}
              difficulty={difficulty[ex.id] || 'normal'}
              onDifficulty={(v) => setDifficulty({ ...difficulty, [ex.id]: v })}
              accentColor={accentColor}
            />
          ))}
        </div>

        {/* drills */}
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', margin: '22px 4px 8px' }}>
          <div style={{ fontSize: 18, fontWeight: 600 }}>Finisher drills</div>
          <div style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>3 drills</div>
        </div>
        <Glass radius={22} style={{ padding: 4 }}>
          {drillsToday.map((d, i) => (
            <div key={d.id} style={{
              display: 'flex', alignItems: 'center', padding: '12px 14px',
              borderBottom: i < drillsToday.length - 1 ? '0.5px solid rgba(255,255,255,0.08)' : 'none',
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 8,
                background: 'rgba(255,255,255,0.06)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600,
                marginRight: 12,
              }}>D{i + 1}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 15, fontWeight: 500 }}>{d.name}</div>
                <div style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 1 }}>{d.sets} sets × {d.reps}</div>
              </div>
              <div onClick={() => toggleSet(d.id, 0)} style={{
                width: 26, height: 26, borderRadius: 13,
                border: completed[d.id]?.has(0) ? `1.5px solid ${accentColor}` : '1.5px solid rgba(255,255,255,0.22)',
                background: completed[d.id]?.has(0) ? accentColor : 'transparent',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                cursor: 'pointer',
              }}>
                {completed[d.id]?.has(0) && <Icon name="check" size={14} color="#0a1a14" strokeWidth={3} />}
              </div>
            </div>
          ))}
        </Glass>

        {/* finish CTA */}
        <div style={{
          marginTop: 18, padding: 16, borderRadius: 20,
          background: `linear-gradient(135deg, ${accentColor} 0%, #34d399 100%)`,
          color: '#06150f', display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 16, fontWeight: 600, gap: 8, letterSpacing: -0.1,
          boxShadow: `0 8px 28px ${accentColor}40`,
        }}>
          Finish session
          <Icon name="arrowR" size={18} color="#06150f" strokeWidth={2} />
        </div>
        <div style={{ height: 6 }} />
      </div>
    </PhoneShell>
  );
}

function ExerciseCard({ ex, idx, expanded, onExpand, completedSets, onToggleSet, difficulty, onDifficulty, accentColor }) {
  const setsDone = completedSets.size;
  const allDone = setsDone === ex.sets;
  const diffOptions = [
    { id: 'easy',   label: 'Easy',   color: '#22d3ee' },
    { id: 'normal', label: 'On plan',color: accentColor },
    { id: 'hard',   label: 'Hard',   color: '#fbbf24' },
  ];
  return (
    <Glass radius={20} style={{ padding: 0, overflow: 'hidden' }}>
      {/* header row */}
      <div onClick={onExpand} style={{
        display: 'flex', alignItems: 'center', padding: '14px 14px',
        cursor: 'pointer', gap: 12,
      }}>
        <div style={{
          width: 38, height: 38, borderRadius: 11,
          background: allDone ? `${accentColor}22` : 'rgba(255,255,255,0.06)',
          border: allDone ? `0.5px solid ${accentColor}80` : '0.5px solid rgba(255,255,255,0.08)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 13, fontWeight: 600,
          color: allDone ? accentColor : 'var(--text-secondary)',
        }}>
          {allDone ? <Icon name="check" size={18} color={accentColor} strokeWidth={2.5} /> : idx}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 16, fontWeight: 500, letterSpacing: -0.1 }}>{ex.name}</div>
          <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginTop: 3 }}>
            <span style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>{ex.sets}×{ex.reps} · {ex.weight}kg · RPE {ex.rpe}</span>
            <span style={{
              fontSize: 9, fontWeight: 600, letterSpacing: 0.4, textTransform: 'uppercase',
              padding: '2px 6px', borderRadius: 4,
              background: 'rgba(255,255,255,0.06)', color: 'var(--text-tertiary)',
            }}>{ex.tag}</span>
          </div>
        </div>
        <div style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>{setsDone}/{ex.sets}</div>
        <Icon name="chevD" size={16} color="rgba(255,255,255,0.4)" style={{ transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform 200ms' }} />
      </div>

      {/* expanded body */}
      {expanded && (
        <div style={{ padding: '0 14px 14px', borderTop: '0.5px solid rgba(255,255,255,0.06)' }}>
          {/* sets grid */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr', gap: 6, marginTop: 12 }}>
            {Array.from({ length: ex.sets }).map((_, i) => {
              const done = completedSets.has(i);
              return (
                <div key={i} onClick={() => onToggleSet(i)} style={{
                  height: 56, borderRadius: 12, padding: 6,
                  background: done ? `${accentColor}1a` : 'rgba(255,255,255,0.04)',
                  border: done ? `0.5px solid ${accentColor}80` : '0.5px solid rgba(255,255,255,0.08)',
                  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                  cursor: 'pointer',
                }}>
                  <div style={{ fontSize: 9, color: done ? accentColor : 'var(--text-tertiary)', fontWeight: 600, letterSpacing: 0.4 }}>SET {i + 1}</div>
                  <div style={{ fontSize: 14, fontWeight: 600, marginTop: 2, color: done ? '#fff' : 'var(--text-secondary)' }}>{ex.weight}</div>
                  <div style={{ fontSize: 9, color: 'var(--text-tertiary)' }}>×{ex.reps}</div>
                </div>
              );
            })}
          </div>

          {/* difficulty pill */}
          <div style={{ marginTop: 12 }}>
            <div style={{ fontSize: 10, color: 'var(--text-tertiary)', fontWeight: 600, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 6 }}>How did it feel?</div>
            <div style={{ display: 'flex', gap: 6 }}>
              {diffOptions.map(opt => {
                const on = difficulty === opt.id;
                return (
                  <div key={opt.id} onClick={() => onDifficulty(opt.id)} style={{
                    flex: 1, height: 34, borderRadius: 10,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 12, fontWeight: 500, letterSpacing: -0.1, cursor: 'pointer',
                    background: on ? `${opt.color}1f` : 'rgba(255,255,255,0.04)',
                    border: on ? `0.5px solid ${opt.color}80` : '0.5px solid rgba(255,255,255,0.08)',
                    color: on ? opt.color : 'var(--text-secondary)',
                  }}>{opt.label}</div>
                );
              })}
            </div>
          </div>

          {/* video link + notes */}
          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
            <div style={{
              flex: 1, height: 36, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              background: 'rgba(255,255,255,0.04)', border: '0.5px solid rgba(255,255,255,0.08)',
              fontSize: 12, fontWeight: 500, color: 'var(--text-secondary)',
            }}>
              <Icon name="youtube" size={14} color="#ef4444" strokeWidth={1.4} /> Form video
            </div>
            <div style={{
              flex: 1, height: 36, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              background: 'rgba(255,255,255,0.04)', border: '0.5px solid rgba(255,255,255,0.08)',
              fontSize: 12, fontWeight: 500, color: 'var(--text-secondary)',
            }}>
              <Icon name="info" size={14} color="rgba(255,255,255,0.7)" /> Notes
            </div>
          </div>
        </div>
      )}
    </Glass>
  );
}

function OneRMSpark({ accent = '#6ee7a8' }) {
  const data = oneRMHistory.map(d => d.sq);
  const min = Math.min(...data) - 5;
  const max = Math.max(...data) + 5;
  const w = 180, h = 44;
  const pts = data.map((v, i) => [i / (data.length - 1) * w, h - ((v - min) / (max - min)) * h]);
  const path = pts.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(' ');
  const area = `${path} L${w},${h} L0,${h} Z`;
  const last = data[data.length - 1];
  const prev = data[0];
  const delta = last - prev;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
      <div>
        <div style={{ fontSize: 10, color: 'var(--text-tertiary)', fontWeight: 600, letterSpacing: 0.4, textTransform: 'uppercase' }}>e1RM · Squat</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
          <div style={{ fontSize: 22, fontWeight: 600 }}>{last}<span style={{ fontSize: 11, color: 'var(--text-tertiary)', fontWeight: 400 }}>kg</span></div>
          <div style={{ fontSize: 11, color: accent, fontWeight: 600 }}>+{delta}</div>
        </div>
      </div>
      <svg width={w} height={h} style={{ overflow: 'visible' }}>
        <defs>
          <linearGradient id="sparkFill" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor={accent} stopOpacity="0.4" />
            <stop offset="100%" stopColor={accent} stopOpacity="0" />
          </linearGradient>
        </defs>
        <path d={area} fill="url(#sparkFill)" />
        <path d={path} fill="none" stroke={accent} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        {pts.map((p, i) => i === pts.length - 1 && (
          <g key={i}>
            <circle cx={p[0]} cy={p[1]} r="6" fill={accent} opacity="0.3" />
            <circle cx={p[0]} cy={p[1]} r="2.5" fill={accent} />
          </g>
        ))}
      </svg>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 1RM full chart screen (static)
// ─────────────────────────────────────────────────────────────
function ClientOneRM({ accent = 'mint' }) {
  const accentColor = accent === 'mint' ? '#6ee7a8' : accent === 'teal' ? '#22d3ee' : '#fbbf24';
  const [lift, setLift] = React.useState('sq');
  const data = oneRMHistory.map(d => d[lift]);
  const min = Math.min(...data) - 8;
  const max = Math.max(...data) + 8;
  const w = 340, h = 200;
  const pts = data.map((v, i) => [i / (data.length - 1) * w, h - ((v - min) / (max - min)) * h]);
  const path = pts.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(' ');
  const area = `${path} L${w},${h} L0,${h} Z`;
  const lifts = [
    { id: 'sq', label: 'Squat' },
    { id: 'dl', label: 'Deadlift' },
    { id: 'bp', label: 'Bench' },
  ];
  const cur = data[data.length - 1];
  const prev = data[0];
  return (
    <PhoneShell tab="plan">
      <div style={{ padding: '0 18px' }}>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: 1.4, color: accentColor, textTransform: 'uppercase' }}>Progress</div>
        <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 38, lineHeight: 1.05, letterSpacing: -0.5, marginTop: 6 }}>Estimated 1RM</div>
        <div style={{ fontSize: 13, color: 'var(--text-secondary)', margin: '6px 0 16px' }}>12 weeks of work · auto-calculated from your top sets</div>

        <Glass radius={26} style={{ padding: 18 }}>
          <div style={{ display: 'flex', gap: 6, marginBottom: 16 }}>
            {lifts.map(l => (
              <div key={l.id} onClick={() => setLift(l.id)} style={{
                flex: 1, padding: '8px 0', borderRadius: 10, textAlign: 'center',
                fontSize: 12, fontWeight: 500, cursor: 'pointer',
                background: lift === l.id ? 'rgba(255,255,255,0.08)' : 'transparent',
                border: lift === l.id ? '0.5px solid rgba(255,255,255,0.16)' : '0.5px solid transparent',
                color: lift === l.id ? '#fff' : 'var(--text-secondary)',
              }}>{l.label}</div>
            ))}
          </div>

          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 14 }}>
            <div style={{ fontSize: 44, fontWeight: 600, letterSpacing: -1, lineHeight: 1 }}>{cur}<span style={{ fontSize: 18, color: 'var(--text-tertiary)', fontWeight: 400 }}> kg</span></div>
            <div style={{
              padding: '4px 8px', borderRadius: 8,
              background: `${accentColor}1f`, border: `0.5px solid ${accentColor}40`,
              fontSize: 11, fontWeight: 600, color: accentColor,
            }}>+{cur - prev}kg · 12w</div>
          </div>

          <svg width={w} height={h + 20} style={{ overflow: 'visible' }}>
            <defs>
              <linearGradient id="chartFill" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor={accentColor} stopOpacity="0.32" />
                <stop offset="100%" stopColor={accentColor} stopOpacity="0" />
              </linearGradient>
            </defs>
            {/* grid lines */}
            {[0, 0.25, 0.5, 0.75, 1].map(t => (
              <line key={t} x1="0" x2={w} y1={t * h} y2={t * h} stroke="rgba(255,255,255,0.06)" strokeWidth="0.5" />
            ))}
            <path d={area} fill="url(#chartFill)" />
            <path d={path} fill="none" stroke={accentColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            {pts.map((p, i) => (
              <circle key={i} cx={p[0]} cy={p[1]} r="2" fill={accentColor} />
            ))}
            {/* end marker */}
            <circle cx={pts[pts.length - 1][0]} cy={pts[pts.length - 1][1]} r="8" fill={accentColor} opacity="0.25" />
            <circle cx={pts[pts.length - 1][0]} cy={pts[pts.length - 1][1]} r="4" fill={accentColor} />
            {/* x labels */}
            {[0, 3, 6, 9, 11].map(i => (
              <text key={i} x={i / 11 * w} y={h + 16} textAnchor="middle" fill="rgba(255,255,255,0.4)" fontSize="10" fontFamily="Inter">W{i + 1}</text>
            ))}
          </svg>
        </Glass>

        {/* lift cards */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 12 }}>
          <Glass radius={18} style={{ padding: 14 }}>
            <div style={{ fontSize: 10, color: 'var(--text-tertiary)', fontWeight: 600, letterSpacing: 0.6, textTransform: 'uppercase' }}>Best 5RM</div>
            <div style={{ fontSize: 24, fontWeight: 600, marginTop: 4 }}>160<span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}> kg</span></div>
            <div style={{ fontSize: 11, color: 'var(--text-secondary)', marginTop: 2 }}>Squat · 2 days ago</div>
          </Glass>
          <Glass radius={18} style={{ padding: 14 }}>
            <div style={{ fontSize: 10, color: 'var(--text-tertiary)', fontWeight: 600, letterSpacing: 0.6, textTransform: 'uppercase' }}>Volume · 7d</div>
            <div style={{ fontSize: 24, fontWeight: 600, marginTop: 4 }}>14,820<span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}> kg</span></div>
            <div style={{ fontSize: 11, color: accentColor, marginTop: 2 }}>+8.2% vs last</div>
          </Glass>
        </div>
      </div>
    </PhoneShell>
  );
}

// ─────────────────────────────────────────────────────────────
// Payment tiers
// ─────────────────────────────────────────────────────────────
function ClientPayment({ accent = 'mint' }) {
  const accentColor = accent === 'mint' ? '#6ee7a8' : accent === 'teal' ? '#22d3ee' : '#fbbf24';
  const tiers = [
    {
      label: 'Monthly', price: '$100', sub: '/ month', total: '$1,200/year', save: null, recommended: false,
      perks: ['Weekly programming', 'Form checks via video', 'Unlimited chat'],
    },
    {
      label: 'Quarterly', price: '$200', sub: '/ 3 months', total: '$800/year', save: 'Save $400', recommended: true,
      perks: ['Everything in Monthly', '2 video calls / month', 'Nutrition guidance'],
    },
    {
      label: 'Annual', price: '$300', sub: '/ year', total: '$25/month effective', save: 'Save $900', recommended: false,
      perks: ['Everything in Quarterly', 'Monthly in-person session', 'Personalized macros'],
    },
  ];
  return (
    <PhoneShell tab="profile">
      <div style={{ padding: '0 18px' }}>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: 1.4, color: accentColor, textTransform: 'uppercase' }}>Membership</div>
        <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 38, lineHeight: 1.05, letterSpacing: -0.5, marginTop: 6 }}>
          Train with<br/>Marcus.
        </div>
        <div style={{ fontSize: 13, color: 'var(--text-secondary)', margin: '8px 0 18px', maxWidth: 320 }}>
          Pick a cadence. The longer you commit, the deeper the work — and the bigger the discount.
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {tiers.map(t => (
            <Glass key={t.label} radius={22} glow={t.recommended} strength={t.recommended ? 'strong' : 'normal'} style={{ padding: 18, position: 'relative' }}>
              {t.recommended && (
                <div style={{
                  position: 'absolute', top: -10, right: 16,
                  padding: '4px 10px', borderRadius: 8,
                  background: `linear-gradient(135deg, ${accentColor}, #34d399)`,
                  fontSize: 9, fontWeight: 700, letterSpacing: 1, color: '#06150f', textTransform: 'uppercase',
                }}>Most popular</div>
              )}
              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
                <div>
                  <div style={{ fontSize: 13, color: 'var(--text-secondary)', fontWeight: 500 }}>{t.label}</div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 4 }}>
                    <div style={{ fontSize: 36, fontWeight: 600, letterSpacing: -1, lineHeight: 1 }}>{t.price}</div>
                    <div style={{ fontSize: 13, color: 'var(--text-tertiary)' }}>{t.sub}</div>
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 4 }}>{t.total}</div>
                </div>
                {t.save && (
                  <div style={{
                    padding: '4px 10px', borderRadius: 999,
                    background: 'rgba(110,231,168,0.12)',
                    border: '0.5px solid rgba(110,231,168,0.3)',
                    fontSize: 10, fontWeight: 600, color: accentColor,
                  }}>{t.save}</div>
                )}
              </div>
              <div style={{ height: 0.5, background: 'rgba(255,255,255,0.08)', margin: '14px 0 12px' }} />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {t.perks.map(p => (
                  <div key={p} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <div style={{
                      width: 18, height: 18, borderRadius: 9,
                      background: t.recommended ? `${accentColor}26` : 'rgba(255,255,255,0.06)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                    }}>
                      <Icon name="check" size={11} color={t.recommended ? accentColor : 'rgba(255,255,255,0.6)'} strokeWidth={2.5} />
                    </div>
                    <div style={{ fontSize: 13, color: 'var(--text-primary)' }}>{p}</div>
                  </div>
                ))}
              </div>
              {t.recommended && (
                <div style={{
                  marginTop: 14, padding: '11px 14px', borderRadius: 14,
                  background: `linear-gradient(135deg, ${accentColor}, #34d399)`,
                  color: '#06150f', textAlign: 'center', fontSize: 14, fontWeight: 600,
                }}>Choose {t.label.toLowerCase()}</div>
              )}
            </Glass>
          ))}
        </div>

        <div style={{ fontSize: 11, color: 'var(--text-tertiary)', textAlign: 'center', margin: '16px 0', lineHeight: 1.5 }}>
          Cancel anytime · 7-day refund window · billed securely via Stripe
        </div>
      </div>
    </PhoneShell>
  );
}

// ─────────────────────────────────────────────────────────────
// Client profile — goals + injury history
// ─────────────────────────────────────────────────────────────
function ClientProfile({ accent = 'mint' }) {
  const accentColor = accent === 'mint' ? '#6ee7a8' : accent === 'teal' ? '#22d3ee' : '#fbbf24';
  return (
    <PhoneShell tab="profile">
      <div style={{ padding: '0 18px' }}>
        {/* hero */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
          <Avatar src={photos.clients.elena} size={68} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 28, lineHeight: 1.05, letterSpacing: -0.3 }}>Elena Rossi</div>
            <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 2 }}>Milan · 32 · 64kg · 5'7"</div>
          </div>
          <div style={{
            width: 34, height: 34, borderRadius: 17, background: 'rgba(255,255,255,0.06)',
            border: '0.5px solid rgba(255,255,255,0.10)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><Icon name="settings" size={16} color="rgba(255,255,255,0.7)" /></div>
        </div>

        {/* stats row */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginBottom: 14 }}>
          {[
            { label: 'Streak',    value: '14', unit: 'days' },
            { label: 'Sessions', value: '186', unit: 'total' },
            { label: 'Volume',   value: '142k', unit: 'kg' },
          ].map(s => (
            <Glass key={s.label} radius={16} style={{ padding: 12, textAlign: 'center' }}>
              <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.5 }}>{s.value}<span style={{ fontSize: 11, color: 'var(--text-tertiary)', fontWeight: 400 }}> {s.unit}</span></div>
              <div style={{ fontSize: 10, color: 'var(--text-tertiary)', fontWeight: 500, letterSpacing: 0.4, textTransform: 'uppercase', marginTop: 2 }}>{s.label}</div>
            </Glass>
          ))}
        </div>

        {/* Goals */}
        <SectionLabel accent={accentColor}>My goal</SectionLabel>
        <Glass radius={20} style={{ padding: 16, marginBottom: 14 }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            <div style={{
              width: 38, height: 38, borderRadius: 11,
              background: `${accentColor}1f`, border: `0.5px solid ${accentColor}40`,
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <Icon name="target" size={18} color={accentColor} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 500, marginBottom: 2 }}>Squat 2× bodyweight by November</div>
              <div style={{ fontSize: 12, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
                I want my legs to feel as strong as they did when I rowed in college. Less obsessing over the mirror, more obsessing over the bar.
              </div>
              <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ flex: 1, height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.08)', overflow: 'hidden' }}>
                  <div style={{ width: '64%', height: '100%', background: `linear-gradient(90deg, ${accentColor}, #34d399)` }} />
                </div>
                <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 500 }}>64% · 22w left</div>
              </div>
            </div>
          </div>
        </Glass>

        {/* Injury history */}
        <SectionLabel accent={accentColor}>Injury history</SectionLabel>
        <Glass radius={20} style={{ padding: 0, overflow: 'hidden', marginBottom: 14 }}>
          {[
            { area: 'Right knee', detail: 'Partial MCL · 2019', status: 'Healed · avoid deep ATG', color: '#fbbf24' },
            { area: 'Lower back', detail: 'L4–L5 strain · 2022',  status: 'Resolved · monitor RDL load', color: '#fbbf24' },
            { area: 'Right shoulder', detail: 'Impingement · 2024', status: 'Active · no overhead BB', color: '#ef4444' },
          ].map((inj, i, arr) => (
            <div key={inj.area} style={{
              padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12,
              borderBottom: i < arr.length - 1 ? '0.5px solid rgba(255,255,255,0.06)' : 'none',
            }}>
              <div style={{
                width: 6, height: 36, borderRadius: 3, background: inj.color, flexShrink: 0,
              }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{inj.area}</div>
                <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 1 }}>{inj.detail}</div>
              </div>
              <div style={{ fontSize: 11, color: 'var(--text-secondary)', textAlign: 'right', maxWidth: 140 }}>{inj.status}</div>
            </div>
          ))}
          <div style={{
            padding: '12px 16px', borderTop: '0.5px solid rgba(255,255,255,0.06)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            fontSize: 13, color: accentColor, fontWeight: 500,
          }}>
            <Icon name="plus" size={14} color={accentColor} /> Add an injury or limitation
          </div>
        </Glass>

        {/* Quick prefs */}
        <SectionLabel accent={accentColor}>Preferences</SectionLabel>
        <Glass radius={20} style={{ padding: 0, overflow: 'hidden', marginBottom: 24 }}>
          {[
            ['Days per week', '4'],
            ['Session length', '60–75 min'],
            ['Equipment access', 'Full gym + cables'],
            ['Notifications', 'Morning · 7:00'],
          ].map(([k, v], i, arr) => (
            <div key={k} style={{
              padding: '13px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              borderBottom: i < arr.length - 1 ? '0.5px solid rgba(255,255,255,0.06)' : 'none',
            }}>
              <div style={{ fontSize: 14 }}>{k}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4, color: 'var(--text-tertiary)', fontSize: 13 }}>
                {v} <Icon name="chevR" size={14} color="rgba(255,255,255,0.3)" />
              </div>
            </div>
          ))}
        </Glass>
      </div>
    </PhoneShell>
  );
}

function SectionLabel({ children, accent }) {
  return (
    <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase', color: 'var(--text-secondary)', margin: '4px 4px 8px' }}>
      {children}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Messaging + Video call
// ─────────────────────────────────────────────────────────────
function ClientMessaging({ accent = 'mint' }) {
  const accentColor = accent === 'mint' ? '#6ee7a8' : accent === 'teal' ? '#22d3ee' : '#fbbf24';
  const msgs = [
    { from: 'coach', text: 'Hey — how did yesterday\'s squats feel?', time: '8:14' },
    { from: 'me',    text: '145 went up clean. Last set was a grinder but no form break', time: '8:15' },
    { from: 'coach', text: 'Beautiful. Knee tracking?', time: '8:15' },
    { from: 'me',    text: 'Solid. I\'ll send video of set 3 in a sec', time: '8:16' },
    { from: 'coach', text: 'Push 147.5 next Wed. RPE target 8.', time: '8:17' },
    { from: 'coach', text: 'And for tomorrow — sub leg curl for nordics if your hamstrings are tight.', time: '8:17' },
  ];
  return (
    <IOSDevice dark={true} width={390} height={844}>
      <AuroraBG variant="phone" style={{ width: '100%', height: '100%' }}>
        <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
          {/* glass nav */}
          <div style={{ paddingTop: 54, paddingBottom: 12, padding: '54px 14px 12px', position: 'relative', zIndex: 5 }}>
            <Glass radius={24} strength="strong" style={{
              display: 'flex', alignItems: 'center', padding: '8px 12px', gap: 12,
            }}>
              <Icon name="chevL" size={20} color="rgba(255,255,255,0.7)" />
              <Avatar src={photos.coach.marcus} size={36} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 15, fontWeight: 600 }}>Marcus Thorne</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                  <div style={{ width: 6, height: 6, borderRadius: 3, background: accentColor }} />
                  <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>Online · Coach</div>
                </div>
              </div>
              <div style={{
                width: 36, height: 36, borderRadius: 18,
                background: 'rgba(255,255,255,0.06)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}><Icon name="phone" size={16} color="rgba(255,255,255,0.8)" /></div>
              <div style={{
                width: 36, height: 36, borderRadius: 18,
                background: `${accentColor}22`, border: `0.5px solid ${accentColor}40`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}><Icon name="video" size={16} color={accentColor} /></div>
            </Glass>
          </div>

          {/* messages */}
          <div style={{ flex: 1, overflowY: 'auto', padding: '0 14px', display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div style={{ alignSelf: 'center', fontSize: 11, color: 'var(--text-tertiary)', fontWeight: 500, margin: '8px 0' }}>Today · 8:14 AM</div>
            {msgs.map((m, i) => (
              <div key={i} style={{
                alignSelf: m.from === 'me' ? 'flex-end' : 'flex-start',
                maxWidth: '80%',
              }}>
                {m.from === 'coach' && (i === 0 || msgs[i-1].from !== 'coach') && (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4, marginLeft: 4 }}>
                    <div style={{ fontSize: 10, color: 'var(--text-tertiary)', fontWeight: 500 }}>Marcus · {m.time}</div>
                  </div>
                )}
                <div style={{
                  padding: '10px 14px', borderRadius: 18,
                  background: m.from === 'me'
                    ? `linear-gradient(135deg, ${accentColor}, #34d399)`
                    : 'rgba(255,255,255,0.08)',
                  border: m.from === 'me' ? 'none' : '0.5px solid rgba(255,255,255,0.08)',
                  backdropFilter: m.from === 'me' ? 'none' : 'blur(20px)',
                  fontSize: 14, lineHeight: 1.4,
                  color: m.from === 'me' ? '#06150f' : '#fff',
                  borderBottomRightRadius: m.from === 'me' ? 6 : 18,
                  borderBottomLeftRadius:  m.from === 'me' ? 18 : 6,
                  fontWeight: m.from === 'me' ? 500 : 400,
                }}>{m.text}</div>
              </div>
            ))}

            {/* video call invite card */}
            <Glass radius={20} strength="strong" style={{ padding: 14, marginTop: 6, alignSelf: 'stretch' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 14,
                  background: `linear-gradient(135deg, ${accentColor}, #22d3ee)`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}><Icon name="video" size={20} color="#06150f" strokeWidth={2} /></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>Form review · Thu 6:30 PM</div>
                  <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>15 min · Marcus invited you</div>
                </div>
                <div style={{
                  padding: '6px 12px', borderRadius: 10,
                  background: accentColor, color: '#06150f',
                  fontSize: 12, fontWeight: 600,
                }}>Join</div>
              </div>
            </Glass>
          </div>

          {/* composer */}
          <div style={{ padding: '12px 14px 16px' }}>
            <Glass radius={24} strength="strong" style={{
              display: 'flex', alignItems: 'center', padding: '6px 6px 6px 16px', gap: 8,
            }}>
              <Icon name="plus" size={20} color="rgba(255,255,255,0.6)" />
              <input placeholder="Message Marcus…" style={{
                flex: 1, background: 'transparent', border: 'none', outline: 'none',
                color: '#fff', fontSize: 15, fontFamily: 'Inter',
              }} />
              <div style={{
                width: 36, height: 36, borderRadius: 18,
                background: 'rgba(255,255,255,0.06)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}><Icon name="mic" size={16} color="rgba(255,255,255,0.8)" /></div>
            </Glass>
          </div>
        </div>
      </AuroraBG>
    </IOSDevice>
  );
}

Object.assign(window, {
  PhoneShell, ClientWorkout, ClientOneRM, ClientPayment, ClientProfile, ClientMessaging,
});