/* =============================================================
   CoreIQ Office — Expansion part 2
   Clinical (Ironbark) · Customer · Finance · Gov programs · Ops · Admin
   ============================================================= */
const STX2 = { "S-001": "var(--teal-700)", "S-002": "var(--navy-600)", "S-003": "var(--violet-600)" };

// =================================================================
// CLINICAL — Ironbark AI console
// =================================================================
function Ironbark() {
  const [tab, setTab] = React.useState("console");

  return (
    <window.Screen eyebrow="Clinical · AI assistant" title="Ironbark"
      activeTab={tab} onTab={setTab}
      subtabs={[
        {k:"console", l:"Console"},
        {k:"reviews", l:"Pharmacist reviews", badge:6, badgeColor:'var(--hold)'},
        {k:"interactions", l:"Drug interactions"},
        {k:"audit", l:"Clinical audit"},
      ]}
      actions={<>
        <span className="badge badge--brand"><span className="badge-dot"/> Live · 14 stores connected</span>
        <button className="btn btn--ghost btn--sm">Model · v3.2</button>
      </>}>
      {tab === "console" && <IronbarkConsole/>}
      {tab === "reviews" && <IronbarkReviews/>}
      {tab === "interactions" && <IronbarkInteractions/>}
      {tab === "audit" && <IronbarkAudit/>}
    </window.Screen>
  );
}

function IronbarkConsole() {
  return (
    <>
      <div className="off-kpi-grid">
        <window.KpiCard label="Reviews today" value="184" delta={{dir:"up", text:"▲ 12% vs avg"}}/>
        <window.KpiCard label="Flagged for pharmacist" value="6" delta={{dir:"down", text:"Awaiting review"}}/>
        <window.KpiCard label="Interactions detected" value="22" delta={{text:"3 high severity"}}/>
        <window.KpiCard label="Model confidence" value="94.2%" delta={{dir:"up", text:"Across all reviews"}}/>
      </div>

      <div className="off-card" style={{padding:0, overflow:'hidden'}}>
        <div style={{padding:'18px 22px', background:'linear-gradient(135deg, var(--navy-900), var(--navy-800))', color:'#fff', borderBottom:'1px solid var(--border)'}}>
          <div style={{display:'flex', alignItems:'center', gap:12}}>
            <div style={{width:44, height:44, borderRadius:11, background:'var(--teal-500)', color:'var(--navy-950)', display:'grid', placeItems:'center', fontWeight:600, fontSize:18}}>IB</div>
            <div>
              <div style={{fontSize:18, fontWeight:600, letterSpacing:'-0.015em'}}>Ironbark · Clinical decision support</div>
              <div style={{fontSize:13, color:'rgba(255,255,255,0.65)', marginTop:2}}>AI-assisted Rx review · drug interactions · allergy checks · dose verification</div>
            </div>
          </div>
        </div>
        <div style={{padding:'18px 22px'}}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:14}}>
            <div>
              <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500, marginBottom:6}}>Today's activity</div>
              <div style={{display:'flex', flexDirection:'column', gap:6, fontSize:13}}>
                <div style={{display:'flex', justifyContent:'space-between'}}><span>Rx reviewed</span><strong>184</strong></div>
                <div style={{display:'flex', justifyContent:'space-between'}}><span>Auto-cleared</span><strong style={{color:'var(--paid-text)'}}>156</strong></div>
                <div style={{display:'flex', justifyContent:'space-between'}}><span>Pharmacist verify</span><strong style={{color:'var(--hold-text)'}}>22</strong></div>
                <div style={{display:'flex', justifyContent:'space-between'}}><span>Flagged · escalated</span><strong style={{color:'var(--void-text)'}}>6</strong></div>
              </div>
            </div>
            <div>
              <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500, marginBottom:6}}>Top alerts</div>
              <div style={{display:'flex', flexDirection:'column', gap:6, fontSize:13}}>
                <div style={{display:'flex', justifyContent:'space-between'}}><span>Drug-drug interactions</span><strong>22</strong></div>
                <div style={{display:'flex', justifyContent:'space-between'}}><span>Allergy mismatch</span><strong>4</strong></div>
                <div style={{display:'flex', justifyContent:'space-between'}}><span>Dose outside range</span><strong>8</strong></div>
                <div style={{display:'flex', justifyContent:'space-between'}}><span>Duplicate therapy</span><strong>14</strong></div>
              </div>
            </div>
            <div>
              <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500, marginBottom:6}}>Model performance</div>
              <div style={{display:'flex', flexDirection:'column', gap:6, fontSize:13}}>
                <div style={{display:'flex', justifyContent:'space-between'}}><span>Confidence</span><strong>94.2%</strong></div>
                <div style={{display:'flex', justifyContent:'space-between'}}><span>Pharmacist agreement</span><strong style={{color:'var(--paid-text)'}}>98.4%</strong></div>
                <div style={{display:'flex', justifyContent:'space-between'}}><span>False positives</span><strong>1.2%</strong></div>
                <div style={{display:'flex', justifyContent:'space-between'}}><span>Latency p95</span><strong className="off-mono">340ms</strong></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="off-card" style={{marginTop:14}}>
        <h3 className="off-card-title">Live activity feed</h3>
        <div style={{display:'flex', flexDirection:'column', gap:0}}>
          {[
            {ts:"14:32:18", patient:"Mei Tan", store:"S-001", action:"Metformin XR + Atorvastatin · cleared (no interaction)", kind:"ok"},
            {ts:"14:28:48", patient:"Henry Whitlock", store:"S-001", action:"Endone + sertraline · flagged · serotonin syndrome risk", kind:"flag"},
            {ts:"14:18:22", patient:"Jordan Riley", store:"S-001", action:"Metformin XR · dose verified for renal function", kind:"ok"},
            {ts:"14:12:08", patient:"Ana Costa", store:"S-003", action:"Endone · S8 + Codeine allergy match · pharmacist hold", kind:"flag"},
            {ts:"14:08:18", patient:"Sam Wakefield", store:"S-001", action:"Ventolin · counsel script — first-time inhaler", kind:"counsel"},
            {ts:"13:58:42", patient:"Priya Sharma", store:"S-001", action:"Sertraline · standard refill cleared", kind:"ok"},
            {ts:"13:48:14", patient:"Layla Khoury", store:"S-001", action:"Amoxicillin · paediatric dose verified (12yo, 32kg)", kind:"ok"},
            {ts:"13:42:28", patient:"Beatrix Lim", store:"S-002", action:"Esomeprazole · stock low — alternative suggested", kind:"info"},
          ].map((e, i) => (
            <div key={i} style={{display:'flex', alignItems:'flex-start', gap:12, padding:'10px 0', borderBottom: i < 7 ? '1px solid var(--border-subtle)' : 'none'}}>
              <div style={{
                width:28, height:28, borderRadius:7,
                background: e.kind === "flag" ? 'var(--void-bg)' : e.kind === "counsel" ? 'var(--brand-bg)' : e.kind === "info" ? 'var(--hold-bg)' : 'var(--paid-bg)',
                color: e.kind === "flag" ? 'var(--void)' : e.kind === "counsel" ? 'var(--brand)' : e.kind === "info" ? 'var(--hold)' : 'var(--paid)',
                display:'grid', placeItems:'center', flexShrink:0,
              }}>
                <OIcon name={e.kind === "flag" ? "alert" : e.kind === "counsel" ? "user" : "check"} width={13} height={13}/>
              </div>
              <div style={{flex:1, fontSize:13}}>
                <div><strong>{e.patient}</strong> <span className="off-muted">· {findS(e.store)?.code}</span></div>
                <div className="off-muted" style={{fontSize:12, marginTop:1}}>{e.action}</div>
              </div>
              <div className="off-mono off-muted" style={{fontSize:11}}>{e.ts}</div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

function IronbarkReviews() {
  const FLAGGED = [
    {rx:"rx-905-002", patient:"Mei Tan", drug:"Endone 5mg + Sertraline 50mg", issue:"Serotonin syndrome risk", severity:"high", flagged:"14:28", store:"S-001"},
    {rx:"rx-902-118", patient:"Ana Costa", drug:"Endone 5mg", issue:"Patient codeine allergy on file", severity:"high", flagged:"12:30", store:"S-003"},
    {rx:"rx-908-227", patient:"Henry Whitlock", drug:"Esomeprazole + Clopidogrel", issue:"Reduced antiplatelet effect", severity:"moderate", flagged:"13:55", store:"S-001"},
    {rx:"rx-911-008", patient:"Henry Whitlock", drug:"Insulin Glargine", issue:"Dose increased 40% — verify with prescriber", severity:"moderate", flagged:"11:42", store:"S-001"},
    {rx:"rx-912-118", patient:"Beatrix Lim", drug:"Esomeprazole", issue:"3rd refill within 30 days — over-supply", severity:"low", flagged:"14:22", store:"S-002"},
    {rx:"rx-913-040", patient:"Ramy Khoury", drug:"Metformin XR", issue:"First dispense — counsel required", severity:"low", flagged:"13:30", store:"S-001"},
  ];

  return (
    <div className="off-table">
      <div className="off-grid" style={{gridTemplateColumns:'130px 1fr 1.6fr 1.4fr 100px 80px 100px 110px'}}>
        <div className="off-grid-headcell">Rx</div>
        <div className="off-grid-headcell">Patient</div>
        <div className="off-grid-headcell">Drug</div>
        <div className="off-grid-headcell">Clinical issue</div>
        <div className="off-grid-headcell">Severity</div>
        <div className="off-grid-headcell">Store</div>
        <div className="off-grid-headcell">Flagged</div>
        <div className="off-grid-headcell">Action</div>
        {FLAGGED.map(f => (
          <div key={f.rx} className="off-grid-row">
            <div className="off-grid-cell off-cell-mono">{f.rx}</div>
            <div className="off-grid-cell off-cell-strong">{f.patient}</div>
            <div className="off-grid-cell">{f.drug}</div>
            <div className="off-grid-cell">{f.issue}</div>
            <div className="off-grid-cell">
              {f.severity === "high"     && <window.StatusPill kind="void" label="High"/>}
              {f.severity === "moderate" && <window.StatusPill kind="hold" label="Moderate"/>}
              {f.severity === "low"      && <window.StatusPill kind="brand" label="Low"/>}
            </div>
            <div className="off-grid-cell off-mono">{findS(f.store)?.code}</div>
            <div className="off-grid-cell off-cell-mono off-muted">{f.flagged}</div>
            <div className="off-grid-cell"><button className="btn btn--primary btn--sm">Review</button></div>
          </div>
        ))}
      </div>
    </div>
  );
}

function IronbarkInteractions() {
  return (
    <div className="off-card">
      <h3 className="off-card-title">Top drug-drug interactions flagged · 30 days</h3>
      <div className="off-grid" style={{gridTemplateColumns:'1.4fr 1.4fr 110px 110px 100px'}}>
        <div className="off-grid-headcell">Drug A</div>
        <div className="off-grid-headcell">Drug B</div>
        <div className="off-grid-headcell">Severity</div>
        <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Flagged · 30d</div>
        <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>% blocked</div>
        {[
          {a:"Warfarin", b:"NSAIDs (ibuprofen)", sev:"high", n:48, blocked:84},
          {a:"Sertraline", b:"Tramadol / opioid", sev:"high", n:38, blocked:92},
          {a:"Clopidogrel", b:"Esomeprazole", sev:"moderate", n:62, blocked:42},
          {a:"ACE inhibitor", b:"NSAIDs", sev:"moderate", n:54, blocked:38},
          {a:"Metformin", b:"Contrast media", sev:"moderate", n:18, blocked:88},
          {a:"Statin", b:"Macrolide antibiotic", sev:"moderate", n:24, blocked:32},
          {a:"Codeine", b:"Sedatives", sev:"high", n:14, blocked:96},
          {a:"Lithium", b:"NSAIDs / diuretics", sev:"high", n:8, blocked:100},
        ].map((r, i) => (
          <div key={i} className="off-grid-row">
            <div className="off-grid-cell off-cell-strong">{r.a}</div>
            <div className="off-grid-cell off-cell-strong">{r.b}</div>
            <div className="off-grid-cell">
              {r.sev === "high" ? <window.StatusPill kind="void" label="High"/> : <window.StatusPill kind="hold" label="Moderate"/>}
            </div>
            <div className="off-grid-cell off-cell-num">{r.n}</div>
            <div className="off-grid-cell off-cell-num" style={{color: r.blocked > 80 ? 'var(--paid-text)' : 'var(--hold-text)'}}>{r.blocked}%</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function IronbarkAudit() {
  return (
    <div className="off-empty" style={{padding:60, background:'var(--surface)', border:'1px solid var(--border)', borderRadius:12}}>
      <div className="empty-icon"><OIcon name="info" width={22} height={22}/></div>
      <div style={{fontSize:16, fontWeight:600}}>Clinical audit trail</div>
      <div className="off-muted" style={{fontSize:13, textAlign:'center', maxWidth:'52ch'}}>Every Ironbark decision is logged with model version, confidence, source citations, and pharmacist agreement / override. Filterable by drug, patient, severity, and time range. PSA-audit ready.</div>
    </div>
  );
}

// =================================================================
// CLINICAL — Vaccinations / AIR
// =================================================================
function Vaccinations() {
  return (
    <window.Screen eyebrow="Clinical · vaccinations · AIR" title="Vaccinations &amp; AIR"
      actions={<>
        <button className="btn btn--secondary btn--sm"><OIcon name="transfer"/> Sync to AIR</button>
        <button className="btn btn--primary btn--sm"><OIcon name="plus"/> Record vaccination</button>
      </>}>
      <div className="off-kpi-grid">
        <window.KpiCard label="Vaccinations · 30d" value="312" delta={{dir:"up", text:"▲ 28% pre-flu season"}}/>
        <window.KpiCard label="AIR uploaded" value="100%" delta={{dir:"up", text:"All synced within 24h"}}/>
        <window.KpiCard label="Flu shots · season" value="2,814" delta={{text: "67% of 4,200 issued vouchers"}}/>
        <window.KpiCard label="Adverse events" value="2" delta={{dir:"down", text:"Both mild · TGA reported"}}/>
      </div>

      <div className="off-card">
        <h3 className="off-card-title">Recent vaccinations</h3>
        <div className="off-grid" style={{gridTemplateColumns:'110px 1fr 1.2fr 1fr 90px 100px 110px'}}>
          <div className="off-grid-headcell">When</div>
          <div className="off-grid-headcell">Patient</div>
          <div className="off-grid-headcell">Vaccine · batch</div>
          <div className="off-grid-headcell">Vaccinator</div>
          <div className="off-grid-headcell">Store</div>
          <div className="off-grid-headcell">Program</div>
          <div className="off-grid-headcell">AIR</div>
          {[
            {ts:"Today 14:18", p:"Mei Tan", v:"Influenza quadrivalent · CSL-A4422", who:"Suni K.", store:"S-001", prog:"Voucher · Camberwell Aged"},
            {ts:"Today 11:48", p:"Henry Whitlock", v:"COVID booster · Moderna-B118", who:"Suni K.", store:"S-001", prog:"Federal"},
            {ts:"Today 10:14", p:"Jordan Riley", v:"Influenza quadrivalent · CSL-A4422", who:"Rachel P.", store:"S-001", prog:"Self-funded"},
            {ts:"Today 09:48", p:"Beatrix Lim", v:"Hep A · Avaxim-V42", who:"James L.", store:"S-003", prog:"Travel · Bridgewater"},
            {ts:"Yesterday", p:"Ana Costa", v:"Influenza quadrivalent · CSL-A4422", who:"Rachel P.", store:"S-002", prog:"Voucher · Glen Iris Day"},
            {ts:"Yesterday", p:"Priya Sharma", v:"Influenza quadrivalent · CSL-A4422", who:"Suni K.", store:"S-001", prog:"NIP eligible"},
          ].map((v, i) => (
            <div key={i} className="off-grid-row">
              <div className="off-grid-cell off-cell-mono off-muted">{v.ts}</div>
              <div className="off-grid-cell off-cell-strong">{v.p}</div>
              <div className="off-grid-cell">{v.v}</div>
              <div className="off-grid-cell">{v.who}</div>
              <div className="off-grid-cell off-mono">{findS(v.store)?.code}</div>
              <div className="off-grid-cell"><span className="badge badge--neutral">{v.prog}</span></div>
              <div className="off-grid-cell"><window.StatusPill kind="paid" label="Uploaded"/></div>
            </div>
          ))}
        </div>
      </div>
    </window.Screen>
  );
}

// =================================================================
// CLINICAL — MedsCheck & services
// =================================================================
function ServicesLog() {
  return (
    <window.Screen eyebrow="Clinical · services" title="MedsCheck &amp; services log"
      actions={<>
        <button className="btn btn--ghost btn--sm">Export PPA claims</button>
        <button className="btn btn--primary btn--sm"><OIcon name="plus"/> New service</button>
      </>}>
      <div className="off-kpi-grid">
        <window.KpiCard label="Services · MTD" value="248" delta={{dir:"up", text:"▲ 14%"}}/>
        <window.KpiCard label="MedsChecks" value="86" delta={{text:"6CPA claim eligible"}}/>
        <window.KpiCard label="Diabetes MedsChecks" value="22" delta={{text:"Higher 6CPA reimbursement"}}/>
        <window.KpiCard label="Revenue · services" value={oMoney(18420)} delta={{dir:"up", text:"PPA + private"}}/>
      </div>
      <div className="off-card">
        <h3 className="off-card-title">Recent services</h3>
        <div className="off-grid" style={{gridTemplateColumns:'110px 1fr 1.2fr 1fr 100px 100px 110px'}}>
          <div className="off-grid-headcell">When</div>
          <div className="off-grid-headcell">Patient</div>
          <div className="off-grid-headcell">Service</div>
          <div className="off-grid-headcell">Pharmacist</div>
          <div className="off-grid-headcell">Store</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Fee</div>
          <div className="off-grid-headcell">PPA claim</div>
          {[
            {ts:"Today 14:00", p:"Mei Tan", svc:"Diabetes MedsCheck", who:"Suni K.", store:"S-001", fee:140.00, claim:"submitted"},
            {ts:"Today 11:48", p:"Henry Whitlock", svc:"MedsCheck (standard)", who:"Suni K.", store:"S-001", fee:90.00, claim:"submitted"},
            {ts:"Today 10:14", p:"Ana Costa", svc:"Home Medicines Review (HMR)", who:"Rachel P.", store:"S-002", fee:215.00, claim:"approved"},
            {ts:"Yesterday", p:"Jordan Riley", svc:"Diabetes MedsCheck", who:"James L.", store:"S-003", fee:140.00, claim:"approved"},
            {ts:"Yesterday", p:"Sam Wakefield", svc:"Inhaler technique counsel", who:"Suni K.", store:"S-001", fee:0, claim:"—"},
            {ts:"24/05/2026", p:"Priya Sharma", svc:"MedsCheck (standard)", who:"Rachel P.", store:"S-001", fee:90.00, claim:"paid"},
            {ts:"22/05/2026", p:"Nadia Khoury", svc:"DAA setup · weekly", who:"Suni K.", store:"S-001", fee:46.00, claim:"paid"},
          ].map((s, i) => (
            <div key={i} className="off-grid-row">
              <div className="off-grid-cell off-cell-mono off-muted">{s.ts}</div>
              <div className="off-grid-cell off-cell-strong">{s.p}</div>
              <div className="off-grid-cell">{s.svc}</div>
              <div className="off-grid-cell">{s.who}</div>
              <div className="off-grid-cell off-mono">{findS(s.store)?.code}</div>
              <div className="off-grid-cell off-cell-num">{s.fee > 0 ? oMoney(s.fee) : "—"}</div>
              <div className="off-grid-cell">
                {s.claim === "submitted" && <window.StatusPill kind="hold" label="Submitted"/>}
                {s.claim === "approved"  && <window.StatusPill kind="brand" label="Approved"/>}
                {s.claim === "paid"      && <window.StatusPill kind="paid" label="Paid"/>}
                {s.claim === "—"         && <span className="off-muted">—</span>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </window.Screen>
  );
}

// =================================================================
// CLINICAL — Patient medication profiles
// =================================================================
function MedicationProfiles() {
  return (
    <window.Screen eyebrow="Clinical · profiles" title="Patient medication profiles"
      actions={<>
        <button className="btn btn--ghost btn--sm">Export · de-identified</button>
      </>}>
      <div style={{display:'grid', gridTemplateColumns:'320px 1fr', gap:14}}>
        <div className="off-card" style={{padding:0, overflow:'hidden'}}>
          <div style={{padding:'12px 14px', borderBottom:'1px solid var(--border)', background:'var(--bg-subtle)'}}>
            <div className="input-wrap">
              <OIcon name="search" className="input-wrap-icon"/>
              <input className="input" placeholder="Search patient…" style={{height:32, fontSize:13}}/>
            </div>
          </div>
          {[
            {init:"MT", name:"Mei Tan", meds:4, profile:"Diabetes T2 + statin"},
            {init:"JR", name:"Jordan Riley", meds:2, profile:"Webster pack"},
            {init:"AC", name:"Ana Costa", meds:6, profile:"Polypharmacy · S8 active"},
            {init:"HW", name:"Henry Whitlock", meds:9, profile:"Cardiovascular + diabetes"},
            {init:"PS", name:"Priya Sharma", meds:3, profile:"Mental health"},
          ].map((p, i) => (
            <div key={i} style={{padding:'12px 14px', display:'flex', alignItems:'center', gap:10, borderBottom:'1px solid var(--border-subtle)', cursor:'pointer', background: i === 0 ? 'var(--brand-bg)' : 'transparent'}}>
              <div className="off-side-user-av" style={{width:30, height:30, background:'var(--brand)', color:'#fff', fontSize:11}}>{p.init}</div>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontWeight:500, fontSize:13}}>{p.name}</div>
                <div className="off-cell-mono off-muted" style={{fontSize:11}}>{p.meds} active meds · {p.profile}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="off-card" style={{padding:0, overflow:'hidden'}}>
          <div style={{padding:'18px 22px', borderBottom:'1px solid var(--border)', display:'flex', alignItems:'center', gap:14}}>
            <div className="off-side-user-av" style={{width:48, height:48, background:'var(--brand)', color:'#fff', fontSize:16}}>MT</div>
            <div style={{flex:1}}>
              <div style={{fontSize:18, fontWeight:600, letterSpacing:'-0.01em'}}>Mei Tan</div>
              <div className="off-cell-mono off-muted" style={{fontSize:12, marginTop:2}}>DOB 14/03/1962 · MED ****72-1 · Type 2 diabetes since 2014</div>
            </div>
            <div style={{display:'flex', gap:6}}>
              <span className="badge badge--void"><span className="badge-dot"/> Allergies</span>
              <span className="badge badge--brand">Diabetes</span>
            </div>
          </div>

          <div style={{padding:'16px 22px', display:'flex', flexDirection:'column', gap:12}}>
            <div>
              <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500, marginBottom:8}}>Allergies</div>
              <div style={{padding:'10px 14px', background:'var(--void-bg)', borderRadius:8, fontSize:13, color:'var(--void-text)'}}>
                <strong>Penicillin (rash · 2008)</strong> · <strong>Sulfonamides (flagged 2023)</strong>
              </div>
            </div>

            <div>
              <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500, marginBottom:8}}>Active medications</div>
              <div className="off-grid" style={{gridTemplateColumns:'1.4fr 80px 1fr 130px 130px', border:'1px solid var(--border)', borderRadius:8, overflow:'hidden'}}>
                <div className="off-grid-headcell">Drug</div>
                <div className="off-grid-headcell">Sched</div>
                <div className="off-grid-headcell">Sig</div>
                <div className="off-grid-headcell">Started</div>
                <div className="off-grid-headcell">Last filled</div>
                {[
                  {d:"Metformin XR 500mg", s:"S4", sig:"1 nocte with food", st:"2014", lf:"Today"},
                  {d:"Atorvastatin 40mg", s:"S4", sig:"1 nocte", st:"2018", lf:"22/05/2026"},
                  {d:"Esomeprazole 20mg", s:"S4", sig:"1 mane 30 min ac", st:"2020", lf:"15/05/2026"},
                  {d:"Multivitamin", s:"—", sig:"1 daily", st:"2022", lf:"01/05/2026"},
                ].map((m, i) => (
                  <div key={i} className="off-grid-row">
                    <div className="off-grid-cell off-cell-strong">{m.d}</div>
                    <div className="off-grid-cell">{m.s !== "—" && <window.SchedBadge schedule={m.s} compact/>}</div>
                    <div className="off-grid-cell off-muted">{m.sig}</div>
                    <div className="off-grid-cell off-cell-mono off-muted">{m.st}</div>
                    <div className="off-grid-cell off-cell-mono">{m.lf}</div>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500, marginBottom:8}}>Services received</div>
              <div style={{fontSize:13, color:'var(--text-muted)'}}>
                Diabetes MedsCheck · today (Suni Kapoor) · Influenza vaccination · today · MedsCheck (standard) · 18/04/2026
              </div>
            </div>
          </div>
        </div>
      </div>
    </window.Screen>
  );
}

// =================================================================
// CUSTOMER — Unified profiles, scripts on file, comms preferences
// =================================================================
function CustomerProfiles() {
  return (
    <window.Screen eyebrow="Customer · unified profiles" title="Customer profiles"
      actions={<>
        <button className="btn btn--ghost btn--sm">Export · GDPR-compliant</button>
        <button className="btn btn--primary btn--sm"><OIcon name="plus"/> New customer</button>
      </>}>
      <div className="off-kpi-grid">
        <window.KpiCard label="Total customers" value="10,034" delta={{dir:"up", text:"Across all stores"}}/>
        <window.KpiCard label="Unified profiles" value="98.2%" delta={{text:"Cross-store match rate"}}/>
        <window.KpiCard label="Active (90d)" value="6,212" delta={{dir:"up", text:"+4.1% MoM"}}/>
        <window.KpiCard label="Marketing consent" value="62%" delta={{text:"SMS or email opt-in"}}/>
      </div>
      <div className="off-table">
        <div className="off-grid" style={{gridTemplateColumns:'40px 1.2fr 1fr 110px 100px 130px 120px'}}>
          <div className="off-grid-headcell"></div>
          <div className="off-grid-headcell">Name</div>
          <div className="off-grid-headcell">Medicare · DOB</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Scripts</div>
          <div className="off-grid-headcell">Home store</div>
          <div className="off-grid-headcell">Consent</div>
          <div className="off-grid-headcell">Last visit</div>
          {OD.PATIENTS.map(p => (
            <div key={p.id} className="off-grid-row">
              <div className="off-grid-cell"><div className="off-side-user-av" style={{width:26, height:26, background:'var(--brand)', color:'#fff', fontSize:10}}>{(p.first[0]+p.last[0]).toUpperCase()}</div></div>
              <div className="off-grid-cell off-cell-strong">{p.first} {p.last}</div>
              <div className="off-grid-cell off-cell-mono off-muted">{p.medicare}</div>
              <div className="off-grid-cell off-cell-num">{p.scripts}</div>
              <div className="off-grid-cell off-mono">{p.id === "u03" || p.id === "u09" ? "S-001" : "S-001"}</div>
              <div className="off-grid-cell" style={{display:'flex', gap:4}}>
                <span className="badge badge--paid" style={{fontSize:10}}>SMS</span>
                {p.id !== "u04" && <span className="badge badge--paid" style={{fontSize:10}}>Email</span>}
              </div>
              <div className="off-grid-cell off-mono off-muted">{p.lastVisit}</div>
            </div>
          ))}
        </div>
      </div>
    </window.Screen>
  );
}

function ScriptsOnFile() {
  return (
    <window.Screen eyebrow="Customer · scripts on file" title="Scripts on file (eScript &amp; repeats)"
      actions={<><button className="btn btn--primary btn--sm">Export</button></>}>
      <div className="off-kpi-grid">
        <window.KpiCard label="Active eScripts" value="3,840" delta={{dir:"up", text:"Across customer base"}}/>
        <window.KpiCard label="Repeats remaining" value="11,420" delta={{text:"Sum of all repeats"}}/>
        <window.KpiCard label="Authority required" value="184" delta={{text:"Currently pending"}}/>
        <window.KpiCard label="Expiring under 30d" value="42" delta={{dir:"down", text:"Auto-SMS to renew"}}/>
      </div>
      <div className="off-table">
        <div className="off-grid" style={{gridTemplateColumns:'130px 1fr 1.4fr 80px 130px 130px 100px'}}>
          <div className="off-grid-headcell">Rx</div>
          <div className="off-grid-headcell">Patient</div>
          <div className="off-grid-headcell">Drug</div>
          <div className="off-grid-headcell">Repeats</div>
          <div className="off-grid-headcell">Prescriber</div>
          <div className="off-grid-headcell">Expiry</div>
          <div className="off-grid-headcell">Status</div>
          {OD.SCRIPTS.slice(0, 8).map(s => {
            const p = findP(s.productId);
            const pat = OD.PATIENTS.find(x => x.id === s.patientId);
            return (
              <div key={s.id} className="off-grid-row">
                <div className="off-grid-cell off-cell-mono">{s.id}</div>
                <div className="off-grid-cell off-cell-strong">{pat?.first} {pat?.last}</div>
                <div className="off-grid-cell">{p?.name} {p?.strength}</div>
                <div className="off-grid-cell off-cell-num">{s.repeats.used}/{s.repeats.total}</div>
                <div className="off-grid-cell off-muted">{s.prescriber}</div>
                <div className="off-grid-cell off-cell-mono off-muted">12 months from {s.written}</div>
                <div className="off-grid-cell">
                  {s.status === "dispensed" ? <window.StatusPill kind="paid" label="Dispensed"/> :
                   s.status === "ready"     ? <window.StatusPill kind="paid" label="Ready"/> :
                   <window.StatusPill kind="hold" label="Pending"/>}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </window.Screen>
  );
}

function CommsPreferences() {
  return (
    <window.Screen eyebrow="Customer · consent &amp; comms" title="Communication preferences"
      actions={<><button className="btn btn--ghost btn--sm">Export consent log</button></>}>
      <div className="off-kpi-grid">
        <window.KpiCard label="SMS opt-in" value="68%" delta={{text:"of customer base"}}/>
        <window.KpiCard label="Email opt-in" value="42%" delta={{text:"Marketing consent"}}/>
        <window.KpiCard label="Pickup-ready SMS" value="98%" delta={{text:"Transactional · default on"}}/>
        <window.KpiCard label="Opt-outs · 30d" value="14" delta={{dir:"down", text:"Below normal range"}}/>
      </div>
      <div className="off-table">
        <div className="off-grid" style={{gridTemplateColumns:'40px 1fr 110px 130px 130px 130px 130px'}}>
          <div className="off-grid-headcell"></div>
          <div className="off-grid-headcell">Customer</div>
          <div className="off-grid-headcell">Phone</div>
          <div className="off-grid-headcell">Pickup SMS</div>
          <div className="off-grid-headcell">Repeat SMS</div>
          <div className="off-grid-headcell">Promo SMS</div>
          <div className="off-grid-headcell">Marketing email</div>
          {OD.PATIENTS.map(p => (
            <div key={p.id} className="off-grid-row">
              <div className="off-grid-cell"><div className="off-side-user-av" style={{width:26, height:26, background:'var(--brand)', color:'#fff', fontSize:10}}>{(p.first[0]+p.last[0]).toUpperCase()}</div></div>
              <div className="off-grid-cell off-cell-strong">{p.first} {p.last}</div>
              <div className="off-grid-cell off-cell-mono">{p.phone}</div>
              <div className="off-grid-cell"><window.StatusPill kind="paid" label="On"/></div>
              <div className="off-grid-cell"><window.StatusPill kind={p.id === "u04" ? "neutral" : "paid"} label={p.id === "u04" ? "Off" : "On"}/></div>
              <div className="off-grid-cell"><window.StatusPill kind={p.id === "u04" || p.id === "u08" ? "neutral" : "paid"} label={p.id === "u04" || p.id === "u08" ? "Off" : "On"}/></div>
              <div className="off-grid-cell"><window.StatusPill kind={p.id === "u04" || p.id === "u05" ? "neutral" : "paid"} label={p.id === "u04" || p.id === "u05" ? "Off" : "On"}/></div>
            </div>
          ))}
        </div>
      </div>
    </window.Screen>
  );
}

window.OFFICE_SCREENS = Object.assign(window.OFFICE_SCREENS || {}, {
  ironbark: Ironbark,
  vaccinations: Vaccinations,
  servicesLog: ServicesLog,
  medProfiles: MedicationProfiles,
  customerProfiles: CustomerProfiles,
  scriptsOnFile: ScriptsOnFile,
  commsPrefs: CommsPreferences,
});