// Cobalt product mockups — real rendered dashboards, not images.

// --- Dashboard: balances + chart + accounts ---
const DashboardMock = () => {
  // Sparkline path for 30-day chart
  const points = [22,28,26,34,30,38,44,42,52,48,58,64,60,68,74,72,82,88,84,92,104,98,110,116,124,130,128,140,148,156];
  const max = Math.max(...points), min = Math.min(...points);
  const w = 560, h = 150;
  const step = w / (points.length - 1);
  const pts = points.map((v, i) => [i*step, h - ((v-min)/(max-min))*h]);
  const path = pts.map((p, i) => (i===0?'M':'L')+p[0].toFixed(1)+','+p[1].toFixed(1)).join(' ');
  const fill = path + ` L${w},${h} L0,${h} Z`;

  return (
    <div className="dash">
      <div className="dash-header">
        <div className="dash-sidebar-rail">
          <div className="rail-logo"><CobaltLogo size={18}/></div>
          <div className="rail-item active"><Icon.bank/></div>
          <div className="rail-item"><Icon.send/></div>
          <div className="rail-item"><Icon.card/></div>
          <div className="rail-item"><Icon.coin/></div>
          <div className="rail-item"><Icon.doc/></div>
          <div className="rail-item"><Icon.book/></div>
        </div>
        <div className="dash-body">
          <div className="dash-topbar">
            <div className="crumbs">
              <span className="crumb-muted">Overview</span>
              <span className="crumb-sep">/</span>
              <span>All accounts</span>
            </div>
            <div className="top-pills">
              <div className="chip"><span className="dot"/>Live</div>
              <div className="chip" style={{background:'transparent'}}>AU · AEDT</div>
            </div>
          </div>

          <div className="dash-hero">
            <div>
              <div className="lbl-mono">Total balance</div>
              <div className="bignum">A$<span className="num">2,459,020</span><span className="cents">.50</span></div>
              <div style={{display:'flex', gap:10, marginTop:10, alignItems:'center'}}>
                <span className="pill-green">↑ 12.4%</span>
                <span className="lbl-mono" style={{color:'var(--ink-4)'}}>vs last 30 days</span>
              </div>
            </div>
            <div className="dash-actions">
              <button className="dbtn"><Icon.plus/>Move money</button>
              <button className="dbtn"><Icon.send/>Pay</button>
              <button className="dbtn primary"><Icon.plus/>New card</button>
            </div>
          </div>

          <div className="dash-chart">
            <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" width="100%" height="150">
              <defs>
                <linearGradient id="chartfill" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="var(--cobalt)" stopOpacity="0.35"/>
                  <stop offset="100%" stopColor="var(--cobalt)" stopOpacity="0"/>
                </linearGradient>
              </defs>
              <path d={fill} fill="url(#chartfill)"/>
              <path d={path} fill="none" stroke="var(--cobalt)" strokeWidth="1.8" strokeLinejoin="round" strokeLinecap="round"/>
              <circle cx={pts[pts.length-1][0]} cy={pts[pts.length-1][1]} r="4" fill="var(--cobalt)" stroke="var(--paper)" strokeWidth="2"/>
            </svg>
            <div className="chart-axis">
              <span>Mar 20</span><span>Mar 27</span><span>Apr 3</span><span>Apr 10</span><span>Apr 18</span>
            </div>
          </div>

          <div className="acct-grid">
            <div className="acct">
              <div className="acct-head">
                <div className="acct-icon"><Icon.bank/></div>
                <div className="acct-meta">
                  <div className="acct-name">AUD Operating</div>
                  <div className="lbl-mono">BSB 042-019 · 1742 8831</div>
                </div>
              </div>
              <div className="acct-bal">A$<span className="num">1,248,302</span><span className="cents">.14</span></div>
              <div className="sparkline"><svg viewBox="0 0 100 24"><polyline fill="none" stroke="var(--cobalt)" strokeWidth="1.5" points="0,18 10,16 20,18 30,14 40,15 50,12 60,13 70,10 80,11 90,7 100,8"/></svg></div>
            </div>
            <div className="acct">
              <div className="acct-head">
                <div className="acct-icon"><Icon.coin/></div>
                <div className="acct-meta">
                  <div className="acct-name">USDC Vault</div>
                  <div className="lbl-mono">Base · Arbitrum · +6</div>
                </div>
              </div>
              <div className="acct-bal">US$<span className="num">612,880</span><span className="cents">.00</span></div>
              <div className="sparkline"><svg viewBox="0 0 100 24"><polyline fill="none" stroke="var(--cobalt)" strokeWidth="1.5" points="0,14 10,13 20,14 30,12 40,11 50,13 60,10 70,11 80,8 90,9 100,6"/></svg></div>
            </div>
            <div className="acct">
              <div className="acct-head">
                <div className="acct-icon"><Icon.vault/></div>
                <div className="acct-meta">
                  <div className="acct-name">Treasury Yield</div>
                  <div className="lbl-mono">4.85% p.a. · Earning</div>
                </div>
              </div>
              <div className="acct-bal">A$<span className="num">597,838</span><span className="cents">.36</span></div>
              <div className="sparkline"><svg viewBox="0 0 100 24"><polyline fill="none" stroke="var(--success)" strokeWidth="1.5" points="0,20 10,19 20,18 30,17 40,16 50,15 60,13 70,12 80,10 90,8 100,5"/></svg></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// --- Card mockup: one physical card + control panel ---
const CardMock = () => (
  <div className="card-mock">
    <div className="virtual-card">
      <div className="vc-top">
        <div style={{display:'flex', alignItems:'center', gap:8, color:'var(--cobalt-tint)'}}>
          <CobaltLogo size={18}/>
          <span style={{fontWeight:600, letterSpacing:'-0.01em'}}>Cobalt</span>
        </div>
        <div className="vc-chip"/>
      </div>
      <div className="vc-nums mono">4821 · 7193 · 2048 · 8302</div>
      <div className="vc-bottom">
        <div>
          <div className="vc-lbl">Cardholder</div>
          <div className="vc-val">SOPHIE CHEN</div>
        </div>
        <div>
          <div className="vc-lbl">Expires</div>
          <div className="vc-val mono">04 / 29</div>
        </div>
        <div style={{marginLeft:'auto', opacity:0.7, fontSize:11, fontFamily:'JetBrains Mono'}}>VIRTUAL</div>
      </div>
    </div>
    <div className="card-controls">
      <div className="ctl-row">
        <div className="ctl-name">Ads & Marketing</div>
        <div className="pill-green">Active</div>
      </div>
      <div className="ctl-stat">
        <div>
          <div className="lbl-mono">Monthly limit</div>
          <div className="ctl-val">A$25,000.00</div>
        </div>
        <div>
          <div className="lbl-mono">Spent this month</div>
          <div className="ctl-val">A$18,742.40</div>
        </div>
      </div>
      <div className="ctl-bar"><div style={{width:'74.9%'}}/></div>
      <div className="merchants">
        <div className="m-chip">Google Ads</div>
        <div className="m-chip">Meta</div>
        <div className="m-chip">LinkedIn</div>
        <div className="m-chip">+12</div>
      </div>
    </div>
  </div>
);

// --- Invoice mockup ---
const InvoiceMock = () => (
  <div className="inv">
    <div className="inv-head">
      <div>
        <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:16}}>
          <CobaltLogo size={16}/>
          <span style={{fontWeight:700}}>Luminary Studio</span>
        </div>
        <div className="lbl-mono" style={{color:'var(--ink-3)'}}>ABN 89 271 038 442</div>
      </div>
      <div style={{textAlign:'right'}}>
        <div className="inv-no mono">INV-2026-0147</div>
        <div className="pill-gold">Sent · Viewed</div>
      </div>
    </div>
    <div className="inv-parties">
      <div>
        <div className="lbl-mono">Billed to</div>
        <div className="party-name">Harbourlight Technologies</div>
        <div className="party-sub">142 Collins St, Melbourne VIC 3000</div>
      </div>
      <div>
        <div className="lbl-mono">Issued</div>
        <div className="party-name mono">18 Apr 2026</div>
        <div className="party-sub">Due 2 May 2026</div>
      </div>
    </div>
    <table className="inv-table">
      <thead>
        <tr><th>Description</th><th className="r">Qty</th><th className="r">Rate</th><th className="r">Amount</th></tr>
      </thead>
      <tbody>
        <tr><td>Brand system · Q2 retainer</td><td className="r mono">1</td><td className="r mono">12,500.00</td><td className="r mono">12,500.00</td></tr>
        <tr><td>Motion design · launch film</td><td className="r mono">1</td><td className="r mono">8,400.00</td><td className="r mono">8,400.00</td></tr>
        <tr><td>Web implementation</td><td className="r mono">42</td><td className="r mono">185.00</td><td className="r mono">7,770.00</td></tr>
      </tbody>
    </table>
    <div className="inv-totals">
      <div className="tot-row"><span>Subtotal</span><span className="mono">28,670.00</span></div>
      <div className="tot-row"><span>GST 10%</span><span className="mono">2,867.00</span></div>
      <div className="tot-row big"><span>Total (AUD)</span><span className="mono">A$31,537.00</span></div>
    </div>
    <div className="inv-footer">
      <div className="pay-opt"><span className="po-lbl mono">PAYID</span><span>invoice@luminary.studio</span></div>
      <div className="pay-opt"><span className="po-lbl mono">BPAY</span><span>Biller 274190 · Ref 0147</span></div>
    </div>
  </div>
);

// --- Crypto rails mockup ---
const CryptoMock = () => {
  const chains = [
    { name: 'Ethereum', abbr: 'ETH', bal: '142,820.00' },
    { name: 'Base', abbr: 'BASE', bal: '208,440.00' },
    { name: 'Arbitrum', abbr: 'ARB', bal: '94,220.00' },
    { name: 'Optimism', abbr: 'OP', bal: '38,720.00' },
    { name: 'Polygon', abbr: 'POL', bal: '71,200.00' },
    { name: 'Solana', abbr: 'SOL', bal: '42,860.00' },
    { name: 'Avalanche', abbr: 'AVAX', bal: '8,490.00' },
    { name: 'Stellar', abbr: 'XLM', bal: '6,130.00' },
  ];
  return (
    <div className="crypto-mock">
      <div className="cm-head">
        <div>
          <div className="lbl-mono">USDC / USDT vault</div>
          <div className="cm-total mono">US$612,880.00</div>
          <div className="lbl-mono" style={{color:'var(--ink-3)', marginTop:4}}>Auto-settles to AUD · 8 chains supported</div>
        </div>
        <span className="chip chip-gold mono"><span className="dot" style={{background:'var(--cobalt)', boxShadow:'0 0 0 3px color-mix(in srgb, var(--cobalt) 20%, transparent)'}}/>No deposit fee</span>
      </div>
      <div className="chain-grid">
        {chains.map(c => (
          <div className="chain" key={c.name}>
            <div className="chain-l">
              <div className="chain-dot" data-chain={c.abbr}>{c.abbr[0]}</div>
              <div>
                <div className="chain-name">{c.name}</div>
                <div className="lbl-mono">{c.abbr}</div>
              </div>
            </div>
            <div className="mono chain-bal">{c.bal}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

// --- Payments mockup ---
const PaymentsMock = () => (
  <div className="pay-mock">
    <div className="pay-head">
      <div className="lbl-mono">New payment</div>
      <div className="chip chip-gold mono"><Icon.bolt/>NPP · Instant</div>
    </div>
    <div className="pay-row">
      <div className="lbl-mono">To</div>
      <div className="pay-to">
        <div className="avatar">NS</div>
        <div>
          <div className="pay-name">Nova Supply Co.</div>
          <div className="lbl-mono">PayID · accounts@nova.supply</div>
        </div>
      </div>
    </div>
    <div className="pay-row">
      <div className="lbl-mono">Amount</div>
      <div className="pay-amt mono">A$<span>18,420</span><span className="cents">.00</span></div>
    </div>
    <div className="pay-row">
      <div className="lbl-mono">Reference</div>
      <div style={{fontSize:14}}>Invoice 2026-0147</div>
    </div>
    <div className="pay-foot">
      <div>
        <div className="lbl-mono">Arrives</div>
        <div style={{fontWeight:600, fontSize:14, marginTop:2}}>Within 10 seconds · Free</div>
      </div>
      <button className="dbtn primary">Send payment</button>
    </div>
    <div className="pay-timeline">
      <div className="tl-step done"><span className="tl-dot"/>Initiated · 14:22:04</div>
      <div className="tl-step done"><span className="tl-dot"/>Cleared · 14:22:06</div>
      <div className="tl-step live"><span className="tl-dot"/>Credited to Nova Supply · 14:22:08</div>
    </div>
  </div>
);

// --- Treasury mockup ---
const TreasuryMock = () => (
  <div className="tres-mock">
    <div className="tres-head">
      <div className="lbl-mono">Treasury yield account</div>
      <div className="tres-apy mono">4.85<span style={{fontSize:18}}>% p.a.</span></div>
    </div>
    <div className="tres-grid">
      <div className="tres-stat">
        <div className="lbl-mono">Balance</div>
        <div className="tres-val">A$597,838.36</div>
      </div>
      <div className="tres-stat">
        <div className="lbl-mono">Earned this month</div>
        <div className="tres-val" style={{color:'var(--success)'}}>+A$2,417.42</div>
      </div>
      <div className="tres-stat">
        <div className="lbl-mono">Earned this year</div>
        <div className="tres-val">+A$8,904.10</div>
      </div>
    </div>
    <div className="tres-bar">
      <div className="tres-bar-lbl mono"><span>Sweep threshold</span><span>A$250,000 idle → yield</span></div>
      <div className="ctl-bar"><div style={{width:'65%', background:'var(--success)'}}/></div>
    </div>
  </div>
);

// --- Multi-entity mockup: consolidated group view ---
const MultiEntityMock = () => (
  <div className="ent-mock">
    <div className="ent-head">
      <div>
        <div className="lbl-mono">Group consolidation</div>
        <div className="ent-title">Atlas Holdings Group</div>
      </div>
      <div className="ent-total">
        <div className="lbl-mono">Consolidated balance</div>
        <div className="ent-total-num">A$<span className="num">8,247,103</span><span className="cents">.22</span></div>
      </div>
    </div>
    <div className="ent-list">
      <div className="ent-row">
        <div className="ent-flag" data-c="AU">🇦🇺</div>
        <div className="ent-meta">
          <div className="ent-name">Atlas HoldCo Pty Ltd</div>
          <div className="lbl-mono">AU · ABN 43 198 221 004</div>
        </div>
        <div className="ent-bal">A$<span className="num">3,418,220</span></div>
        <div className="ent-pill primary">Primary</div>
      </div>
      <div className="ent-row">
        <div className="ent-flag" data-c="SG">🇸🇬</div>
        <div className="ent-meta">
          <div className="ent-name">Atlas Trading Pte. Ltd</div>
          <div className="lbl-mono">SG · UEN 202418374H</div>
        </div>
        <div className="ent-bal">S$<span className="num">2,104,830</span></div>
        <div className="ent-pill">Trading</div>
      </div>
      <div className="ent-row">
        <div className="ent-flag" data-c="US">🇺🇸</div>
        <div className="ent-meta">
          <div className="ent-name">Atlas Labs Inc.</div>
          <div className="lbl-mono">US · Delaware C-Corp</div>
        </div>
        <div className="ent-bal">US$<span className="num">1,482,910</span></div>
        <div className="ent-pill">Subsidiary</div>
      </div>
      <div className="ent-row">
        <div className="ent-flag" data-c="GB">🇬🇧</div>
        <div className="ent-meta">
          <div className="ent-name">Atlas UK Ltd</div>
          <div className="lbl-mono">GB · Companies House 14928103</div>
        </div>
        <div className="ent-bal">£<span className="num">284,500</span></div>
        <div className="ent-pill">Dormant</div>
      </div>
    </div>
    <div className="ent-flow">
      <div className="lbl-mono" style={{marginBottom:8}}>Last intercompany transfer</div>
      <div className="ent-flow-row">
        <span className="ent-flow-node">AU HoldCo</span>
        <span className="ent-flow-arrow">→ USDC → </span>
        <span className="ent-flow-node">US Labs</span>
        <span className="ent-flow-amt mono">$250,000.00</span>
        <span className="ent-flow-time mono">· 00:08s</span>
      </div>
    </div>
  </div>
);

// --- Banking mockup: single account detail with transactions ---
const BankingMock = () => (
  <div className="bank-mock">
    <div className="bank-head">
      <div>
        <div className="lbl-mono">AUD Operating · 042-019 · 1742 8831</div>
        <div className="bank-title">Atlas HoldCo · Main</div>
      </div>
      <div className="bank-bal">
        <div className="bank-bal-num">A$<span className="num">1,248,302</span><span className="cents">.14</span></div>
        <div className="pill-green" style={{marginTop:6}}>↑ 4.2% · 7d</div>
      </div>
    </div>
    <div className="bank-sub">
      <div className="bank-sub-item">
        <div className="lbl-mono">Sub-account</div>
        <div className="bank-sub-name">Payroll</div>
        <div className="bank-sub-bal">A$284,100</div>
      </div>
      <div className="bank-sub-item">
        <div className="lbl-mono">Sub-account</div>
        <div className="bank-sub-name">Tax reserve</div>
        <div className="bank-sub-bal">A$412,800</div>
      </div>
      <div className="bank-sub-item">
        <div className="lbl-mono">Sub-account</div>
        <div className="bank-sub-name">Ops float</div>
        <div className="bank-sub-bal">A$551,402</div>
      </div>
    </div>
    <div className="bank-txns">
      <div className="bank-txns-head"><span>Recent activity</span><span className="lbl-mono">Last 24h</span></div>
      <div className="bank-txn">
        <div className="bank-txn-ico in"><Icon.arrow/></div>
        <div className="bank-txn-meta">
          <div className="bank-txn-name">Shopify Payments AU</div>
          <div className="lbl-mono">NPP · 2 min ago</div>
        </div>
        <div className="bank-txn-amt in">+A$24,182.50</div>
      </div>
      <div className="bank-txn">
        <div className="bank-txn-ico out"><Icon.send/></div>
        <div className="bank-txn-meta">
          <div className="bank-txn-name">AWS Australia</div>
          <div className="lbl-mono">Direct debit · 14 min ago</div>
        </div>
        <div className="bank-txn-amt">−A$8,204.00</div>
      </div>
      <div className="bank-txn">
        <div className="bank-txn-ico in"><Icon.arrow/></div>
        <div className="bank-txn-meta">
          <div className="bank-txn-name">Stripe payout</div>
          <div className="lbl-mono">NPP · 38 min ago</div>
        </div>
        <div className="bank-txn-amt in">+A$142,810.00</div>
      </div>
      <div className="bank-txn">
        <div className="bank-txn-ico out"><Icon.send/></div>
        <div className="bank-txn-meta">
          <div className="bank-txn-name">Payroll run · 42 staff</div>
          <div className="lbl-mono">Pay run · 1h ago</div>
        </div>
        <div className="bank-txn-amt">−A$318,420.00</div>
      </div>
    </div>
  </div>
);

// --- Collections / Get-Paid mockup: incoming payments dashboard ---
const CollectionsMock = () => {
  const rows = [
    { customer: 'Atlas Holdings Pty', amount: 'A$14,200.00', status: 'paid', statusLabel: 'Paid',         type: 'One-time',   due: '12 May',  badge: 'confirmed', badgeLabel: 'Confirmed', activity: 'Invoice settled · BPAY ref 0142'},
    { customer: 'Nova Supply Co.',    amount: 'A$8,400.00',  status: 'overdue', statusLabel: 'Overdue',  type: 'Recurring',  due: '28 Apr',  badge: 'atrisk',    badgeLabel: 'At risk',   activity: 'Autopilot message sent · firm tone'},
    { customer: 'Harbourlight Tech',  amount: 'A$18,900.00', status: 'open',    statusLabel: 'Outstanding', type: 'One-time',   due: '02 May',  badge: 'expected',  badgeLabel: 'Expected',  activity: 'Email reminder sent · 1 of 3'},
    { customer: 'Bondi Build Co.',    amount: 'A$24,520.00', status: 'overdue', statusLabel: 'Overdue',  type: 'One-time',   due: '14 Apr',  badge: 'atrisk',    badgeLabel: 'At risk',   activity: 'Autopilot message sent · SMS escalation'},
    { customer: 'Lighthouse Studio',  amount: 'A$6,250.00',  status: 'open',    statusLabel: 'Outstanding', type: 'Instalment', due: '18 May',  badge: 'expected',  badgeLabel: 'Expected',  activity: 'Payment link viewed · 2 min ago'},
    { customer: 'Atlas Trading SG',   amount: 'A$42,180.00', status: 'paid',    statusLabel: 'Paid',     type: 'Instalment', due: '30 Apr',  badge: 'confirmed', badgeLabel: 'Confirmed', activity: 'Invoice settled · auto-reconciled'},
  ];
  return (
    <div className="collections-mock">
      <div className="cm-topbar">
        <div className="crumbs">
          <span className="crumb-muted">Payments</span>
          <span className="crumb-sep">/</span>
          <span>Incoming</span>
        </div>
        <div className="top-pills">
          <div className="chip"><span className="dot"/>Live</div>
          <div className="chip" style={{background:'transparent'}}>Last 30 days</div>
        </div>
      </div>

      <div className="cm-stats">
        <div className="cm-stat">
          <div className="lbl-mono">Credit control</div>
          <div className="cm-stat-rows">
            <div className="csr"><span className="csr-dot dot-red"/><span className="csr-lbl">At risk</span><span className="csr-amt mono">A$24,520</span></div>
            <div className="csr"><span className="csr-dot dot-blue"/><span className="csr-lbl">Expected</span><span className="csr-amt mono">A$58,200</span></div>
            <div className="csr"><span className="csr-dot dot-green"/><span className="csr-lbl">Confirmed</span><span className="csr-amt mono">A$94,180</span></div>
          </div>
        </div>
        <div className="cm-stat">
          <div className="lbl-mono">Customers</div>
          <div className="cm-stat-big">47</div>
          <div className="cm-stat-sub">active customers</div>
          <div className="cm-stat-row-sub mono"><span>Active invoices</span><span>23</span></div>
        </div>
        <div className="cm-stat">
          <div className="lbl-mono">Total position</div>
          <div className="cm-stat-big">A$<span className="num">182,430</span><span className="cents">.00</span></div>
          <div className="cm-stat-row-sub mono"><span>Total owed</span><span>A$182,430.00</span></div>
          <div className="cm-stat-row-sub mono" style={{color:'var(--success)'}}><span>Processed</span><span>+A$94,180.00</span></div>
        </div>
      </div>

      <table className="cm-table">
        <thead>
          <tr>
            <th>Customer</th>
            <th className="r">Amount</th>
            <th>Status</th>
            <th>Type</th>
            <th>Due</th>
            <th>Activity</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i}>
              <td><div className="cm-cust"><span className="cm-avatar">{r.customer.split(' ').map(w => w[0]).slice(0,2).join('')}</span>{r.customer}</div></td>
              <td className="r mono cm-amt">{r.amount}</td>
              <td><span className={`pill-status pill-${r.status}`}>{r.statusLabel}</span></td>
              <td className="mono">{r.type}</td>
              <td className="mono">{r.due}</td>
              <td>
                <div className="cm-act">
                  <span className={`pill-badge pill-${r.badge}`}>{r.badgeLabel}</span>
                  <span className="cm-act-text">{r.activity}</span>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

// Compact vertical variant of CollectionsMock for use in standard feat-row layout.
const CollectionsMockSide = () => (
  <div className="collections-side">
    <div className="cs-topbar">
      <div className="crumbs">
        <span className="crumb-muted">Payments</span>
        <span className="crumb-sep">/</span>
        <span>Incoming</span>
      </div>
      <div className="chip"><span className="dot"/>Live</div>
    </div>

    <div className="cs-stat">
      <div className="lbl-mono">Credit control · Last 30 days</div>
      <div className="cm-stat-rows">
        <div className="csr"><span className="csr-dot dot-red"/><span className="csr-lbl">At risk</span><span className="csr-amt mono">A$24,520</span></div>
        <div className="csr"><span className="csr-dot dot-blue"/><span className="csr-lbl">Expected</span><span className="csr-amt mono">A$58,200</span></div>
        <div className="csr"><span className="csr-dot dot-green"/><span className="csr-lbl">Confirmed</span><span className="csr-amt mono">A$94,180</span></div>
      </div>
    </div>

    <div className="cs-list">
      <div className="cs-item">
        <div className="cs-item-head">
          <span className="cm-avatar">NS</span>
          <div className="cs-item-meta">
            <div className="cs-name">Nova Supply Co.</div>
            <div className="lbl-mono">A$8,400.00 · Overdue · 28 Apr</div>
          </div>
          <span className="pill-badge pill-atrisk">At risk</span>
        </div>
        <div className="cs-act"><Icon.bolt/><span>Autopilot message sent · firm tone</span></div>
      </div>

      <div className="cs-item">
        <div className="cs-item-head">
          <span className="cm-avatar">HT</span>
          <div className="cs-item-meta">
            <div className="cs-name">Harbourlight Tech</div>
            <div className="lbl-mono">A$18,900.00 · Outstanding · 02 May</div>
          </div>
          <span className="pill-badge pill-expected">Expected</span>
        </div>
        <div className="cs-act"><Icon.send/><span>Email reminder sent · 1 of 3</span></div>
      </div>

      <div className="cs-item">
        <div className="cs-item-head">
          <span className="cm-avatar">AH</span>
          <div className="cs-item-meta">
            <div className="cs-name">Atlas Holdings Pty</div>
            <div className="lbl-mono">A$14,200.00 · Paid · 12 May</div>
          </div>
          <span className="pill-badge pill-confirmed">Confirmed</span>
        </div>
        <div className="cs-act"><Icon.check/><span>Invoice settled · BPAY ref 0142</span></div>
      </div>
    </div>
  </div>
);

Object.assign(window, {
  DashboardMock, CardMock, InvoiceMock, CryptoMock, PaymentsMock, TreasuryMock, MultiEntityMock, BankingMock, CollectionsMock, CollectionsMockSide
});