// ════════════ MONEY · Banking flows ════════════
// Working Move Money, Account detail, Card controls, Deposit.
const { Icon, Spark, Pex, Avatar, Card, Btn, Pill, Label, Num, Toggle } = window;

// ── small inline picker (account / recipient select) ─────────
function BankPicker({ value, options, onChange, placeholder }) {
  const P = window.PX; const [open, setOpen] = React.useState(false);
  const sel = options.find(o => o.id === value);
  return (
    <div style={{ position: 'relative' }}>
      <div onClick={() => setOpen(o => !o)} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '11px 12px', border: `1px solid ${P.lineStrong}`, borderRadius: 10, cursor: 'pointer', background: P.card }}>
        {sel ? (
          <>
            <div style={{ width: 30, height: 30, borderRadius: 8, background: sel.tone ? P[sel.tone + 'Tint'] : P.sunk, color: sel.tone ? P[sel.tone] : P.ink2, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={sel.icon || 'building'} size={15}/></div>
            <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 13.5, color: P.ink, fontWeight: 500 }}>{sel.name}</div><div style={{ fontSize: 11, color: P.ink3 }}>{sel.sub}</div></div>
          </>
        ) : <div style={{ flex: 1, fontSize: 13.5, color: P.ink4 }}>{placeholder}</div>}
        <Icon name="chevD" size={16} color={P.ink3}/>
      </div>
      {open && (
        <div style={{ position: 'absolute', top: '100%', left: 0, right: 0, marginTop: 6, background: P.card, border: `1px solid ${P.line}`, borderRadius: 11, boxShadow: P.shLg, zIndex: 20, overflow: 'hidden', maxHeight: 260, overflowY: 'auto' }}>
          {options.map(o => (
            <div key={o.id} onClick={() => { onChange(o.id); setOpen(false); }} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '10px 12px', cursor: 'pointer', background: o.id === value ? P.hover : 'transparent' }}
              onMouseEnter={e => e.currentTarget.style.background = P.hover} onMouseLeave={e => e.currentTarget.style.background = o.id === value ? P.hover : 'transparent'}>
              <div style={{ width: 30, height: 30, borderRadius: 8, background: o.tone ? P[o.tone + 'Tint'] : P.sunk, color: o.tone ? P[o.tone] : P.ink2, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={o.icon || 'building'} size={15}/></div>
              <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 13.5, color: P.ink, fontWeight: 500 }}>{o.name}</div><div style={{ fontSize: 11, color: P.ink3 }}>{o.sub}</div></div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ── MOVE MONEY (working) ─────────────────────────────────────
window.MoveMoney = function MoveMoney({ fromId, initialMode, initialTo, onClose }) {
  const P = window.PX; const b = window.useBank(); const { toast } = window.useApp();
  const [mode, setMode] = React.useState(initialMode === 'pay' ? 'pay' : 'internal');     // internal | pay
  const [from, setFrom] = React.useState(fromId || 'op');
  const [to, setTo] = React.useState(initialTo || null);
  const [amount, setAmount] = React.useState('');
  const [speed, setSpeed] = React.useState('ach');
  const [note, setNote] = React.useState('');
  const [step, setStep] = React.useState('form');         // form | review | done

  const acctOpts = b.accounts.map(a => ({ id: a.id, name: a.name, sub: `••${a.tail} · ${window.money(a.balance)}`, icon: a.icon, tone: a.tone }));
  const recipOpts = b.recipients.map(r => ({ id: r.id, name: r.name, sub: r.detail, icon: r.kind === 'person' ? 'user' : 'building' }));
  const fromAcct = window.PXBank.acct(from);
  const toAcct = mode === 'internal' ? window.PXBank.acct(to) : b.recipients.find(r => r.id === to);
  const amt = parseFloat(amount) || 0;
  const toOpts = mode === 'internal' ? acctOpts.filter(o => o.id !== from) : recipOpts;
  const fee = mode === 'pay' && speed === 'wire' ? 15 : 0;
  const overdraft = amt + fee > (fromAcct ? fromAcct.balance : 0);
  const valid = amt > 0 && to && !overdraft;
  const arrives = mode === 'internal' ? 'Instantly' : speed === 'wire' ? 'Today by 5pm' : 'In 1–3 business days';

  const confirm = () => {
    window.PXBank.set(s => {
      const accounts = s.accounts.map(a => {
        if (a.id === from) return { ...a, balance: window.PXBank.round(a.balance - amt - fee) };
        if (mode === 'internal' && a.id === to) return { ...a, balance: window.PXBank.round(a.balance + amt) };
        return a;
      });
      const id = 'm' + Math.random().toString(36).slice(2, 7);
      const newAct = [];
      if (mode === 'internal') {
        newAct.push({ id: id + 'a', acct: from, dir: 'out', desc: `Transfer to ${toAcct.name}`, sub: `${fromAcct.name} → ${toAcct.name}`, amt: -amt, date: 'Just now', status: 'settled' });
        newAct.push({ id: id + 'b', acct: to, dir: 'in', desc: `Transfer from ${fromAcct.name}`, sub: `${fromAcct.name} → ${toAcct.name}`, amt: amt, date: 'Just now', status: 'settled' });
      } else {
        newAct.push({ id: id + 'a', acct: from, dir: 'out', desc: `${speed === 'wire' ? 'Wire' : 'ACH'} to ${toAcct.name}`, sub: note || toAcct.detail, amt: -(amt + fee), date: 'Just now', status: speed === 'wire' ? 'settled' : 'pending' });
      }
      return { ...s, accounts, activity: [...newAct, ...s.activity] };
    });
    setStep('done');
    toast(`${window.money(amt)} ${mode === 'internal' ? 'moved to ' + toAcct.name : 'sent to ' + toAcct.name}.`, { tone: 'sage', icon: 'check' });
  };

  // success
  if (step === 'done') {
    return (
      <window.Modal title="Money moved" w={460} onClose={onClose}
        foot={<><div style={{ flex: 1 }}/><Btn kind="default" size="md" onClick={() => { setStep('form'); setAmount(''); setTo(null); }}>Move more</Btn><Btn kind="spark" size="md" onClick={onClose}>Done</Btn></>}>
        <div style={{ textAlign: 'center', padding: '12px 0 4px' }}>
          <div style={{ width: 56, height: 56, borderRadius: 56, background: P.sageTint, color: P.sage, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 14px' }}><Icon name="check" size={28} stroke={2.4}/></div>
          <div style={{ fontFamily: P.serif, fontStyle: 'italic', fontSize: 32, color: P.ink }}>{window.money(amt)}</div>
          <div style={{ fontSize: 13, color: P.ink3, marginTop: 4 }}>{mode === 'internal' ? 'moved to' : 'sent to'} <b style={{ color: P.ink }}>{toAcct.name}</b> · {arrives}</div>
        </div>
        <Card pad={14} style={{ marginTop: 16 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, padding: '4px 0' }}><span style={{ color: P.ink3 }}>{fromAcct.name} ••{fromAcct.tail}</span><span style={{ fontFamily: P.mono, color: P.ink }}>{window.money(fromAcct.balance)}</span></div>
          {mode === 'internal' && <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, padding: '4px 0' }}><span style={{ color: P.ink3 }}>{toAcct.name} ••{toAcct.tail}</span><span style={{ fontFamily: P.mono, color: P.sage }}>{window.money(window.PXBank.acct(to).balance)}</span></div>}
        </Card>
      </window.Modal>
    );
  }

  // review
  if (step === 'review') {
    return (
      <window.Modal title="Review transfer" sub="Confirm the details before money moves" w={460} onClose={onClose}
        foot={<><Btn kind="ghost" size="md" onClick={() => setStep('form')}>Back</Btn><div style={{ flex: 1 }}/><Btn kind="spark" size="md" icon="check" onClick={confirm}>Confirm {window.money(amt + fee)}</Btn></>}>
        <div style={{ textAlign: 'center', padding: '6px 0 18px' }}>
          <div style={{ fontFamily: P.serif, fontStyle: 'italic', fontSize: 40, color: P.ink, letterSpacing: -1 }}>{window.money(amt)}</div>
        </div>
        <Card pad={0}>
          {[['From', `${fromAcct.name} ••${fromAcct.tail}`], ['To', `${toAcct.name}${toAcct.tail ? ' ••' + toAcct.tail : ''}`], ['Speed', mode === 'internal' ? 'Instant' : speed === 'wire' ? 'Wire · same day' : 'ACH · 1–3 days'], ['Fee', fee ? window.money(fee) : 'Free'], ['Arrives', arrives], ...(note ? [['Note', note]] : [])].map((r, i, arr) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 16px', borderBottom: i < arr.length - 1 ? `1px solid ${P.line}` : 'none' }}>
              <span style={{ fontSize: 12.5, color: P.ink3 }}>{r[0]}</span><span style={{ fontSize: 13, color: P.ink, fontWeight: 500, textAlign: 'right' }}>{r[1]}</span>
            </div>
          ))}
        </Card>
      </window.Modal>
    );
  }

  // form
  return (
    <window.Modal title="Move money" w={460} onClose={onClose}
      foot={<><Btn kind="ghost" size="md" onClick={onClose}>Cancel</Btn><div style={{ flex: 1 }}/><Btn kind="spark" size="md" iconR="arrowRight" disabled={!valid} onClick={() => setStep('review')}>Review</Btn></>}>
      <div style={{ display: 'flex', gap: 4, background: P.sunk, borderRadius: 10, padding: 3, marginBottom: 18 }}>
        {[['internal', 'Between accounts'], ['pay', 'Pay someone']].map(m => {
          const on = mode === m[0];
          return <div key={m[0]} onClick={() => { setMode(m[0]); setTo(null); }} style={{ flex: 1, textAlign: 'center', padding: '7px 0', borderRadius: 8, cursor: 'pointer', fontSize: 12.5, fontWeight: 600, background: on ? P.card : 'transparent', boxShadow: on ? P.shSm : 'none', color: on ? P.ink : P.ink3 }}>{m[1]}</div>;
        })}
      </div>

      <Label style={{ marginBottom: 7 }}>From</Label>
      <BankPicker value={from} options={acctOpts} onChange={(v) => { setFrom(v); if (to === v) setTo(null); }}/>

      <div style={{ display: 'flex', justifyContent: 'center', margin: '8px 0' }}><div style={{ width: 30, height: 30, borderRadius: 30, background: P.sunk, color: P.ink3, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="arrowDown" size={15}/></div></div>

      <Label style={{ marginBottom: 7 }}>{mode === 'internal' ? 'To' : 'Recipient'}</Label>
      <BankPicker value={to} options={toOpts} onChange={setTo} placeholder={mode === 'internal' ? 'Choose an account' : 'Choose a recipient'}/>
      {mode === 'pay' && <div style={{ fontSize: 11.5, color: P.spark, marginTop: 7, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="plus" size={12}/>Add a new recipient</div>}

      <Label style={{ margin: '18px 0 7px' }}>Amount</Label>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, border: `1px solid ${overdraft ? P.rose : P.lineStrong}`, borderRadius: 10, padding: '12px 14px' }}>
        <span style={{ fontFamily: P.serif, fontSize: 28, color: P.ink3 }}>$</span>
        <input autoFocus value={amount} onChange={e => setAmount(e.target.value.replace(/[^0-9.]/g, ''))} placeholder="0.00" inputMode="decimal" style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontFamily: P.serif, fontStyle: 'italic', fontSize: 30, color: P.ink, width: '100%' }}/>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 7 }}>
        <span style={{ fontSize: 11.5, color: overdraft ? P.rose : P.ink3 }}>{overdraft ? 'More than the balance in ' + fromAcct.name : `Available ${window.money(fromAcct.balance)}`}</span>
        <span onClick={() => setAmount(String(fromAcct.balance))} style={{ fontSize: 11.5, color: P.spark, cursor: 'pointer', fontWeight: 500 }}>Use max</span>
      </div>

      {mode === 'pay' && (
        <>
          <Label style={{ margin: '18px 0 7px' }}>Speed</Label>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[['ach', 'ACH transfer', '1–3 business days', 'Free'], ['wire', 'Wire', 'Same day by 5pm', '$15']].map(o => {
              const on = speed === o[0];
              return (
                <div key={o[0]} onClick={() => setSpeed(o[0])} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '11px 13px', border: `1.5px solid ${on ? P.spark : P.line}`, borderRadius: 10, cursor: 'pointer', background: on ? P.sparkWash : P.card }}>
                  <div style={{ width: 16, height: 16, borderRadius: 16, border: `1.5px solid ${on ? P.spark : P.lineStrong}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{on && <div style={{ width: 8, height: 8, borderRadius: 8, background: P.spark }}/>}</div>
                  <div style={{ flex: 1 }}><div style={{ fontSize: 13, color: P.ink, fontWeight: 500 }}>{o[1]}</div><div style={{ fontSize: 11, color: P.ink3 }}>{o[2]}</div></div>
                  <span style={{ fontSize: 12.5, color: o[3] === 'Free' ? P.sage : P.ink2, fontWeight: 500 }}>{o[3]}</span>
                </div>
              );
            })}
          </div>
          <Label style={{ margin: '18px 0 7px' }}>Note (optional)</Label>
          <input value={note} onChange={e => setNote(e.target.value)} placeholder="What's this for?" style={{ width: '100%', border: `1px solid ${P.lineStrong}`, borderRadius: 10, padding: '10px 12px', fontSize: 13.5, color: P.ink, fontFamily: P.sans, outline: 'none' }}/>
        </>
      )}
    </window.Modal>
  );
};

// ── ACCOUNT DETAIL (drawer) ──────────────────────────────────
window.AccountDetail = function AccountDetail({ id, onMove, onClose }) {
  const P = window.PX; const b = window.useBank(); const { toast } = window.useApp();
  const a = window.PXBank.acct(id);
  const [tab, setTab] = React.useState('activity');
  const txns = b.activity.filter(t => t.acct === id);
  const statements = [['March 2025', 'In progress'], ['February 2025', 'Ready'], ['January 2025', 'Ready'], ['December 2024', 'Ready']];
  const copy = (l) => toast(`${l} copied.`, { icon: 'copy' });
  return (
    <window.Drawer onClose={onClose} w={520}
      tag={<Pill tone={a.tone}>{a.type}</Pill>}
      title={`${a.name} ••${a.tail}`}
      foot={<><Btn kind="default" size="md" icon="download" onClick={() => toast('Statement downloaded.', { icon: 'download' })}>Statement</Btn><div style={{ flex: 1 }}/><Btn kind="spark" size="md" icon="send" onClick={() => { onClose(); onMove(id); }}>Move money</Btn></>}>
      <div style={{ marginBottom: 18 }}>
        <Label>Available balance</Label>
        <div style={{ fontFamily: P.serif, fontStyle: 'italic', fontSize: 44, letterSpacing: -1.5, color: P.ink, lineHeight: 1.1 }}>{window.money(a.balance)}</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 18 }}>
        {[['Account number', '••••' + a.acct.slice(-4), a.acct], ['Routing number', a.routing, a.routing]].map((r, i) => (
          <Card key={i} pad={12} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ flex: 1 }}><div style={{ fontSize: 11, color: P.ink3 }}>{r[0]}</div><div style={{ fontFamily: P.mono, fontSize: 13, color: P.ink, marginTop: 2 }}>{r[1]}</div></div>
            <div onClick={() => copy(r[0])} style={{ cursor: 'pointer', color: P.ink3 }}><Icon name="copy" size={15}/></div>
          </Card>
        ))}
      </div>
      <window.Tabs tabs={[{ k: 'activity', label: 'Activity', count: txns.length }, { k: 'statements', label: 'Statements' }]} active={tab} onChange={setTab} style={{ marginBottom: 6 }}/>
      {tab === 'activity' && (
        <div>
          {txns.length === 0 && <div style={{ fontSize: 12.5, color: P.ink3, padding: '20px 0', textAlign: 'center' }}>No activity in this account yet.</div>}
          {txns.map((t, i) => (
            <div key={t.id} style={{ display: 'grid', gridTemplateColumns: '30px 1fr auto', gap: 11, alignItems: 'center', padding: '11px 0', borderBottom: i < txns.length - 1 ? `1px solid ${P.line}` : 'none' }}>
              <div style={{ width: 30, height: 30, borderRadius: 8, background: t.dir === 'out' ? P.sunk : t.dir === 'sweep' ? P.skyTint : P.sageTint, color: t.dir === 'out' ? P.ink2 : t.dir === 'sweep' ? P.sky : P.sage, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={t.dir === 'in' ? 'arrowDown' : t.dir === 'sweep' ? 'refresh' : 'arrowUp'} size={14}/></div>
              <div style={{ minWidth: 0 }}><div style={{ fontSize: 13, color: P.ink }}>{t.desc}</div><div style={{ fontSize: 11, color: P.ink3 }}>{t.date} · {t.sub}{t.status === 'pending' ? ' · pending' : ''}</div></div>
              <span style={{ fontFamily: P.mono, fontSize: 13, fontWeight: 500, color: t.amt < 0 ? P.ink : P.sage }}>{window.signed(t.amt)}</span>
            </div>
          ))}
        </div>
      )}
      {tab === 'statements' && (
        <div>
          {statements.map((s, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderBottom: i < statements.length - 1 ? `1px solid ${P.line}` : 'none' }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: P.sunk, color: P.ink2, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="fileText" size={15}/></div>
              <span style={{ flex: 1, fontSize: 13, color: P.ink }}>{s[0]}</span>
              {s[1] === 'Ready' ? <Btn kind="soft" size="sm" icon="download" onClick={() => toast(`${s[0]} statement downloaded.`, { icon: 'download' })}>PDF</Btn> : <Pill tone="amber">{s[1]}</Pill>}
            </div>
          ))}
        </div>
      )}
    </window.Drawer>
  );
};

// ── CARD CONTROLS (drawer) ───────────────────────────────────
window.CardControls = function CardControls({ onClose }) {
  const P = window.PX; const b = window.useBank(); const { toast } = window.useApp();
  const c = b.card;
  const setCard = (patch) => window.PXBank.set(s => ({ ...s, card: { ...s.card, ...patch } }));
  const cardTxns = [['King Arthur Baking', 'Mar 11', 340.00], ['Whole Foods Market', 'Mar 8', 92.30], ['Uline · packaging', 'Mar 5', 148.00], ['Adobe', 'Mar 3', 54.99], ['Shell · fuel', 'Mar 2', 61.40]];
  return (
    <window.Drawer onClose={onClose} w={480}
      tag={<Pill tone={c.frozen ? 'sky' : 'sage'} dot>{c.frozen ? 'Frozen' : 'Active'}</Pill>}
      title="Business debit card" sub="Amara Okafor · ••4290">
      <div style={{ position: 'relative', aspectRatio: '1.586', borderRadius: 16, padding: 20, overflow: 'hidden', color: '#FFF6EE', marginBottom: 18,
        background: c.frozen ? 'linear-gradient(135deg,#6E7A82 0%,#4F5963 60%,#3C444C 100%)' : 'linear-gradient(135deg,#EC7A45 0%,#D2561F 52%,#A23E12 100%)', boxShadow: '0 10px 24px rgba(180,70,20,0.26)', transition: 'background .3s' }}>
        <div style={{ position: 'absolute', top: -40, right: -30, width: 170, height: 170, borderRadius: 170, background: 'rgba(255,255,255,0.10)' }}/>
        <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={{ fontFamily: P.serif, fontStyle: 'italic', fontSize: 22, fontWeight: 600 }}>Pexxie</span>
          <span style={{ fontSize: 10, letterSpacing: 1.5, opacity: 0.85, fontWeight: 600 }}>BUSINESS DEBIT</span>
        </div>
        <div style={{ position: 'relative', width: 40, height: 30, borderRadius: 6, marginTop: 18, background: 'linear-gradient(135deg,#F2D89A,#D9B25F)' }}/>
        <div style={{ position: 'relative', fontFamily: P.mono, fontSize: 18, letterSpacing: 2, marginTop: 16 }}>{c.revealed ? '4821 0062 1190 4290' : '••••  ••••  ••••  4290'}</div>
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 16 }}>
          <div><div style={{ fontSize: 8.5, letterSpacing: 1, opacity: 0.7 }}>CARDHOLDER</div><div style={{ fontSize: 13, fontWeight: 600 }}>AMARA OKAFOR</div></div>
          <div style={{ textAlign: 'center' }}><div style={{ fontSize: 8.5, letterSpacing: 1, opacity: 0.7 }}>EXP</div><div style={{ fontFamily: P.mono, fontSize: 13 }}>06/27</div></div>
          <div style={{ textAlign: 'center' }}><div style={{ fontSize: 8.5, letterSpacing: 1, opacity: 0.7 }}>CVV</div><div style={{ fontFamily: P.mono, fontSize: 13 }}>{c.revealed ? '418' : '•••'}</div></div>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 8, marginBottom: 18 }}>
        <Btn kind="default" size="sm" icon="eye" full onClick={() => setCard({ revealed: !c.revealed })}>{c.revealed ? 'Hide details' : 'Reveal details'}</Btn>
        <Btn kind={c.frozen ? 'spark' : 'default'} size="sm" icon="lock" full onClick={() => { setCard({ frozen: !c.frozen }); toast(c.frozen ? 'Card unfrozen.' : 'Card frozen — purchases declined until you unfreeze.', { tone: c.frozen ? 'sage' : 'sky', icon: c.frozen ? 'check' : 'lock' }); }}>{c.frozen ? 'Unfreeze' : 'Freeze'}</Btn>
      </div>

      {/* spend + limit */}
      <Card pad={16} style={{ marginBottom: 14 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
          <Label>Spent this month</Label><span style={{ fontSize: 12, color: P.ink3 }}>Daily limit {window.money(c.dailyLimit)}</span>
        </div>
        <Num size={26}>{window.money(c.spentMonth)}</Num>
        <div style={{ height: 6, background: P.sunk, borderRadius: 6, overflow: 'hidden', margin: '10px 0 14px' }}><div style={{ width: Math.min(100, (c.spentMonth / (c.dailyLimit * 6)) * 100) + '%', height: '100%', background: P.spark }}/></div>
        <Label style={{ marginBottom: 8 }}>Daily spending limit</Label>
        <input type="range" min="1000" max="20000" step="500" value={c.dailyLimit} onChange={e => setCard({ dailyLimit: +e.target.value })} style={{ width: '100%', accentColor: P.spark }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: P.ink3, marginTop: 4 }}><span>$1,000</span><span style={{ color: P.ink, fontWeight: 600 }}>{window.money(c.dailyLimit)}</span><span>$20,000</span></div>
      </Card>

      <Label style={{ marginBottom: 6 }}>Recent card transactions</Label>
      {cardTxns.map((t, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '10px 0', borderBottom: i < cardTxns.length - 1 ? `1px solid ${P.line}` : 'none' }}>
          <div style={{ width: 30, height: 30, borderRadius: 8, background: P.sunk, color: P.ink2, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="card" size={14}/></div>
          <span style={{ flex: 1, fontSize: 13, color: P.ink }}>{t[0]}</span>
          <span style={{ fontSize: 11, color: P.ink3 }}>{t[1]}</span>
          <span style={{ fontFamily: P.mono, fontSize: 13, color: P.ink }}>−{window.money(t[2])}</span>
        </div>
      ))}
    </window.Drawer>
  );
};

// ── DEPOSIT (modal) ──────────────────────────────────────────
window.DepositModal = function DepositModal({ onClose }) {
  const P = window.PX; const { toast } = window.useApp();
  const [step, setStep] = React.useState('idle');   // idle → captured → amount
  const [amount, setAmount] = React.useState('');
  const copy = (label, value) => {
    if (navigator.clipboard) navigator.clipboard.writeText(value).catch(() => {});
    toast(`${label} copied.`, { icon: 'copy' });
  };
  const deposit = () => {
    const amt = parseFloat(amount);
    if (!amt || amt <= 0) { toast('Enter the check amount.', { tone: 'rose', icon: 'alert' }); return; }
    window.PXBank.set(s => ({
      ...s,
      activity: [{ id: window.pxid('dep'), acct: 'op', dir: 'in', desc: 'Mobile check deposit', sub: 'Deposit · Operating · in review', amt, date: 'Today', status: 'pending' }, ...s.activity],
    }));
    onClose(); toast(`Check received — ${window.money(amt)} pending review, available tomorrow.`, { tone: 'sage', icon: 'check' });
  };
  return (
    <window.Modal title="Add money" sub="Get paid into Operating ••4290" w={480} onClose={onClose}
      foot={<><div style={{ flex: 1 }}/><Btn kind="spark" size="md" onClick={onClose}>Done</Btn></>}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <Card pad={16}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 10 }}>
            <div style={{ width: 36, height: 36, borderRadius: 9, background: P.sparkTint, color: P.spark, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="image" size={17}/></div>
            <div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 600, color: P.ink }}>Deposit a check</div><div style={{ fontSize: 11.5, color: P.ink3 }}>Snap a photo — funds in 1 business day</div></div>
          </div>
          {step === 'idle' && <Btn kind="default" size="sm" icon="upload" full onClick={() => setStep('captured')}>Upload check photos</Btn>}
          {step !== 'idle' && (
            <>
              <div style={{ display: 'flex', gap: 8, marginBottom: 10 }}>
                {['Front', 'Back'].map(side => (
                  <div key={side} style={{ flex: 1, height: 64, borderRadius: 8, background: P.sunk, border: `1px solid ${P.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, color: P.sage, fontSize: 11.5, fontWeight: 600 }}><Icon name="check" size={13} color={P.sage}/>{side} captured</div>
                ))}
              </div>
              <label style={{ display: 'block', marginBottom: 10 }}>
                <div style={{ fontSize: 12, color: P.ink3, marginBottom: 5, fontWeight: 500 }}>Check amount</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, background: P.card, border: `1px solid ${P.lineStrong}`, borderRadius: P.rCtl, padding: '9px 11px' }}>
                  <span style={{ fontSize: 14, color: P.ink3 }}>$</span>
                  <input autoFocus value={amount} onChange={e => setAmount(e.target.value.replace(/[^0-9.]/g, ''))} placeholder="0.00" style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 14, color: P.ink, fontFamily: P.mono }}/>
                </div>
              </label>
              <Btn kind="spark" size="sm" full onClick={deposit}>Deposit{amount ? ` ${window.money(parseFloat(amount) || 0)}` : ''}</Btn>
            </>
          )}
        </Card>
        <Card pad={16}>
          <div style={{ fontSize: 14, fontWeight: 600, color: P.ink, marginBottom: 4 }}>Bank transfer / wire</div>
          <div style={{ fontSize: 11.5, color: P.ink3, marginBottom: 10 }}>Share these to receive ACH or wire payments.</div>
          {[['Account number', '••••••••4290'], ['Routing number', '021000021']].map((r, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderTop: `1px solid ${P.line}` }}>
              <div style={{ flex: 1 }}><div style={{ fontSize: 11, color: P.ink3 }}>{r[0]}</div><div style={{ fontFamily: P.mono, fontSize: 13, color: P.ink }}>{r[1]}</div></div>
              <Btn kind="soft" size="sm" icon="copy" onClick={() => copy(r[0], r[1])}>Copy</Btn>
            </div>
          ))}
        </Card>
        <Card pad={16} style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
          <div style={{ width: 36, height: 36, borderRadius: 9, background: '#635BFF', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 700 }}>stripe</div>
          <div style={{ flex: 1 }}><div style={{ fontSize: 13.5, fontWeight: 600, color: P.ink }}>Card sales via Stripe</div><div style={{ fontSize: 11.5, color: P.sage }}>Connected · payouts arrive here daily</div></div>
        </Card>
      </div>
    </window.Modal>
  );
};