// Otto — Screens part 2: Preventive, Booking, Lab, Coach, Check-in

// ─────────────────────────────────────────────────────────────
// 06 PREVENTIVE CARE PLANNER
// ─────────────────────────────────────────────────────────────
function ScreenPreventive({ go }) {
  const [tab, setTab] = React.useState('overdue');
  const data = {
    overdue: [
      { icon: '🩸', t: 'Fasting Glucose + A1c', last: '14 months ago', why: 'Tracks your pre-diabetes', priority: 'high' },
      { icon: '💊', t: 'Lipid Panel + CMP', last: '11 months ago', why: 'Watches LDL and liver', priority: 'high' },
    ],
    upcoming: [
      { icon: '🦴', t: 'DEXA Bone Density', last: 'Due in 3 months', why: 'Bone health screen' },
      { icon: '👁', t: 'Retinal / OCT Scan', last: 'Due in 2 months', why: 'Pre-diabetic retinopathy' },
      { icon: '🫁', t: 'Low-dose Chest CT', last: 'Due in 6 months', why: 'Activity decline trend' },
    ],
    done: [
      { icon: '🩻', t: 'Annual physical', last: 'Done 3 months ago' },
      { icon: '💉', t: 'Flu + Shingles vaccines', last: 'Done last fall' },
      { icon: '🦷', t: 'Dental cleaning', last: 'Done 2 months ago' },
      { icon: '👂', t: 'Hearing screen', last: 'Done 8 months ago' },
    ],
  };
  const list = data[tab];

  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' }}>Preventive care</div>
        <div style={{
          fontFamily: OttoTokens.serif, fontSize: 32, fontWeight: 400,
          color: OttoTokens.ink, marginTop: 6, lineHeight: 1.15, letterSpacing: -0.4,
        }}>
          Your screening<br/>
          <span style={{ color: OttoTokens.inkMuted, fontStyle: 'italic' }}>plan, in order.</span>
        </div>
      </div>

      {/* Coverage ring */}
      <div style={{ padding: '22px 16px 0' }}>
        <Card style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <div style={{ position: 'relative', width: 84, height: 84, flexShrink: 0 }}>
            <svg width="84" height="84" style={{ transform: 'rotate(-90deg)' }}>
              <circle cx="42" cy="42" r="36" stroke="rgba(28,26,23,0.08)" strokeWidth="8" fill="none"/>
              <circle cx="42" cy="42" r="36" stroke={OttoTokens.sage} strokeWidth="8" fill="none"
                strokeDasharray={`${0.74 * 226} 226`} strokeLinecap="round"/>
            </svg>
            <div style={{
              position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: OttoTokens.serif, fontSize: 26, color: OttoTokens.ink,
            }}>74<span style={{ fontSize: 14, color: OttoTokens.inkSubtle, fontFamily: OttoTokens.sans }}>%</span></div>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: OttoTokens.sans, fontSize: 17, color: OttoTokens.ink, fontWeight: 600 }}>Coverage of your top risks</div>
            <div style={{ fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkMuted, marginTop: 4, lineHeight: 1.45 }}>
              Two overdue tests would bring this to 92%.
            </div>
          </div>
        </Card>
      </div>

      {/* Tabs */}
      <div style={{ padding: '22px 20px 0', display: 'flex', gap: 8 }}>
        {[
          { id: 'overdue', l: 'Overdue', n: data.overdue.length, tone: 'clay' },
          { id: 'upcoming', l: 'Upcoming', n: data.upcoming.length, tone: 'sage' },
          { id: 'done', l: 'Done', n: data.done.length, tone: 'neutral' },
        ].map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            flex: 1, padding: '12px 8px', borderRadius: 999, border: 'none', cursor: 'pointer',
            background: tab === t.id ? OttoTokens.ink : 'transparent',
            color: tab === t.id ? '#FAF7F1' : OttoTokens.inkMuted,
            fontFamily: OttoTokens.sans, fontSize: 14, fontWeight: 600,
            transition: 'all 200ms',
          }}>{t.l} · {t.n}</button>
        ))}
      </div>

      <div style={{ padding: '14px 16px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {list.map((item, i) => (
          <Card key={i} onClick={tab === 'overdue' ? () => go('book') : null} style={{ padding: '18px 22px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <div style={{
                width: 52, height: 52, borderRadius: 16,
                background: tab === 'overdue' ? OttoTokens.claySoft : tab === 'upcoming' ? OttoTokens.sageSoft : OttoTokens.surfaceAlt,
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24, flexShrink: 0,
              }}>{item.icon}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: OttoTokens.sans, fontSize: 17, color: OttoTokens.ink, fontWeight: 600 }}>{item.t}</div>
                <div style={{ fontFamily: OttoTokens.sans, fontSize: 13, color: OttoTokens.inkMuted, marginTop: 3 }}>{item.last}</div>
                {item.why && <div style={{ fontFamily: OttoTokens.sans, fontSize: 13, color: OttoTokens.inkSubtle, marginTop: 6, fontStyle: 'italic' }}>{item.why}</div>}
              </div>
              {tab === 'overdue' && <Pill tone="clay">Book</Pill>}
              {tab === 'done' && <span style={{ color: OttoTokens.sage, fontSize: 22 }}>✓</span>}
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 07 BOOK TEST / APPOINTMENT
// ─────────────────────────────────────────────────────────────
function ScreenBook({ go }) {
  const [selected, setSelected] = React.useState({ glucose: true, lipid: true, cbc: false, tsh: false });
  const [day, setDay] = React.useState(1);
  const [confirmed, setConfirmed] = React.useState(false);

  const tests = [
    { id: 'glucose', t: 'Fasting Glucose + A1c', why: '14 months overdue', tone: 'clay' },
    { id: 'lipid', t: 'Lipid Panel + CMP', why: 'LDL 142 — checking', tone: 'clay' },
    { id: 'cbc', t: 'Complete Blood Count', why: 'Rule out anemia', tone: 'amber' },
    { id: 'tsh', t: 'Thyroid (TSH)', why: 'Fatigue check', tone: 'amber' },
  ];
  const days = [
    { d: 'Mon', n: 5 }, { d: 'Tue', n: 6 }, { d: 'Wed', n: 7 }, { d: 'Thu', n: 8 },
  ];

  if (confirmed) {
    return (
      <div style={{ height: '100%', background: OttoTokens.bg, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 32, animation: 'ottoFade 600ms ease' }}>
        <div style={{
          width: 120, height: 120, borderRadius: '50%', background: OttoTokens.sageSoft,
          display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 24,
          animation: 'ottoPop 500ms cubic-bezier(.2,.8,.2,1)',
        }}>
          <svg width="60" height="60" viewBox="0 0 60 60" fill="none">
            <path d="M16 30l10 10 18-22" stroke={OttoTokens.sage} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <div style={{ fontFamily: OttoTokens.serif, fontSize: 32, color: OttoTokens.ink, textAlign: 'center', letterSpacing: -0.4, lineHeight: 1.1 }}>
          You're booked.
        </div>
        <div style={{ fontFamily: OttoTokens.sans, fontSize: 16, color: OttoTokens.inkMuted, marginTop: 12, textAlign: 'center', maxWidth: 280, lineHeight: 1.5 }}>
          Quest Diagnostics · Tuesday, May 6 at 8:00 AM. Otto will remind you the night before, with prep instructions.
        </div>
        <div style={{ marginTop: 32, width: '100%', maxWidth: 320 }}>
          <OttoButton onClick={() => { setConfirmed(false); go('home'); }}>Back to Otto</OttoButton>
        </div>
      </div>
    );
  }

  const count = Object.values(selected).filter(Boolean).length;

  return (
    <div style={{ height: '100%', overflow: 'auto', background: OttoTokens.bg, paddingBottom: 130 }}>
      <div style={{ padding: '64px 24px 6px' }}>
        <div style={{
          fontFamily: OttoTokens.serif, fontSize: 32, fontWeight: 400,
          color: OttoTokens.ink, lineHeight: 1.15, letterSpacing: -0.4,
        }}>
          Let's book<br/>
          <span style={{ color: OttoTokens.inkMuted, fontStyle: 'italic' }}>your labs.</span>
        </div>
      </div>

      <div style={{ padding: '20px 16px 0' }}>
        <Card style={{ background: OttoTokens.sageSoft, border: 'none', boxShadow: 'none' }}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <OttoMark size={20} color={OttoTokens.sage}/>
            </div>
            <div style={{ fontFamily: OttoTokens.sans, fontSize: 15, color: OttoTokens.sageDeep, lineHeight: 1.5 }}>
              I picked the two overdue tests for you. The other two are optional based on what you've mentioned in check-ins.
            </div>
          </div>
        </Card>
      </div>

      {/* Tests */}
      <div style={{ padding: '20px 16px 0' }}>
        <SectionLabel style={{ paddingLeft: 6 }}>Tests</SectionLabel>
        <Card padded={false}>
          {tests.map((t, i) => (
            <div key={t.id} onClick={() => setSelected({ ...selected, [t.id]: !selected[t.id] })} style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: '18px 22px', cursor: 'pointer',
              borderBottom: i === tests.length - 1 ? 'none' : `0.5px solid ${OttoTokens.hairline}`,
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 8,
                border: selected[t.id] ? 'none' : `2px solid ${OttoTokens.inkSubtle}`,
                background: selected[t.id] ? OttoTokens.ink : 'transparent',
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                color: '#FAF7F1', fontSize: 16, fontWeight: 700,
                transition: 'all 200ms',
              }}>{selected[t.id] && '✓'}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: OttoTokens.sans, fontSize: 17, color: OttoTokens.ink, fontWeight: 500 }}>{t.t}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4 }}>
                  <Dot tone={t.tone} size={6}/>
                  <span style={{ fontFamily: OttoTokens.sans, fontSize: 13, color: OttoTokens.inkMuted }}>{t.why}</span>
                </div>
              </div>
            </div>
          ))}
        </Card>
      </div>

      {/* Lab + Day */}
      <div style={{ padding: '20px 16px 0' }}>
        <SectionLabel style={{ paddingLeft: 6 }}>Lab</SectionLabel>
        <div style={{ display: 'flex', gap: 8 }}>
          {['Quest', 'LabCorp', 'In-home'].map((l, i) => (
            <div key={l} style={{
              flex: 1, padding: '16px 8px',
              background: i === 0 ? OttoTokens.ink : OttoTokens.surface,
              color: i === 0 ? '#FAF7F1' : OttoTokens.ink,
              borderRadius: OttoTokens.rMd,
              fontFamily: OttoTokens.sans, fontSize: 15, fontWeight: 600,
              textAlign: 'center',
              boxShadow: i === 0 ? 'none' : '0 1px 0 rgba(28,26,23,0.04)',
            }}>{l}</div>
          ))}
        </div>
      </div>

      <div style={{ padding: '20px 16px 0' }}>
        <SectionLabel style={{ paddingLeft: 6 }}>Earliest slots · 8:00 AM (fasting)</SectionLabel>
        <div style={{ display: 'flex', gap: 8 }}>
          {days.map((d, i) => (
            <button key={d.d} onClick={() => setDay(i)} style={{
              flex: 1, padding: '14px 4px',
              background: day === i ? OttoTokens.ink : OttoTokens.surface,
              color: day === i ? '#FAF7F1' : OttoTokens.ink,
              borderRadius: OttoTokens.rMd,
              fontFamily: OttoTokens.sans,
              border: 'none', cursor: 'pointer',
              boxShadow: day === i ? 'none' : '0 1px 0 rgba(28,26,23,0.04)',
            }}>
              <div style={{ fontSize: 12, opacity: 0.7, fontWeight: 600 }}>{d.d}</div>
              <div style={{ fontFamily: OttoTokens.serif, fontSize: 24, marginTop: 4 }}>{d.n}</div>
            </button>
          ))}
        </div>
      </div>

      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '16px 20px 24px', background: 'linear-gradient(to top, rgba(244,240,232,1) 60%, rgba(244,240,232,0))' }}>
        <OttoButton onClick={() => setConfirmed(true)}>
          Confirm {count} test{count !== 1 ? 's' : ''} · {days[day].d} {days[day].n}
        </OttoButton>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 08 LAB RESULTS & AI ANALYSIS
// ─────────────────────────────────────────────────────────────
function ScreenLab({ go }) {
  const labs = [
    { l: 'A1c', v: '5.8', u: '%', flag: 'Pre-diabetic', tone: 'amber' },
    { l: 'Fasting glucose', v: '102', u: 'mg/dL', flag: 'Pre-diabetic', tone: 'amber' },
    { l: 'LDL-C', v: '142', u: 'mg/dL', flag: 'Borderline high', tone: 'amber' },
    { l: 'HDL-C', v: '48', u: 'mg/dL', flag: 'Low-normal', tone: 'neutral' },
    { l: 'Creatinine', v: '1.02', u: 'mg/dL', flag: 'Normal', tone: 'sage' },
    { l: 'TSH', v: '2.4', u: 'mIU/L', flag: 'Normal', tone: 'sage' },
  ];

  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' }}>Lab results · May 8</div>
        <div style={{
          fontFamily: OttoTokens.serif, fontSize: 32, fontWeight: 400,
          color: OttoTokens.ink, marginTop: 6, lineHeight: 1.15, letterSpacing: -0.4,
        }}>
          Otto read<br/>
          <span style={{ color: OttoTokens.inkMuted, fontStyle: 'italic' }}>your labs.</span>
        </div>
      </div>

      {/* A1c trend hero */}
      <div style={{ padding: '20px 16px 0' }}>
        <Card>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div style={{ fontFamily: OttoTokens.sans, fontSize: 13, color: OttoTokens.inkSubtle, fontWeight: 600, letterSpacing: 1, textTransform: 'uppercase' }}>A1c trend · 3 readings</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 8 }}>
                <span style={{ fontFamily: OttoTokens.serif, fontSize: 56, color: OttoTokens.ink, letterSpacing: -1.2, lineHeight: 1 }}>5.8</span>
                <span style={{ fontFamily: OttoTokens.sans, fontSize: 18, color: OttoTokens.inkMuted }}>%</span>
              </div>
            </div>
            <Pill tone="amber">Pre-diabetic</Pill>
          </div>

          {/* Trend bars */}
          <div style={{ marginTop: 22, display: 'flex', alignItems: 'flex-end', gap: 16, height: 120, padding: '0 8px' }}>
            {[
              { v: 5.4, l: '2 yrs ago', t: 'sage' },
              { v: 5.6, l: '1 yr ago', t: 'amber' },
              { v: 5.8, l: 'Today', t: 'amber' },
            ].map((p, i) => (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                <div style={{ fontFamily: OttoTokens.serif, fontSize: 18, color: OttoTokens.ink }}>{p.v}</div>
                <div style={{
                  width: '100%',
                  height: `${((p.v - 5.0) / 0.8) * 100}%`,
                  background: p.t === 'amber' ? OttoTokens.amber : OttoTokens.sage,
                  borderRadius: '8px 8px 0 0',
                  transformOrigin: 'bottom',
                  animation: `ottoBarV 700ms ${i * 150}ms cubic-bezier(.2,.8,.2,1) backwards`,
                  opacity: 0.85,
                }}/>
                <div style={{ fontFamily: OttoTokens.sans, fontSize: 11, color: OttoTokens.inkSubtle, fontWeight: 600 }}>{p.l}</div>
              </div>
            ))}
            {/* Threshold line */}
            <div style={{ position: 'absolute', pointerEvents: 'none' }}/>
          </div>

          <div style={{
            marginTop: 18, padding: '16px 18px',
            background: OttoTokens.amberSoft, borderRadius: 16,
            fontFamily: OttoTokens.sans, fontSize: 15, color: '#7A5524', lineHeight: 1.55,
          }}>
            <div style={{ fontWeight: 700, marginBottom: 6 }}>What Otto sees</div>
            Your A1c has climbed steadily. Combined with your visceral fat and recent post-meal fatigue, this looks like early insulin resistance. A walk after dinner, most nights, is the highest-leverage thing.
          </div>
        </Card>
      </div>

      {/* Lab list */}
      <div style={{ padding: '20px 16px 0' }}>
        <SectionLabel style={{ paddingLeft: 6 }}>All values</SectionLabel>
        <Card padded={false}>
          {labs.map((lab, i) => (
            <div key={lab.l} style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: '16px 22px',
              borderBottom: i === labs.length - 1 ? 'none' : `0.5px solid ${OttoTokens.hairline}`,
            }}>
              <Dot tone={lab.tone}/>
              <div style={{ flex: 1, fontFamily: OttoTokens.sans, fontSize: 16, color: OttoTokens.ink }}>{lab.l}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                <span style={{ fontFamily: OttoTokens.serif, fontSize: 22, color: OttoTokens.ink, letterSpacing: -0.3 }}>{lab.v}</span>
                <span style={{ fontFamily: OttoTokens.sans, fontSize: 12, color: OttoTokens.inkSubtle }}>{lab.u}</span>
              </div>
            </div>
          ))}
        </Card>
      </div>

      <div style={{ padding: '24px 16px 0', display: 'flex', gap: 10 }}>
        <OttoButton kind="secondary">Share with doctor</OttoButton>
        <OttoButton kind="primary" onClick={() => go('coach')}>Ask Otto</OttoButton>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 09 AI HEALTH COACH CHAT
// ─────────────────────────────────────────────────────────────
function ScreenCoach({ go }) {
  const initial = [
    { role: 'otto', text: "Good morning, Michael. I read your latest labs. Want me to walk you through what changed?" },
    { role: 'user', text: 'Why am I at risk for pre-diabetes specifically?' },
    { role: 'otto', text: "Your A1c is 5.8% — that's the pre-diabetic range. Combined with your visceral fat (level 9), 7,400 daily steps, and the post-meal fatigue you mentioned Tuesday, it points to insulin resistance starting to develop. Your father's T2D adds genetic risk." },
    { role: 'user', text: "What's the single biggest thing I can do?" },
    { role: 'otto', text: "Walk 30 minutes after dinner most nights. Post-meal walks lower blood glucose 10–15% acutely and improve insulin sensitivity within two weeks. Want me to add this to your daily plan?" },
  ];
  const [messages, setMessages] = React.useState(initial);
  const [input, setInput] = React.useState('');
  const [typing, setTyping] = React.useState(false);
  const scrollRef = React.useRef();

  React.useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [messages, typing]);

  const send = (text) => {
    if (!text.trim()) return;
    setMessages(m => [...m, { role: 'user', text }]);
    setInput('');
    setTyping(true);
    setTimeout(() => {
      setTyping(false);
      setMessages(m => [...m, {
        role: 'otto',
        text: "Yes — I'll add a 30-minute post-dinner walk to your daily actions starting tonight. I'll also keep an eye on your evening glucose patterns.",
      }]);
    }, 1400);
  };

  const suggested = ['Show my 6-month trends', 'What foods spike my blood sugar?', 'Should I start metformin?'];

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: OttoTokens.bg }}>
      <div style={{ padding: '60px 24px 12px', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{
          width: 44, height: 44, borderRadius: '50%', background: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 4px 12px rgba(28,26,23,0.08)',
        }}>
          <OttoMark size={26} color={OttoTokens.sage}/>
        </div>
        <div>
          <div style={{ fontFamily: OttoTokens.serif, fontSize: 22, color: OttoTokens.ink, letterSpacing: -0.3 }}>Otto</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <LiveDot/>
            <span style={{ fontFamily: OttoTokens.sans, fontSize: 12, color: OttoTokens.inkMuted }}>Reads your labs, devices and history</span>
          </div>
        </div>
      </div>

      <div ref={scrollRef} style={{ flex: 1, overflow: 'auto', padding: '12px 16px 12px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {messages.map((m, i) => (
          <div key={i} style={{
            alignSelf: m.role === 'user' ? 'flex-end' : 'flex-start',
            maxWidth: '82%',
            background: m.role === 'user' ? OttoTokens.ink : OttoTokens.surface,
            color: m.role === 'user' ? '#FAF7F1' : OttoTokens.ink,
            padding: '14px 18px', borderRadius: 22,
            borderBottomRightRadius: m.role === 'user' ? 6 : 22,
            borderBottomLeftRadius: m.role === 'otto' ? 6 : 22,
            fontFamily: OttoTokens.sans, fontSize: 16, lineHeight: 1.5,
            boxShadow: m.role === 'otto' ? '0 1px 0 rgba(28,26,23,0.04), 0 8px 24px -16px rgba(28,26,23,0.1)' : 'none',
            animation: 'ottoMsgIn 320ms cubic-bezier(.2,.8,.2,1)',
          }}>{m.text}</div>
        ))}
        {typing && (
          <div style={{
            alignSelf: 'flex-start', background: OttoTokens.surface,
            padding: '14px 18px', borderRadius: 22, borderBottomLeftRadius: 6,
            display: 'flex', gap: 4,
          }}>
            {[0,1,2].map(i => <span key={i} style={{
              width: 7, height: 7, borderRadius: '50%', background: OttoTokens.inkSubtle,
              animation: `ottoTyping 1.2s ${i * 0.2}s infinite ease-in-out`,
            }}/>)}
          </div>
        )}
      </div>

      {/* Suggested */}
      <div style={{ padding: '4px 16px 8px', display: 'flex', gap: 8, overflowX: 'auto' }}>
        {suggested.map(s => (
          <button key={s} onClick={() => send(s)} style={{
            flexShrink: 0, padding: '10px 16px', borderRadius: 999,
            background: OttoTokens.surface, color: OttoTokens.ink,
            fontFamily: OttoTokens.sans, fontSize: 14, fontWeight: 500,
            border: `1px solid ${OttoTokens.hairline}`, cursor: 'pointer',
            whiteSpace: 'nowrap',
          }}>{s}</button>
        ))}
      </div>

      {/* Input */}
      <div style={{ padding: '8px 16px 28px', display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{
          flex: 1, display: 'flex', alignItems: 'center',
          background: OttoTokens.surface, borderRadius: 999,
          padding: '4px 6px 4px 20px', minHeight: 52,
          boxShadow: '0 1px 0 rgba(28,26,23,0.04)',
        }}>
          <input value={input} onChange={e => setInput(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && send(input)}
            placeholder="Ask Otto anything…"
            style={{
              flex: 1, border: 'none', outline: 'none', background: 'transparent',
              fontFamily: OttoTokens.sans, fontSize: 16, color: OttoTokens.ink,
            }}/>
          <button onClick={() => send(input)} style={{
            width: 44, height: 44, borderRadius: '50%',
            background: input.trim() ? OttoTokens.ink : 'transparent',
            color: input.trim() ? '#FAF7F1' : OttoTokens.inkSubtle,
            border: 'none', cursor: input.trim() ? 'pointer' : 'default',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            transition: 'all 200ms',
          }}>↑</button>
        </div>
        <button style={{
          width: 52, height: 52, borderRadius: '50%',
          background: OttoTokens.sage, color: '#fff', border: 'none', cursor: 'pointer',
          fontSize: 22, display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>🎤</button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 10 DAILY CHECK-IN
// ─────────────────────────────────────────────────────────────
function ScreenCheckin({ go }) {
  const [step, setStep] = React.useState(0);
  const [mood, setMood] = React.useState(null);
  const [tags, setTags] = React.useState([]);

  const symptoms = ['Tired', 'Mild headache', 'Some chest tightness', 'Joint stiffness', 'Sleep poorly', 'Dizziness', 'Felt fine'];
  const moods = [
    { e: '😀', l: 'Good' }, { e: '🙂', l: 'Okay' },
    { e: '😐', l: 'Neutral' }, { e: '😕', l: 'Low' }, { e: '😞', l: 'Bad' },
  ];

  const toggle = (s) => setTags(t => t.includes(s) ? t.filter(x => x !== s) : [...t, s]);

  if (step === 3) {
    return (
      <div style={{ height: '100%', background: OttoTokens.bg, padding: '64px 24px', overflow: 'auto', paddingBottom: 110 }}>
        <div style={{ fontFamily: OttoTokens.sans, fontSize: 12, color: OttoTokens.inkSubtle, fontWeight: 600, letterSpacing: 1.4, textTransform: 'uppercase' }}>Check-in complete</div>
        <div style={{
          fontFamily: OttoTokens.serif, fontSize: 32, color: OttoTokens.ink, marginTop: 8, lineHeight: 1.15, letterSpacing: -0.4,
        }}>Thank you,<br/><span style={{ color: OttoTokens.inkMuted, fontStyle: 'italic' }}>Otto noted it.</span></div>

        <div style={{ marginTop: 32 }}>
          <Card>
            <div style={{ fontFamily: OttoTokens.sans, fontSize: 13, color: OttoTokens.inkSubtle, fontWeight: 600, letterSpacing: 1, textTransform: 'uppercase' }}>What I heard</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 12 }}>
              {tags.length ? tags.map(t => <Pill key={t} tone="neutral">{t}</Pill>) : <Pill tone="sage">Felt fine</Pill>}
            </div>
            {tags.includes('Tired') || tags.includes('Mild headache') ? (
              <div style={{ marginTop: 18, padding: '14px 16px', background: OttoTokens.amberSoft, borderRadius: 16, fontFamily: OttoTokens.sans, fontSize: 14, color: '#7A5524', lineHeight: 1.5 }}>
                Fatigue + headache after lunch can relate to blood sugar fluctuations given your Pre-D status. I've flagged this for tomorrow's signal review.
              </div>
            ) : null}
          </Card>
        </div>

        <div style={{ marginTop: 24 }}>
          <OttoButton onClick={() => { setStep(0); setMood(null); setTags([]); go('home'); }}>Back to Otto</OttoButton>
        </div>
      </div>
    );
  }

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: OttoTokens.bg }}>
      {/* Progress */}
      <div style={{ padding: '60px 20px 0', display: 'flex', gap: 6 }}>
        {[0,1,2].map(i => (
          <div key={i} style={{
            flex: 1, height: 4, borderRadius: 2,
            background: i <= step ? OttoTokens.ink : 'rgba(28,26,23,0.1)',
            transition: 'background 300ms',
          }}/>
        ))}
      </div>

      <div style={{ flex: 1, padding: '40px 28px 20px', display: 'flex', flexDirection: 'column' }}>
        {step === 0 && (
          <div style={{ animation: 'ottoFade 400ms ease' }}>
            <div style={{ fontFamily: OttoTokens.sans, fontSize: 13, color: OttoTokens.inkSubtle, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase' }}>1 of 3</div>
            <div style={{ fontFamily: OttoTokens.serif, fontSize: 32, color: OttoTokens.ink, marginTop: 8, lineHeight: 1.2, letterSpacing: -0.3 }}>
              Good morning, Michael.<br/>
              <span style={{ color: OttoTokens.inkMuted, fontStyle: 'italic' }}>How are you feeling?</span>
            </div>
            <div style={{ marginTop: 40, display: 'flex', justifyContent: 'space-between', gap: 6 }}>
              {moods.map((m, i) => (
                <button key={m.l} onClick={() => setMood(i)} style={{
                  flex: 1, padding: '14px 4px',
                  background: mood === i ? OttoTokens.ink : OttoTokens.surface,
                  borderRadius: 18, border: 'none', cursor: 'pointer',
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                  transform: mood === i ? 'scale(1.04)' : 'scale(1)',
                  transition: 'all 200ms',
                  boxShadow: mood === i ? 'none' : '0 1px 0 rgba(28,26,23,0.04)',
                }}>
                  <div style={{ fontSize: 30 }}>{m.e}</div>
                  <div style={{ fontFamily: OttoTokens.sans, fontSize: 11, fontWeight: 600, color: mood === i ? '#FAF7F1' : OttoTokens.inkMuted }}>{m.l}</div>
                </button>
              ))}
            </div>
          </div>
        )}

        {step === 1 && (
          <div style={{ animation: 'ottoFade 400ms ease' }}>
            <div style={{ fontFamily: OttoTokens.sans, fontSize: 13, color: OttoTokens.inkSubtle, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase' }}>2 of 3</div>
            <div style={{ fontFamily: OttoTokens.serif, fontSize: 30, color: OttoTokens.ink, marginTop: 8, lineHeight: 1.2, letterSpacing: -0.3 }}>
              Anything bothering you?<br/>
              <span style={{ color: OttoTokens.inkMuted, fontStyle: 'italic', fontSize: 22 }}>Tap all that apply.</span>
            </div>
            <div style={{ marginTop: 32, display: 'flex', flexWrap: 'wrap', gap: 10 }}>
              {symptoms.map(s => {
                const on = tags.includes(s);
                return (
                  <button key={s} onClick={() => toggle(s)} style={{
                    padding: '14px 18px', borderRadius: 999,
                    background: on ? OttoTokens.ink : OttoTokens.surface,
                    color: on ? '#FAF7F1' : OttoTokens.ink,
                    fontFamily: OttoTokens.sans, fontSize: 16, fontWeight: 500,
                    border: 'none', cursor: 'pointer',
                    transition: 'all 180ms',
                    boxShadow: on ? 'none' : '0 1px 0 rgba(28,26,23,0.04)',
                  }}>{s}</button>
                );
              })}
            </div>
          </div>
        )}

        {step === 2 && (
          <div style={{ animation: 'ottoFade 400ms ease' }}>
            <div style={{ fontFamily: OttoTokens.sans, fontSize: 13, color: OttoTokens.inkSubtle, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase' }}>3 of 3</div>
            <div style={{ fontFamily: OttoTokens.serif, fontSize: 30, color: OttoTokens.ink, marginTop: 8, lineHeight: 1.2, letterSpacing: -0.3 }}>
              In the last 2 weeks,<br/>
              <span style={{ color: OttoTokens.inkMuted, fontStyle: 'italic' }}>have you felt down or hopeless?</span>
            </div>
            <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {['Not at all', 'Several days', 'More than half the days', 'Nearly every day'].map(o => (
                <button key={o} style={{
                  padding: '20px 22px', borderRadius: 22,
                  background: OttoTokens.surface, color: OttoTokens.ink,
                  fontFamily: OttoTokens.sans, fontSize: 17, fontWeight: 500,
                  border: 'none', cursor: 'pointer', textAlign: 'left',
                  boxShadow: '0 1px 0 rgba(28,26,23,0.04)',
                }}>{o}</button>
              ))}
            </div>
            <div style={{ marginTop: 24, fontFamily: OttoTokens.sans, fontSize: 13, color: OttoTokens.inkSubtle, textAlign: 'center', lineHeight: 1.5 }}>
              Otto uses a clinically-validated screen (PHQ-2). Answers stay private.
            </div>
          </div>
        )}
      </div>

      <div style={{ padding: '12px 20px 28px', display: 'flex', gap: 10 }}>
        {step > 0 && (
          <button onClick={() => setStep(step - 1)} style={{
            padding: '0 28px', height: 56, borderRadius: 999,
            background: 'transparent', color: OttoTokens.ink,
            fontFamily: OttoTokens.sans, fontSize: 17, fontWeight: 600,
            border: `1.5px solid ${OttoTokens.hairline}`, cursor: 'pointer',
          }}>Back</button>
        )}
        <div style={{ flex: 1 }}>
          <OttoButton onClick={() => setStep(step + 1)}>
            {step === 2 ? 'Finish check-in' : 'Continue'}
          </OttoButton>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenPreventive, ScreenBook, ScreenLab, ScreenCoach, ScreenCheckin });
