// screens.jsx — DebtLift screen library
// Uses: Icon, Card, SectionHeader, QuickAction, NavRow, Currency, ProgressBar, StatusPill (from components.jsx)
//
// DATA SHAPE: All screens read from window.DL_DATA, a mutable object populated by
// app.jsx after the API loads. The default empty shell is set up in api.jsx so
// references don't throw if a screen tries to render before data arrives.

const DL_DATA = window.DL_DATA;

// ─────────────────────────────────────────────────────────────
// Top bar — sits on canvas (no status bar; iOS frame handles that)
// ─────────────────────────────────────────────────────────────
function TopGreeting({ theme, onProfile, onNotifs, unread = 2 }) {
  const d = DL_DATA;
  return (
    <div style={{
      padding: '54px 20px 6px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <button onClick={onProfile} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          width: 38, height: 38, borderRadius: 99,
          background: theme.surface, color: theme.onSurface,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 13, fontWeight: 600, letterSpacing: 0.5,
          border: `1px solid ${theme.surface2}`,
        }}>{d.client.avatarInitials}</div>
        <div style={{ textAlign: 'left' }}>
          <div style={{ fontSize: 11, color: theme.inkMute, fontWeight: 500, letterSpacing: 0.4 }}>Good morning</div>
          <div style={{ fontSize: 14, color: theme.ink, fontWeight: 600, marginTop: 1 }}>{d.client.first}</div>
        </div>
      </button>
      <button onClick={onNotifs} style={{
        position: 'relative',
        width: 38, height: 38, borderRadius: 12,
        background: theme.canvas2, border: `1px solid ${theme.rule}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center', color: theme.ink,
      }}>
        <Icon name="bell" size={18} color={theme.ink}/>
        {unread > 0 && <span style={{
          position: 'absolute', top: 6, right: 6,
          width: 7, height: 7, borderRadius: 99, background: '#B5481D',
          border: `1.5px solid ${theme.canvas}`,
        }}/>}
      </button>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// HOME SCREEN
// ─────────────────────────────────────────────────────────────
function HomeScreen({ theme, serif, onTab, onLender, onPay, onMsg, onProfile, onActivity, onDocs }) {
  const d = DL_DATA;
  const t = d.totals;
  return (
    <div className="scroll" style={{
      height: '100%', overflowY: 'auto', overflowX: 'hidden',
      background: theme.canvas, paddingBottom: 110,
    }}>
      <TopGreeting theme={theme} onProfile={onProfile} onNotifs={() => onTab('activity')}/>

      {/* business badge */}
      <div style={{ padding: '6px 20px 14px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{
            width: 18, height: 18, borderRadius: 5,
            background: theme.surface, color: theme.onSurface,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name="bank" size={11} color={theme.onSurface}/>
          </div>
          <div style={{ fontSize: 13, fontWeight: 600, color: theme.ink, letterSpacing: 0.2 }}>{d.client.biz}</div>
          <div style={{ fontSize: 11, color: theme.inkMute, marginLeft: 'auto' }}>Member · {d.client.code}</div>
        </div>
      </div>

      {/* PWA install card (auto-hides when installed/dismissed) */}
      <PwaInstallCard theme={theme}/>

      {/* Hero — enrolled balance card */}
      <div style={{ padding: '0 20px 18px' }}>
        <div style={{
          background: `linear-gradient(155deg, ${theme.surface2} 0%, ${theme.surface} 55%, ${theme.gradEnd} 115%)`,
          borderRadius: 24,
          padding: '22px 22px 20px',
          color: theme.onSurface,
          position: 'relative', overflow: 'hidden',
          boxShadow: `0 20px 40px -20px ${theme.surface}88`,
        }}>
          {/* engraved monogram */}
          <div aria-hidden style={{
            position: 'absolute', right: -30, top: -30, opacity: 0.07,
            fontFamily: 'Newsreader, serif', fontSize: 180, lineHeight: 1, fontWeight: 400,
            color: theme.onSurface, letterSpacing: -8,
          }}>dl</div>

          <div style={{
            fontSize: 11, color: theme.onSurfaceDim,
            fontWeight: 500, letterSpacing: 1.6, textTransform: 'uppercase',
          }}>Enrolled Balance · MCA</div>

          <div style={{ marginTop: 6, display: 'flex', alignItems: 'flex-end', gap: 10 }}>
            <Currency value={t.enrolled} size={46} serif={serif} theme={theme} color={theme.onSurface}/>
            <div style={{
              marginBottom: 6,
              fontSize: 11, color: theme.onSurfaceMute, letterSpacing: 0.4,
            }}>USD</div>
          </div>

          <div style={{ marginTop: 16 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 7 }}>
              <span style={{ fontSize: 11.5, color: theme.onSurfaceDim, fontWeight: 500 }}>
                Plan progress · month {t.planMonthsDone} of {t.planMonths}
              </span>
              <span className="tnum" style={{ fontSize: 13, color: theme.onSurface, fontWeight: 600 }}>{t.planProgress}%</span>
            </div>
            <ProgressBar value={t.planProgress} theme={theme} color={theme.accent.solid}/>
          </div>

          {/* savings inset */}
          <div style={{
            marginTop: 18,
            display: 'grid', gridTemplateColumns: '1fr 1fr',
            gap: 0,
            borderTop: `1px solid rgba(245,240,230,0.12)`,
            paddingTop: 14,
          }}>
            <div>
              <div style={{ fontSize: 10, color: theme.onSurfaceMute, letterSpacing: 1.2, textTransform: 'uppercase', fontWeight: 500 }}>Settled</div>
              <div className="tnum" style={{ fontSize: 17, fontWeight: 600, marginTop: 4, color: theme.onSurface, fontFamily: serif ? 'Newsreader, serif' : 'inherit', fontWeight: serif ? 500 : 600 }}>
                <span style={{ opacity: 0.55, marginRight: 1 }}>$</span>{t.settled.toLocaleString()}
              </div>
            </div>
            <div style={{ borderLeft: `1px solid rgba(245,240,230,0.12)`, paddingLeft: 16 }}>
              <div style={{ fontSize: 10, color: theme.onSurfaceMute, letterSpacing: 1.2, textTransform: 'uppercase', fontWeight: 500 }}>You've Saved</div>
              <div className="tnum" style={{ fontSize: 17, marginTop: 4, color: theme.accent.solid === '#9B6B2F' ? '#E2B57E' : (theme.accent.solid === '#7A2638' ? '#D89BAA' : '#8FCAA4'), fontFamily: serif ? 'Newsreader, serif' : 'inherit', fontWeight: serif ? 500 : 600 }}>
                <span style={{ opacity: 0.7, marginRight: 1 }}>$</span>{t.saved.toLocaleString()}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Quick actions */}
      <div style={{ padding: '4px 16px 20px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 6 }}>
          <QuickAction icon="pay"      label="Pay"        onClick={onPay} theme={theme}/>
          <QuickAction icon="msg"      label="Message"    onClick={onMsg} theme={theme}/>
          <QuickAction icon="doc"      label="Documents"  onClick={onDocs} theme={theme}/>
          <QuickAction icon="contract" label="Statements" onClick={onDocs} theme={theme}/>
          <QuickAction icon="phone"    label="Concierge"  onClick={onProfile} theme={theme}/>
        </div>
      </div>

      {/* Next payment ticket */}
      <div style={{ padding: '0 20px 18px' }}>
        <button onClick={onPay} style={{ width: '100%', textAlign: 'left' }}>
          <Card theme={theme} pad={0}>
            <div style={{ display: 'flex' }}>
              <div style={{
                width: 64,
                background: theme.canvas2,
                borderRight: `1px solid ${theme.rule}`,
                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                padding: '14px 0',
              }}>
                <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: 1.6, textTransform: 'uppercase', color: theme.accent.solid }}>JUN</div>
                <div className="serif tnum" style={{ fontSize: 28, lineHeight: 1, color: theme.ink, marginTop: 4 }}>01</div>
                <div style={{ fontSize: 10, color: theme.inkMute, marginTop: 4 }}>MON</div>
              </div>
              <div style={{ flex: 1, padding: '14px 16px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <div style={{ fontSize: 11, color: theme.inkMute, fontWeight: 500, letterSpacing: 0.4, textTransform: 'uppercase' }}>Next Reserve Payment</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 2 }}>
                  <Currency value={t.nextPayment} size={24} serif={serif} theme={theme}/>
                  <span style={{ fontSize: 12, color: theme.inkMute }}>· Monthly</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 6 }}>
                  <div style={{ width: 5, height: 5, borderRadius: 99, background: theme.accent.solid, flexShrink: 0 }}/>
                  <span style={{ fontSize: 11.5, color: theme.accent.ink, fontWeight: 500, whiteSpace: 'nowrap' }}>Auto-pay · Chase Business ••{DL_DATA.client.bankLast4}</span>
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', paddingRight: 14, color: theme.inkMute }}>
                <Icon name="chevR" size={16} color={theme.inkMute}/>
              </div>
            </div>
          </Card>
        </button>
      </div>

      {/* Lenders */}
      <div style={{ padding: '0 20px 6px' }}>
        <SectionHeader theme={theme} action="View all">Your Lenders</SectionHeader>
        <Card theme={theme} pad={0}>
          {d.lenders.map((l, i) => (
            <button key={l.id} onClick={() => onLender(l)} style={{
              width: '100%', display: 'flex', alignItems: 'center', gap: 14,
              padding: '15px 16px', textAlign: 'left',
              borderBottom: i < d.lenders.length - 1 ? `1px solid ${theme.rule}` : 'none',
            }}>
              <div style={{
                width: 38, height: 38, borderRadius: 11,
                background: theme.canvas2, border: `1px solid ${theme.rule}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, fontWeight: 700, color: theme.ink, letterSpacing: 0.5,
                fontFamily: 'Newsreader, serif',
              }}>{l.short}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: theme.ink, marginBottom: 3 }}>{l.name}</div>
                <div style={{ fontSize: 11.5, color: theme.inkMute }} className="tnum">
                  ${l.balance.toLocaleString()}
                  {l.settlement && <> <span style={{ color: theme.inkMute }}>·</span> <span style={{ color: theme.accent.ink, fontWeight: 500 }}>settled ${l.settlement.toLocaleString()}</span></>}
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6, flexShrink: 0 }}>
                <StatusPill status={l.status} theme={theme}/>
                <Icon name="chevR" size={14} color={theme.inkMute}/>
              </div>
            </button>
          ))}
        </Card>
      </div>

      {/* Recent activity */}
      <div style={{ padding: '18px 20px 0' }}>
        <SectionHeader theme={theme} action="See all">Recent activity</SectionHeader>
        <Card theme={theme} pad={0}>
          {d.activity.slice(0, 3).map((a, i, arr) => (
            <ActivityRow key={a.id} a={a} theme={theme} last={i === arr.length - 1}/>
          ))}
        </Card>
      </div>

      {/* footer mark */}
      <div style={{ padding: '24px 20px 8px', textAlign: 'center' }}>
        <div style={{ fontSize: 10, color: theme.inkMute, letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 500 }}>
          Member · FDIC reserve held at Apex Trust
        </div>
        <div style={{ fontSize: 10, color: theme.inkMute, marginTop: 4 }}>
          Encrypted · TLS 1.3 · App build 4.2.18
        </div>
      </div>
    </div>
  );
}

// activity row (used in home + activity screen)
function ActivityRow({ a, theme, last, compact }) {
  const typeMeta = {
    settled:     { icon: 'check',  color: '#2F6A4F', bg: '#DBE7DC' },
    offer:       { icon: 'spark',  color: '#1F4A8B', bg: '#D9E5F4' },
    payment:     { icon: 'pay',    color: theme.ink, bg: theme.canvas2 },
    message:     { icon: 'msg',    color: '#9B6B2F', bg: '#EFDFC5' },
    negotiation: { icon: 'pulse',  color: '#7A2E11', bg: '#F5DFC9' },
    document:    { icon: 'doc',    color: theme.ink, bg: theme.canvas2 },
  };
  const m = typeMeta[a.type] || typeMeta.message;
  return (
    <div style={{
      display: 'flex', gap: 12, padding: '14px 16px', alignItems: 'flex-start',
      borderBottom: last ? 'none' : `1px solid ${theme.rule}`,
    }}>
      <div style={{
        width: 34, height: 34, borderRadius: 10, flexShrink: 0,
        background: m.bg, color: m.color,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <Icon name={m.icon} size={16} color={m.color}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
          <div style={{ fontSize: 13.5, fontWeight: 600, color: theme.ink, lineHeight: 1.3 }}>{a.title}</div>
          {a.amount && (
            <span className="tnum" style={{
              fontSize: 12.5, fontWeight: 600, color: a.type === 'settled' ? '#2F6A4F' : theme.ink,
              fontFamily: 'Newsreader, serif', whiteSpace: 'nowrap', marginTop: 1,
            }}>
              {a.type === 'settled' || a.type === 'offer' ? '↑ ' : ''}${a.amount.toLocaleString()}
            </span>
          )}
        </div>
        {!compact && (
          <div style={{ fontSize: 12.5, color: theme.inkDim, marginTop: 3, lineHeight: 1.4 }}>{a.body}</div>
        )}
        <div style={{ fontSize: 11, color: theme.inkMute, marginTop: 4 }}>{a.when} · {a.time}</div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ACTIVITY SCREEN
// ─────────────────────────────────────────────────────────────
function ActivityScreen({ theme }) {
  const [filter, setFilter] = React.useState('all');
  const filters = [
    { id: 'all',         label: 'All' },
    { id: 'settled',     label: 'Settled' },
    { id: 'offer',       label: 'Offers' },
    { id: 'negotiation', label: 'Negotiation' },
    { id: 'payment',     label: 'Payments' },
    { id: 'document',    label: 'Documents' },
  ];
  const items = DL_DATA.activity.filter(a => filter === 'all' || a.type === filter);

  return (
    <div className="scroll" style={{
      height: '100%', overflowY: 'auto', background: theme.canvas, paddingBottom: 110,
    }}>
      <div style={{ padding: '54px 20px 8px' }}>
        <div style={{ fontSize: 11, color: theme.inkMute, fontWeight: 500, letterSpacing: 1.6, textTransform: 'uppercase' }}>Casefile</div>
        <h1 className="serif" style={{ fontSize: 32, fontWeight: 400, color: theme.ink, lineHeight: 1, marginTop: 8, letterSpacing: -0.5 }}>
          Activity
        </h1>
        <div style={{ fontSize: 13, color: theme.inkMute, marginTop: 6 }}>Negotiation events on your file, in chronological order.</div>
      </div>

      {/* filter chips */}
      <div className="scroll" style={{ overflowX: 'auto', padding: '14px 16px 6px', display: 'flex', gap: 6 }}>
        {filters.map(f => (
          <button key={f.id} onClick={() => setFilter(f.id)} style={{
            padding: '8px 14px', borderRadius: 99, whiteSpace: 'nowrap',
            fontSize: 12.5, fontWeight: 500,
            background: filter === f.id ? theme.surface : 'transparent',
            color: filter === f.id ? theme.onSurface : theme.inkDim,
            border: `1px solid ${filter === f.id ? theme.surface : theme.rule}`,
          }}>{f.label}</button>
        ))}
      </div>

      {/* group by date */}
      <div style={{ padding: '8px 20px 0' }}>
        {groupByDate(items).map(([day, list]) => (
          <div key={day} style={{ marginTop: 14 }}>
            <div style={{ fontSize: 11, color: theme.inkMute, fontWeight: 600, letterSpacing: 1.4, textTransform: 'uppercase', padding: '4px 4px 8px' }}>{day}</div>
            <Card theme={theme} pad={0}>
              {list.map((a, i) => (
                <ActivityRow key={a.id} a={a} theme={theme} last={i === list.length - 1}/>
              ))}
            </Card>
          </div>
        ))}
        {items.length === 0 && (
          <div style={{ padding: '40px 0', textAlign: 'center', color: theme.inkMute, fontSize: 13 }}>No events for this filter.</div>
        )}
      </div>
    </div>
  );
}

function groupByDate(items) {
  const out = {};
  items.forEach(a => { if (!out[a.when]) out[a.when] = []; out[a.when].push(a); });
  return Object.entries(out);
}

// ─────────────────────────────────────────────────────────────
// PAY SCREEN
// ─────────────────────────────────────────────────────────────
function PayScreen({ theme, serif }) {
  const d = DL_DATA;
  return (
    <div className="scroll" style={{ height: '100%', overflowY: 'auto', background: theme.canvas, paddingBottom: 110 }}>
      <div style={{ padding: '54px 20px 8px' }}>
        <div style={{ fontSize: 11, color: theme.inkMute, fontWeight: 500, letterSpacing: 1.6, textTransform: 'uppercase' }}>Reserve</div>
        <h1 className="serif" style={{ fontSize: 32, fontWeight: 400, color: theme.ink, lineHeight: 1, marginTop: 8, letterSpacing: -0.5 }}>
          Payments
        </h1>
      </div>

      {/* Big next-payment ledger */}
      <div style={{ padding: '14px 20px 18px' }}>
        <div style={{
          background: `linear-gradient(155deg, ${theme.surface2}, ${theme.surface} 70%)`,
          color: theme.onSurface,
          borderRadius: 24, padding: '20px 22px',
          boxShadow: `0 20px 40px -20px ${theme.surface}88`,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase', color: theme.onSurfaceDim, fontWeight: 500 }}>Next contribution</div>
            <div style={{
              padding: '4px 10px', borderRadius: 99,
              background: 'rgba(245,240,230,0.10)', color: theme.onSurface,
              fontSize: 11, fontWeight: 500, letterSpacing: 0.3,
              display: 'flex', alignItems: 'center', gap: 5,
            }}>
              <span style={{ width: 5, height: 5, borderRadius: 99, background: theme.accent.solid }}/>
              Auto-pay on
            </div>
          </div>

          <div style={{ marginTop: 12, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
            <Currency value={d.totals.nextPayment} size={52} serif={serif} theme={theme} color={theme.onSurface}/>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 11, color: theme.onSurfaceMute, fontWeight: 500, letterSpacing: 0.4 }}>DUE</div>
              <div className="serif tnum" style={{ fontSize: 18, color: theme.onSurface, marginTop: 3, whiteSpace: 'nowrap' }}>{d.totals.nextDate}</div>
            </div>
          </div>

          <div style={{ marginTop: 18, borderTop: `1px solid rgba(245,240,230,0.12)`, paddingTop: 14, display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{
              width: 36, height: 36, borderRadius: 10,
              background: 'rgba(245,240,230,0.10)', color: theme.onSurface,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><Icon name="bank" size={18} color={theme.onSurface}/></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: theme.onSurface }}>{d.client.bankBrand}</div>
              <div className="mono" style={{ fontSize: 11, color: theme.onSurfaceMute, marginTop: 2, letterSpacing: 0.5 }}>•••• •••• •••• {d.client.bankLast4}</div>
            </div>
            <button style={{ fontSize: 12, fontWeight: 600, color: theme.onSurface, opacity: 0.75 }}>Change</button>
          </div>
        </div>
      </div>

      {/* Action row */}
      <div style={{ padding: '0 20px 18px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
        {[
          { i: 'plus',     l: 'Pay extra' },
          { i: 'calendar', l: 'Reschedule' },
          { i: 'minus',    l: 'Skip' },
        ].map(b => (
          <button key={b.i} style={{
            padding: '12px 8px', borderRadius: 14,
            background: theme.raised, border: `1px solid ${theme.rule}`,
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 7, color: theme.ink,
          }}>
            <Icon name={b.i} size={18} color={theme.ink}/>
            <span style={{ fontSize: 12, fontWeight: 500 }}>{b.l}</span>
          </button>
        ))}
      </div>

      {/* Schedule visualization — next 6 months */}
      <div style={{ padding: '0 20px 18px' }}>
        <SectionHeader theme={theme}>Schedule</SectionHeader>
        <Card theme={theme} pad={16}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 6 }}>
            {['JUN','JUL','AUG','SEP','OCT','NOV'].map((m, i) => {
              const next = i === 0;
              return (
                <div key={m} style={{ flex: 1, textAlign: 'center' }}>
                  <div style={{
                    height: 56, borderRadius: 8,
                    background: next ? theme.surface : theme.canvas2,
                    border: `1px solid ${next ? theme.surface : theme.rule}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: next ? theme.onSurface : theme.inkDim,
                    fontSize: 13, fontWeight: 500,
                    fontFamily: 'Newsreader, serif',
                  }}>
                    <span className="tnum">$2,450</span>
                  </div>
                  <div style={{ fontSize: 10.5, color: theme.inkMute, fontWeight: 600, marginTop: 6, letterSpacing: 0.6 }}>{m}</div>
                </div>
              );
            })}
          </div>
          <div style={{
            marginTop: 14, padding: '8px 12px',
            background: theme.accent.soft, color: theme.accent.ink,
            borderRadius: 10, fontSize: 12, fontWeight: 500,
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <Icon name="shield" size={14} color={theme.accent.ink}/>
            <span>Reserve fully funded for the next 11 settlements</span>
          </div>
        </Card>
      </div>

      {/* History */}
      <div style={{ padding: '0 20px 0' }}>
        <SectionHeader theme={theme} action="Statements">History</SectionHeader>
        <Card theme={theme} pad={0}>
          {DL_DATA.payments.map((p, i, arr) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', padding: '14px 16px',
              borderBottom: i < arr.length - 1 ? `1px solid ${theme.rule}` : 'none',
            }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 500, color: theme.ink }}>{p.date}</div>
                <div style={{ fontSize: 11.5, color: theme.inkMute, marginTop: 2 }}>
                  {p.status === 'Posted' ? `Posted to reserve · ••${DL_DATA.client.bankLast4}` : `Scheduled · ${DL_DATA.client.bankBrand}`}
                </div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="tnum serif" style={{ fontSize: 16, color: theme.ink, fontWeight: 500 }}>
                  ${p.amount.toLocaleString()}
                </div>
                <div style={{ fontSize: 10, color: p.status === 'Posted' ? '#2F6A4F' : theme.inkMute, fontWeight: 600, marginTop: 3, letterSpacing: 0.4 }}>
                  {p.status.toUpperCase()}
                </div>
              </div>
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
}

// expose
Object.assign(window, { DL_DATA, TopGreeting, HomeScreen, ActivityRow, ActivityScreen, PayScreen, groupByDate });