// Workforce OS — five remaining module screens, one apiece (Patients, Capacity,
// Portal, Communication, Apps, Finance, Settings). Each is a single representative screen.

// ─── 1. PATIENTS ─────────────────────────────────────────────────
function PatientsScreen() {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const patients = [
    { name: 'Anita Chen',     id: 'P-2041', age: 34, treatment: 'IVF · Cycle 2',     stage: 'Stim Cycle',    next: 'Mon · stim check',  flag: 'P0',  lang: 'EN' },
    { name: 'María Sandoval', id: 'P-1318', age: 38, treatment: 'IVF · donor egg',   stage: 'Intake',        next: 'Wed · baseline US', flag: null,  lang: 'ES' },
    { name: 'Sarah Goldman',  id: 'P-2110', age: 41, treatment: 'GC consult',        stage: 'Workup',        next: 'Fri · legal pack',  flag: 'P1',  lang: 'EN' },
    { name: 'Devon Kim',      id: 'P-2071', age: 36, treatment: 'FET prep',          stage: 'Transfer',      next: 'Tue · transfer',    flag: null,  lang: 'EN' },
    { name: 'Lourdes Mendez', id: 'P-1788', age: 33, treatment: 'IVF · stim',         stage: 'Stim Cycle',    next: 'Tomorrow · E2',     flag: null,  lang: 'ES' },
    { name: 'Wei Liu',        id: 'P-2096', age: 32, treatment: 'IUI consult',        stage: 'Intake',        next: 'Mon · HSG',         flag: null,  lang: 'ZH' },
    { name: 'Jennifer Wu',    id: 'P-1872', age: 35, treatment: 'IVF · monitoring',   stage: 'Stim Cycle',    next: 'Today · US',        flag: null,  lang: 'EN' },
    { name: 'Tasha Williams', id: 'P-2003', age: 39, treatment: 'IUI · Cycle 3',      stage: 'Workup',        next: 'Next wk · clomid',  flag: null,  lang: 'EN' },
    { name: 'Ashley Park',    id: 'P-2096', age: 37, treatment: 'FET · post-transfer',stage: 'Post-Transfer', next: 'Today · ER eval',   flag: 'P0',  lang: 'EN' },
    { name: 'Carla Ortega',   id: 'P-2120', age: 31, treatment: 'IUI · new patient',  stage: 'Intake',        next: 'Mon · first consult', flag: null, lang: 'ES' },
  ];

  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 1500, margin: '0 auto' }}>
      {/* Top strip */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr) auto', gap: 12 }}>
        <MetricTile label="Active patients" value="247" delta="14 new" trend="up" sub="this week" accent="#7E80FF" />
        <MetricTile label="In treatment"     value="103" sub="across all stages" />
        <MetricTile label="Flagged"          value="4"   sub="needs attention"  accent="#FF404C" />
        <MetricTile label="New intakes"      value="31"  sub="this week"        accent="#E45BC2" />
        <button style={{
          display: 'inline-flex', alignItems: 'center', gap: 8, padding: '0 22px',
          background: 'linear-gradient(135deg, #7E80FF, #5E60BF)', color: '#fff',
          border: 'none', borderRadius: 12, cursor: 'pointer',
          fontFamily: 'Urbanist', fontWeight: 700, fontSize: 14, minHeight: 60,
          boxShadow: '0 6px 18px rgba(126,128,255,0.30)',
        }}>
          <i data-lucide="user-plus" style={{ width: 16, height: 16 }}></i>
          Invite patient
        </button>
      </div>

      {/* Filter bar */}
      <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 12, padding: 12, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
        <div style={{ flex: 1, minWidth: 240, display: 'flex', alignItems: 'center', gap: 6, padding: '7px 12px', background: '#FDFBFA', border: '1px solid #EBEBEB', borderRadius: 8 }}>
          <i data-lucide="search" style={{ width: 13, height: 13, color: '#62748E' }}></i>
          <input placeholder="Search patients…" style={{ flex: 1, border: 'none', background: 'transparent', outline: 'none', fontFamily: 'Urbanist', fontSize: 13 }} />
        </div>
        {['All', 'Intake', 'Workup', 'Stim cycle', 'Retrieval', 'Transfer', 'Post-transfer'].map((s, i) => (
          <button key={s} style={{
            padding: '7px 12px', borderRadius: 8, border: 'none',
            background: i === 0 ? '#000' : 'transparent',
            color: i === 0 ? '#fff' : '#4D4D4D',
            border: i === 0 ? 'none' : '1px solid #EBEBEB',
            fontFamily: 'Urbanist', fontSize: 12, fontWeight: 700, cursor: 'pointer',
          }}>{s}</button>
        ))}
      </div>

      {/* Table */}
      <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 12, overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '40px 2fr 1fr 130px 1.5fr 80px 14px', gap: 14, padding: '12px 16px', borderBottom: '1px solid #EBEBEB', background: '#FDFBFA' }}>
          {['', 'Patient', 'Treatment', 'Stage', 'Next step', 'Lang', ''].map((h, i) => (
            <div key={i} style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, letterSpacing: '0.08em', color: '#62748E', textTransform: 'uppercase' }}>{h}</div>
          ))}
        </div>
        {patients.map((p, i) => (
          <div key={p.id + i} style={{
            display: 'grid', gridTemplateColumns: '40px 2fr 1fr 130px 1.5fr 80px 14px',
            gap: 14, padding: '14px 16px', alignItems: 'center',
            borderBottom: i < patients.length - 1 ? '1px solid #FDFBFA' : 'none',
            cursor: 'pointer',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <Avatar name={p.name} size={32} />
              {p.flag && <PriorityDot priority={p.flag} />}
            </div>
            <div>
              <div style={{ fontFamily: 'Urbanist', fontSize: 13, fontWeight: 700 }}>{p.name}</div>
              <div style={{ fontFamily: 'Urbanist', fontSize: 11, color: '#62748E', marginTop: 1 }}>{p.id} · {p.age} yo</div>
            </div>
            <div style={{ fontFamily: 'Urbanist', fontSize: 12, color: '#000' }}>{p.treatment}</div>
            <Pill label={p.stage} />
            <div style={{ fontFamily: 'Urbanist', fontSize: 12, color: '#4D4D4D' }}>{p.next}</div>
            <div style={{ fontFamily: 'Urbanist', fontSize: 11, fontWeight: 700, color: '#62748E', letterSpacing: '0.04em' }}>{p.lang}</div>
            <i data-lucide="chevron-right" style={{ width: 14, height: 14, color: '#C1C1C1' }}></i>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── 2. CAPACITY ─────────────────────────────────────────────────
function CapacityScreen() {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const tasks = [
    { p: 'P0', t: 'Page Dr. Reyes — Ashley Park bleeding follow-up', who: 'Now',      patient: 'Ashley Park',    src: 'CareCall' },
    { p: 'P0', t: 'Re-order STI panel for Anita before cycle Day 1', who: '11:00 am', patient: 'Anita Chen',     src: 'MedReview' },
    { p: 'P1', t: 'Confirm María Wed baseline reschedule (3 windows)', who: '11:30 am', patient: 'María Sandoval', src: 'CareCall' },
    { p: 'P1', t: 'Send GC legal pack to Sarah Goldman',              who: '1:00 pm',  patient: 'Sarah Goldman',  src: 'Scribe' },
    { p: 'P2', t: 'Schedule Carla new-patient callback Monday 10am',  who: 'Today',    patient: 'Carla Ortega',   src: 'CareCall' },
    { p: 'P2', t: 'Upload Devon insurance card to vault',              who: 'Today',    patient: 'Devon Kim',      src: 'Manual' },
    { p: 'P3', t: 'Note: Tasha prefers evening reminders (FYI)',       who: 'Anytime',  patient: 'Tasha Williams', src: 'CareCall' },
  ];
  const hours = ['8 am','9 am','10 am','11 am','12 pm','1 pm','2 pm','3 pm','4 pm','5 pm'];
  const apptByHour = {
    '8 am': [{ p: 'Jennifer Wu', t: 'US monitoring', tone: '#DEDFFF' }],
    '9 am': [{ p: 'Anita Chen', t: 'Stim check', tone: '#FFD3F4' }, { p: 'Lourdes Mendez', t: 'E2 draw', tone: '#FFE0BA' }],
    '10 am':[{ p: 'María Sandoval', t: 'Phone consult', tone: '#DEDFFF' }],
    '11 am':[{ p: 'Wei Liu', t: 'HSG consult', tone: '#FFF2BF' }],
    '12 pm':[],
    '1 pm': [{ p: 'Devon Kim', t: 'Transfer prep', tone: '#DDF0E5' }],
    '2 pm': [{ p: 'Sarah Goldman', t: 'GC consult', tone: '#FFE5E7' }],
    '3 pm': [{ p: 'Carla Ortega', t: 'New patient', tone: '#DEDFFF' }],
    '4 pm': [],
    '5 pm': [{ p: 'Tasha Williams', t: 'Follow-up', tone: '#DDF0E5' }],
  };

  return (
    <div style={{ padding: 24, display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 16, maxWidth: 1500, margin: '0 auto' }}>
      {/* Tasks */}
      <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 14, padding: 22 }}>
        <SectionHead eyebrow="Today · 7 tasks for you" title="To-Do" right={
          <div style={{ display: 'flex', gap: 4 }}>
            {['Mine', 'Team', 'Overdue'].map((t, i) => (
              <button key={t} style={{
                padding: '5px 10px', borderRadius: 6, border: i === 0 ? 'none' : '1px solid #EBEBEB',
                background: i === 0 ? '#000' : 'transparent', color: i === 0 ? '#fff' : '#4D4D4D',
                fontFamily: 'Urbanist', fontSize: 11, fontWeight: 700, cursor: 'pointer',
              }}>{t}</button>
            ))}
          </div>
        } />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {tasks.map((task, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 14px', background: '#FDFBFA',
              border: '1px solid #EBEBEB', borderRadius: 10,
            }}>
              <input type="checkbox" style={{ width: 16, height: 16, accentColor: '#7E80FF', flexShrink: 0, cursor: 'pointer' }} />
              <PriorityDot priority={task.p} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: 'Urbanist', fontSize: 13, fontWeight: 600, color: '#000' }}>{task.t}</div>
                <div style={{ fontFamily: 'Urbanist', fontSize: 10, color: '#62748E', marginTop: 3 }}>
                  {task.patient} · ↗ {task.src}
                </div>
              </div>
              <div style={{ fontFamily: 'Urbanist', fontSize: 11, fontWeight: 700, color: '#000', whiteSpace: 'nowrap' }}>{task.who}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Calendar */}
      <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 14, padding: 22 }}>
        <SectionHead eyebrow="Today · Tue May 26" title="Calendar" />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          {hours.map(h => {
            const slots = apptByHour[h] || [];
            return (
              <div key={h} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '6px 0', borderTop: '1px solid #FDFBFA' }}>
                <div style={{ width: 44, fontFamily: 'Urbanist', fontSize: 10, fontWeight: 700, color: '#62748E', letterSpacing: '0.04em', paddingTop: 4 }}>{h}</div>
                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4, minHeight: 28 }}>
                  {slots.map((s, i) => (
                    <div key={i} style={{ padding: '6px 10px', background: s.tone, borderRadius: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
                      <span style={{ fontFamily: 'Urbanist', fontSize: 11, fontWeight: 700 }}>{s.p}</span>
                      <span style={{ fontFamily: 'Urbanist', fontSize: 10, color: '#4D4D4D' }}>· {s.t}</span>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// ─── 3. PORTAL ──────────────────────────────────────────────────
function PortalScreen() {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const [color, setColor] = React.useState('#7E80FF');
  const colors = ['#7E80FF', '#E45BC2', '#277852', '#FF8C00', '#FFCD00', '#000000'];

  return (
    <div style={{ padding: 24, display: 'grid', gridTemplateColumns: '1fr 360px', gap: 16, maxWidth: 1500, margin: '0 auto' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 14, padding: 22 }}>
          <SectionHead eyebrow="Patient portal" title="Onboarding flow" right={
            <button style={{ padding: '7px 12px', background: '#000', color: '#fff', border: 'none', borderRadius: 8, cursor: 'pointer', fontFamily: 'Urbanist', fontSize: 12, fontWeight: 700 }}>Publish</button>
          } />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              { step: '01', title: 'Welcome screen',    text: 'Clinic-branded greeting + AI consent',     done: true },
              { step: '02', title: 'Identity & contact', text: 'Name, DOB, phone, preferred language',     done: true },
              { step: '03', title: 'Medical history',   text: '14-question fertility intake',              done: true },
              { step: '04', title: 'Partner info',      text: 'Optional partner / donor / GC fields',      done: false },
              { step: '05', title: 'Insurance',         text: 'Photo upload front & back of card',         done: false },
              { step: '06', title: 'Documents upload',  text: 'Recent labs, imaging, prior cycle reports', done: false },
              { step: '07', title: 'Schedule consult',  text: 'Auto-offer 3 slots based on clinician',     done: false },
            ].map(s => (
              <div key={s.step} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 12, background: '#FDFBFA', border: '1px solid #EBEBEB', borderRadius: 10 }}>
                <div style={{ width: 32, height: 32, borderRadius: 8, background: s.done ? '#DDF0E5' : '#fff', color: s.done ? '#277852' : '#62748E', border: '1px solid ' + (s.done ? '#9CCAA9' : '#EBEBEB'), display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Urbanist', fontSize: 11, fontWeight: 800 }}>
                  {s.done ? '✓' : s.step}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: 'Urbanist', fontSize: 13, fontWeight: 700 }}>{s.title}</div>
                  <div style={{ fontFamily: 'Urbanist', fontSize: 11, color: '#62748E', marginTop: 2 }}>{s.text}</div>
                </div>
                <button style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: '#62748E' }}>
                  <i data-lucide="grip-vertical" style={{ width: 14, height: 14 }}></i>
                </button>
              </div>
            ))}
          </div>
        </div>

        <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 14, padding: 22 }}>
          <SectionHead eyebrow="Branding" title="Theme" />
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ fontFamily: 'Urbanist', fontSize: 12, fontWeight: 700 }}>Primary color</div>
            <div style={{ display: 'flex', gap: 8 }}>
              {colors.map(c => (
                <button key={c} onClick={() => setColor(c)} style={{
                  width: 28, height: 28, borderRadius: 999,
                  background: c, border: color === c ? '3px solid #000' : '3px solid #fff',
                  boxShadow: '0 0 0 1px #EBEBEB', cursor: 'pointer',
                }}></button>
              ))}
            </div>
            <div style={{ flex: 1 }}></div>
            <div style={{ fontFamily: 'Urbanist', fontSize: 11, color: '#62748E' }}>Auto-applies across web + mobile portal</div>
          </div>
        </div>
      </div>

      {/* Mobile preview */}
      <div style={{ background: '#FDFBFA', border: '1px solid #EBEBEB', borderRadius: 14, padding: 18, position: 'sticky', top: 0 }}>
        <SectionHead eyebrow="Preview" title="iPhone · Eve app" />
        <div style={{ width: 280, height: 540, margin: '0 auto', background: '#000', borderRadius: 36, padding: 8, boxShadow: '0 20px 50px rgba(0,0,0,0.20)' }}>
          <div style={{ width: '100%', height: '100%', background: '#fff', borderRadius: 28, overflow: 'hidden', position: 'relative', display: 'flex', flexDirection: 'column' }}>
            <div style={{ height: 30, background: '#000' }}></div>
            <div style={{ padding: 18, background: color, color: '#fff', display: 'flex', flexDirection: 'column', gap: 6 }}>
              <div style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, letterSpacing: '0.12em', opacity: 0.8 }}>COASTAL FERTILITY</div>
              <div style={{ fontFamily: 'Libre Caslon Text, serif', fontSize: 22, fontWeight: 600, fontStyle: 'italic' }}>Welcome, Anita</div>
              <div style={{ fontFamily: 'Inter', fontSize: 12, opacity: 0.85 }}>Stim Day 5 · all good</div>
            </div>
            <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
              <div style={{ padding: 12, background: '#FDFBFA', border: '1px solid #EBEBEB', borderRadius: 10 }}>
                <div style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, color: '#62748E', letterSpacing: '0.06em' }}>TODAY · 6:30 PM</div>
                <div style={{ fontFamily: 'Urbanist', fontSize: 13, fontWeight: 700, marginTop: 3 }}>Gonal-F 225 IU</div>
                <div style={{ fontFamily: 'Inter', fontSize: 11, color: '#4D4D4D', marginTop: 2 }}>Menopur 75 IU · with food</div>
              </div>
              <div style={{ padding: 12, background: color + '22', border: `1px solid ${color}55`, borderRadius: 10 }}>
                <div style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, color, letterSpacing: '0.06em' }}>NEXT APPT</div>
                <div style={{ fontFamily: 'Urbanist', fontSize: 13, fontWeight: 700, marginTop: 3 }}>Fri 8:00 am</div>
                <div style={{ fontFamily: 'Inter', fontSize: 11, color: '#4D4D4D', marginTop: 2 }}>Monitoring · Dr. Reyes</div>
              </div>
              <button style={{ marginTop: 'auto', padding: '12px', background: color, color: '#fff', border: 'none', borderRadius: 12, fontFamily: 'Urbanist', fontWeight: 700, fontSize: 13, cursor: 'pointer' }}>
                Message care team
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── 4. COMMUNICATION ───────────────────────────────────────────
function CommsScreen() {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const threads = [
    { name: 'Anita Chen',     ch: 'In-app',   time: '2 min', preview: 'Should I take Menopur with food tonight?', unread: 2, online: true },
    { name: 'María Sandoval', ch: 'SMS · ES', time: '14 min', preview: 'Gracias, confirmo el jueves a las 4:30.', unread: 1, online: false },
    { name: 'Dr. Reyes',      ch: 'Internal', time: '1 h',   preview: 'Push Sarah\'s transfer to next Tue?',       unread: 0, online: true },
    { name: 'Jennifer Wu',    ch: 'In-app',   time: '2 h',   preview: 'Got the prescription, all set 🙏',          unread: 0, online: false },
    { name: 'Tasha Williams', ch: 'Email',    time: '3 h',   preview: 'Insurance card uploaded to vault.',         unread: 0, online: false },
    { name: 'Wei Liu',        ch: 'SMS · ZH', time: '5 h',   preview: '明天可以做HSG吗?',                            unread: 0, online: false },
    { name: 'Devon Kim',      ch: 'In-app',   time: 'yest.', preview: 'See you Tuesday — thanks!',                  unread: 0, online: false },
  ];

  return (
    <div style={{ padding: 24, display: 'grid', gridTemplateColumns: '340px 1fr', gap: 16, maxWidth: 1500, margin: '0 auto', minHeight: 'calc(100vh - 120px)' }}>
      {/* Thread list */}
      <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 14, display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: 14, borderBottom: '1px solid #EBEBEB' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '7px 10px', background: '#FDFBFA', border: '1px solid #EBEBEB', borderRadius: 8 }}>
            <i data-lucide="search" style={{ width: 13, height: 13, color: '#62748E' }}></i>
            <input placeholder="Search messages…" style={{ flex: 1, border: 'none', background: 'transparent', outline: 'none', fontFamily: 'Urbanist', fontSize: 12 }} />
          </div>
          <div style={{ display: 'flex', gap: 4, marginTop: 10 }}>
            {['All', 'Patient', 'Internal', 'AI'].map((t, i) => (
              <button key={t} style={{
                padding: '5px 10px', borderRadius: 6, border: i === 0 ? 'none' : '1px solid #EBEBEB',
                background: i === 0 ? '#000' : 'transparent', color: i === 0 ? '#fff' : '#4D4D4D',
                fontFamily: 'Urbanist', fontSize: 11, fontWeight: 700, cursor: 'pointer',
              }}>{t}</button>
            ))}
          </div>
        </div>
        <div style={{ flex: 1, overflowY: 'auto' }}>
          {threads.map((th, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '12px 14px', borderBottom: '1px solid #FDFBFA',
              background: i === 0 ? '#FDFBFA' : '#fff',
              cursor: 'pointer',
            }}>
              <div style={{ position: 'relative' }}>
                <Avatar name={th.name} size={36} />
                {th.online && <span style={{ position: 'absolute', bottom: 0, right: 0, width: 9, height: 9, borderRadius: 999, background: '#277852', border: '2px solid #fff' }}></span>}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                  <span style={{ fontFamily: 'Urbanist', fontSize: 13, fontWeight: 700, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{th.name}</span>
                  <span style={{ fontFamily: 'Urbanist', fontSize: 10, color: '#62748E' }}>{th.time}</span>
                </div>
                <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginTop: 2 }}>
                  <span style={{ fontFamily: 'Urbanist', fontSize: 9, fontWeight: 800, color: '#62748E', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{th.ch}</span>
                  {th.unread > 0 && <span style={{ padding: '0 6px', borderRadius: 999, background: '#7E80FF', color: '#fff', fontFamily: 'Urbanist', fontSize: 9, fontWeight: 800 }}>{th.unread}</span>}
                </div>
                <div style={{ fontFamily: 'Inter', fontSize: 12, color: '#4D4D4D', marginTop: 3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{th.preview}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Conversation */}
      <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 14, display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: 16, borderBottom: '1px solid #EBEBEB', display: 'flex', alignItems: 'center', gap: 12 }}>
          <Avatar name="Anita Chen" size={40} />
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'Urbanist', fontSize: 14, fontWeight: 700 }}>Anita Chen <span style={{ fontFamily: 'Urbanist', fontSize: 11, color: '#62748E', fontWeight: 500 }}>· P-2041</span></div>
            <div style={{ fontFamily: 'Urbanist', fontSize: 11, color: '#62748E' }}>IVF Cycle 2 · Stim Day 5 · last seen now</div>
          </div>
          <button style={{ padding: 8, background: 'transparent', border: '1px solid #EBEBEB', borderRadius: 8, cursor: 'pointer' }}>
            <i data-lucide="phone" style={{ width: 14, height: 14 }}></i>
          </button>
          <button style={{ padding: 8, background: 'transparent', border: '1px solid #EBEBEB', borderRadius: 8, cursor: 'pointer' }}>
            <i data-lucide="user-round" style={{ width: 14, height: 14 }}></i>
          </button>
        </div>
        <div style={{ flex: 1, padding: 20, display: 'flex', flexDirection: 'column', gap: 12, overflowY: 'auto' }}>
          <Bubble who="patient" t="9:02 am">Hi Robin, quick question for you</Bubble>
          <Bubble who="patient" t="9:02 am">Should I take the Menopur with food tonight? My stomach has been a bit off.</Bubble>
          <Bubble who="me" t="9:08 am">Hi Anita! Yes — taking it after a light meal is totally fine. If the queasiness sticks around, let me know and I'll loop in Dr. Reyes.</Bubble>
          <Bubble who="me" t="9:08 am">Also — Dr. Reyes adjusted your dose tonight to 75 IU (down from 150). The pharmacy is aware.</Bubble>
          {/* AI suggestion */}
          <div style={{ padding: 12, background: '#FDFBFA', border: '1px dashed #BDBEFF', borderRadius: 10, display: 'flex', gap: 10, marginTop: 4 }}>
            <div style={{ width: 24, height: 24, borderRadius: 999, background: '#000', color: '#DEDFFF', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, flexShrink: 0 }}>AI</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, letterSpacing: '0.06em', color: '#202166', textTransform: 'uppercase' }}>Eve suggests</div>
              <div style={{ fontFamily: 'Inter', fontSize: 13, color: '#0F172B', marginTop: 3 }}>"Taking Menopur with light food is fine. If queasiness persists, please call us. Tonight's dose is 75 IU per Dr. Reyes's plan."</div>
              <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
                <button style={{ padding: '5px 10px', background: '#000', color: '#fff', border: 'none', borderRadius: 6, fontFamily: 'Urbanist', fontSize: 11, fontWeight: 700, cursor: 'pointer' }}>Use draft</button>
                <button style={{ padding: '5px 10px', background: 'transparent', color: '#000', border: '1px solid #EBEBEB', borderRadius: 6, fontFamily: 'Urbanist', fontSize: 11, fontWeight: 600, cursor: 'pointer' }}>Refine</button>
              </div>
            </div>
          </div>
        </div>
        <div style={{ padding: 14, borderTop: '1px solid #EBEBEB', display: 'flex', alignItems: 'center', gap: 8 }}>
          <button style={{ background: 'transparent', border: '1px solid #EBEBEB', borderRadius: 8, padding: 8, cursor: 'pointer' }}>
            <i data-lucide="paperclip" style={{ width: 14, height: 14 }}></i>
          </button>
          <input placeholder="Type a message…" style={{ flex: 1, padding: '10px 12px', border: '1px solid #EBEBEB', borderRadius: 8, fontFamily: 'Urbanist', fontSize: 13, outline: 'none' }} />
          <button style={{ padding: '10px 14px', background: '#000', color: '#fff', border: 'none', borderRadius: 8, cursor: 'pointer', fontFamily: 'Urbanist', fontWeight: 700, fontSize: 12, display: 'inline-flex', alignItems: 'center', gap: 5 }}>
            Send <i data-lucide="send" style={{ width: 12, height: 12 }}></i>
          </button>
        </div>
      </div>
    </div>
  );
}

function Bubble({ who, t, children }) {
  const isMe = who === 'me';
  return (
    <div style={{ display: 'flex', flexDirection: isMe ? 'row-reverse' : 'row', gap: 8 }}>
      <div style={{ maxWidth: '70%', display: 'flex', flexDirection: 'column', gap: 2, alignItems: isMe ? 'flex-end' : 'flex-start' }}>
        <div style={{
          padding: '10px 14px', background: isMe ? '#000' : '#FDFBFA',
          color: isMe ? '#fff' : '#000',
          border: `1px solid ${isMe ? '#000' : '#EBEBEB'}`,
          borderRadius: isMe ? '14px 14px 4px 14px' : '14px 14px 14px 4px',
          fontFamily: 'Inter', fontSize: 13, lineHeight: 1.5,
        }}>{children}</div>
        <span style={{ fontFamily: 'Urbanist', fontSize: 10, color: '#62748E', padding: '0 4px' }}>{t}</span>
      </div>
    </div>
  );
}

// ─── 5. APPS ─────────────────────────────────────────────────────
function AppsScreen() {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const apps = [
    { name: 'MedReview',  desc: 'AI medical record review — readiness in minutes',  bg: 'linear-gradient(135deg, #DEDFFF, #BDBEFF)', icon: 'file-search',   live: true, badge: '6 today',  metric: '3.1h saved', href: 'MedReview.html' },
    { name: 'CareCall',   desc: 'AI voice agent answers + outbound calls',          bg: 'linear-gradient(135deg, #FFD3F4, #FFA8E9)', icon: 'phone-call',    live: true, badge: '162 calls', metric: '8.2h saved', href: 'CareCall.html' },
    { name: 'Clinical Scribe', desc: 'Ambient listening with auto-summaries',        bg: 'linear-gradient(135deg, #FFF2BF, #FFE67F)', icon: 'mic',           live: true, badge: '8 sessions', metric: '4.6h saved', href: 'ClinicalScribe.html' },
    { name: 'Agent Hub',  desc: 'Build custom AI agents for your clinic',           bg: 'linear-gradient(135deg, #FFE0BA, #FFC176)', icon: 'cpu',           live: false, badge: 'COMING',    metric: 'Q3 2026' },
    { name: 'Pre-Auth Bot',desc: 'Insurance pre-authorization automation',           bg: 'linear-gradient(135deg, #DDF0E5, #9CCAA9)', icon: 'shield-check',  live: false, badge: 'BETA',      metric: 'Pilot · Q3' },
    { name: 'Lab Triage', desc: 'Triages lab results to next steps',                bg: 'linear-gradient(135deg, #FFE5E7, #F0A3A8)', icon: 'test-tube',     live: false, badge: 'IDEA',      metric: 'Roadmap' },
  ];
  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 18, maxWidth: 1500, margin: '0 auto' }}>
      <div style={{ background: '#000', color: '#fff', borderRadius: 18, padding: '28px 30px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(600px 240px at 90% -10%, rgba(126,128,255,0.4), transparent 70%)', pointerEvents: 'none' }}></div>
        <div style={{ position: 'relative' }}>
          <div style={{ fontFamily: 'Urbanist', fontSize: 11, fontWeight: 800, letterSpacing: '0.12em', color: '#FFA8E9' }}>ERA APP MARKETPLACE</div>
          <div style={{ fontFamily: 'Libre Caslon Text, serif', fontSize: 32, fontWeight: 600, fontStyle: 'italic', marginTop: 6 }}>One platform, many helpful hands.</div>
          <div style={{ fontFamily: 'Inter', fontSize: 14, color: 'rgba(255,255,255,0.7)', marginTop: 6, maxWidth: 540 }}>Each app is a focused AI agent that handles a specific clinic workflow — installed, configured, and running on day one.</div>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
        {apps.map(a => (
          <div key={a.name} onClick={() => { if (a.href) window.location.href = a.href; }} style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 14, padding: 18, display: 'flex', flexDirection: 'column', gap: 12, cursor: 'pointer' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: a.bg, color: '#000', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <i data-lucide={a.icon} style={{ width: 20, height: 20 }}></i>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: 'Urbanist', fontSize: 15, fontWeight: 700 }}>{a.name}</div>
                <div style={{ fontFamily: 'Urbanist', fontSize: 11, color: '#62748E', marginTop: 2 }}>{a.desc}</div>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ padding: '2px 8px', borderRadius: 999, background: a.live ? '#DDF0E5' : '#EBEBEB', color: a.live ? '#277852' : '#4D4D4D', fontFamily: 'Urbanist', fontSize: 9, fontWeight: 800, letterSpacing: '0.06em' }}>
                {a.live ? '● LIVE' : a.badge}
              </span>
              {a.live && <span style={{ fontFamily: 'Urbanist', fontSize: 11, color: '#62748E' }}>{a.badge}</span>}
              <div style={{ flex: 1 }}></div>
              <span style={{ fontFamily: 'Urbanist', fontSize: 11, fontWeight: 700, color: '#277852' }}>{a.metric}</span>
            </div>
            <button onClick={(e) => { e.stopPropagation(); if (a.href) window.location.href = a.href; }} style={{ marginTop: 4, padding: '8px 12px', background: a.live ? '#fff' : '#000', color: a.live ? '#000' : '#fff', border: a.live ? '1px solid #000' : 'none', borderRadius: 8, cursor: 'pointer', fontFamily: 'Urbanist', fontWeight: 700, fontSize: 12 }}>
              {a.live ? 'Open' : 'Join waitlist'}
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── 6. FINANCE ─────────────────────────────────────────────────
function FinanceScreen() {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const stages = [
    { name: 'Pre-auth submitted', count: 8, total: 24, color: '#DEDFFF', text: '#202166' },
    { name: 'In review',          count: 6, total: 24, color: '#FFE0BA', text: '#8D622D' },
    { name: 'Approved',           count: 7, total: 24, color: '#DDF0E5', text: '#277852' },
    { name: 'Denied',             count: 3, total: 24, color: '#FFE5E7', text: '#a82530' },
  ];
  const auths = [
    { patient: 'Anita Chen',     payer: 'Aetna PPO',       cpt: 'IVF cycle · 58323', age: '4 days', status: 'In review',  due: 'Tomorrow',  flag: 'P1' },
    { patient: 'María Sandoval', payer: 'Anthem Blue',     cpt: 'Donor egg · 58970', age: '7 days', status: 'In review',  due: 'Overdue 1d', flag: 'P0' },
    { patient: 'Devon Kim',      payer: 'Kaiser HMO',      cpt: 'FET · 58974',       age: '2 days', status: 'Approved',   due: '—',          flag: null },
    { patient: 'Sarah Goldman',  payer: 'United HC',       cpt: 'GC consult · 99204',age: '5 days', status: 'Pre-auth submitted', due: 'In 2 days', flag: null },
    { patient: 'Jennifer Wu',    payer: 'Cigna',           cpt: 'IVF cycle · 58323', age: '9 days', status: 'Denied',     due: 'Appeal',     flag: 'P0' },
    { patient: 'Carla Ortega',   payer: 'Self-pay',        cpt: 'IUI · 58322',        age: '1 day',  status: 'Approved',   due: '—',          flag: null },
  ];

  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 1500, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        {stages.map(s => (
          <div key={s.name} style={{ padding: 16, background: s.color, borderRadius: 12 }}>
            <div style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, color: s.text, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{s.name}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 6 }}>
              <div style={{ fontFamily: 'Urbanist', fontWeight: 800, fontSize: 32, color: s.text, letterSpacing: '-0.02em' }}>{s.count}</div>
              <div style={{ fontFamily: 'Urbanist', fontSize: 12, color: s.text, opacity: 0.7 }}>/ {s.total}</div>
            </div>
            <div style={{ height: 4, background: '#fff', borderRadius: 999, overflow: 'hidden', marginTop: 8 }}>
              <div style={{ width: `${(s.count / s.total) * 100}%`, height: '100%', background: s.text, opacity: 0.6 }}></div>
            </div>
          </div>
        ))}
      </div>

      <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 14, overflow: 'hidden' }}>
        <div style={{ padding: '14px 18px', borderBottom: '1px solid #EBEBEB', display: 'flex', alignItems: 'center', gap: 14 }}>
          <div>
            <div style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, letterSpacing: '0.08em', color: '#62748E', textTransform: 'uppercase' }}>Pre-authorization tracker</div>
            <div style={{ fontFamily: 'Urbanist', fontSize: 16, fontWeight: 700, marginTop: 2 }}>Open authorizations · 24</div>
          </div>
          <div style={{ flex: 1 }}></div>
          <button style={{ padding: '8px 14px', background: '#000', color: '#fff', border: 'none', borderRadius: 8, cursor: 'pointer', fontFamily: 'Urbanist', fontWeight: 700, fontSize: 12, display: 'inline-flex', alignItems: 'center', gap: 5 }}>
            <i data-lucide="plus" style={{ width: 12, height: 12 }}></i>
            New pre-auth
          </button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '40px 1.5fr 1fr 1.5fr 1fr 110px 100px', gap: 14, padding: '10px 18px', background: '#FDFBFA' }}>
          {['', 'Patient', 'Payer', 'Service', 'Days open', 'Status', 'Action'].map(h => (
            <div key={h} style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, letterSpacing: '0.08em', color: '#62748E', textTransform: 'uppercase' }}>{h}</div>
          ))}
        </div>
        {auths.map((a, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '40px 1.5fr 1fr 1.5fr 1fr 110px 100px', gap: 14, padding: '14px 18px', alignItems: 'center', borderTop: '1px solid #FDFBFA' }}>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              {a.flag && <PriorityDot priority={a.flag} />}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <Avatar name={a.patient} size={28} />
              <div style={{ fontFamily: 'Urbanist', fontSize: 13, fontWeight: 700 }}>{a.patient}</div>
            </div>
            <div style={{ fontFamily: 'Urbanist', fontSize: 12 }}>{a.payer}</div>
            <div style={{ fontFamily: 'Urbanist', fontSize: 12, color: '#4D4D4D' }}>{a.cpt}</div>
            <div style={{ fontFamily: 'Urbanist', fontSize: 12, color: a.due.includes('Overdue') ? '#a82530' : '#4D4D4D', fontWeight: a.due.includes('Overdue') ? 700 : 500 }}>{a.age}</div>
            <Pill label={a.status} />
            <button style={{ padding: '6px 10px', background: a.due === 'Appeal' ? '#FFE5E7' : '#fff', color: a.due === 'Appeal' ? '#a82530' : '#000', border: a.due === 'Appeal' ? '1px solid #F0A3A8' : '1px solid #EBEBEB', borderRadius: 6, fontFamily: 'Urbanist', fontWeight: 700, fontSize: 11, cursor: 'pointer' }}>
              {a.due === 'Appeal' ? 'Appeal' : 'Open'}
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── 7. SETTINGS — Smart Flagging ───────────────────────────────
function SettingsScreen() {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const flags = [
    { type: 'Medical urgency',  on: true, severity: 'RED',    desc: 'Triggers when transcript or call mentions emergency / bleeding / pain.', kw: 'emergency, bleeding, severe pain, ER, ICU', action: 'Page on-call MD + email coordinator' },
    { type: 'Patient distress', on: true, severity: 'YELLOW', desc: 'Detects emotional distress signals — voice tone + key phrases.',          kw: 'can\'t handle, hopeless, give up, scared', action: 'Notify lead coordinator within 1h' },
    { type: 'Action item',      on: true, severity: 'BLUE',   desc: 'Captures any clinician follow-up task surfaced in the visit.',           kw: '"I\'ll order", "I\'ll send", "let\'s schedule"', action: 'Auto-create task in Capacity' },
    { type: 'Consent / legal',  on: true, severity: 'PURPLE', desc: 'Identifies consent confirmations and legal references.',                 kw: 'GC agreement, consent, sign, witnessed', action: 'Add to patient legal vault' },
    { type: 'Cost concern',     on: false, severity: 'YELLOW',desc: 'Patient mentions financial difficulty or asks about cost.',              kw: 'afford, cost, financing, payment plan',  action: 'Notify finance team' },
    { type: 'Medication side effect', on: true, severity: 'YELLOW', desc: 'Detects mentioned side effects of fertility medications.',          kw: 'nausea, headache, bloating, mood', action: 'Add to chart · notify nurse' },
  ];
  return (
    <div style={{ padding: 24, display: 'grid', gridTemplateColumns: '220px 1fr', gap: 18, maxWidth: 1500, margin: '0 auto' }}>
      {/* Settings sub-nav */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2, position: 'sticky', top: 0, alignSelf: 'flex-start' }}>
        {[
          { k: 'flagging',   l: 'Smart Flagging',  icon: 'flag', active: true },
          { k: 'context',    l: 'Global Context',  icon: 'globe-2' },
          { k: 'journey',    l: 'Patient Journey', icon: 'route' },
          { k: 'kb',         l: 'Knowledgebase',   icon: 'book-open' },
          { k: 'team',       l: 'Team & Roles',    icon: 'users' },
          { k: 'connectors', l: 'Connectors',      icon: 'plug' },
        ].map(item => (
          <button key={item.k} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '9px 12px', borderRadius: 8, border: 'none',
            background: item.active ? '#000' : 'transparent',
            color: item.active ? '#fff' : '#000',
            fontFamily: 'Urbanist', fontSize: 13, fontWeight: 600,
            textAlign: 'left', cursor: 'pointer',
          }}>
            <i data-lucide={item.icon} style={{ width: 14, height: 14 }}></i>
            {item.l}
          </button>
        ))}
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 14, padding: 22 }}>
          <SectionHead
            eyebrow="Settings · Smart Flagging"
            title="Flag rules that run across every conversation"
            right={
              <button style={{ padding: '7px 12px', background: '#000', color: '#fff', border: 'none', borderRadius: 8, cursor: 'pointer', fontFamily: 'Urbanist', fontWeight: 700, fontSize: 12, display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                <i data-lucide="plus" style={{ width: 12, height: 12 }}></i>
                New rule
              </button>
            }
          />
          <div style={{ fontFamily: 'Inter', fontSize: 13, color: '#4D4D4D', marginBottom: 16, lineHeight: 1.5 }}>
            Rules apply to every transcript surfaced by Scribe, every call handled by CareCall, every doc reviewed by MedReview. Triggers can be tuned for sensitivity and routed to the right person.
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {flags.map(f => {
              const sev = { RED: { bg: '#FFE5E7', fg: '#a82530', dot: '#FF404C' }, YELLOW: { bg: '#FFF2BF', fg: '#7a6505', dot: '#FFCD00' }, BLUE: { bg: '#DEDFFF', fg: '#202166', dot: '#7E80FF' }, PURPLE: { bg: '#FFD3F4', fg: '#71205D', dot: '#E45BC2' } }[f.severity];
              return (
                <div key={f.type} style={{
                  display: 'grid', gridTemplateColumns: '40px 1fr 200px 70px',
                  gap: 14, padding: 16, background: '#FDFBFA',
                  border: '1px solid #EBEBEB', borderRadius: 10, alignItems: 'center',
                }}>
                  <div style={{ width: 30, height: 30, borderRadius: 8, background: sev.bg, color: sev.fg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <i data-lucide="flag" style={{ width: 14, height: 14 }}></i>
                  </div>
                  <div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
                      <span style={{ fontFamily: 'Urbanist', fontSize: 13, fontWeight: 700 }}>{f.type}</span>
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 7px', borderRadius: 999, background: sev.bg, color: sev.fg, fontFamily: 'Urbanist', fontSize: 9, fontWeight: 800, letterSpacing: '0.06em' }}>
                        <span style={{ width: 5, height: 5, borderRadius: 999, background: sev.dot }}></span>
                        {f.severity}
                      </span>
                    </div>
                    <div style={{ fontFamily: 'Inter', fontSize: 12, color: '#4D4D4D', lineHeight: 1.5 }}>{f.desc}</div>
                    <div style={{ fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 11, color: '#62748E', marginTop: 5 }}>
                      <span style={{ background: '#fff', padding: '1px 6px', borderRadius: 4, border: '1px solid #EBEBEB' }}>{f.kw}</span>
                    </div>
                  </div>
                  <div style={{ fontFamily: 'Urbanist', fontSize: 11, color: '#4D4D4D' }}>
                    <span style={{ fontWeight: 800, letterSpacing: '0.04em', color: '#62748E', textTransform: 'uppercase', display: 'block', marginBottom: 2 }}>Action</span>
                    {f.action}
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                    <span style={{
                      width: 36, height: 22, borderRadius: 999,
                      background: f.on ? '#277852' : '#EBEBEB',
                      position: 'relative', cursor: 'pointer', flexShrink: 0,
                    }}>
                      <span style={{
                        position: 'absolute', top: 2, left: f.on ? 16 : 2,
                        width: 18, height: 18, borderRadius: 999, background: '#fff',
                        transition: 'left 160ms',
                      }}></span>
                    </span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PatientsScreen, CapacityScreen, PortalScreen, CommsScreen, AppsScreen, FinanceScreen, SettingsScreen });