// ============================================================
// Alumnus provider console — part B
// Screens 3.4 → 3.8
// ============================================================
const { Icon: WI, Avatar: WA, Button: WB, Eyebrow: WE,
        Pill: WP, Sparkline: WSp, Bars: WBars } = window.AL;
const { ConsoleShell: WShell } = window.ProviderA;

// ─────────────────────────────────────────────────────────────
// 3.4  Member Clinical Detail (Anna Reyes)
// ─────────────────────────────────────────────────────────────
const V_MemberDetail = () => {
  const signals = [
    { l: 'Meeting attendance', val: '17 of 21',  delta: '-2 vs 30d', tone: 'brass',
      data: [3,3,2,3,3,3,3,3,3,2,3,3,2,1], baseline: 'baseline 2.9/wk' },
    { l: 'Daily check-in',     val: '26 of 30',  delta: '+1 vs 30d', tone: 'moss',
      data: [1,1,1,0,1,1,1,1,1,1,1,1,1,1], baseline: 'baseline 87%' },
    { l: 'Sleep onset',        val: '12:48 am avg', delta: '+1h 14m', tone: 'brass',
      data: [10,11,10,12,11,13,12,11,13,14,15,16,17,19], baseline: 'baseline 11:34 pm' },
    { l: 'Communication freq', val: '3.1 / week', delta: 'on baseline', tone: 'moss',
      data: [3,4,3,3,4,3,3,3,4,3,2,3,3,3], baseline: 'baseline 3.4/wk' },
    { l: 'Location compliance',val: '92%',        delta: '-4 pts',    tone: 'brass',
      data: [9,9,9,9,9,9,9,8,9,9,8,9,9,8], baseline: 'baseline 96%' },
    { l: 'Content flags · device', val: '0 / 30 days', delta: 'no patterns', tone: 'moss',
      data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0], baseline: 'on-device only' },
  ];

  return (
    <WShell active="caseload" subtitle="Caseload → Anna Reyes · 1 active alert · last touch by Maria · 38 min ago">
      {/* Header */}
      <div style={{ padding: '24px 32px 0', borderBottom: '1px solid var(--border-hairline)',
                    background: 'var(--bg-page)' }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 20, marginBottom: 20 }}>
          <WA initials="AR" tone="brass" size={64}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 6 }}>
              <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 400,
                           letterSpacing: '-0.012em', margin: 0 }}>Anna Reyes</h1>
              <WP tone="brass" dot>Risk score · 42 / Moderate</WP>
              <WP tone="ember" dot>1 active alert</WP>
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--fg-tertiary)',
                          display: 'flex', gap: 22, letterSpacing: '0.02em' }}>
              <span><strong style={{ color: 'var(--fg-secondary)', fontWeight: 500 }}>Class:</strong> 2026 · Apr 4 · day 45</span>
              <span><strong style={{ color: 'var(--fg-secondary)', fontWeight: 500 }}>Program:</strong> Residential, Pine Tree</span>
              <span><strong style={{ color: 'var(--fg-secondary)', fontWeight: 500 }}>Clinician:</strong> Dr. Caleb Singh</span>
              <span><strong style={{ color: 'var(--fg-secondary)', fontWeight: 500 }}>Consent:</strong> active · Apr 5</span>
              <span><strong style={{ color: 'var(--fg-secondary)', fontWeight: 500 }}>Insurance:</strong> Aetna · in-network</span>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <WB variant="ghost" size="sm" icon="chat-circle">Outreach</WB>
            <WB variant="ghost" size="sm" icon="user">Partner</WB>
            <WB variant="primary" size="sm" icon="bell-simple">Resolve alert</WB>
          </div>
        </div>

        {/* Tabs */}
        <div style={{ display: 'flex', gap: 4, marginTop: 8 }}>
          {[
            { l: 'Overview', on: true },
            { l: 'Signals' },
            { l: 'Alerts' },
            { l: 'Communications' },
            { l: 'Documentation' },
            { l: 'Outcomes' },
            { l: 'Settings' },
          ].map((t, i) => (
            <div key={i} style={{
              padding: '10px 16px', fontSize: 13, fontWeight: 500,
              color: t.on ? 'var(--fg-primary)' : 'var(--fg-tertiary)',
              borderBottom: `2px solid ${t.on ? 'var(--color-brass)' : 'transparent'}`,
              marginBottom: -1, cursor: 'pointer',
            }}>{t.l}</div>
          ))}
        </div>
      </div>

      {/* Body — three columns */}
      <div style={{ padding: '24px 32px 40px',
                    display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 24 }}>
        <div>
          {/* Active alert callout */}
          <div style={{
            background: 'var(--bg-elevated)',
            border: '1px solid var(--color-ember-soft)', borderLeft: '3px solid var(--color-ember)',
            borderRadius: 4, padding: '18px 20px', marginBottom: 20,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                          marginBottom: 10 }}>
              <WE tone="ember">Active alert · Moderate</WE>
              <span style={{ fontSize: 11, color: 'var(--fg-tertiary)' }}>38 min ago</span>
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, lineHeight: '24px',
                          fontWeight: 500, marginBottom: 8 }}>
              Sleep onset slipping; two missed meetings.
            </div>
            <div style={{ fontSize: 13, lineHeight: '19px', color: 'var(--fg-secondary)', marginBottom: 14 }}>
              Composite shift across sleep onset, meeting attendance, and check-in tone over four days. Below escalation threshold but worth a touch.
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <WB variant="primary" size="sm" icon="phone">Call Anna</WB>
              <WB variant="ghost" size="sm">View alert</WB>
            </div>
          </div>

          {/* Network */}
          <WE style={{ marginBottom: 10 }}>Accountability network</WE>
          <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
                        borderRadius: 4, overflow: 'hidden', marginBottom: 20 }}>
            {[
              { n: 'Maria Reyes',  r: 'Mother · primary partner', tag: 'Notified', tone: 'ember', init: 'MR' },
              { n: 'Beth Whelan',  r: 'Sponsor · 8 months',        tag: 'Notified', tone: 'ember', init: 'BW' },
              { n: 'Diane Krenn',  r: 'St. Margaret\'s · chair',   tag: 'Read access', tone: 'oat', init: 'DK' },
            ].map((p, i, arr) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px',
                borderBottom: i < arr.length - 1 ? '1px solid var(--border-hairline)' : 'none',
              }}>
                <WA initials={p.init} tone="ivy" size={30}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 500 }}>{p.n}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--fg-tertiary)' }}>{p.r}</div>
                </div>
                <WP tone={p.tone} dot={p.tone === 'ember'}>{p.tag}</WP>
              </div>
            ))}
          </div>

          {/* Recent activity summary */}
          <WE style={{ marginBottom: 10 }}>Recent activity</WE>
          <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
                        borderRadius: 4, padding: '14px 18px' }}>
            {[
              ['Sleep onset 1:38am', 'last night'],
              ['Did not attend St. Margaret\'s', '2 days ago'],
              ['Check-in tone: mixed', '2 days ago'],
              ['Maria called (12 min)', '3 days ago'],
              ['Attended Pine Tree IOP', '4 days ago'],
            ].map((r, i, arr) => (
              <div key={i} style={{
                display: 'flex', justifyContent: 'space-between', padding: '8px 0',
                borderBottom: i < arr.length - 1 ? '1px dotted var(--border-hairline)' : 'none',
                fontSize: 12.5,
              }}>
                <span style={{ color: 'var(--fg-primary)' }}>{r[0]}</span>
                <span style={{ color: 'var(--fg-tertiary)' }}>{r[1]}</span>
              </div>
            ))}
          </div>
        </div>

        <div>
          <WE style={{ marginBottom: 10 }}>Signal breakdown · last 14 days</WE>
          <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
                        borderRadius: 4, overflow: 'hidden' }}>
            {signals.map((s, i, arr) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 80px', alignItems: 'center', gap: 16,
                padding: '14px 20px',
                borderBottom: i < arr.length - 1 ? '1px solid var(--border-hairline)' : 'none',
              }}>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 500 }}>{s.l}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-tertiary)' }}>{s.baseline}</div>
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500,
                              color: 'var(--fg-primary)' }}>
                  {s.val}
                </div>
                <WSp data={s.data} width={140} height={32}
                     stroke={s.tone === 'brass' ? '#A8843C' : s.tone === 'ember' ? '#8C3F2A' : '#4F6A4A'}/>
                <div style={{ textAlign: 'right' }}>
                  <WP tone={s.tone} dot>{s.delta}</WP>
                </div>
              </div>
            ))}
          </div>

          {/* Documentation snippet */}
          <WE style={{ marginTop: 22, marginBottom: 10 }}>Latest clinical note</WE>
          <div style={{
            background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
            borderLeft: '3px solid var(--color-ivy)',
            borderRadius: 4, padding: '16px 20px',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8,
                          fontSize: 11, color: 'var(--fg-tertiary)',
                          letterSpacing: '0.04em', textTransform: 'uppercase' }}>
              <span>C. Singh · Outreach note</span>
              <span>May 13 · 4:22 pm</span>
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic',
                          fontSize: 14, lineHeight: '21px', color: 'var(--fg-primary)' }}>
              "Spoke with Anna 12 min. Work stress from a project deadline; not minimizing meetings, just exhausted. Plan: keep watch on sleep through weekend; if onset stays past midnight Sun, soft-escalate to Maria with a script. Anna is aware of the alert. No clinical concern at this time."
            </div>
          </div>
        </div>
      </div>
    </WShell>
  );
};

// ─────────────────────────────────────────────────────────────
// 3.5  Population Analytics — the centerpiece. Most polish.
// ─────────────────────────────────────────────────────────────
const V_Analytics = () => {
  // 12-month synthetic trends
  const enrolledTrend = [88, 96, 102, 114, 122, 131, 138, 148, 157, 168, 176, 184];
  const riskTrend     = [54, 52, 51, 49, 50, 48, 47, 45, 46, 44, 43, 42];   // average risk score
  const alertsByWeek  = [11, 14, 9, 12, 8, 10, 7, 11, 6, 9, 8, 10, 7, 5, 8, 6, 4];
  const outcomeBars   = { app: 81, control: 53 };  // 90-day re-engagement %

  return (
    <WShell active="analytics" subtitle="Population analytics · last 12 months · 184 members · 3 facilities">
      <div style={{ padding: '24px 32px 48px' }}>
        {/* Title row */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
                      marginBottom: 24 }}>
          <div>
            <WE style={{ marginBottom: 6 }}>Outcomes · Pine Tree Recovery · all programs</WE>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 400,
                         letterSpacing: '-0.015em', margin: 0, lineHeight: '36px' }}>
              The first objective view of how your alumni are doing.
            </h1>
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <div style={{
              padding: '8px 14px', background: 'var(--bg-surface)',
              border: '1px solid var(--border-hairline)', borderRadius: 4,
              fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              <WI name="calendar-blank" size={14} color="var(--color-stone)"/>
              May 14, 2025 — May 14, 2026
              <WI name="caret-down" size={12} color="var(--color-stone)" style={{ marginLeft: 4 }}/>
            </div>
            <WB variant="ghost" size="sm" icon="download-simple">PDF</WB>
            <WB variant="primary" size="sm" icon="file-text">Build payer report</WB>
          </div>
        </div>

        {/* Hero metrics row */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 24 }}>
          {[
            { l: '90-day re-engagement', n: '81%', d: 'app cohort', delta: '+28 pts vs control', tone: 'moss' },
            { l: 'Readmission · 12 mo',  n: '11%', d: 'vs 24% baseline', delta: '−54%',          tone: 'moss' },
            { l: 'ER utilization avoided', n: '$840K', d: 'across caseload',  delta: 'modeled, conservative', tone: 'ivy' },
            { l: 'Time to intervention', n: '2.4 d', d: 'after alert',      delta: '−3.4× vs self-report',  tone: 'ivy' },
          ].map((m, i) => (
            <div key={i} style={{
              padding: '22px 22px',
              background: m.tone === 'moss' ? 'var(--color-moss-soft)'
                       : m.tone === 'ivy' ? 'var(--color-ivy)' : 'var(--bg-surface)',
              color: m.tone === 'ivy' ? 'var(--color-bone)' : 'var(--fg-primary)',
              border: '1px solid ' + (m.tone === 'ivy' ? 'var(--color-ivy)' : 'var(--border-hairline)'),
              borderRadius: 4,
            }}>
              <div style={{ fontSize: 10.5, letterSpacing: '0.08em', textTransform: 'uppercase',
                            fontWeight: 600, marginBottom: 10,
                            color: m.tone === 'ivy' ? 'var(--color-brass-soft)'
                                : m.tone === 'moss' ? '#3F5A3A' : 'var(--fg-tertiary)' }}>
                {m.l}
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 8 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 400,
                               letterSpacing: '-0.02em', lineHeight: 1 }}>{m.n}</span>
                <span style={{ fontSize: 12,
                               color: m.tone === 'ivy' ? 'rgba(242,237,226,0.65)'
                                   : m.tone === 'moss' ? 'var(--fg-secondary)'
                                   : 'var(--fg-tertiary)' }}>{m.d}</span>
              </div>
              <div style={{ fontSize: 12,
                            color: m.tone === 'ivy' ? 'var(--color-brass-soft)'
                                : m.tone === 'moss' ? '#3F5A3A' : 'var(--fg-tertiary)',
                            fontWeight: 500 }}>{m.delta}</div>
            </div>
          ))}
        </div>

        {/* Two-column main charts */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 16, marginBottom: 16 }}>
          {/* Cohort comparison chart */}
          <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
                        borderRadius: 4, padding: '22px 26px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
                          marginBottom: 22 }}>
              <div>
                <WE style={{ marginBottom: 4 }}>Cohort comparison · 90-day re-engagement</WE>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500 }}>
                  App cohort vs. matched historical control.
                </div>
              </div>
              <div style={{ display: 'flex', gap: 14, fontSize: 11, color: 'var(--fg-tertiary)' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 10, height: 10, background: 'var(--color-ivy)' }}/> App cohort · n=184
                </span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 10, height: 10, background: 'var(--color-oat-dark)' }}/> Control · n=212
                </span>
              </div>
            </div>

            {/* Big comparative bars */}
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 28, height: 240, marginBottom: 12 }}>
              {[
                { l: '30 day',  app: 96, ctrl: 78 },
                { l: '60 day',  app: 89, ctrl: 64 },
                { l: '90 day',  app: 81, ctrl: 53 },
                { l: '180 day', app: 74, ctrl: 41 },
                { l: '12 month',app: 68, ctrl: 32 },
              ].map((g, i) => (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column',
                                      alignItems: 'center', gap: 8 }}>
                  <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: '100%' }}>
                    <div style={{ width: 32, height: `${g.app * 1.9}px`, background: 'var(--color-ivy)',
                                   borderRadius: '2px 2px 0 0', position: 'relative' }}>
                      <span style={{ position: 'absolute', top: -22, left: '50%', transform: 'translateX(-50%)',
                                     fontSize: 11.5, fontWeight: 600, color: 'var(--color-ivy)' }}>{g.app}%</span>
                    </div>
                    <div style={{ width: 32, height: `${g.ctrl * 1.9}px`, background: 'var(--color-oat-dark)',
                                   borderRadius: '2px 2px 0 0', position: 'relative' }}>
                      <span style={{ position: 'absolute', top: -22, left: '50%', transform: 'translateX(-50%)',
                                     fontSize: 11.5, color: 'var(--fg-tertiary)' }}>{g.ctrl}%</span>
                    </div>
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--fg-tertiary)',
                                letterSpacing: '0.04em', textTransform: 'uppercase' }}>{g.l}</div>
                </div>
              ))}
            </div>
            <div style={{ height: 1, background: 'var(--border-hairline)', marginBottom: 12 }}/>
            <div style={{ fontSize: 12.5, color: 'var(--fg-secondary)',
                          fontFamily: 'var(--font-display)', fontStyle: 'italic', lineHeight: '20px' }}>
              At 90 days, app-cohort members are 28 percentage points more likely to remain in active continuing care. Effect persists at one year.
            </div>
          </div>

          {/* Right column — trends stack */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {/* Enrollment trend */}
            <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
                          borderRadius: 4, padding: '18px 20px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                            marginBottom: 10 }}>
                <WE>Enrolled members</WE>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 500 }}>
                  184 <span style={{ fontSize: 12, color: 'var(--color-moss)' }}>↑ 109%</span>
                </span>
              </div>
              <WSp data={enrolledTrend} width={260} height={64} stroke="#1E3A2E"
                   fill="rgba(30,58,46,0.08)" dots/>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5,
                            color: 'var(--fg-tertiary)', marginTop: 6 }}>
                <span>May '25</span><span>May '26</span>
              </div>
            </div>

            {/* Avg risk */}
            <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
                          borderRadius: 4, padding: '18px 20px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                            marginBottom: 10 }}>
                <WE>Average risk score</WE>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 500 }}>
                  42 <span style={{ fontSize: 12, color: 'var(--color-moss)' }}>↓ 22%</span>
                </span>
              </div>
              <WSp data={riskTrend} width={260} height={64} stroke="#4F6A4A"
                   fill="rgba(79,106,74,0.08)" dots/>
              <div style={{ fontSize: 11, color: 'var(--fg-tertiary)', marginTop: 6 }}>
                Lower is steadier. Includes new graduates.
              </div>
            </div>
          </div>
        </div>

        {/* Bottom row */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
          {/* Alerts by week */}
          <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
                        borderRadius: 4, padding: '20px 24px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
                          marginBottom: 16 }}>
              <div>
                <WE>Alerts per week · last 17 weeks</WE>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 500, marginTop: 4 }}>
                  Frequency falling as the cohort matures.
                </div>
              </div>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500 }}>
                <span style={{ color: 'var(--color-moss)' }}>−47%</span>
                <span style={{ fontSize: 11, color: 'var(--fg-tertiary)', marginLeft: 6 }}>vs first quarter</span>
              </span>
            </div>
            <WBars data={alertsByWeek} width={520} height={120} color="#1E3A2E"
                   accentIndices={[3, 9]} accentColor="#A8843C" gap={6}/>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5,
                          color: 'var(--fg-tertiary)', marginTop: 8 }}>
              <span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span>
            </div>
          </div>

          {/* Intervention outcomes pie-ish */}
          <div style={{ background: 'var(--color-ivy)', color: 'var(--color-bone)',
                        borderRadius: 4, padding: '20px 24px' }}>
            <div style={{ fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase',
                          color: 'var(--color-brass-soft)', fontWeight: 500, marginBottom: 10 }}>
              Intervention outcomes
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, lineHeight: '24px',
                          fontWeight: 500, marginBottom: 18 }}>
              Of 156 triggered alerts in the last quarter:
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[
                { l: 'Resolved via network outreach', n: 98, p: 63, c: 'var(--color-moss-soft)' },
                { l: 'Clinical contact required',     n: 38, p: 24, c: 'var(--color-brass-soft)' },
                { l: 'Higher acuity referral',         n: 14, p: 9,  c: 'var(--color-ember-soft)' },
                { l: 'Auto-cleared',                   n:  6, p: 4,  c: 'rgba(242,237,226,0.3)' },
              ].map((row, i) => (
                <div key={i}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, marginBottom: 4 }}>
                    <span>{row.l}</span>
                    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500,
                                   fontVariantNumeric: 'tabular-nums' }}>{row.n} <span style={{ color: 'rgba(242,237,226,0.55)' }}>· {row.p}%</span></span>
                  </div>
                  <div style={{ height: 6, background: 'rgba(242,237,226,0.08)', borderRadius: 2 }}>
                    <div style={{ width: `${row.p}%`, height: '100%', background: row.c, borderRadius: 2 }}/>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div style={{ marginTop: 18, padding: '14px 18px', background: 'var(--color-bone-soft)',
                      borderRadius: 4, borderLeft: '2px solid var(--color-brass)',
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontSize: 12.5, color: 'var(--fg-tertiary)',
                        fontFamily: 'var(--font-display)', fontStyle: 'italic' }}>
            Data audit-ready for commercial and managed-Medicaid contracts. Methodology and matched-control criteria available in the appendix of any export.
          </div>
          <WB variant="ghost" size="sm" icon="file-text">Methodology</WB>
        </div>
      </div>
    </WShell>
  );
};

// ─────────────────────────────────────────────────────────────
// 3.6  Outcomes Report Generator
// ─────────────────────────────────────────────────────────────
const V_Reports = () => {
  const templates = [
    { i: 'shield-check',     l: 'Payer outcomes report',       d: 'Quarterly · for commercial payers and managed Medicaid', on: true },
    { i: 'certificate',      l: 'Joint Commission accreditation', d: 'Annual · continuing care evidence package' },
    { i: 'briefcase',        l: 'Executive summary',           d: 'Monthly · for clinical and operational leadership' },
    { i: 'users-three',      l: 'Board pack',                  d: 'Quarterly · outcomes + finance overview' },
    { i: 'flask',            l: 'Outcomes registry export',    d: 'Anonymized cohort data for NIDA / SAMHSA' },
  ];
  const metrics = [
    { l: '90-day re-engagement', on: true },
    { l: 'Readmission rate', on: true },
    { l: 'Median time-to-intervention', on: true },
    { l: 'Alert resolution breakdown', on: true },
    { l: 'Population risk-score distribution', on: true },
    { l: 'ER utilization avoided (modeled)', on: false },
    { l: 'Member-stated outcomes (qualitative)', on: false },
  ];
  return (
    <WShell active="reports" subtitle="Generate audit-ready outcome reports for payers, accreditation, and leadership">
      <div style={{ padding: '24px 32px 40px' }}>
        <WE style={{ marginBottom: 6 }}>Report builder</WE>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 400,
                     letterSpacing: '-0.012em', margin: '0 0 22px' }}>
          Q2 2026 payer outcomes report.
        </h1>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 20 }}>
          {/* Left: template + metrics */}
          <div>
            <WE style={{ marginBottom: 10 }}>Template</WE>
            <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
                          borderRadius: 4, marginBottom: 22, overflow: 'hidden' }}>
              {templates.map((t, i, arr) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 14, padding: '14px 18px',
                  borderBottom: i < arr.length - 1 ? '1px solid var(--border-hairline)' : 'none',
                  background: t.on ? 'rgba(168,132,60,0.08)' : 'transparent',
                }}>
                  <WI name={t.i} size={20} color={t.on ? 'var(--color-brass-dark)' : 'var(--color-stone)'}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 500 }}>{t.l}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--fg-tertiary)' }}>{t.d}</div>
                  </div>
                  {t.on && <WI name="check-circle" size={18} color="var(--color-brass-dark)" weight="fill"/>}
                </div>
              ))}
            </div>

            <WE style={{ marginBottom: 10 }}>Date range</WE>
            <div style={{ display: 'flex', gap: 8, marginBottom: 22 }}>
              {[
                { l: 'This quarter', on: true },
                { l: 'Last quarter' },
                { l: 'Last 12 mo' },
                { l: 'Custom' },
              ].map((r, i) => (
                <div key={i} style={{
                  padding: '8px 14px', fontSize: 12.5, fontWeight: 500, borderRadius: 4,
                  background: r.on ? 'var(--color-ivy)' : 'transparent',
                  color: r.on ? 'var(--color-bone)' : 'var(--fg-secondary)',
                  border: r.on ? 'none' : '1px solid var(--border-hairline)',
                }}>{r.l}</div>
              ))}
            </div>

            <WE style={{ marginBottom: 10 }}>Metrics</WE>
            <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
                          borderRadius: 4, padding: '6px 0' }}>
              {metrics.map((m, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 12, padding: '10px 18px',
                }}>
                  <div style={{
                    width: 20, height: 20, borderRadius: 3,
                    background: m.on ? 'var(--color-ivy)' : 'transparent',
                    border: `1px solid ${m.on ? 'var(--color-ivy)' : 'var(--color-stone-soft)'}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    {m.on && <WI name="check" size={12} color="var(--color-bone)"/>}
                  </div>
                  <span style={{ fontSize: 13, color: 'var(--fg-primary)' }}>{m.l}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Right: preview */}
          <div>
            <WE style={{ marginBottom: 10 }}>Preview</WE>
            <div style={{
              background: '#FFFFFF', border: '1px solid var(--border-hairline)',
              borderRadius: 4, padding: '32px 36px', minHeight: 540,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between',
                            paddingBottom: 16, borderBottom: '1px solid var(--border-hairline)', marginBottom: 22 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <svg width="22" height="28" viewBox="0 0 64 84">
                    <path d="M 32 4 L 8 70" stroke="#14181F" strokeWidth="4"/>
                    <path d="M 32 4 L 56 70" stroke="#14181F" strokeWidth="4"/>
                    <path d="M 0 80 L 64 80" stroke="#14181F" strokeWidth="3"/>
                    <circle cx="32" cy="4" r="2.4" fill="#A8843C"/>
                  </svg>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 12,
                                 letterSpacing: '0.18em', fontWeight: 500 }}>ALUMNUS</span>
                </div>
                <div style={{ fontSize: 10, color: 'var(--fg-tertiary)',
                              letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                  Q2 2026 · Pine Tree Recovery
                </div>
              </div>

              <div style={{ fontSize: 10.5, color: 'var(--color-brass-dark)',
                            letterSpacing: '0.1em', textTransform: 'uppercase',
                            fontWeight: 600, marginBottom: 10 }}>
                Payer outcomes · Q2
              </div>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 22, lineHeight: '28px',
                           fontWeight: 400, letterSpacing: '-0.01em', margin: '0 0 18px',
                           maxWidth: 380 }}>
                184 graduates. 81% re-engaged at 90 days.
              </h2>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8,
                            marginBottom: 22, paddingBottom: 18,
                            borderBottom: '1px solid var(--border-hairline)' }}>
                {[
                  { n: '81%', l: '90-day re-engagement' },
                  { n: '11%', l: 'Readmission rate' },
                  { n: '2.4d', l: 'Avg time-to-intervention' },
                ].map((s, i) => (
                  <div key={i}>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 500,
                                   color: 'var(--color-ivy)', lineHeight: 1 }}>{s.n}</div>
                    <div style={{ fontSize: 10, color: 'var(--fg-tertiary)',
                                  letterSpacing: '0.04em', marginTop: 6 }}>{s.l}</div>
                  </div>
                ))}
              </div>

              <div style={{ fontSize: 11.5, lineHeight: '17px', color: 'var(--fg-secondary)',
                            marginBottom: 16 }}>
                This quarter Pine Tree Recovery's continuing-care cohort sustained 81% re-engagement at 90 days, 28 points above matched historical controls. Median time from passive-signal alert to clinical contact was 2.4 days, a 3.4× improvement over self-report-only continuing care.
              </div>

              <div style={{ display: 'flex', gap: 6, marginBottom: 8 }}>
                {[7,8,9,8,9,10,11].map((v,i) => (
                  <div key={i} style={{ flex: 1, height: v * 6, background: 'var(--color-ivy)', borderRadius: '2px 2px 0 0' }}/>
                ))}
              </div>
              <div style={{ fontSize: 9, color: 'var(--fg-tertiary)', letterSpacing: '0.04em' }}>
                Members enrolled per month · Q2 2026
              </div>
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 14, justifyContent: 'flex-end' }}>
              <WB variant="ghost" size="sm" icon="presentation">Export as deck</WB>
              <WB variant="primary" size="sm" icon="download-simple">Export PDF · 12 pages</WB>
            </div>
          </div>
        </div>
      </div>
    </WShell>
  );
};

// ─────────────────────────────────────────────────────────────
// 3.7  Communication Console
// ─────────────────────────────────────────────────────────────
const V_Comms = () => {
  const threads = [
    { who: 'Anna Reyes',       last: 'Outreach call · 12 min',     when: 'May 13', on: true,   tone: 'brass' },
    { who: 'Maria Reyes',       last: 'Partner check-in scheduled',  when: 'May 13', on: false,  tone: 'oat' },
    { who: 'Theo Brennan',      last: 'Workflow: silent week',       when: 'May 13', on: false,  tone: 'ember' },
    { who: 'Beth Whelan',       last: 'Sponsor briefed',             when: 'May 12', on: false,  tone: 'oat' },
    { who: 'Beatrice Romano',   last: 'Escalated to clinical lead',  when: 'May 11', on: false,  tone: 'ember' },
    { who: 'Marcus Webb',       last: 'Soft outreach drafted',       when: 'May 11', on: false,  tone: 'brass' },
    { who: 'Sandra Liu',        last: 'Routine 30-day touch',        when: 'May 09', on: false,  tone: 'moss' },
  ];
  const message = [
    { who: 'them', t: 'May 13 · 4:18 pm', text: "Hi Anna — quick check-in. Nothing alarming on our end; we just saw the rhythm shifted a bit this week and wanted to hear how you're doing. No need to schedule. Call when you can." },
    { who: 'anna', t: 'May 13 · 4:22 pm', text: "Hi Dr. Singh — work has been a lot. Project deadline this Friday. I missed Wed and Tue, will be at IOP tomorrow. I appreciate the note." },
    { who: 'them', t: 'May 13 · 4:24 pm', text: "Thanks for letting me know. Sleep is the one I'd watch. Let's reconnect Monday." },
  ];
  return (
    <WShell active="comms" subtitle="Outbound communication log · Pine Tree Recovery">
      <div style={{ display: 'flex', height: '100%' }}>
        {/* Thread list */}
        <div style={{ width: 280, borderRight: '1px solid var(--border-hairline)',
                      display: 'flex', flexDirection: 'column' }}>
          <div style={{ padding: '16px 18px', borderBottom: '1px solid var(--border-hairline)' }}>
            <div style={{
              background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
              borderRadius: 4, padding: '8px 12px',
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <WI name="magnifying-glass" size={13} color="var(--color-stone)"/>
              <span style={{ fontSize: 12.5, color: 'var(--fg-tertiary)' }}>Search threads</span>
            </div>
          </div>
          <div style={{ flex: 1, overflow: 'auto' }}>
            {threads.map((th, i) => (
              <div key={i} style={{
                padding: '14px 18px', borderBottom: '1px solid var(--border-hairline)',
                background: th.on ? 'var(--bg-surface)' : 'transparent',
                borderLeft: th.on ? '3px solid var(--color-brass)' : '3px solid transparent',
                cursor: 'pointer',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                              marginBottom: 4 }}>
                  <span style={{ fontSize: 13.5, fontWeight: th.on ? 600 : 500 }}>{th.who}</span>
                  <span style={{ fontSize: 10.5, color: 'var(--fg-tertiary)' }}>{th.when}</span>
                </div>
                <div style={{ fontSize: 12, color: 'var(--fg-tertiary)' }}>{th.last}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Thread view */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
          <div style={{ padding: '16px 24px', borderBottom: '1px solid var(--border-hairline)',
                        display: 'flex', alignItems: 'center', gap: 14 }}>
            <WA initials="AR" tone="brass" size={36}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14.5, fontWeight: 600 }}>Anna Reyes</div>
              <div style={{ fontSize: 11.5, color: 'var(--fg-tertiary)' }}>Class of 2026 · day 45 · Pine Tree</div>
            </div>
            <WP tone="brass" dot>Moderate · active alert</WP>
            <WB variant="ghost" size="sm" icon="user">Member profile</WB>
          </div>

          <div style={{ flex: 1, overflow: 'auto', padding: '24px 32px' }}>
            {message.map((m, i) => (
              <div key={i} style={{
                display: 'flex', justifyContent: m.who === 'them' ? 'flex-start' : 'flex-end',
                marginBottom: 16,
              }}>
                <div style={{ maxWidth: '70%' }}>
                  <div style={{
                    background: m.who === 'them' ? 'var(--color-ivy)' : 'var(--bg-surface)',
                    color: m.who === 'them' ? 'var(--color-bone)' : 'var(--fg-primary)',
                    border: m.who === 'them' ? 'none' : '1px solid var(--border-hairline)',
                    padding: '12px 16px', borderRadius: 4,
                    fontSize: 13.5, lineHeight: '20px',
                  }}>{m.text}</div>
                  <div style={{ fontSize: 10.5, color: 'var(--fg-tertiary)', marginTop: 4,
                                textAlign: m.who === 'them' ? 'left' : 'right' }}>{m.t}</div>
                </div>
              </div>
            ))}
            <div style={{ background: 'var(--color-bone-soft)', borderLeft: '2px solid var(--color-brass)',
                          padding: '12px 16px', borderRadius: 4, marginTop: 14,
                          fontSize: 12, color: 'var(--fg-tertiary)',
                          fontFamily: 'var(--font-display)', fontStyle: 'italic' }}>
              Workflow triggered: "Monday check-in scheduled for May 19, 10:00 am · alumni team queue"
            </div>
          </div>

          {/* Composer */}
          <div style={{ padding: '16px 24px', borderTop: '1px solid var(--border-hairline)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
              <WP tone="oat" dot={false}>Outreach</WP>
              <WP tone="oat" dot={false}>+ Add template</WP>
              <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--fg-tertiary)' }}>
                Logs to Anna's chart automatically
              </span>
            </div>
            <div style={{ padding: '12px 14px', background: 'var(--bg-surface)',
                          border: '1px solid var(--border-hairline)', borderRadius: 4,
                          fontSize: 13.5, color: 'var(--fg-tertiary)' }}>
              Write a note to Anna…
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10 }}>
              <div style={{ display: 'flex', gap: 12, color: 'var(--color-stone)' }}>
                <WI name="paperclip" size={16}/>
                <WI name="user-plus" size={16}/>
                <WI name="clock" size={16}/>
              </div>
              <WB variant="primary" size="sm" icon="paper-plane-tilt">Send</WB>
            </div>
          </div>
        </div>
      </div>
    </WShell>
  );
};

// ─────────────────────────────────────────────────────────────
// 3.8  Admin & Settings
// ─────────────────────────────────────────────────────────────
const V_Admin = () => {
  const team = [
    { n: 'Dr. Caleb Singh',  r: 'Alumni Coordinator',    perm: 'Full clinical', last: 'just now', init: 'CS' },
    { n: 'Dr. Aiyana Nguyen',r: 'Medical Director',      perm: 'Admin · clinical', last: '12 min',   init: 'AN' },
    { n: 'Dawit Pham',       r: 'Case Manager',          perm: 'Caseload · ltd outreach', last: '40 min', init: 'DP' },
    { n: 'Lena Schwartz',    r: 'Operations',            perm: 'Reports · billing', last: '2 hr',  init: 'LS' },
    { n: 'Rev. Tomás Ortega',r: 'Community liaison',     perm: 'Read-only',     last: 'yesterday', init: 'TO' },
  ];
  return (
    <WShell active="admin" subtitle="Pine Tree Recovery · org-wide settings · audit log retained 7 years">
      <div style={{ padding: '24px 32px 40px' }}>
        <WE style={{ marginBottom: 6 }}>Admin & settings</WE>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 400,
                     letterSpacing: '-0.012em', margin: '0 0 24px' }}>
          Pine Tree Recovery — organization.
        </h1>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 24 }}>
          {/* Org card */}
          <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
                        borderRadius: 4, padding: '20px 22px' }}>
            <WE style={{ marginBottom: 12 }}>Organization</WE>
            {[
              ['Legal name',    'Pine Tree Recovery, Inc.'],
              ['NPI · group',   '1942835704'],
              ['Tax ID',        'XX-XXX-2841'],
              ['HQ',            '1812 Causeway Blvd, Clearwater, FL'],
              ['Facilities',    '3 (Clearwater · St. Pete · Sarasota)'],
              ['Beds',          '88 residential · 220 IOP slots'],
            ].map((r, i, arr) => (
              <div key={i} style={{
                display: 'flex', justifyContent: 'space-between', padding: '8px 0',
                fontSize: 13, borderBottom: i < arr.length - 1 ? '1px dotted var(--border-hairline)' : 'none',
              }}>
                <span style={{ color: 'var(--fg-tertiary)' }}>{r[0]}</span>
                <span style={{ color: 'var(--fg-primary)', fontWeight: 500 }}>{r[1]}</span>
              </div>
            ))}
          </div>

          {/* Compliance card */}
          <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
                        borderRadius: 4, padding: '20px 22px' }}>
            <WE style={{ marginBottom: 12 }}>Compliance posture</WE>
            {[
              { l: 'HIPAA · covered entity',           v: 'Yes',                tone: 'moss' },
              { l: '42 CFR Part 2 attestation',         v: 'Signed Oct 12, 2024', tone: 'moss' },
              { l: 'BAA on file with Alumnus',          v: 'v 2.3',               tone: 'moss' },
              { l: 'SOC 2 Type II report · most recent',v: 'Apr 2026',            tone: 'moss' },
              { l: 'Joint Commission accreditation',    v: 'Expires Jun 2027',    tone: 'moss' },
              { l: 'Audit log retention',               v: '7 years',             tone: 'oat' },
            ].map((r, i, arr) => (
              <div key={i} style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                padding: '8px 0',
                borderBottom: i < arr.length - 1 ? '1px dotted var(--border-hairline)' : 'none',
              }}>
                <span style={{ fontSize: 13, color: 'var(--fg-secondary)' }}>{r.l}</span>
                <WP tone={r.tone} dot>{r.v}</WP>
              </div>
            ))}
          </div>
        </div>

        {/* Team */}
        <WE style={{ marginBottom: 10 }}>Team & permissions</WE>
        <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
                      borderRadius: 4, overflow: 'hidden', marginBottom: 24 }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '2fr 1.2fr 1.4fr 1fr 80px',
            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>User · role</div>
            <div>Permission</div>
            <div>Caseload assigned</div>
            <div>Last active</div>
            <div></div>
          </div>
          {team.map((t, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '2fr 1.2fr 1.4fr 1fr 80px',
              padding: '12px 20px', alignItems: 'center', gap: 12,
              borderBottom: i < team.length - 1 ? '1px solid var(--border-hairline)' : 'none',
              fontSize: 13,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <WA initials={t.init} tone="ivy" size={30}/>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 500 }}>{t.n}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-tertiary)' }}>{t.r}</div>
                </div>
              </div>
              <div><WP tone="oat" dot={false}>{t.perm}</WP></div>
              <div style={{ color: 'var(--fg-secondary)', fontSize: 12.5 }}>
                {i === 0 ? '52 members' : i === 1 ? 'Org-wide' : i === 2 ? '58 members' : i === 3 ? '—' : '—'}
              </div>
              <div style={{ color: 'var(--fg-tertiary)', fontSize: 12 }}>{t.last}</div>
              <div style={{ textAlign: 'right' }}>
                <WI name="dots-three" size={18} color="var(--color-stone)"/>
              </div>
            </div>
          ))}
        </div>

        {/* Integrations + billing strip */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}>
          {[
            { i: 'database',  l: 'EHR integration', d: 'Kipu Health · last sync 12 min ago', status: 'Connected', tone: 'moss' },
            { i: 'credit-card', l: 'Billing', d: '$0 · pilot quarter 2 of 4', status: 'Pilot', tone: 'brass' },
            { i: 'list-checks', l: 'Audit log', d: '14,892 entries · last 30 days', status: 'View', tone: 'oat' },
          ].map((c, i) => (
            <div key={i} style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
                                  borderRadius: 4, padding: '18px 20px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
                            marginBottom: 12 }}>
                <WI name={c.i} size={22} color="var(--color-ivy)"/>
                <WP tone={c.tone} dot={c.tone !== 'oat'}>{c.status}</WP>
              </div>
              <div style={{ fontSize: 14, fontWeight: 600 }}>{c.l}</div>
              <div style={{ fontSize: 12, color: 'var(--fg-tertiary)', marginTop: 4 }}>{c.d}</div>
            </div>
          ))}
        </div>
      </div>
    </WShell>
  );
};

window.ProviderB = { V_MemberDetail, V_Analytics, V_Reports, V_Comms, V_Admin };