// Otto — Screens part 1: Onboarding, Home, Live Signals, Risk, Profile

// ─────────────────────────────────────────────────────────────
// 01 ONBOARDING / DEVICE PAIRING
// ─────────────────────────────────────────────────────────────
function ScreenOnboarding({ go }) {
  const [step, setStep] = React.useState(0);
  const devices = [
    { name: 'Apple Watch Ultra', sub: 'Heart, sleep, ECG, SpO₂', icon: '⌚', connected: step >= 1 },
    { name: 'Withings Body Scan', sub: 'Weight, body composition', icon: '⚖', connected: step >= 2 },
    { name: 'Strava', sub: 'Activity, VO₂max, routes', icon: '🚴', connected: step >= 3 },
  ];
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: OttoTokens.bg }}>
      <div style={{ padding: '60px 28px 0' }}>
        <OttoMark size={44}/>
      </div>
      <div style={{ padding: '32px 28px 8px' }}>
        <div style={{
          fontFamily: OttoTokens.serif, fontSize: 38, fontWeight: 400,
          color: OttoTokens.ink, lineHeight: 1.1, letterSpacing: -0.6,
        }}>
          Hello,<br/>
          <span style={{ color: OttoTokens.inkMuted, fontStyle: 'italic' }}>I'm Otto.</span>
        </div>
        <div style={{
          fontFamily: OttoTokens.sans, fontSize: 18, color: OttoTokens.inkMuted,
          marginTop: 18, lineHeight: 1.45, maxWidth: 320,
        }}>
          A quiet companion for your health. Let's connect a few things you already use.
        </div>
      </div>

      <div style={{ flex: 1, padding: '28px 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {devices.map((d, i) => (
          <Card key={d.name} style={{
            display: 'flex', alignItems: 'center', gap: 16,
            padding: '20px 22px',
            border: d.connected ? `1.5px solid ${OttoTokens.sage}` : '1.5px solid transparent',
            transition: 'all 400ms ease',
          }}>
            <div style={{
              width: 56, height: 56, borderRadius: 18,
              background: d.connected ? OttoTokens.sageSoft : OttoTokens.surfaceAlt,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 28, transition: 'background 400ms',
            }}>{d.icon}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: OttoTokens.sans, fontSize: 18, fontWeight: 600, color: OttoTokens.ink }}>
                {d.name}
              </div>
              <div style={{ fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkMuted, marginTop: 2 }}>
                {d.sub}
              </div>
            </div>
            {d.connected ? (
              <div style={{
                width: 32, height: 32, borderRadius: '50%',
                background: OttoTokens.sage, color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 16, fontWeight: 700,
              }}>✓</div>
            ) : i === step ? (
              <button onClick={() => setStep(step + 1)} style={{
                padding: '10px 18px', borderRadius: 999,
                background: OttoTokens.ink, color: '#FAF7F1',
                fontFamily: OttoTokens.sans, fontSize: 15, fontWeight: 600,
                border: 'none', cursor: 'pointer',
              }}>Connect</button>
            ) : (
              <div style={{ color: OttoTokens.inkSubtle, fontSize: 14, fontFamily: OttoTokens.sans }}>Waiting</div>
            )}
          </Card>
        ))}
      </div>

      <div style={{ padding: '16px 20px 36px' }}>
        <OttoButton
          kind={step >= 3 ? 'primary' : 'secondary'}
          onClick={step >= 3 ? () => go('home') : null}
          style={{ opacity: step >= 3 ? 1 : 0.55 }}
        >
          {step >= 3 ? 'Continue to Otto' : `${step}/3 connected`}
        </OttoButton>
        <div style={{
          textAlign: 'center', marginTop: 14,
          fontFamily: OttoTokens.sans, fontSize: 13, color: OttoTokens.inkSubtle,
        }}>
          You can add more later — Strava, your scale, lab results.
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 02 HOME — Health Command Center
// ─────────────────────────────────────────────────────────────
function ScreenHome({ go, persona = 'preventive' }) {
  const score = persona === 'comorbid' ? 64 : 82;
  const flags = persona === 'comorbid' ? [
    { tone: 'clay', title: 'Blood pressure climbing', body: 'Up 4 days in a row. Otto suggests booking a check-in.' },
    { tone: 'amber', title: 'A1c trending toward diabetic range', body: 'New lab + 3-month trend.' },
  ] : [
    { tone: 'amber', title: 'Pre-diabetes risk elevated', body: 'A1c 5.8% and rising visceral fat. Walking after dinner helps.' },
  ];

  return (
    <div style={{ height: '100%', overflow: 'auto', background: OttoTokens.bg, paddingBottom: 110 }}>
      {/* Greeting */}
      <div style={{ padding: '64px 24px 18px' }}>
        <div style={{
          fontFamily: OttoTokens.sans, fontSize: 14, fontWeight: 600,
          color: OttoTokens.inkSubtle, letterSpacing: 1.4, textTransform: 'uppercase',
        }}>Tuesday, May 5</div>
        <div style={{
          fontFamily: OttoTokens.serif, fontSize: 32, fontWeight: 400,
          color: OttoTokens.ink, marginTop: 8, lineHeight: 1.15, letterSpacing: -0.4,
        }}>
          Good morning.<br/>
          <span style={{ color: OttoTokens.inkMuted, fontStyle: 'italic' }}>Here's your day.</span>
        </div>
      </div>

      {/* Score ring */}
      <div style={{ display: 'flex', justifyContent: 'center', padding: '4px 0 18px' }}>
        <ScoreRing value={score} label="Health today" size={210} stroke={14}
          color={persona === 'comorbid' ? OttoTokens.amber : OttoTokens.sage}/>
      </div>

      {/* Flags */}
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {flags.map((f, i) => (
          <Card key={i} onClick={() => go('risk')} style={{ padding: '18px 20px' }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
              <div style={{
                width: 8, alignSelf: 'stretch', borderRadius: 4,
                background: f.tone === 'clay' ? OttoTokens.clay : OttoTokens.amber,
                marginTop: 2, marginBottom: 2,
              }}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: OttoTokens.sans, fontSize: 17, fontWeight: 600, color: OttoTokens.ink }}>
                  {f.title}
                </div>
                <div style={{ fontFamily: OttoTokens.sans, fontSize: 15, color: OttoTokens.inkMuted, marginTop: 4, lineHeight: 1.4 }}>
                  {f.body}
                </div>
              </div>
              <div style={{ color: OttoTokens.inkSubtle, fontSize: 22, marginTop: -2 }}>›</div>
            </div>
          </Card>
        ))}
      </div>

      {/* Live signals strip */}
      <div style={{ padding: '20px 16px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 6px 8px' }}>
          <SectionLabel style={{ marginBottom: 0 }}>Live signals</SectionLabel>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <LiveDot/>
            <span style={{ fontFamily: OttoTokens.sans, fontSize: 12, color: OttoTokens.inkSubtle, fontWeight: 600 }}>Synced 2m ago</span>
          </div>
        </div>
        <Card padded={false} onClick={() => go('signals')} style={{ padding: '18px 6px' }}>
          <div style={{ display: 'flex' }}>
            {(() => {
              const items = [
                { label: 'Heart', value: '68', unit: 'bpm', spark: [70,72,69,71,68,70,68], tone: 'sage' },
                { label: 'HRV', value: '42', unit: 'ms', spark: [52,50,48,46,45,43,42], tone: 'amber' },
                { label: 'SpO₂', value: '97', unit: '%', spark: [96,97,97,96,97,97,97], tone: 'sage' },
                { label: 'Sleep', value: '6.1', unit: 'h', spark: [7.2,6.8,6.4,6.0,6.1,5.9,6.1], tone: 'amber' },
              ];
              return items.map((s, i) => (
                <div key={s.label} style={{
                  flex: 1, padding: '0 8px',
                  borderRight: i === items.length - 1 ? 'none' : '0.5px solid rgba(28,26,23,0.08)',
                }}>
                  <div style={{ fontFamily: OttoTokens.sans, fontSize: 12, color: OttoTokens.inkSubtle, fontWeight: 600, letterSpacing: 0.6, textTransform: 'uppercase' }}>{s.label}</div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 4 }}>
                    <span style={{ fontFamily: OttoTokens.serif, fontSize: 28, color: OttoTokens.ink, lineHeight: 1 }}>{s.value}</span>
                    <span style={{ fontFamily: OttoTokens.sans, fontSize: 11, color: OttoTokens.inkSubtle }}>{s.unit}</span>
                  </div>
                  <div style={{ marginTop: 6 }}>
                    <Spark values={s.spark} w={56} h={20} color={s.tone === 'amber' ? OttoTokens.amber : OttoTokens.sage}/>
                  </div>
                </div>
              ));
            })()}
          </div>
        </Card>
      </div>

      {/* Today's actions */}
      <div style={{ padding: '24px 16px 0' }}>
        <SectionLabel style={{ paddingLeft: 6 }}>Today, gently</SectionLabel>
        <Card padded={false}>
          {[
            { t: '30-minute walk after dinner', sub: 'Lowers post-meal glucose', done: false },
            { t: 'Log breakfast', sub: 'Helps Otto see your patterns', done: true },
            { t: 'Voice check-in with Otto', sub: '2 minutes', done: false, action: 'checkin' },
          ].map((a, i, arr) => (
            <div key={i} onClick={() => a.action && go(a.action)} style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: '18px 22px',
              borderBottom: i === arr.length - 1 ? 'none' : `0.5px solid ${OttoTokens.hairline}`,
              cursor: a.action ? 'pointer' : 'default',
            }}>
              <div style={{
                width: 26, height: 26, borderRadius: '50%',
                border: a.done ? 'none' : `2px solid ${OttoTokens.inkSubtle}`,
                background: a.done ? OttoTokens.sage : 'transparent',
                color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 14, flexShrink: 0,
              }}>{a.done && '✓'}</div>
              <div style={{ flex: 1 }}>
                <div style={{
                  fontFamily: OttoTokens.sans, fontSize: 17, color: OttoTokens.ink, fontWeight: 500,
                  textDecoration: a.done ? 'line-through' : 'none', opacity: a.done ? 0.5 : 1,
                }}>{a.t}</div>
                <div style={{ fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkMuted, marginTop: 2 }}>
                  {a.sub}
                </div>
              </div>
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 03 LIVE HEALTH SIGNALS
// ─────────────────────────────────────────────────────────────
function ScreenSignals({ go }) {
  return (
    <div style={{ height: '100%', overflow: 'auto', background: OttoTokens.bg, paddingBottom: 110 }}>
      <div style={{ padding: '64px 24px 6px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <LiveDot/>
          <span style={{ fontFamily: OttoTokens.sans, fontSize: 12, color: OttoTokens.inkSubtle, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase' }}>Live</span>
        </div>
        <div style={{
          fontFamily: OttoTokens.serif, fontSize: 36, fontWeight: 400,
          color: OttoTokens.ink, marginTop: 8, letterSpacing: -0.4,
        }}>Your signals</div>
        <div style={{ fontFamily: OttoTokens.sans, fontSize: 15, color: OttoTokens.inkMuted, marginTop: 6 }}>
          Apple Watch · Withings Scale · Strava
        </div>
      </div>

      {/* Heart card with chart */}
      <div style={{ padding: '20px 16px 0' }}>
        <Card>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div style={{ fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkSubtle, fontWeight: 600, letterSpacing: 1, textTransform: 'uppercase' }}>Heart rate</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 6 }}>
                <span style={{ fontFamily: OttoTokens.serif, fontSize: 56, color: OttoTokens.ink, letterSpacing: -1, lineHeight: 1 }}>68</span>
                <span style={{ fontFamily: OttoTokens.sans, fontSize: 18, color: OttoTokens.inkMuted }}>bpm</span>
              </div>
              <div style={{ fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkMuted, marginTop: 8 }}>
                Resting · 7-day avg 71
              </div>
            </div>
            <Pill tone="sage">Normal range</Pill>
          </div>
          <div style={{ marginTop: 16 }}>
            <Spark values={[72,68,66,70,74,68,65,68,70,68,67,68]} w={320} h={64} fill={true}/>
          </div>
        </Card>
      </div>

      {/* HRV — declining */}
      <div style={{ padding: '12px 16px 0' }}>
        <Card>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div style={{ fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkSubtle, fontWeight: 600, letterSpacing: 1, textTransform: 'uppercase' }}>Heart rate variability</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 6 }}>
                <span style={{ fontFamily: OttoTokens.serif, fontSize: 48, color: OttoTokens.ink, letterSpacing: -1, lineHeight: 1 }}>42</span>
                <span style={{ fontFamily: OttoTokens.sans, fontSize: 16, color: OttoTokens.inkMuted }}>ms</span>
              </div>
              <div style={{ fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkMuted, marginTop: 8 }}>
                Below your baseline of 52
              </div>
            </div>
            <Pill tone="amber">Declining ↓</Pill>
          </div>
          <div style={{
            marginTop: 14, padding: '12px 14px', borderRadius: 14,
            background: OttoTokens.amberSoft, color: '#7A5524',
            fontFamily: OttoTokens.sans, fontSize: 14, lineHeight: 1.5,
          }}>
            Stress and short sleep can lower HRV. Otto is keeping watch — no action needed yet.
          </div>
        </Card>
      </div>

      {/* Body composition */}
      <div style={{ padding: '12px 16px 0' }}>
        <Card>
          <div style={{ fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkSubtle, fontWeight: 600, letterSpacing: 1, textTransform: 'uppercase', marginBottom: 14 }}>
            Body · scale this morning
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', rowGap: 18, columnGap: 12 }}>
            {[
              { l: 'Weight', v: '185', u: 'lbs' },
              { l: 'BMI', v: '27.4', u: '' },
              { l: 'Body fat', v: '24.2', u: '%' },
              { l: 'Visceral', v: '9', u: 'lvl', alert: true },
            ].map(m => (
              <div key={m.l}>
                <div style={{ fontFamily: OttoTokens.sans, fontSize: 13, color: OttoTokens.inkSubtle }}>{m.l}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 4 }}>
                  <span style={{ fontFamily: OttoTokens.serif, fontSize: 28, color: m.alert ? OttoTokens.amber : OttoTokens.ink, lineHeight: 1 }}>{m.v}</span>
                  <span style={{ fontFamily: OttoTokens.sans, fontSize: 13, color: OttoTokens.inkSubtle }}>{m.u}</span>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Sleep */}
      <div style={{ padding: '12px 16px 0' }}>
        <Card>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div style={{ fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkSubtle, fontWeight: 600, letterSpacing: 1, textTransform: 'uppercase' }}>Last night</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 6 }}>
                <span style={{ fontFamily: OttoTokens.serif, fontSize: 48, color: OttoTokens.ink, letterSpacing: -1, lineHeight: 1 }}>6h 8m</span>
              </div>
              <div style={{ fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkMuted, marginTop: 8 }}>
                Snoring 38 min · 2 SpO₂ dips
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', height: 32, marginTop: 16, borderRadius: 8, overflow: 'hidden' }}>
            <div style={{ width: '12%', background: '#5A7E92' }}/>
            <div style={{ width: '18%', background: '#7FA0B5' }}/>
            <div style={{ width: '40%', background: '#A8C2D2' }}/>
            <div style={{ width: '14%', background: OttoTokens.amber, opacity: 0.6 }}/>
            <div style={{ width: '16%', background: '#7FA0B5' }}/>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontFamily: OttoTokens.sans, fontSize: 12, color: OttoTokens.inkSubtle }}>
            <span>11:42p</span><span>5:50a</span>
          </div>
        </Card>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 04 RISK INTELLIGENCE PANEL
// ─────────────────────────────────────────────────────────────
function ScreenRisk({ go }) {
  const risks = [
    { name: 'Pre-diabetes', score: 68, tone: 'amber', status: 'Elevated', why: 'A1c 5.8 · visceral fat lvl 9 · 7,400 steps/day · post-meal fatigue', trend: 'up' },
    { name: 'Hypertension', score: 71, tone: 'clay', status: 'Elevated', why: 'BP 138/88 · 3-day uptrend · BMI 27.4', trend: 'up' },
    { name: 'Cardiovascular', score: 45, tone: 'amber', status: 'Moderate', why: 'LDL 142 · low HRV · family history of MI at 62', trend: 'flat' },
    { name: 'Sleep apnea (OSA)', score: 38, tone: 'amber', status: 'Worth screening', why: 'Snoring 38 min · 2 overnight SpO₂ dips below 90%', trend: 'flat' },
    { name: 'Cognitive', score: 12, tone: 'sage', status: 'Watching', why: 'Baseline being established — no concerns yet', trend: 'flat' },
  ];

  return (
    <div style={{ height: '100%', overflow: 'auto', background: OttoTokens.bg, paddingBottom: 110 }}>
      <div style={{ padding: '64px 24px 6px' }}>
        <div style={{ fontFamily: OttoTokens.sans, fontSize: 12, color: OttoTokens.inkSubtle, fontWeight: 600, letterSpacing: 1.4, textTransform: 'uppercase' }}>Otto sees</div>
        <div style={{
          fontFamily: OttoTokens.serif, fontSize: 32, fontWeight: 400,
          color: OttoTokens.ink, marginTop: 6, lineHeight: 1.15, letterSpacing: -0.4,
        }}>
          Five things worth<br/>
          <span style={{ color: OttoTokens.inkMuted, fontStyle: 'italic' }}>watching, gently.</span>
        </div>
        <div style={{ fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkMuted, marginTop: 14, lineHeight: 1.5 }}>
          Otto looks at your devices, labs, and history together. Nothing here is a diagnosis.
        </div>
      </div>

      <div style={{ padding: '20px 16px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {risks.map((r, i) => (
          <Card key={r.name} style={{ padding: '20px 22px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
              <Dot tone={r.tone}/>
              <span style={{ fontFamily: OttoTokens.sans, fontSize: 12, color: OttoTokens.inkSubtle, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase' }}>{r.status}</span>
              <span style={{ flex: 1 }}/>
              <span style={{ fontFamily: OttoTokens.serif, fontSize: 22, color: OttoTokens.ink }}>{r.score}<span style={{ color: OttoTokens.inkSubtle, fontSize: 14, fontFamily: OttoTokens.sans }}>/100</span></span>
            </div>
            <div style={{ fontFamily: OttoTokens.serif, fontSize: 24, color: OttoTokens.ink, letterSpacing: -0.3, marginBottom: 10 }}>{r.name}</div>
            {/* Bar */}
            <div style={{ height: 6, background: 'rgba(28,26,23,0.06)', borderRadius: 3, overflow: 'hidden' }}>
              <div style={{
                height: '100%', width: `${r.score}%`,
                background: r.tone === 'clay' ? OttoTokens.clay : r.tone === 'amber' ? OttoTokens.amber : OttoTokens.sage,
                borderRadius: 3,
                transform: 'scaleX(0)', transformOrigin: 'left',
                animation: `ottoBar 900ms ${i * 100}ms cubic-bezier(.2,.8,.2,1) forwards`,
              }}/>
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, marginTop: 14 }}>
              <span style={{ fontFamily: OttoTokens.sans, fontSize: 11, color: OttoTokens.inkSubtle, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase', flexShrink: 0, marginTop: 2 }}>Why</span>
              <span style={{ fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkMuted, lineHeight: 1.5, flex: 1 }}>{r.why}</span>
            </div>
          </Card>
        ))}

        <div style={{
          marginTop: 6, padding: '18px 20px',
          background: OttoTokens.sageSoft, borderRadius: OttoTokens.rLg,
          fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.sageDeep, lineHeight: 1.5,
        }}>
          <div style={{ fontWeight: 700, marginBottom: 6 }}>What Otto would do next</div>
          Book your overdue A1c + lipid panel. The other risks improve in step with these two.
          <div style={{ marginTop: 12 }}>
            <button onClick={() => go('preventive')} style={{
              padding: '10px 18px', borderRadius: 999,
              background: OttoTokens.sage, color: '#fff',
              fontFamily: OttoTokens.sans, fontSize: 14, fontWeight: 600,
              border: 'none', cursor: 'pointer',
            }}>See preventive plan →</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 05 PROFILE
// ─────────────────────────────────────────────────────────────
function ScreenProfile({ go }) {
  return (
    <div style={{ height: '100%', overflow: 'auto', background: OttoTokens.bg, paddingBottom: 110 }}>
      <div style={{ padding: '64px 24px 6px' }}>
        <div style={{ fontFamily: OttoTokens.serif, fontSize: 36, color: OttoTokens.ink, letterSpacing: -0.4 }}>You</div>
      </div>

      {/* Avatar block */}
      <div style={{ padding: '20px 16px 0' }}>
        <Card>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <div style={{
              width: 72, height: 72, borderRadius: '50%',
              background: 'linear-gradient(135deg, #C4B89E, #8C7A60)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: OttoTokens.serif, fontSize: 28, color: '#fff',
            }}>M</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: OttoTokens.serif, fontSize: 24, color: OttoTokens.ink, letterSpacing: -0.3 }}>Michael Chen</div>
              <div style={{ fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkMuted, marginTop: 2 }}>55 · San Francisco · with Otto since 2024</div>
            </div>
          </div>
          <div style={{
            marginTop: 18, padding: '14px 16px',
            background: OttoTokens.surfaceAlt, borderRadius: 16,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            <span style={{ fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkMuted }}>Health score this week</span>
            <span style={{ fontFamily: OttoTokens.serif, fontSize: 26, color: OttoTokens.ink }}>82</span>
          </div>
        </Card>
      </div>

      {/* Conditions */}
      <div style={{ padding: '20px 16px 0' }}>
        <SectionLabel style={{ paddingLeft: 6 }}>Conditions Otto knows about</SectionLabel>
        <Card padded={false}>
          {[
            { t: 'Hypertension (Stage 1)', sub: 'Lisinopril 10mg daily', tone: 'amber' },
            { t: 'Pre-diabetes', sub: 'Diet-managed', tone: 'amber' },
            { t: 'Borderline lipids', sub: 'Atorvastatin 20mg', tone: 'amber' },
            { t: 'Possible OSA', sub: 'Not yet diagnosed — screening recommended', tone: 'sage' },
          ].map((c, i, arr) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: '16px 22px',
              borderBottom: i === arr.length - 1 ? 'none' : `0.5px solid ${OttoTokens.hairline}`,
            }}>
              <Dot tone={c.tone}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: OttoTokens.sans, fontSize: 17, color: OttoTokens.ink, fontWeight: 500 }}>{c.t}</div>
                <div style={{ fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkMuted, marginTop: 2 }}>{c.sub}</div>
              </div>
            </div>
          ))}
        </Card>
      </div>

      {/* Family history */}
      <div style={{ padding: '20px 16px 0' }}>
        <SectionLabel style={{ paddingLeft: 6 }}>Family history</SectionLabel>
        <Card>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { who: 'Father', what: 'Heart attack at 62 · Type 2 diabetes' },
              { who: 'Mother', what: 'Hypertension · Osteoporosis' },
              { who: 'Paternal uncle', what: 'Colorectal cancer at 67' },
            ].map(f => (
              <div key={f.who} style={{ display: 'flex', gap: 10 }}>
                <div style={{ width: 110, fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkSubtle, fontWeight: 600 }}>{f.who}</div>
                <div style={{ flex: 1, fontFamily: OttoTokens.sans, fontSize: 15, color: OttoTokens.ink, lineHeight: 1.4 }}>{f.what}</div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Devices */}
      <div style={{ padding: '20px 16px 0' }}>
        <SectionLabel style={{ paddingLeft: 6 }}>Connected</SectionLabel>
        <Card padded={false}>
          {[
            { n: 'Apple Watch Ultra 2', s: 'Synced 2 minutes ago', emoji: '⌚' },
            { n: 'Withings Body Scan', s: 'Synced this morning', emoji: '⚖' },
            { n: 'Strava', s: '3 days ago', emoji: '🚴' },
          ].map((d, i, arr) => (
            <div key={d.n} style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: '14px 22px',
              borderBottom: i === arr.length - 1 ? 'none' : `0.5px solid ${OttoTokens.hairline}`,
            }}>
              <div style={{ width: 40, height: 40, borderRadius: 12, background: OttoTokens.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>{d.emoji}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: OttoTokens.sans, fontSize: 16, color: OttoTokens.ink, fontWeight: 500 }}>{d.n}</div>
                <div style={{ fontFamily: OttoTokens.sans, fontSize: 13, color: OttoTokens.inkMuted, marginTop: 2 }}>{d.s}</div>
              </div>
              <LiveDot/>
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, {
  ScreenOnboarding, ScreenHome, ScreenSignals, ScreenRisk, ScreenProfile,
});