// ============================================================
// Alumnus provider console — desktop-first clinical dashboard
// Screens 3.1 → 3.4 (Login, Caseload, Active Alerts, Member Detail)
// ============================================================
const { Icon: VI, Crest: VC, Avatar: VA, Button: VB, Eyebrow: VE,
        Pill: VP, Sparkline: VSp, Bars: VBars, CLINICIAN: CL, MEMBER: MEM } = window.AL;

// ─────────────────────────────────────────────────────────────
// Provider console shell — left rail, top bar, content
// ─────────────────────────────────────────────────────────────
const ConsoleShell = ({ children, active = 'caseload', subtitle = null }) => {
  const nav = [
    { k: 'caseload',  i: 'users-three',     l: 'Caseload' },
    { k: 'alerts',    i: 'bell-simple',     l: 'Alerts',     badge: 4 },
    { k: 'analytics', i: 'chart-bar',       l: 'Population' },
    { k: 'reports',   i: 'file-text',       l: 'Reports' },
    { k: 'comms',     i: 'chat-circle',     l: 'Outreach' },
    { k: 'admin',     i: 'gear',            l: 'Admin' },
  ];
  return (
    <div style={{ display: 'flex', height: '100%', background: 'var(--bg-page)',
                  fontFamily: 'var(--font-body)', color: 'var(--fg-primary)' }}>
      {/* Left rail */}
      <div style={{ width: 224, background: 'var(--color-ivy)', color: 'var(--color-bone)',
                    display: 'flex', flexDirection: 'column', flexShrink: 0 }}>
        <div style={{ padding: '24px 20px 24px',
                      borderBottom: '1px solid rgba(242,237,226,0.1)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <VC size={20} dark/>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 13.5,
                           letterSpacing: '0.22em', fontWeight: 500, textTransform: 'uppercase' }}>
              Alumnus
            </span>
          </div>
          <div style={{ fontSize: 10.5, letterSpacing: '0.06em', textTransform: 'uppercase',
                        color: 'rgba(242,237,226,0.5)', marginTop: 10, fontWeight: 500 }}>
            Pine Tree Recovery
          </div>
        </div>
        <div style={{ flex: 1, padding: '14px 12px' }}>
          {nav.map(n => {
            const on = n.k === active;
            return (
              <div key={n.k} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '10px 12px', borderRadius: 4, marginBottom: 2,
                background: on ? 'rgba(168,132,60,0.18)' : 'transparent',
                color: on ? 'var(--color-bone)' : 'rgba(242,237,226,0.7)',
                fontSize: 13.5, fontWeight: on ? 600 : 500,
                position: 'relative', cursor: 'pointer',
              }}>
                {on && <div style={{ position: 'absolute', left: -12, top: 4, bottom: 4,
                                     width: 3, background: 'var(--color-brass)', borderRadius: 2 }}/>}
                <VI name={n.i} size={17} weight={on ? 'fill' : 'regular'}/>
                <span style={{ flex: 1 }}>{n.l}</span>
                {n.badge > 0 && (
                  <span style={{
                    minWidth: 18, height: 18, padding: '0 5px', borderRadius: 999,
                    background: 'var(--color-ember)', color: 'var(--color-bone)',
                    fontSize: 10.5, fontWeight: 600,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  }}>{n.badge}</span>
                )}
              </div>
            );
          })}
        </div>
        {/* User */}
        <div style={{ padding: '14px 18px', borderTop: '1px solid rgba(242,237,226,0.1)',
                      display: 'flex', alignItems: 'center', gap: 10 }}>
          <VA initials="CS" tone="brass" size={32}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12.5, fontWeight: 500 }}>Dr. Caleb Singh</div>
            <div style={{ fontSize: 10.5, color: 'rgba(242,237,226,0.55)' }}>Alumni coordinator</div>
          </div>
        </div>
      </div>

      {/* Main */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        {/* Top bar */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '14px 32px', borderBottom: '1px solid var(--border-hairline)',
        }}>
          <div style={{
            background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
            borderRadius: 999, padding: '7px 16px',
            display: 'flex', alignItems: 'center', gap: 10, width: 360,
          }}>
            <VI name="magnifying-glass" size={14} color="var(--color-stone)"/>
            <span style={{ fontSize: 13, color: 'var(--fg-tertiary)' }}>
              Search members, alerts, notes…
            </span>
            <span style={{ marginLeft: 'auto', fontSize: 10.5, color: 'var(--fg-tertiary)',
                           padding: '2px 6px', border: '1px solid var(--border-hairline)',
                           borderRadius: 4 }}>⌘K</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <span style={{ fontSize: 12, color: 'var(--fg-tertiary)',
                            letterSpacing: '0.04em', textTransform: 'uppercase' }}>
              Thursday · May 15
            </span>
            <VI name="bell-simple" size={18} color="var(--color-stone)"/>
            <VI name="question" size={18} color="var(--color-stone)"/>
          </div>
        </div>

        {subtitle && (
          <div style={{ padding: '8px 32px', background: 'var(--color-bone-soft)',
                        borderBottom: '1px solid var(--border-hairline)',
                        fontSize: 12, color: 'var(--fg-tertiary)',
                        letterSpacing: '0.04em' }}>
            {subtitle}
          </div>
        )}

        {/* Scroll content */}
        <div style={{ flex: 1, overflow: 'auto' }}>{children}</div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// 3.1  Provider Login
// ─────────────────────────────────────────────────────────────
const V_Login = () => (
  <div style={{ display: 'flex', height: '100%', background: 'var(--color-ivy)',
                fontFamily: 'var(--font-body)' }}>
    {/* Left — quote panel */}
    <div style={{ flex: 1, padding: '64px 72px', display: 'flex', flexDirection: 'column',
                  color: 'var(--color-bone)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <VC size={24} dark/>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 15,
                       letterSpacing: '0.22em', fontWeight: 500, textTransform: 'uppercase' }}>
          Alumnus
        </span>
      </div>
      <div style={{ marginTop: 'auto', marginBottom: 64, maxWidth: 480 }}>
        <div style={{ fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase',
                      color: 'var(--color-brass-soft)', fontWeight: 500, marginBottom: 20 }}>
          Continuing care console
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic',
                      fontSize: 28, lineHeight: '40px', fontWeight: 400, letterSpacing: '-0.012em',
                      marginBottom: 22 }}>
          "It's the first piece of continuing care that didn't feel, to my graduates, like being kept on a leash."
        </div>
        <div style={{ fontSize: 12, color: 'rgba(242,237,226,0.65)',
                      letterSpacing: '0.06em', textTransform: 'uppercase' }}>
          Dr. R. Patel · Greenfield Recovery
        </div>
      </div>
      <div style={{ fontSize: 11, color: 'rgba(242,237,226,0.5)',
                    letterSpacing: '0.04em', display: 'flex', gap: 22 }}>
        <span>HIPAA-compliant infrastructure</span>
        <span>SOC 2 Type II</span>
        <span>BAA on file</span>
      </div>
    </div>

    {/* Right — login card */}
    <div style={{ width: 480, background: 'var(--bg-page)',
                  padding: '64px 56px', display: 'flex', flexDirection: 'column' }}>
      <VE tone="brass" style={{ marginBottom: 14 }}>Sign in</VE>
      <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 30, lineHeight: '36px',
                   fontWeight: 400, letterSpacing: '-0.012em', margin: '0 0 32px' }}>
        Pine Tree Recovery
      </h1>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 16 }}>
        <VE>Email</VE>
        <div style={{ padding: '12px 14px', background: 'var(--bg-surface)',
                      border: '1px solid var(--color-ivy)', borderRadius: 4, fontSize: 14 }}>
          caleb.singh@pinetreerecovery.org
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 22 }}>
        <VE>Password</VE>
        <div style={{ padding: '12px 14px', background: 'var(--bg-surface)',
                      border: '1px solid var(--border-hairline)', borderRadius: 4, fontSize: 14,
                      display: 'flex', alignItems: 'center', gap: 6, color: 'var(--fg-tertiary)' }}>
          <span style={{ letterSpacing: 4 }}>••••••••••••</span>
          <span style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--color-brass-dark)' }}>Show</span>
        </div>
      </div>

      <VB variant="primary" full size="lg">Sign in</VB>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, margin: '20px 0' }}>
        <div style={{ flex: 1, height: 1, background: 'var(--border-hairline)' }}/>
        <span style={{ fontSize: 11, color: 'var(--fg-tertiary)',
                       letterSpacing: '0.08em', textTransform: 'uppercase' }}>or</span>
        <div style={{ flex: 1, height: 1, background: 'var(--border-hairline)' }}/>
      </div>
      <VB variant="ghost" full icon="key">Continue with SSO</VB>

      <div style={{ marginTop: 'auto', paddingTop: 32, fontSize: 11, color: 'var(--fg-tertiary)',
                    fontFamily: 'var(--font-display)', fontStyle: 'italic', textAlign: 'center' }}>
        Console version 2.4.1 · Pine Tree Recovery is a HIPAA-covered entity.<br/>
        BAA signed Oct 12, 2024.
      </div>
    </div>
  </div>
);

// ─────────────────────────────────────────────────────────────
// 3.2  Caseload Overview Dashboard
// ─────────────────────────────────────────────────────────────
const V_Caseload = () => {
  const metrics = [
    { l: 'Active members',          n: '184', d: 'enrolled · 12 mo' },
    { l: 'Alerts requiring action', n: '4',   d: '2 unassigned',  tone: 'ember' },
    { l: 'New this week',           n: '6',   d: 'graduated cohort' },
    { l: 'Median days continuing',  n: '142', d: 'across caseload' },
    { l: 'Current at-risk',         n: '9',   d: '4.9% of cohort', tone: 'brass' },
  ];
  const members = [
    { name: 'Anna Reyes',      grad: 'Apr 4',  days: 45,  risk: 'Moderate', riskTone: 'brass', last: '12 min ago', lastMeet: 'Tue · attended', clinician: 'C. Singh', alert: true },
    { name: 'David Kowalski',  grad: 'Apr 1',  days: 48,  risk: 'Steady',   riskTone: 'moss',  last: '2 hr ago',   lastMeet: 'Wed · attended', clinician: 'C. Singh', alert: false },
    { name: 'Marcus Webb',     grad: 'Mar 28', days: 52,  risk: 'Watch',    riskTone: 'brass', last: '4 hr ago',   lastMeet: 'Sun · attended', clinician: 'D. Pham',  alert: true },
    { name: 'Sandra Liu',      grad: 'Mar 22', days: 58,  risk: 'Steady',   riskTone: 'moss',  last: '20 min ago', lastMeet: 'Wed · attended', clinician: 'D. Pham',  alert: false },
    { name: 'Theo Brennan',    grad: 'Mar 15', days: 65,  risk: 'Elevated', riskTone: 'ember', last: 'yesterday',  lastMeet: 'Fri · missed',   clinician: 'C. Singh', alert: true },
    { name: 'Justine Ahmed',   grad: 'Mar 11', days: 69,  risk: 'Steady',   riskTone: 'moss',  last: '1 hr ago',   lastMeet: 'Wed · attended', clinician: 'C. Singh', alert: false },
    { name: 'Ray Olson',       grad: 'Feb 28', days: 80,  risk: 'Steady',   riskTone: 'moss',  last: '3 hr ago',   lastMeet: 'Tue · attended', clinician: 'A. Nguyen',alert: false },
    { name: 'Eli Sandoval',    grad: 'Feb 24', days: 84,  risk: 'Watch',    riskTone: 'brass', last: '6 hr ago',   lastMeet: 'Mon · attended', clinician: 'D. Pham',  alert: false },
    { name: 'Hana Park',       grad: 'Feb 14', days: 94,  risk: 'Steady',   riskTone: 'moss',  last: '40 min ago', lastMeet: 'Wed · attended', clinician: 'C. Singh', alert: false },
    { name: 'Beatrice Romano', grad: 'Feb 06', days: 102, risk: 'Elevated', riskTone: 'ember', last: '2 days ago', lastMeet: 'Sat · missed',   clinician: 'A. Nguyen',alert: true },
    { name: 'Tyrone Mitchell', grad: 'Jan 30', days: 109, risk: 'Steady',   riskTone: 'moss',  last: '1 hr ago',   lastMeet: 'Tue · attended', clinician: 'D. Pham',  alert: false },
    { name: 'Kira Vance',      grad: 'Jan 22', days: 117, risk: 'Steady',   riskTone: 'moss',  last: 'today',      lastMeet: 'Mon · attended', clinician: 'C. Singh', alert: false },
  ];
  return (
    <ConsoleShell active="caseload">
      <div style={{ padding: '24px 32px 40px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
                      marginBottom: 24 }}>
          <div>
            <VE style={{ marginBottom: 6 }}>Caseload overview</VE>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 400,
                         letterSpacing: '-0.012em', margin: 0 }}>Your continuing-care class.</h1>
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <VB variant="ghost" size="sm" icon="funnel">Filters · 3</VB>
            <VB variant="ghost" size="sm" icon="download-simple">Export</VB>
            <VB variant="primary" size="sm" icon="user-plus">Enroll a graduate</VB>
          </div>
        </div>

        {/* Metric strip */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 1,
                      background: 'var(--border-hairline)',
                      border: '1px solid var(--border-hairline)', borderRadius: 4,
                      overflow: 'hidden', marginBottom: 24 }}>
          {metrics.map((m, i) => (
            <div key={i} style={{ background: 'var(--bg-surface)', padding: '18px 20px' }}>
              <div style={{ fontSize: 10.5, color: 'var(--fg-tertiary)',
                            letterSpacing: '0.06em', textTransform: 'uppercase',
                            fontWeight: 500, marginBottom: 6 }}>{m.l}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 500,
                               letterSpacing: '-0.015em', lineHeight: 1,
                               color: m.tone === 'ember' ? 'var(--color-ember)'
                                   : m.tone === 'brass' ? 'var(--color-brass-dark)'
                                   : 'var(--color-ivy)' }}>{m.n}</span>
                <span style={{ fontSize: 11.5, color: 'var(--fg-tertiary)' }}>{m.d}</span>
              </div>
            </div>
          ))}
        </div>

        {/* Filter chips */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 14, alignItems: 'center', flexWrap: 'wrap' }}>
          <span style={{ fontSize: 11, color: 'var(--fg-tertiary)', marginRight: 4,
                          letterSpacing: '0.04em', textTransform: 'uppercase' }}>Filter</span>
          {[
            { l: 'Residential program', a: true },
            { l: 'Assigned: me', a: true },
            { l: 'Days post: 0–180', a: true },
            { l: '+ Risk level', a: false },
            { l: '+ Last activity', a: false },
          ].map((c, i) => (
            <div key={i} style={{
              padding: '5px 12px', borderRadius: 4, fontSize: 12, fontWeight: 500,
              background: c.a ? 'var(--color-ivy)' : 'transparent',
              color: c.a ? 'var(--color-bone)' : 'var(--fg-secondary)',
              border: c.a ? 'none' : '1px solid var(--border-hairline)',
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              {c.l}
              {c.a && <VI name="x" size={11}/>}
            </div>
          ))}
        </div>

        {/* Table */}
        <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
                      borderRadius: 4, overflow: 'hidden' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '2fr 100px 90px 1.2fr 1fr 1fr 1fr 60px',
            padding: '10px 20px', background: 'var(--bg-page)',
            borderBottom: '1px solid var(--border-hairline)',
            fontSize: 10.5, letterSpacing: '0.08em', textTransform: 'uppercase',
            color: 'var(--fg-tertiary)', fontWeight: 600, gap: 12,
          }}>
            <div>Member · class</div>
            <div>Day</div>
            <div>Risk</div>
            <div>Trend · 14d</div>
            <div>Last activity</div>
            <div>Last meeting</div>
            <div>Clinician</div>
            <div style={{ textAlign: 'right' }}>Alert</div>
          </div>
          {members.map((m, i) => {
            const trendData = i % 3 === 0 ? [6,7,7,6,5,4,6,7,6,4,3,5,4,3]
                            : i % 3 === 1 ? [6,7,7,6,7,7,8,7,7,8,7,8,7,7]
                            : [4,5,5,6,5,6,5,6,7,7,6,7,7,7];
            return (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '2fr 100px 90px 1.2fr 1fr 1fr 1fr 60px',
                padding: '12px 20px', alignItems: 'center', gap: 12,
                borderBottom: i < members.length - 1 ? '1px solid var(--border-hairline)' : 'none',
                fontSize: 13, background: m.alert ? 'rgba(168,132,60,0.04)' : 'transparent',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <VA initials={m.name.split(' ').map(p => p[0]).join('')} tone={i % 4 === 0 ? 'brass' : 'ivy'} size={30}/>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 500 }}>{m.name}</div>
                    <div style={{ fontSize: 11, color: 'var(--fg-tertiary)' }}>Graduated {m.grad} · 2026</div>
                  </div>
                </div>
                <div style={{ fontVariantNumeric: 'tabular-nums', color: 'var(--fg-primary)' }}>{m.days}</div>
                <div><VP tone={m.riskTone} dot>{m.risk}</VP></div>
                <div><VSp data={trendData} width={120} height={28}
                          stroke={m.riskTone === 'ember' ? '#8C3F2A'
                                : m.riskTone === 'brass' ? '#A8843C' : '#4F6A4A'}/></div>
                <div style={{ color: 'var(--fg-secondary)', fontSize: 12.5 }}>{m.last}</div>
                <div style={{ color: 'var(--fg-secondary)', fontSize: 12.5 }}>{m.lastMeet}</div>
                <div style={{ color: 'var(--fg-secondary)', fontSize: 12.5 }}>{m.clinician}</div>
                <div style={{ textAlign: 'right' }}>
                  {m.alert ? <span style={{
                    width: 22, height: 22, borderRadius: 4, background: 'var(--color-ember)',
                    color: 'var(--color-bone)', fontSize: 11.5, fontWeight: 600,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  }}>!</span> : <span style={{ color: 'var(--fg-tertiary)' }}>—</span>}
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14,
                      fontSize: 11.5, color: 'var(--fg-tertiary)' }}>
          <span>12 of 184 members shown</span>
          <span>Sorted by days post-discharge, ascending</span>
        </div>
      </div>
    </ConsoleShell>
  );
};

// ─────────────────────────────────────────────────────────────
// 3.3  Active Alerts Queue
// ─────────────────────────────────────────────────────────────
const V_AlertsQueue = () => {
  const alerts = [
    {
      m: 'Anna Reyes', class: '2026', days: 45, sev: 'Moderate', sevTone: 'brass',
      type: 'Rhythm shift',
      head: 'Sleep onset slipping; two missed meetings.',
      body: 'Sleep onset moved from 11pm to 1:40am over the past four nights. Two consecutive meeting absences. Check-in tone "mixed" three days running.',
      assigned: 'C. Singh', triggered: '38 min ago',
      partner: 'Maria notified · Beth notified',
    },
    {
      m: 'Theo Brennan', class: '2026', days: 65, sev: 'Elevated', sevTone: 'ember',
      type: 'Multi-signal',
      head: 'Communication frequency dropped to zero this week.',
      body: 'No outreach to sponsor or partner in 8 days (baseline: 3.4/week). One missed Pine Tree IOP. Check-ins skipped Mon-Wed.',
      assigned: 'C. Singh', triggered: '2 hr ago',
      partner: 'Partner notified · sponsor notified',
    },
    {
      m: 'Beatrice Romano', class: '2026', days: 102, sev: 'Elevated', sevTone: 'ember',
      type: 'Location anomaly',
      head: 'Geofence skipped at Saturday meeting; off-rhythm hours.',
      body: 'Member did not arrive at scheduled meeting Saturday evening. Movement signal active 1am–4am, atypical for prior 60d.',
      assigned: 'A. Nguyen', triggered: 'yesterday',
      partner: 'Partner notified',
    },
    {
      m: 'Marcus Webb', class: '2026', days: 52, sev: 'Watch', sevTone: 'brass',
      type: 'Check-in tone',
      head: 'Three "heavy" check-ins in a row.',
      body: 'No other signals shifted yet. Worth a soft outreach in next 24 hours.',
      assigned: 'D. Pham', triggered: '4 hr ago',
      partner: 'No partner notification yet',
    },
  ];
  return (
    <ConsoleShell active="alerts" subtitle="4 active alerts · 2 unassigned · workflow rules: Pine Tree default">
      <div style={{ padding: '24px 32px 40px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
                      marginBottom: 22 }}>
          <div>
            <VE style={{ marginBottom: 6 }}>Active alerts queue</VE>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 400,
                         letterSpacing: '-0.012em', margin: 0 }}>
              Four conversations worth having today.
            </h1>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <VB variant="ghost" size="sm" icon="funnel">All severities</VB>
            <VB variant="ghost" size="sm" icon="user">Assigned to me</VB>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {alerts.map((a, i) => (
            <div key={i} style={{
              background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
              borderRadius: 4, padding: '20px 22px',
              borderLeft: `3px solid ${a.sevTone === 'ember' ? 'var(--color-ember)' : 'var(--color-brass)'}`,
              display: 'grid', gridTemplateColumns: '1fr 320px', gap: 24,
            }}>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
                  <VA initials={a.m.split(' ').map(p => p[0]).join('')} tone="ivy" size={32}/>
                  <div>
                    <div style={{ fontSize: 14.5, fontWeight: 600 }}>{a.m}</div>
                    <div style={{ fontSize: 11, color: 'var(--fg-tertiary)',
                                  letterSpacing: '0.04em', textTransform: 'uppercase' }}>
                      Class of {a.class} · day {a.days}
                    </div>
                  </div>
                  <VP tone={a.sevTone} dot>{a.sev}</VP>
                  <VP tone="oat" dot={false}>{a.type}</VP>
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, lineHeight: '24px',
                              fontWeight: 500, color: 'var(--fg-primary)', marginBottom: 8 }}>
                  {a.head}
                </div>
                <div style={{ fontSize: 13, lineHeight: '19px', color: 'var(--fg-secondary)', marginBottom: 12 }}>
                  {a.body}
                </div>
                <div style={{ display: 'flex', gap: 18, fontSize: 11.5, color: 'var(--fg-tertiary)' }}>
                  <span><strong style={{ color: 'var(--fg-secondary)', fontWeight: 500 }}>Assigned:</strong> {a.assigned}</span>
                  <span><strong style={{ color: 'var(--fg-secondary)', fontWeight: 500 }}>Triggered:</strong> {a.triggered}</span>
                  <span><strong style={{ color: 'var(--fg-secondary)', fontWeight: 500 }}>Network:</strong> {a.partner}</span>
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <VB variant="primary" full icon="phone">Contact member</VB>
                <VB variant="ghost" full icon="chat-circle">Message partner</VB>
                <div style={{ display: 'flex', gap: 8 }}>
                  <VB variant="quiet" size="sm" style={{ flex: 1 }} icon="check">Acknowledge</VB>
                  <VB variant="quiet" size="sm" style={{ flex: 1 }} icon="arrow-up">Escalate</VB>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </ConsoleShell>
  );
};

window.ProviderA = { ConsoleShell, V_Login, V_Caseload, V_AlertsQueue };