// Healify V2 — Tools (Bloodwork, DNA, Meal plan, Workout, Meditation), Profile, Settings

// ============================================================================
// BLOOD REPORT
// ============================================================================
function BloodReportScreen({ onNavigate, onBack }) {
  const [view, setView] = React.useState('upload'); // upload | results

  if (view === 'results') {
    const markers = [
      { name: 'HDL cholesterol', value: 64, unit: 'mg/dL', status: 'ok',   range: '40–80', delta: '+4' },
      { name: 'LDL cholesterol', value: 142, unit: 'mg/dL', status: 'warn', range: '<100',  delta: '-6' },
      { name: 'Vitamin D',       value: 28, unit: 'ng/mL', status: 'warn', range: '30–80', delta: '+2' },
      { name: 'Iron · Ferritin', value: 24, unit: 'ng/mL', status: 'err',  range: '30–200', delta: '0' },
      { name: 'HbA1c',           value: 5.3, unit: '%',    status: 'ok',   range: '<5.7',  delta: '-0.1' },
      { name: 'TSH',             value: 2.1, unit: 'mIU/L', status: 'ok',  range: '0.4–4', delta: '-0.3' },
    ];
    return (
      <HScreen label="Bloodwork results">
        <HTopBar title="Bloodwork" onBack={() => setView('upload')} right={<HIconButton icon="share" tone="soft"/>}/>
        <HCard pad="16px" radius={20} style={{ marginBottom: 16, background: 'var(--grad-cream)' }} elevate={false}>
          <div className="h-label">Apr 18, 2026 · LabCorp</div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 6 }}>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 500 }}>14 markers</div>
              <div style={{ fontSize: 13, color: 'var(--t-fg-2)', marginTop: 2 }}>2 flagged · 1 needs follow-up</div>
            </div>
            <HCard tone="cream" pad="8px 12px" radius={12} elevate={false}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--warning)' }}/>
                <div style={{ fontSize: 12, fontWeight: 500 }}>Mostly normal</div>
              </div>
            </HCard>
          </div>
        </HCard>

        <HCard pad="14px" radius={18} style={{ marginBottom: 16 }}>
          <div style={{ display: 'flex', gap: 10 }}>
            <HAnnaAvatar size={32}/>
            <div style={{ flex: 1, fontSize: 14, lineHeight: 1.5 }}>
              <strong style={{ fontWeight: 600 }}>Ferritin is low</strong> at 24 ng/mL. Not urgent, but iron-rich meals + a low-dose supplement should bring it up. Want a plan?
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 10, marginLeft: 42 }}>
            <HChip icon="check" tone="cream">Make a plan</HChip>
            <HChip tone="ghost">Why?</HChip>
          </div>
        </HCard>

        <HSectionLabel>All markers</HSectionLabel>
        <HCard pad="0" radius={20} style={{ overflow: 'hidden' }}>
          {markers.map((m, i) => (
            <button key={i} onClick={() => onNavigate('chat', { topic: 'bp' })} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 12, padding: '14px', textAlign: 'left', background: 'transparent', borderBottom: i < markers.length - 1 ? '1px solid var(--t-border)' : 'none', color: 'var(--t-fg-1)' }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: m.status === 'ok' ? 'var(--success)' : m.status === 'warn' ? 'var(--warning)' : 'var(--error)' }}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: '-0.2px' }}>{m.name}</div>
                <div style={{ fontSize: 11, color: 'var(--t-fg-3)', marginTop: 1 }}>range {m.range}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 500 }}>{m.value}<span style={{ fontSize: 11, color: 'var(--t-fg-3)', fontFamily: 'var(--font-body)', fontWeight: 400 }}> {m.unit}</span></div>
                <div style={{ fontSize: 10, color: m.delta.startsWith('+') ? 'var(--success)' : m.delta.startsWith('-') ? 'var(--error)' : 'var(--t-fg-3)', fontWeight: 500 }}>{m.delta} since last</div>
              </div>
              <Glyph name="chevR" size={14} style={{ color: 'var(--t-fg-3)' }}/>
            </button>
          ))}
        </HCard>
      </HScreen>
    );
  }

  // Upload view
  return (
    <HScreen label="Bloodwork">
      <HTopBar title="" onBack={onBack}/>
      <div style={{ padding: '0 4px', marginBottom: 18 }}>
        <div className="h-label">AI tool</div>
        <div className="h-display" style={{ fontSize: 30, marginTop: 4 }}>Bloodwork</div>
        <div style={{ fontSize: 14, color: 'var(--t-fg-2)', marginTop: 6, lineHeight: 1.5 }}>Upload a PDF or photo. I decode it into plain English and flag what matters.</div>
      </div>

      <button onClick={() => setView('results')} style={{ width: '100%' }}>
        <HCard pad="32px 16px" radius={22} elevate={false} style={{ background: 'transparent', border: '2px dashed var(--t-ink-12)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 56, height: 56, borderRadius: 18, background: 'var(--t-cream)', color: 'var(--brand-orange-vibey)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Glyph name="droplet" size={26}/>
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500 }}>Drop a report here</div>
            <div style={{ fontSize: 13, color: 'var(--t-fg-3)', textAlign: 'center' }}>PDF, photo, or import from Apple Health</div>
            <div style={{ display: 'flex', gap: 8, marginTop: 6 }}>
              <HChip icon="plus" tone="cream">Browse files</HChip>
              <HChip icon="scan" tone="cream">Take photo</HChip>
            </div>
          </div>
        </HCard>
      </button>

      <div style={{ marginTop: 22 }}>
        <HSectionLabel>Past reports</HSectionLabel>
        <HCard pad="0" radius={20} style={{ overflow: 'hidden' }}>
          {[
            { d: 'Apr 18, 2026', s: 'LabCorp · 14 markers · 2 flagged' },
            { d: 'Jan 04, 2026', s: 'Quest · 12 markers · all normal' },
            { d: 'Oct 22, 2025', s: 'LabCorp · 18 markers · 3 flagged' },
          ].map((r, i) => (
            <button key={i} onClick={() => setView('results')} style={{ width: '100%', display: 'flex', alignItems: 'center', padding: '14px', textAlign: 'left', background: 'transparent', borderBottom: i < 2 ? '1px solid var(--t-border)' : 'none', color: 'var(--t-fg-1)', gap: 12 }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--t-ink-04)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Glyph name="droplet" size={16}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: '-0.2px' }}>{r.d}</div>
                <div style={{ fontSize: 12, color: 'var(--t-fg-3)', marginTop: 1 }}>{r.s}</div>
              </div>
              <Glyph name="chevR" size={14} style={{ color: 'var(--t-fg-3)' }}/>
            </button>
          ))}
        </HCard>
      </div>
    </HScreen>
  );
}

// ============================================================================
// DNA
// ============================================================================
function DNAScreen({ onNavigate, onBack }) {
  const traits = [
    { tag: 'Metabolism', color: 'var(--focus-nutrition)', t: 'Slow caffeine metabolizer', s: 'Cut off coffee by 11am — sleep on you depends on it.' },
    { tag: 'Heart',      color: 'var(--focus-heart)',     t: 'Higher sensitivity to sodium', s: 'Aim for <1,500 mg/day to manage BP.' },
    { tag: 'Fitness',    color: 'var(--focus-fitness)',   t: 'Endurance > Power', s: 'Your fast-twitch muscle ratio is lower — favor Zone 2.' },
    { tag: 'Sleep',      color: 'var(--focus-sleep)',     t: 'Natural early bird', s: 'Your chronotype peaks 6-8am. Schedule deep work then.' },
  ];
  return (
    <HScreen label="DNA insights">
      <HTopBar title="" onBack={onBack}/>
      <div style={{ padding: '0 4px', marginBottom: 18 }}>
        <div className="h-label">AI tool</div>
        <div className="h-display" style={{ fontSize: 30, marginTop: 4 }}>DNA insights</div>
        <div style={{ fontSize: 14, color: 'var(--t-fg-2)', marginTop: 6, lineHeight: 1.5 }}>23andMe synced · 142 traits decoded. The 4 most actionable for you:</div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 16 }}>
        {traits.map((t, i) => (
          <HCard key={i} pad="16px" radius={20}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '3px 8px', background: `color-mix(in oklab, ${t.color} 14%, transparent)`, color: t.color, borderRadius: 999, fontSize: 11, fontWeight: 500 }}>
              <span style={{ width: 5, height: 5, borderRadius: 999, background: t.color }}/>{t.tag}
            </div>
            <div style={{ marginTop: 8, fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 500, letterSpacing: '-0.02em' }}>{t.t}</div>
            <div style={{ fontSize: 13, color: 'var(--t-fg-2)', marginTop: 6, lineHeight: 1.5 }}>{t.s}</div>
            <button onClick={() => onNavigate('chat')} style={{ marginTop: 10, display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 13, fontWeight: 500, color: 'var(--brand-orange-vibey)' }}>
              Ask Anna more <Glyph name="chevR" size={12}/>
            </button>
          </HCard>
        ))}
      </div>

      <HPrimaryButton variant="ghost" full icon="plus" size="md">View all 142 traits</HPrimaryButton>
    </HScreen>
  );
}

// ============================================================================
// MEDITATION — generator
// ============================================================================
function MeditationScreen({ onNavigate, onBack }) {
  const [step, setStep] = React.useState(1);
  const [type, setType] = React.useState('Wind down');
  const [length, setLength] = React.useState(10);
  const [intent, setIntent] = React.useState('');

  if (step === 4) {
    return (
      <div data-screen-label="Meditation player" style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 30%, #1A1422 0%, #0B0A10 70%)', color: '#fff', display: 'flex', flexDirection: 'column', paddingTop: 56 }}>
        <div style={{ padding: '20px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <button onClick={() => setStep(3)} style={{ width: 36, height: 36, borderRadius: 999, background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Glyph name="chevD" size={18}/></button>
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', letterSpacing: 1.2 }}>Generating with Anna's voice</div>
          <div style={{ width: 36 }}/>
        </div>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 32 }}>
          <VoiceOrb state="speaking"/>
          <div style={{ textAlign: 'center', maxWidth: 280 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 500 }}>{type} · {length} min</div>
            <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.5)', marginTop: 6, lineHeight: 1.5 }}>Take a breath in… {intent || 'noticing your shoulders soften'}…</div>
          </div>
          <div style={{ width: 240, height: 4, background: 'rgba(255,255,255,0.1)', borderRadius: 999, overflow: 'hidden' }}>
            <div style={{ width: '34%', height: '100%', background: 'var(--grad-warm-orange)', borderRadius: 999 }}/>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>3:24 / {length}:00</div>
        </div>
        <div style={{ padding: '0 16px 32px', display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
          <button style={{ width: 48, height: 48, borderRadius: 999, background: 'rgba(255,255,255,0.08)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Glyph name="chevL" size={20}/></button>
          <button style={{ width: 64, height: 64, borderRadius: 999, background: '#fff', color: 'var(--black-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Glyph name="minus" size={28} stroke={3}/></button>
          <button style={{ width: 48, height: 48, borderRadius: 999, background: 'rgba(255,255,255,0.08)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Glyph name="chevR" size={20}/></button>
        </div>
      </div>
    );
  }

  return (
    <HScreen label="Meditation">
      <HTopBar title="" onBack={onBack}/>
      <div style={{ padding: '0 4px', marginBottom: 18 }}>
        <div className="h-label">Step {step} of 3</div>
        <div className="h-display" style={{ fontSize: 30, marginTop: 4 }}>{step === 1 ? 'How do you want to feel?' : step === 2 ? 'How long?' : 'Anything on your mind?'}</div>
      </div>

      {step === 1 && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
          {[
            { t: 'Wind down', sub: 'For sleep', icon: 'moon', c: 'var(--focus-sleep)' },
            { t: 'Reset',     sub: 'Mid-day',   icon: 'refresh', c: 'var(--focus-mental)' },
            { t: 'Focus',     sub: 'Before work', icon: 'target', c: 'var(--brand-orange-vibey)' },
            { t: 'Calm',      sub: 'Soothe anxiety', icon: 'heart', c: 'var(--focus-heart)' },
            { t: 'Gratitude', sub: 'Reflect',   icon: 'sparkle', c: 'var(--brand-gold-sand)' },
            { t: 'Morning lift', sub: 'Energize', icon: 'flame', c: 'var(--focus-fitness)' },
          ].map(o => {
            const active = type === o.t;
            return (
              <button key={o.t} onClick={() => setType(o.t)} style={{
                padding: 16, borderRadius: 18, textAlign: 'left',
                background: 'var(--t-surface)',
                border: active ? `2px solid ${o.c}` : '2px solid transparent',
                boxShadow: active ? `0 8px 20px color-mix(in oklab, ${o.c} 30%, transparent)` : 'var(--shadow-md)',
                color: 'var(--t-fg-1)',
              }}>
                <div style={{ width: 36, height: 36, borderRadius: 12, background: `color-mix(in oklab, ${o.c} 14%, transparent)`, color: o.c, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10 }}>
                  <Glyph name={o.icon} size={18}/>
                </div>
                <div style={{ fontSize: 15, fontWeight: 500, letterSpacing: '-0.2px' }}>{o.t}</div>
                <div style={{ fontSize: 11, color: 'var(--t-fg-3)', marginTop: 2 }}>{o.sub}</div>
              </button>
            );
          })}
        </div>
      )}

      {step === 2 && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[5, 10, 15, 20].map(n => {
            const active = length === n;
            return (
              <button key={n} onClick={() => setLength(n)} style={{
                padding: '18px 18px', borderRadius: 18, textAlign: 'left',
                background: active ? 'var(--t-cream)' : 'var(--t-surface)',
                border: active ? '2px solid var(--brand-orange-vibey)' : '2px solid transparent',
                boxShadow: 'var(--shadow-md)', color: 'var(--t-fg-1)',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500 }}>{n} min</span>
                {active && <div style={{ width: 24, height: 24, borderRadius: 999, background: 'var(--brand-orange-vibey)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Glyph name="check" size={14} stroke={3}/></div>}
              </button>
            );
          })}
        </div>
      )}

      {step === 3 && (
        <div>
          <textarea value={intent} onChange={(e) => setIntent(e.target.value)} placeholder="Optional. e.g. 'feeling stressed about work'" style={{ width: '100%', minHeight: 120, padding: 14, borderRadius: 18, border: 'none', background: 'var(--t-surface)', boxShadow: 'var(--shadow-md)', fontSize: 15, fontFamily: 'var(--font-body)', color: 'var(--t-fg-1)', outline: 'none', resize: 'none' }}/>
          <HCard pad="14px" radius={16} style={{ marginTop: 16 }} elevate={false} tone="cream">
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <HAnnaAvatar size={32}/>
              <div style={{ flex: 1, fontSize: 13, color: 'var(--t-fg-2)' }}>I'll voice this with Ambient music. You can change voice & sound after.</div>
            </div>
          </HCard>
        </div>
      )}

      <div style={{ position: 'fixed', bottom: 24, left: 16, right: 16, display: 'flex', gap: 8 }}>
        {step > 1 && <HPrimaryButton variant="ghost" size="lg" onClick={() => setStep(step - 1)}>Back</HPrimaryButton>}
        <HPrimaryButton variant="gradient" full size="lg" onClick={() => setStep(step === 3 ? 4 : step + 1)} icon={step === 3 ? 'sparkle' : undefined}>
          {step === 3 ? 'Generate' : 'Continue'}
        </HPrimaryButton>
      </div>
      <div style={{ height: 80 }}/>
    </HScreen>
  );
}

// ============================================================================
// MEAL PLAN
// ============================================================================
function MealPlanScreen({ onBack, onNavigate }) {
  const days = ['Tue','Wed','Thu'];
  const [day, setDay] = React.useState(0);
  return (
    <HScreen label="Meal plan">
      <HTopBar title="" onBack={onBack} right={<HIconButton icon="refresh" tone="soft"/>}/>
      <div style={{ padding: '0 4px', marginBottom: 16 }}>
        <div className="h-label">AI tool</div>
        <div className="h-display" style={{ fontSize: 30, marginTop: 4 }}>Low-sodium plan</div>
        <div style={{ fontSize: 14, color: 'var(--t-fg-2)', marginTop: 6, lineHeight: 1.5 }}>3 days · 120g protein · &lt;1,500mg sodium · respects your slow-caffeine metabolism.</div>
      </div>

      <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
        {days.map((d, i) => (
          <button key={d} onClick={() => setDay(i)} style={{
            flex: 1, height: 40, borderRadius: 12, fontSize: 13, fontWeight: 500,
            background: day === i ? 'var(--t-pill)' : 'var(--t-ink-04)',
            color: day === i ? 'var(--t-pill-fg)' : 'var(--t-fg-2)',
          }}>{d}</button>
        ))}
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {[
          { t: 'Breakfast', n: 'Steel-cut oats + berries + walnuts', kcal: 410, p: 14, icon: 'plate' },
          { t: 'Lunch',     n: 'Grilled chicken + quinoa + greens',  kcal: 540, p: 38, icon: 'plate' },
          { t: 'Snack',     n: 'Greek yogurt + honey',               kcal: 180, p: 18, icon: 'flame' },
          { t: 'Dinner',    n: 'Salmon · sweet potato · asparagus',  kcal: 620, p: 42, icon: 'plate' },
        ].map((m, i) => (
          <HCard key={i} pad="14px" radius={18}>
            <div style={{ display: 'flex', gap: 12 }}>
              <div style={{ width: 60, height: 60, borderRadius: 14, background: 'color-mix(in oklab, var(--brand-orange-vibey) 10%, transparent)', color: 'var(--brand-orange-vibey)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Glyph name={m.icon} size={26}/>
              </div>
              <div style={{ flex: 1 }}>
                <div className="h-label">{m.t}</div>
                <div style={{ fontSize: 14, fontWeight: 500, marginTop: 2, letterSpacing: '-0.2px' }}>{m.n}</div>
                <div style={{ display: 'flex', gap: 10, marginTop: 6 }}>
                  <span style={{ fontSize: 11, color: 'var(--t-fg-3)' }}>{m.kcal} kcal</span>
                  <span style={{ fontSize: 11, color: 'var(--brand-orange-vibey)', fontWeight: 500 }}>{m.p}g protein</span>
                </div>
              </div>
              <button style={{ alignSelf: 'flex-start', width: 30, height: 30, borderRadius: 999, background: 'var(--t-ink-04)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Glyph name="refresh" size={14}/>
              </button>
            </div>
          </HCard>
        ))}
      </div>

      <div style={{ marginTop: 16, display: 'flex', gap: 10 }}>
        <HPrimaryButton variant="ghost" full size="md" icon="copy">Grocery list</HPrimaryButton>
        <HPrimaryButton variant="gradient" full size="md" icon="check">Save plan</HPrimaryButton>
      </div>
    </HScreen>
  );
}

// ============================================================================
// WORKOUT
// ============================================================================
function WorkoutScreen({ onBack }) {
  const exercises = [
    { n: 'Easy walk',        sub: '10 min · Zone 2',         done: false },
    { n: 'Cat-cow',          sub: '8 reps slow',             done: false },
    { n: 'Hip circles',      sub: '5 each side',             done: false },
    { n: 'Standing forward fold', sub: 'hold 60 s',          done: false },
    { n: 'Walk-out + push',  sub: '6 reps',                  done: false },
    { n: 'Cool down stretch', sub: '3 min',                  done: false },
  ];
  const [items, setItems] = React.useState(exercises);
  const completed = items.filter(i => i.done).length;
  const toggle = (i) => setItems(items.map((it, j) => i === j ? { ...it, done: !it.done } : it));

  return (
    <HScreen label="Workout">
      <HTopBar title="" onBack={onBack}/>
      <HCard pad="0" radius={26} style={{ marginBottom: 16, overflow: 'hidden', background: 'linear-gradient(135deg, #2A2126, #3B2F2E)' }}>
        <div style={{ padding: '22px 18px', color: '#fff' }}>
          <div className="h-label" style={{ color: 'rgba(255,255,255,0.5)' }}>Today's workout</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 500, marginTop: 6 }}>Recovery walk + mobility</div>
          <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', marginTop: 4 }}>20 min · low intensity</div>
          <div style={{ display: 'flex', gap: 18, marginTop: 16 }}>
            <FitStat label="Done" value={`${completed}`} unit={`/${items.length}`}/>
            <FitStat label="Time" value="12" unit="min"/>
            <FitStat label="Effort" value="Z2" unit="zone"/>
          </div>
        </div>
      </HCard>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {items.map((ex, i) => (
          <HCard key={i} pad="14px" radius={14}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <HHabitCheck done={ex.done} onClick={() => toggle(i)}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: '-0.2px', textDecoration: ex.done ? 'line-through' : 'none', color: ex.done ? 'var(--t-fg-3)' : 'var(--t-fg-1)' }}>{ex.n}</div>
                <div style={{ fontSize: 12, color: 'var(--t-fg-3)' }}>{ex.sub}</div>
              </div>
              <button style={{ fontSize: 12, color: 'var(--t-fg-2)', fontWeight: 500 }}>Swap</button>
            </div>
          </HCard>
        ))}
      </div>

      <div style={{ marginTop: 16, display: 'flex', gap: 10 }}>
        <HPrimaryButton variant="ghost" full size="md">Pause</HPrimaryButton>
        <HPrimaryButton variant="gradient" full size="md" icon="check">Finish session</HPrimaryButton>
      </div>
    </HScreen>
  );
}

// ============================================================================
// PROFILE
// ============================================================================
function ProfileScreen({ onBack }) {
  const [photo, setPhoto] = React.useState(null);
  const fileRef = React.useRef(null);
  const onPick = (e) => {
    const f = e.target.files?.[0];
    if (!f) return;
    const reader = new FileReader();
    reader.onload = (ev) => setPhoto(ev.target.result);
    reader.readAsDataURL(f);
  };
  return (
    <HScreen label="Profile">
      <HTopBar title="Profile" onBack={onBack}/>
      <HCard pad="20px" radius={20} style={{ marginBottom: 16, textAlign: 'center' }}>
        <input ref={fileRef} type="file" accept="image/*" onChange={onPick} style={{ display: 'none' }}/>
        <button onClick={() => fileRef.current?.click()} aria-label="Upload profile photo" style={{ position: 'relative', display: 'inline-block', width: 88, height: 88 }}>
          {photo ? (
            <img src={photo} alt="Profile" style={{ width: 88, height: 88, borderRadius: 999, objectFit: 'cover' }}/>
          ) : (
            <div style={{ width: 88, height: 88, borderRadius: 999, background: 'var(--grad-warm-orange)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontSize: 34, color: '#fff', fontWeight: 600 }}>K</div>
          )}
          <div style={{ position: 'absolute', bottom: 0, right: 0, width: 30, height: 30, borderRadius: 999, background: 'var(--t-pill)', color: 'var(--t-pill-fg)', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '3px solid var(--t-surface)' }}>
            <Glyph name="plus" size={14} stroke={2.5}/>
          </div>
        </button>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, marginTop: 14 }}>{(window.HEALIFY_USER && window.HEALIFY_USER.full) || 'Kathryn Williams'}</div>
        <div style={{ fontSize: 13, color: 'var(--t-fg-3)' }}>Member since Jan 2025</div>
        <button onClick={() => fileRef.current?.click()} style={{ marginTop: 10, fontSize: 13, color: 'var(--brand-orange-vibey)', fontWeight: 500 }}>{photo ? 'Change photo' : 'Add a photo'}</button>
      </HCard>

      <HSectionLabel>Body</HSectionLabel>
      <HCard pad="0" radius={20} style={{ overflow: 'hidden', marginBottom: 16 }}>
        <HSettingsRow icon="user" title="Age" value="48"/>
        <HSettingsRow icon="user" title="Height" value={`5'6"`}/>
        <HSettingsRow icon="user" title="Weight" value="142 lbs"/>
        <HSettingsRow icon="user" title="Biological sex" value="Female"/>
      </HCard>

      <HSectionLabel>Goals</HSectionLabel>
      <HCard pad="0" radius={20} style={{ overflow: 'hidden' }}>
        <HSettingsRow icon="target" title="Primary goal" value="Lower BP"/>
        <HSettingsRow icon="flag" title="Activity level" value="Moderate"/>
        <HSettingsRow icon="clock" title="Sleep target" value="7h 30m"/>
      </HCard>
    </HScreen>
  );
}

// ============================================================================
// SETTINGS
// ============================================================================
function SettingsScreen({ onNavigate, onBack }) {
  return (
    <HScreen label="Settings">
      {onBack ? <HTopBar title="Menu" onBack={onBack}/> : (
        <div style={{ padding: '0 4px 16px' }}>
          <div className="h-display" style={{ fontSize: 30 }}>Menu</div>
        </div>
      )}

      {/* Profile card */}
      <HCard pad="18px" radius={22} style={{ marginBottom: 16, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -40, right: -40, width: 160, height: 160, borderRadius: '50%', background: 'radial-gradient(circle, color-mix(in oklab, var(--brand-orange-vibey) 22%, transparent), transparent 70%)' }}/>
        <button onClick={() => onNavigate('profile')} style={{ display: 'flex', alignItems: 'center', gap: 14, width: '100%', textAlign: 'left', position: 'relative' }}>
          <div style={{ width: 56, height: 56, borderRadius: 999, background: 'var(--grad-warm-orange)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, color: '#fff' }}>{(window.HEALIFY_USER && window.HEALIFY_USER.initial) || 'K'}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 500 }}>{(window.HEALIFY_USER && window.HEALIFY_USER.first) || 'Kathryn'}</div>
            <div style={{ fontSize: 12, color: 'var(--t-fg-3)' }}>{(window.HEALIFY_USER && window.HEALIFY_USER.email) || 'kathryn@healify.ai'} · Life+</div>
          </div>
          <Glyph name="chevR" size={16} style={{ color: 'var(--t-fg-3)' }}/>
        </button>
      </HCard>

      <HSectionLabel>Account</HSectionLabel>
      <HCard pad="0" radius={20} style={{ overflow: 'hidden', marginBottom: 16 }}>
        <HSettingsRow icon="user" title="Profile" sub="Personal info, body" onClick={() => onNavigate('profile')}/>
        <HSettingsRow icon="lock" title="Privacy & data" onClick={() => onNavigate('privacy')}/>
        <HSettingsRow icon="bell" title="Notifications" sub="2 unread" onClick={() => onNavigate('notifications')}/>
      </HCard>

      <HSectionLabel>Anna</HSectionLabel>
      <HCard pad="0" radius={20} style={{ overflow: 'hidden', marginBottom: 16 }}>
        <HSettingsRow icon="voice" title="Voice & tone" value="Warm"/>
        <HSettingsRow icon="clock" title="Daily check-in" value="8:00 am"/>
        <HSettingsRow icon="shield" title="What Anna remembers" sub="Memory & data"/>
      </HCard>

      <HSectionLabel>Connections</HSectionLabel>
      <HCard pad="0" radius={20} style={{ overflow: 'hidden', marginBottom: 16 }}>
        <HSettingsRow icon="heart" title="Apple Health" sub="All wearables sync through here" value="Connected"/>
        <HSettingsRow icon="scan" title="23andMe" value="Connected"/>
      </HCard>

      <HSectionLabel>Quick access</HSectionLabel>
      <HCard pad="0" radius={20} style={{ overflow: 'hidden', marginBottom: 16 }}>
        <HSettingsRow icon="target" title="Habits" sub="2 of 4 done today" onClick={() => onNavigate('habits')}/>
        <HSettingsRow icon="droplet" title="Bloodwork" sub="Apr 18 · 14 markers" onClick={() => onNavigate('blood')}/>
        <HSettingsRow icon="scan" title="DNA insights" sub="142 traits" onClick={() => onNavigate('dna')}/>
        <HSettingsRow icon="clock" title="Chat history" sub="6 threads" onClick={() => onNavigate('history')}/>
      </HCard>

      <HSectionLabel>Billing</HSectionLabel>
      <HCard pad="0" radius={20} style={{ overflow: 'hidden', marginBottom: 16 }}>
        <HSettingsRow icon="sparkle" title="Healify Life+" sub="Annual · renews Jan 2027" value="Active" onClick={() => onNavigate('paywall')}/>
        <HSettingsRow icon="data" title="Receipts"/>
      </HCard>

      <HCard pad="0" radius={20} style={{ overflow: 'hidden', marginBottom: 16 }}>
        <HSettingsRow icon="search" title="Help center"/>
        <HSettingsRow icon="share" title="Invite a friend" sub="Both get a month free"/>
        <HSettingsRow icon="trash" title="Sign out" danger/>
      </HCard>

      <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--t-fg-3)' }}>Healify v2.0 · 2026</div>
    </HScreen>
  );
}

// Stubs so the router can resolve everything
function PrivacyScreen({ onBack }) {
  return (
    <HScreen label="Privacy"><HTopBar title="Privacy & data" onBack={onBack}/>
      <HCard pad="0" radius={20} style={{ overflow: 'hidden', marginBottom: 16 }}>
        <HSettingsRow icon="shield" title="End-to-end encryption" value="On" toggle={{ on: true }}/>
        <HSettingsRow icon="copy" title="Export my data"/>
        <HSettingsRow icon="trash" title="Delete account" danger/>
      </HCard>
    </HScreen>
  );
}

function ChatHistoryScreen({ onBack, onNavigate }) {
  return (
    <HScreen label="History"><HTopBar title="Chat history" onBack={onBack}/>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {[
          { t: 'Blood pressure — what now?', p: 'BP 130/85, sodium', d: 'Today', topic: 'bp' },
          { t: 'Why are my steps low?',      p: 'Movement plan',      d: 'Yesterday', topic: 'movement' },
          { t: 'Iron levels low — diet swaps', p: 'Try lentils, beef', d: '3d' },
          { t: 'Why is HRV dropping?',        p: 'Recovery, alcohol',  d: 'Apr 21' },
          { t: 'Headache pattern',            p: 'Possible triggers',  d: 'Apr 14' },
        ].map((tt, i) => (
          <button key={i} onClick={() => onNavigate('chat', { topic: tt.topic })} style={{ display: 'block', width: '100%', textAlign: 'left' }}>
            <HCard pad="14px" radius={16}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: '-0.2px' }}>{tt.t}</div>
                  <div style={{ fontSize: 12, color: 'var(--t-fg-3)', marginTop: 4 }}>{tt.p}</div>
                </div>
                <div style={{ fontSize: 11, color: 'var(--t-fg-3)' }}>{tt.d}</div>
              </div>
            </HCard>
          </button>
        ))}
      </div>
    </HScreen>
  );
}

Object.assign(window, { BloodReportScreen, DNAScreen, MeditationScreen, MealPlanScreen, WorkoutScreen, ProfileScreen, SettingsScreen, PrivacyScreen, ChatHistoryScreen });