// Workforce OS — Capacity views (six sub-modules per PRD).

// ───────── D1. OVERVIEW ─────────
function CapacityOverview({ onNav }) {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const counts = CAP_PATIENTS.reduce((acc, p) => {
    acc[p.status] = (acc[p.status] || 0) + 1;
    acc.total++;
    return acc;
  }, { total: 0, READY: 0, ALMOST: 0, BLOCKED: 0 });

  const days = [];
  for (let i = 0; i < 14; i++) {
    days.push({ label: i === 0 ? 'Today' : (i === 1 ? 'Tue' : ['Wed','Thu','Fri','Sat','Sun','Mon','Tue','Wed','Thu','Fri','Sat','Sun','Mon'][i-1]), date: 26 + i, items: [] });
  }
  CAP_CYCLES.forEach((c, i) => {
    const slot = (i * 2) % 14;
    days[slot].items.push({ patient: c.patient, type: c.type, ready: c.ready });
  });

  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 18, maxWidth: 1500, margin: '0 auto' }}>
      {/* Pipeline health */}
      <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 14, padding: 22 }}>
        <SectionHead eyebrow="Pipeline health · live" title={`${counts.total} active patients across the funnel`} right={
          <button onClick={() => onNav && onNav('Readiness Board')} style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            padding: '6px 10px', background: 'transparent', color: '#000',
            border: '1px solid #EBEBEB', borderRadius: 8,
            fontFamily: 'Urbanist', fontWeight: 700, fontSize: 11, cursor: 'pointer',
          }}>
            Open Readiness Board
            <i data-lucide="arrow-right" style={{ width: 11, height: 11 }}></i>
          </button>
        } />
        <div style={{ display: 'flex', height: 60, borderRadius: 12, overflow: 'hidden', border: '1px solid #EBEBEB' }}>
          {[
            { k: 'READY',   v: counts.READY,   bg: '#DDF0E5', fg: '#1c5639', label: 'Ready' },
            { k: 'ALMOST',  v: counts.ALMOST,  bg: '#FFF2BF', fg: '#7a6505', label: 'Almost ready' },
            { k: 'BLOCKED', v: counts.BLOCKED, bg: '#FFE5E7', fg: '#a82530', label: 'Blocked' },
          ].map(seg => (
            <div key={seg.k} style={{
              flex: seg.v, background: seg.bg, color: seg.fg,
              display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
              padding: '0 10px',
            }}>
              <div style={{ fontFamily: 'Urbanist', fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em' }}>{seg.v}</div>
              <div style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{seg.label}</div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 14, marginTop: 12, fontFamily: 'Urbanist', fontSize: 11, color: '#62748E' }}>
          <span>↑ 14 new this week</span>
          <span>·</span>
          <span>5 moved from Blocked → Almost</span>
          <span>·</span>
          <span>Avg days-to-ready · 6.4d (target 5d)</span>
        </div>
      </div>

      {/* Bottleneck banner */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 14,
        background: '#FFFAFA', border: '1px solid #F0A3A8', borderRadius: 14, padding: '14px 18px',
      }}>
        <div style={{
          width: 40, height: 40, borderRadius: 10,
          background: '#fff', color: '#a82530', border: '1px solid #F0A3A8',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <i data-lucide="alert-triangle" style={{ width: 18, height: 18 }}></i>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, letterSpacing: '0.08em', color: '#a82530', textTransform: 'uppercase' }}>
            Bottleneck · AI-surfaced
          </div>
          <div style={{ fontFamily: 'Urbanist', fontSize: 15, fontWeight: 700, marginTop: 2 }}>
            18 patients awaiting insurance pre-auth — avg wait 11 days. Anthem 7, Cigna 4, BCBS 3, Aetna 4.
          </div>
        </div>
        <button onClick={() => onNav && onNav('Flags')} style={{
          padding: '8px 14px', background: '#000', color: '#fff', border: 'none', borderRadius: 8, cursor: 'pointer',
          fontFamily: 'Urbanist', fontWeight: 700, fontSize: 12,
        }}>Open flag</button>
      </div>

      {/* Team workload + Today's queue */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 16 }}>
        {/* Team workload */}
        <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 14, padding: 22 }}>
          <SectionHead eyebrow="Team · today" title="Coordinator workload" right={
            <button onClick={() => onNav && onNav('Staff Workload')} style={{
              padding: '6px 10px', background: 'transparent', color: '#000',
              border: '1px solid #EBEBEB', borderRadius: 8, cursor: 'pointer',
              fontFamily: 'Urbanist', fontWeight: 700, fontSize: 11,
            }}>Manage workload</button>
          } />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
            {CAP_STAFF.map(s => (
              <div key={s.id} style={{
                padding: 14, background: '#FDFBFA',
                border: `1px solid ${s.status === 'OVERLOADED' ? '#F0A3A8' : '#EBEBEB'}`,
                borderRadius: 10, display: 'flex', flexDirection: 'column', gap: 8,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Avatar name={s.name} size={32} hue={s.avatar} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: 'Urbanist', fontSize: 13, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 6 }}>
                      {s.name}
                      {s.me && <span style={{ fontFamily: 'Urbanist', fontSize: 9, fontWeight: 800, padding: '1px 5px', borderRadius: 4, background: '#DEDFFF', color: '#202166', letterSpacing: '0.06em' }}>YOU</span>}
                    </div>
                    <div style={{ fontFamily: 'Urbanist', fontSize: 10, color: '#62748E', marginTop: 1 }}>{s.role}</div>
                  </div>
                  <CapacityChip status={s.status} />
                </div>
                <div style={{ display: 'flex', gap: 10, fontFamily: 'Urbanist', fontSize: 11, color: '#62748E' }}>
                  <span><strong style={{ color: '#000', fontSize: 14, fontWeight: 800 }}>{s.active}</strong> active</span>
                  <span><strong style={{ color: '#000', fontSize: 14, fontWeight: 800 }}>{s.open}</strong> tasks</span>
                  <span style={{ color: s.overdue > 0 ? '#a82530' : '#62748E' }}><strong style={{ fontSize: 14, fontWeight: 800 }}>{s.overdue}</strong> overdue</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Today's action queue (AI-ranked) */}
        <div style={{ background: '#000', color: '#fff', borderRadius: 14, padding: 22, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(500px 200px at 90% -10%, rgba(126,128,255,0.30), transparent 70%)', pointerEvents: 'none' }}></div>
          <div style={{ position: 'relative' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
              <span style={{ width: 26, height: 26, borderRadius: 8, background: '#DEDFFF', color: '#202166', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Urbanist', fontWeight: 800, fontSize: 10 }}>AI</span>
              <div>
                <div style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, letterSpacing: '0.08em', color: '#FFA8E9', textTransform: 'uppercase' }}>Eve · ranked by urgency × impact</div>
                <div style={{ fontFamily: 'Urbanist', fontSize: 17, fontWeight: 700, marginTop: 2 }}>Today's action queue</div>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {CAP_TASKS.slice(0, 6).map((t, i) => (
                <div key={t.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.10)', borderRadius: 8 }}>
                  <span style={{ fontFamily: 'Urbanist', fontSize: 11, fontWeight: 800, color: '#BDBEFF', width: 16, textAlign: 'center' }}>{i + 1}</span>
                  <PriorityDot priority={t.p} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: 'Urbanist', fontSize: 12, fontWeight: 600, color: '#fff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.t}</div>
                    <div style={{ fontFamily: 'Urbanist', fontSize: 10, color: 'rgba(255,255,255,0.55)', marginTop: 1 }}>{t.patient} · {t.who}</div>
                  </div>
                  <div style={{ fontFamily: 'Urbanist', fontSize: 10, color: '#FFA8E9', fontWeight: 800 }}>{t.due}</div>
                </div>
              ))}
            </div>
            <button onClick={() => onNav && onNav('To-Do')} style={{
              marginTop: 14, padding: '8px 14px', background: '#fff', color: '#000',
              border: 'none', borderRadius: 8, cursor: 'pointer',
              fontFamily: 'Urbanist', fontWeight: 700, fontSize: 12,
              display: 'inline-flex', alignItems: 'center', gap: 5,
            }}>
              Open To-Do <i data-lucide="arrow-right" style={{ width: 12, height: 12 }}></i>
            </button>
          </div>
        </div>
      </div>

      {/* Cycle calendar strip · 14 days */}
      <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 14, padding: 22 }}>
        <SectionHead eyebrow="Cycle calendar · next 14 days" title="Procedures, retrievals, transfers" right={
          <div style={{ display: 'flex', gap: 14, alignItems: 'center', fontFamily: 'Urbanist', fontSize: 10, color: '#62748E' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 8, height: 8, borderRadius: 2, background: '#277852' }}></span> Ready</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 8, height: 8, borderRadius: 2, background: '#FFCD00' }}></span> At risk</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 8, height: 8, borderRadius: 2, background: '#FF404C' }}></span> Blocked</span>
            <button onClick={() => onNav && onNav('Cycles')} style={{ padding: '6px 10px', background: 'transparent', color: '#000', border: '1px solid #EBEBEB', borderRadius: 8, cursor: 'pointer', fontFamily: 'Urbanist', fontWeight: 700, fontSize: 11 }}>All cycles</button>
          </div>
        } />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(14, 1fr)', gap: 4 }}>
          {days.map((d, i) => (
            <div key={i} style={{
              background: i === 0 ? '#DEDFFF' : '#FDFBFA',
              border: i === 0 ? '1px solid #BDBEFF' : '1px solid #EBEBEB',
              borderRadius: 8, padding: 8, minHeight: 96,
              display: 'flex', flexDirection: 'column', gap: 4,
            }}>
              <div style={{ fontFamily: 'Urbanist', fontSize: 9, fontWeight: 800, letterSpacing: '0.06em', color: i === 0 ? '#202166' : '#62748E', textTransform: 'uppercase' }}>{d.label}</div>
              <div style={{ fontFamily: 'Urbanist', fontSize: 14, fontWeight: 800, color: i === 0 ? '#202166' : '#000' }}>{d.date}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 2, marginTop: 2 }}>
                {d.items.slice(0, 2).map((item, j) => {
                  const c = item.ready === 'READY' ? '#277852' : item.ready === 'BLOCKED' ? '#FF404C' : '#FFCD00';
                  return (
                    <div key={j} title={`${item.patient} · ${item.type}`} style={{
                      padding: '2px 5px', borderRadius: 3,
                      background: '#fff', borderLeft: `2px solid ${c}`,
                      fontFamily: 'Urbanist', fontSize: 9, fontWeight: 700, color: '#000',
                      overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                    }}>{item.patient.split(' ')[0]}</div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ───────── D2. READINESS BOARD ─────────
function ReadinessCard({ p }) {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const [open, setOpen] = React.useState(false);
  const coord = CAP_STAFF.find(s => s.id === p.coord);
  const dimColor = p.status === 'READY' ? '#277852' : p.status === 'BLOCKED' ? '#FF404C' : '#FFCD00';

  return (
    <div style={{
      background: '#fff', border: '1px solid #EBEBEB', borderRadius: 10,
      padding: 12, display: 'flex', flexDirection: 'column', gap: 8,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Avatar name={p.name} size={28} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: 'Urbanist', fontSize: 12, fontWeight: 700, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</div>
          <div style={{ fontFamily: 'Urbanist', fontSize: 9, color: '#62748E', marginTop: 1 }}>{p.id} · {p.journey}</div>
        </div>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <ReadinessChip status={p.status} />
        {p.flags > 0 && (
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, padding: '1px 6px', borderRadius: 999, background: '#FFE5E7', color: '#a82530', fontFamily: 'Urbanist', fontSize: 9, fontWeight: 800 }}>
            <i data-lucide="flag" style={{ width: 9, height: 9 }}></i>
            {p.flags}
          </span>
        )}
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <ReadinessDots value={Math.round((p.readiness.c + p.readiness.f + p.readiness.d + p.readiness.o + p.readiness.p) / 5)} color={dimColor} />
        <span style={{ fontFamily: 'Urbanist', fontSize: 10, color: '#62748E' }}>{p.daysInStage}d in stage</span>
      </div>

      <div style={{
        padding: '7px 9px', background: '#FDFBFA',
        borderLeft: '2px solid #7E80FF',
        borderRadius: '0 6px 6px 0',
        fontFamily: 'Inter', fontSize: 11, lineHeight: 1.45, color: '#0F172B',
      }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontFamily: 'Urbanist', fontSize: 9, fontWeight: 800, color: '#202166', letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 3 }}>
          <i data-lucide="sparkles" style={{ width: 9, height: 9 }}></i>
          Eve suggests
        </span>
        <div>{p.nextAction}</div>
      </div>

      {open && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, paddingTop: 6, borderTop: '1px solid #EBEBEB' }}>
          {READINESS_DIM.map(d => (
            <div key={d.k} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <i data-lucide={d.icon} style={{ width: 11, height: 11, color: '#62748E' }}></i>
              <span style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 600, color: '#000', width: 80 }}>{d.label}</span>
              <ReadinessDots value={p.readiness[d.k]} color={p.readiness[d.k] >= 4 ? '#277852' : p.readiness[d.k] >= 3 ? '#FFCD00' : '#FF404C'} />
            </div>
          ))}
        </div>
      )}

      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <div style={{ flex: 1, fontFamily: 'Urbanist', fontSize: 10, color: '#62748E' }}>{coord ? coord.name : '—'}</div>
        <button onClick={() => setOpen(o => !o)} style={{
          padding: '4px 8px', background: 'transparent', color: '#000',
          border: '1px solid #EBEBEB', borderRadius: 6,
          fontFamily: 'Urbanist', fontWeight: 700, fontSize: 10, cursor: 'pointer',
        }}>{open ? 'Hide' : 'Detail'}</button>
      </div>
    </div>
  );
}

function BackToOverview({ onBack, label }) {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  return (
    <button onClick={onBack} style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '7px 12px', background: '#fff', color: '#000',
      border: '1px solid #EBEBEB', borderRadius: 8,
      fontFamily: 'Urbanist', fontWeight: 700, fontSize: 12, cursor: 'pointer',
      alignSelf: 'flex-start',
    }}>
      <i data-lucide="arrow-left" style={{ width: 13, height: 13 }}></i>
      Back to Capacity overview
      {label && <span style={{ color: '#62748E', fontWeight: 500 }}>· {label}</span>}
    </button>
  );
}

function ReadinessBoard({ onBack }) {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const [filter, setFilter] = React.useState('all');
  const byStage = STAGE_ORDER.reduce((acc, s) => { acc[s] = []; return acc; }, {});
  CAP_PATIENTS.forEach(p => {
    if (filter !== 'all' && p.status !== filter) return;
    if (byStage[p.stage]) byStage[p.stage].push(p);
  });

  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 1500, margin: '0 auto' }}>
      <BackToOverview onBack={onBack} label="Readiness Board" />
      <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 12, padding: 12, display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '7px 12px', background: '#FDFBFA', border: '1px solid #EBEBEB', borderRadius: 8, minWidth: 220 }}>
          <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: 12 }} />
        </div>
        {[
          { k: 'all', l: 'All readiness' },
          { k: 'READY', l: '● Ready' },
          { k: 'ALMOST', l: '● Almost' },
          { k: 'BLOCKED', l: '● Blocked' },
        ].map(o => (
          <button key={o.k} onClick={() => setFilter(o.k)} style={{
            padding: '7px 12px', borderRadius: 8,
            background: filter === o.k ? '#000' : 'transparent',
            color: filter === o.k ? '#fff' : '#000',
            border: filter === o.k ? 'none' : '1px solid #EBEBEB',
            fontFamily: 'Urbanist', fontSize: 12, fontWeight: 700, cursor: 'pointer',
          }}>{o.l}</button>
        ))}
        <div style={{ flex: 1 }}></div>
        <button style={{ padding: '7px 12px', background: '#fff', border: '1px solid #EBEBEB', borderRadius: 8, cursor: 'pointer', fontFamily: 'Urbanist', fontSize: 12, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 5 }}>
          <i data-lucide="sliders-horizontal" style={{ width: 12, height: 12 }}></i>
          Filters
        </button>
        <button style={{ padding: '7px 12px', background: 'linear-gradient(135deg, #7E80FF, #5E60BF)', color: '#fff', border: 'none', borderRadius: 8, cursor: 'pointer', fontFamily: 'Urbanist', fontSize: 12, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 5 }}>
          <i data-lucide="user-plus" style={{ width: 12, height: 12 }}></i>
          Add patient
        </button>
      </div>

      <div style={{ display: 'flex', gap: 10, overflowX: 'auto', paddingBottom: 6 }}>
        {STAGE_ORDER.map(stage => (
          <div key={stage} style={{
            width: 260, flexShrink: 0,
            background: '#FDFBFA', border: '1px solid #EBEBEB',
            borderRadius: 12, padding: 10,
            display: 'flex', flexDirection: 'column', gap: 8,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 6px' }}>
              <span style={{ width: 8, height: 8, borderRadius: 2, background: STAGE_COLOR[stage] }}></span>
              <div style={{ fontFamily: 'Urbanist', fontSize: 11, fontWeight: 800, letterSpacing: '0.04em', color: '#000', textTransform: 'uppercase', flex: 1 }}>{stage}</div>
              <span style={{ padding: '0 6px', background: '#fff', borderRadius: 999, border: '1px solid #EBEBEB', fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800 }}>{byStage[stage].length}</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {byStage[stage].map(p => <ReadinessCard key={p.id} p={p} />)}
              {byStage[stage].length === 0 && (
                <div style={{ padding: 18, textAlign: 'center', fontFamily: 'Urbanist', fontSize: 11, color: '#C1C1C1' }}>—</div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ───────── D3. STAFF WORKLOAD ─────────
function StaffWorkload({ onBack }) {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 18, maxWidth: 1500, margin: '0 auto' }}>
      <BackToOverview onBack={onBack} label="Staff Workload" />
      {/* AI rebalance suggestion */}
      <div style={{ background: '#000', color: '#fff', borderRadius: 14, padding: 20, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(500px 200px at 90% -10%, rgba(228,91,194,0.30), transparent 70%)', pointerEvents: 'none' }}></div>
        <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ width: 36, height: 36, borderRadius: 10, background: '#DEDFFF', color: '#202166', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Urbanist', fontWeight: 800, fontSize: 11 }}>AI</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, letterSpacing: '0.08em', color: '#FFA8E9', textTransform: 'uppercase' }}>Eve suggests · workload rebalance</div>
            <div style={{ fontFamily: 'Urbanist', fontSize: 15, fontWeight: 700, marginTop: 4 }}>
              Priya is at 140% capacity. Move 5 patients from Priya → Mark (3) + Robin (2). Mark is at 58% capacity, Robin at 73%.
            </div>
          </div>
          <button style={{ padding: '10px 14px', background: '#fff', color: '#000', border: 'none', borderRadius: 8, cursor: 'pointer', fontFamily: 'Urbanist', fontWeight: 700, fontSize: 12 }}>Review suggestion</button>
          <button style={{ padding: '10px 14px', background: 'transparent', color: '#fff', border: '1px solid rgba(255,255,255,0.25)', borderRadius: 8, cursor: 'pointer', fontFamily: 'Urbanist', fontWeight: 700, fontSize: 12 }}>Dismiss</button>
        </div>
      </div>

      {/* Workload grid */}
      <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 14, overflow: 'hidden' }}>
        <SectionHead eyebrow="Team capacity · live" title={`${CAP_STAFF.length} team members on shift`} right={null} />
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 80px 80px 90px 90px 100px 120px 14px', gap: 14, padding: '12px 18px', background: '#FDFBFA', borderTop: '1px solid #EBEBEB', borderBottom: '1px solid #EBEBEB' }}>
          {['Staff', 'Active', 'Open', 'Overdue', 'Avg resp', 'Days-to-ready', 'Capacity', ''].map(h => (
            <div key={h} style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, letterSpacing: '0.08em', color: '#62748E', textTransform: 'uppercase' }}>{h}</div>
          ))}
        </div>
        {CAP_STAFF.map(s => (
          <div key={s.id} style={{ display: 'grid', gridTemplateColumns: '2fr 80px 80px 90px 90px 100px 120px 14px', gap: 14, padding: '14px 18px', alignItems: 'center', borderBottom: '1px solid #FDFBFA' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <Avatar name={s.name} size={36} hue={s.avatar} />
              <div>
                <div style={{ fontFamily: 'Urbanist', fontSize: 13, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 6 }}>
                  {s.name}
                  {s.me && <span style={{ fontFamily: 'Urbanist', fontSize: 9, fontWeight: 800, padding: '1px 5px', borderRadius: 4, background: '#DEDFFF', color: '#202166', letterSpacing: '0.06em' }}>YOU</span>}
                </div>
                <div style={{ fontFamily: 'Urbanist', fontSize: 11, color: '#62748E', marginTop: 1 }}>{s.role}</div>
              </div>
            </div>
            <div style={{ fontFamily: 'Urbanist', fontWeight: 700 }}>{s.active}</div>
            <div style={{ fontFamily: 'Urbanist', fontWeight: 700 }}>{s.open}</div>
            <div style={{ fontFamily: 'Urbanist', fontWeight: 700, color: s.overdue > 0 ? '#a82530' : '#62748E' }}>{s.overdue}</div>
            <div style={{ fontFamily: 'Urbanist', fontSize: 13, color: '#000' }}>{s.resp}</div>
            <div style={{ fontFamily: 'Urbanist', fontSize: 13, color: '#000' }}>{s.dtr}d</div>
            <CapacityChip status={s.status} />
            <i data-lucide="chevron-right" style={{ width: 14, height: 14, color: '#C1C1C1' }}></i>
          </div>
        ))}
      </div>
    </div>
  );
}

// ───────── D4. TO-DO ─────────
function TodoEngine({ onBack }) {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const [view, setView] = React.useState('mine');
  const [doneIds, setDoneIds] = React.useState(new Set(CAP_TASKS.filter(t => t.done).map(t => t.id)));

  let rows = CAP_TASKS;
  if (view === 'mine') rows = rows.filter(t => t.who === 'Robin Lee');
  if (view === 'today') rows = rows.filter(t => /today|am|pm|now/i.test(t.due));
  if (view === 'overdue') rows = rows.filter(t => /Now/.test(t.due));
  if (view === 'ai') rows = rows.filter(t => t.ai);

  const toggle = (id) => setDoneIds(prev => {
    const next = new Set(prev);
    if (next.has(id)) next.delete(id); else next.add(id);
    return next;
  });

  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 1500, margin: '0 auto' }}>
      <BackToOverview onBack={onBack} label="To-Do" />
      <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 12, padding: 12, display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
        {[
          { k: 'mine',    l: 'My tasks',  c: CAP_TASKS.filter(t => t.who === 'Robin Lee').length },
          { k: 'team',    l: 'Team',      c: CAP_TASKS.length },
          { k: 'today',   l: 'Due today', c: CAP_TASKS.filter(t => /today|am|pm|now/i.test(t.due)).length },
          { k: 'overdue', l: 'Overdue',   c: CAP_TASKS.filter(t => /Now/.test(t.due)).length },
          { k: 'ai',      l: 'AI-suggested', c: CAP_TASKS.filter(t => t.ai).length },
        ].map(v => (
          <button key={v.k} onClick={() => setView(v.k)} style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '7px 12px', borderRadius: 8,
            background: view === v.k ? '#000' : 'transparent',
            color: view === v.k ? '#fff' : '#000',
            border: view === v.k ? 'none' : '1px solid #EBEBEB',
            fontFamily: 'Urbanist', fontSize: 12, fontWeight: 700, cursor: 'pointer',
          }}>
            {v.l}
            <span style={{ padding: '1px 6px', borderRadius: 999, background: view === v.k ? 'rgba(255,255,255,0.18)' : '#FDFBFA', color: view === v.k ? '#fff' : '#62748E', fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800 }}>{v.c}</span>
          </button>
        ))}
        <div style={{ flex: 1 }}></div>
        <button style={{ padding: '7px 12px', background: '#000', color: '#fff', border: 'none', borderRadius: 8, cursor: 'pointer', fontFamily: 'Urbanist', fontSize: 12, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 5 }}>
          <i data-lucide="plus" style={{ width: 12, height: 12 }}></i>
          New task
        </button>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {rows.map(t => {
          const isDone = doneIds.has(t.id);
          return (
            <div key={t.id} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: 14, background: '#fff',
              border: '1px solid #EBEBEB', borderRadius: 10,
              opacity: isDone ? 0.55 : 1,
            }}>
              <input type="checkbox" checked={isDone} onChange={() => toggle(t.id)} style={{ width: 16, height: 16, accentColor: '#7E80FF', cursor: 'pointer', flexShrink: 0 }} />
              <PriorityDot priority={t.p} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <div style={{ fontFamily: 'Urbanist', fontSize: 13, fontWeight: 700, textDecoration: isDone ? 'line-through' : 'none' }}>{t.t}</div>
                  {t.ai && (
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, padding: '1px 6px', borderRadius: 999, background: '#DEDFFF', color: '#202166', fontFamily: 'Urbanist', fontSize: 9, fontWeight: 800, letterSpacing: '0.06em' }}>
                      <i data-lucide="sparkles" style={{ width: 9, height: 9 }}></i>
                      AI
                    </span>
                  )}
                </div>
                <div style={{ fontFamily: 'Urbanist', fontSize: 11, color: '#62748E', marginTop: 3, display: 'flex', gap: 10 }}>
                  <span>{t.patient}</span>
                  <span>·</span>
                  <span>↗ {t.src}</span>
                  <span>·</span>
                  <span>{t.who}</span>
                </div>
              </div>
              <div style={{ fontFamily: 'Urbanist', fontSize: 12, fontWeight: 700, color: /Now/.test(t.due) ? '#a82530' : '#000', whiteSpace: 'nowrap' }}>{t.due}</div>
              <button style={{ background: 'transparent', border: 'none', cursor: 'pointer', padding: 4, color: '#C1C1C1' }}>
                <i data-lucide="more-horizontal" style={{ width: 14, height: 14 }}></i>
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ───────── D5. FLAGS ─────────
function FlagsView({ onBack }) {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const [resolved, setResolved] = React.useState(new Set());

  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 1500, margin: '0 auto' }}>
      <BackToOverview onBack={onBack} label="Flags" />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
        {[
          { l: 'P0 · Urgent',   v: CAP_FLAGS.filter(f => f.p === 'P0').length, dot: '#FF404C', bg: '#FFE5E7' },
          { l: 'P1 · High',     v: CAP_FLAGS.filter(f => f.p === 'P1').length, dot: '#FF8C00', bg: '#FFE0BA' },
          { l: 'P2 · Medium',   v: CAP_FLAGS.filter(f => f.p === 'P2').length, dot: '#FFCD00', bg: '#FFF2BF' },
          { l: 'Resolved · 24h', v: 14,                                          dot: '#277852', bg: '#DDF0E5' },
        ].map(m => (
          <div key={m.l} style={{ padding: 14, background: m.bg, borderRadius: 10, display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: m.dot, boxShadow: `0 0 0 4px ${m.bg}` }}></span>
            <div>
              <div style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, letterSpacing: '0.06em', color: '#4D4D4D', textTransform: 'uppercase' }}>{m.l}</div>
              <div style={{ fontFamily: 'Urbanist', fontSize: 24, fontWeight: 800, color: '#000', letterSpacing: '-0.02em' }}>{m.v}</div>
            </div>
          </div>
        ))}
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {CAP_FLAGS.map(f => {
          const cat = FLAG_CAT_META[f.cat];
          const isResolved = resolved.has(f.id);
          return (
            <div key={f.id} style={{
              display: 'flex', alignItems: 'flex-start', gap: 14,
              padding: 16, background: '#fff',
              border: `1px solid ${isResolved ? '#EBEBEB' : (f.p === 'P0' ? '#F0A3A8' : '#EBEBEB')}`,
              borderRadius: 12,
              opacity: isResolved ? 0.5 : 1,
            }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: cat.bg, color: cat.fg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <i data-lucide={cat.icon} style={{ width: 16, height: 16 }}></i>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                  <PriorityDot priority={f.p} />
                  <span style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, letterSpacing: '0.06em', color: cat.fg, textTransform: 'uppercase' }}>{cat.label}</span>
                  <span style={{ fontFamily: 'Urbanist', fontSize: 11, color: '#62748E' }}>· {f.patient}</span>
                  <div style={{ flex: 1 }}></div>
                  <span style={{ fontFamily: 'Urbanist', fontSize: 10, color: '#62748E' }}>{f.age}</span>
                </div>
                <div style={{ fontFamily: 'Urbanist', fontSize: 14, fontWeight: 700, color: '#000', lineHeight: 1.45 }}>{f.desc}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 8, padding: '6px 10px', background: '#FDFBFA', borderRadius: 6 }}>
                  <i data-lucide="sparkles" style={{ width: 11, height: 11, color: '#7E80FF' }}></i>
                  <span style={{ fontFamily: 'Inter', fontSize: 12, color: '#4D4D4D', fontStyle: 'italic' }}>{f.reasoning}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 10 }}>
                  <button onClick={() => setResolved(p => new Set(p).add(f.id))} style={{ padding: '6px 10px', background: '#000', color: '#fff', border: 'none', borderRadius: 6, cursor: 'pointer', fontFamily: 'Urbanist', fontSize: 11, fontWeight: 700 }}>Resolve</button>
                  <button style={{ padding: '6px 10px', background: '#fff', color: '#000', border: '1px solid #EBEBEB', borderRadius: 6, cursor: 'pointer', fontFamily: 'Urbanist', fontSize: 11, fontWeight: 700 }}>Snooze 24h</button>
                  <button style={{ padding: '6px 10px', background: '#fff', color: '#000', border: '1px solid #EBEBEB', borderRadius: 6, cursor: 'pointer', fontFamily: 'Urbanist', fontSize: 11, fontWeight: 700 }}>Escalate</button>
                  <button style={{ padding: '6px 10px', background: '#fff', color: '#000', border: '1px solid #EBEBEB', borderRadius: 6, cursor: 'pointer', fontFamily: 'Urbanist', fontSize: 11, fontWeight: 700 }}>Message patient</button>
                  <div style={{ flex: 1 }}></div>
                  <span style={{ fontFamily: 'Urbanist', fontSize: 11, color: '#62748E' }}>Owner: {f.owner}</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ───────── D6. CYCLES ─────────
function CyclesView({ onBack }) {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const PHASES = ['Stim', 'Monitoring', 'Retrieval', 'Fertilization', 'Transfer', 'Luteal', 'Outcome'];

  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 1500, margin: '0 auto' }}>
      <BackToOverview onBack={onBack} label="Cycles" />
      {/* Lab capacity overlay */}
      <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 14, padding: 22 }}>
        <SectionHead eyebrow="Lab capacity · this week" title="Retrievals & transfers vs. capacity" right={
          <div style={{ display: 'flex', gap: 14, fontFamily: 'Urbanist', fontSize: 10, color: '#62748E' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 10, height: 10, borderRadius: 2, background: '#7E80FF' }}></span> Retrieval</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 10, height: 10, borderRadius: 2, background: '#E45BC2' }}></span> Transfer</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 10, height: 1, background: '#FF404C', display: 'inline-block' }}></span> Capacity</span>
          </div>
        } />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6, alignItems: 'flex-end', height: 140 }}>
          {[
            { d: 'Mon', r: 3, t: 2 },
            { d: 'Tue', r: 4, t: 3 },
            { d: 'Wed', r: 5, t: 4 },
            { d: 'Thu', r: 6, t: 2 },
            { d: 'Fri', r: 8, t: 3, over: true },
            { d: 'Sat', r: 1, t: 0 },
            { d: 'Sun', r: 0, t: 0 },
          ].map(d => {
            const cap = 8;
            return (
              <div key={d.d} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, height: '100%' }}>
                <div style={{ position: 'relative', width: '70%', height: 100, display: 'flex', flexDirection: 'column-reverse', gap: 2 }}>
                  <div style={{ height: `${(d.r / cap) * 100}%`, background: '#7E80FF', borderRadius: '0 0 4px 4px' }}></div>
                  <div style={{ height: `${(d.t / cap) * 100}%`, background: '#E45BC2', borderRadius: '4px 4px 0 0' }}></div>
                  <div style={{ position: 'absolute', bottom: '100%', left: 0, right: 0, height: 1, background: '#FF404C' }}></div>
                </div>
                <div style={{ fontFamily: 'Urbanist', fontSize: 11, fontWeight: 700, color: d.over ? '#a82530' : '#000' }}>{d.d}</div>
                <div style={{ fontFamily: 'Urbanist', fontSize: 9, color: '#62748E' }}>{d.r + d.t}/{cap}</div>
              </div>
            );
          })}
        </div>
        <div style={{ marginTop: 12, padding: 10, background: '#FFE5E7', border: '1px solid #F0A3A8', borderRadius: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
          <i data-lucide="alert-triangle" style={{ width: 14, height: 14, color: '#a82530' }}></i>
          <span style={{ fontFamily: 'Urbanist', fontSize: 12, color: '#a82530', fontWeight: 600 }}>
            Friday is over capacity (11 procedures vs. 8 slot limit). Eve suggests rescheduling Anita Chen → Monday.
          </span>
        </div>
      </div>

      {/* Cycle cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
        {CAP_CYCLES.map(c => {
          const readMeta = c.ready === 'READY' ? READINESS_STATUS.READY : c.ready === 'BLOCKED' ? READINESS_STATUS.BLOCKED : READINESS_STATUS.ALMOST;
          return (
            <div key={c.id} style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 12, padding: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <Avatar name={c.patient} size={32} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontFamily: 'Urbanist', fontSize: 14, fontWeight: 700 }}>{c.patient}</div>
                  <div style={{ fontFamily: 'Urbanist', fontSize: 11, color: '#62748E' }}>{c.type} · Dr. {c.md} · {c.coord}</div>
                </div>
                <ReadinessChip status={c.ready === 'READY' ? 'READY' : c.ready === 'BLOCKED' ? 'BLOCKED' : 'ALMOST'} />
              </div>
              {/* Phase stepper */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                {PHASES.map((phase, i) => {
                  const phaseIdx = PHASES.indexOf(c.phase);
                  const isPast = i < phaseIdx;
                  const isCurrent = i === phaseIdx;
                  return (
                    <React.Fragment key={phase}>
                      <div style={{
                        flex: 1, height: 4, borderRadius: 2,
                        background: isPast ? '#277852' : isCurrent ? '#7E80FF' : '#EBEBEB',
                      }} title={phase}></div>
                    </React.Fragment>
                  );
                })}
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'Urbanist', fontSize: 10, color: '#62748E' }}>
                <span><strong style={{ color: '#000', fontWeight: 800 }}>{c.phase}</strong> phase</span>
                <span>Next: <strong style={{ color: '#000', fontWeight: 800 }}>{c.next}</strong></span>
              </div>
              {c.blockers.length > 0 && (
                <div style={{ padding: 10, background: '#FFFAFA', border: '1px solid #F0A3A8', borderRadius: 8 }}>
                  <div style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, letterSpacing: '0.06em', color: '#a82530', textTransform: 'uppercase', marginBottom: 4 }}>
                    Blocking · {c.blockers.length}
                  </div>
                  {c.blockers.map((b, i) => (
                    <div key={i} style={{ fontFamily: 'Inter', fontSize: 12, color: '#0F172B', display: 'flex', alignItems: 'center', gap: 6, marginTop: 2 }}>
                      <span style={{ width: 4, height: 4, borderRadius: 999, background: '#FF404C', flexShrink: 0 }}></span>
                      {b}
                    </div>
                  ))}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ───────── Module wrapper ─────────
function CapacityModule({ sub, onSubNav }) {
  const view = sub || 'Overview';
  const back = () => onSubNav && onSubNav('Overview');
  return (
    <React.Fragment>
      {view === 'Overview'        && <CapacityOverview onNav={onSubNav} />}
      {view === 'Readiness Board' && <ReadinessBoard onBack={back} />}
      {view === 'Staff Workload'  && <StaffWorkload onBack={back} />}
      {view === 'To-Do'           && <TodoEngine onBack={back} />}
      {view === 'Flags'           && <FlagsView onBack={back} />}
      {view === 'Cycles'          && <CyclesView onBack={back} />}
    </React.Fragment>
  );
}

Object.assign(window, {
  CapacityModule, CapacityOverview, ReadinessBoard, StaffWorkload, TodoEngine, FlagsView, CyclesView,
});