/* Admin → Payments: revenue + transactions */
function PaymentsScreen() {
  const tx = [
    { n:'Jermaine Hatten', item:'Aftercare — May', amt:'$120.00', method:'Visa ••42', status:'Paid', c:'navy', stBg:'var(--success-100)', stFg:'var(--success-600)' },
    { n:'Ashley Brooks', item:'Lunch Balance', amt:'$45.00', method:'ACH', status:'Paid', c:'blue', stBg:'var(--success-100)', stFg:'var(--success-600)' },
    { n:'Marcus Lee', item:'Field Trip — Zoo', amt:'$28.00', method:'Mastercard ••08', status:'Pending', c:'green', stBg:'var(--warning-100)', stFg:'var(--warning-600)' },
    { n:'Dana Cruz', item:'Aftercare — May', amt:'$120.00', method:'Visa ••71', status:'Failed', c:'red', stBg:'var(--danger-100)', stFg:'var(--danger-600)' },
    { n:'Priya Nair', item:'Bus Pass — Q2', amt:'$90.00', method:'ACH', status:'Paid', c:'gold', stBg:'var(--success-100)', stFg:'var(--success-600)' },
  ];
  return (
    <div style={{ padding:'22px 28px 40px', height:'100%', overflowY:'auto', boxSizing:'border-box' }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginBottom:18 }}>
        <StatTile icon="banknote" tint="var(--success-100)" ic="var(--success-600)" value="$24,650" label="Collected (May)" delta="+8% vs Apr" deltaColor="var(--success-500)" />
        <StatTile icon="clock" tint="var(--warning-100)" ic="var(--warning-600)" value="$1,840" label="Pending" delta="14 invoices" deltaColor="var(--gray-500)" />
        <StatTile icon="circle-alert" tint="var(--danger-100)" ic="var(--danger-500)" value="$360" label="Failed / Overdue" delta="3 families" deltaColor="var(--danger-500)" />
        <StatTile icon="users" tint="var(--blue-100)" ic="var(--blue-500)" value="92%" label="Paid On Time" delta="of 1,248" deltaColor="var(--success-500)" />
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1.6fr', gap:16 }}>
        <Panel title="Revenue by Category">
          {[['Aftercare','$11,400','62%','var(--navy-600)'],['Lunch','$6,250','34%','var(--blue-500)'],['Transport','$4,600','25%','var(--gold-500)'],['Field Trips','$2,400','13%','var(--success-500)']].map(([cat,amt,w,col],i)=>(
            <div key={i} style={{ padding:'9px 0', borderBottom: i<3?'1px solid var(--gray-100)':'0' }}>
              <div style={{ display:'flex', justifyContent:'space-between', fontSize:13, marginBottom:6 }}><span style={{ fontWeight:700, color:'var(--ink)' }}>{cat}</span><span style={{ color:'var(--gray-600)', fontWeight:700 }}>{amt}</span></div>
              <div style={{ height:7, background:'var(--gray-200)', borderRadius:'999px', overflow:'hidden' }}><div style={{ width:w, height:'100%', background:col, borderRadius:'999px' }} /></div>
            </div>
          ))}
        </Panel>

        <Panel title="Recent Transactions" action={<span onClick={()=>jlToast('Exporting transactions…', { icon:'download' })} style={{ fontSize:12.5, fontWeight:700, color:'var(--blue-500)', cursor:'pointer' }}>Export</span>} pad={false}>
          <div style={{ display:'grid', gridTemplateColumns:'1.6fr 1.4fr 1fr 1fr', padding:'11px 18px', background:'var(--gray-50)', fontSize:11, fontWeight:800, letterSpacing:'.05em', textTransform:'uppercase', color:'var(--gray-500)' }}>
            <span>Family</span><span>Item</span><span>Amount</span><span style={{ textAlign:'right' }}>Status</span>
          </div>
          {tx.map((r,i)=>(
            <div key={i} style={{ display:'grid', gridTemplateColumns:'1.6fr 1.4fr 1fr 1fr', alignItems:'center', padding:'12px 18px', borderTop:'1px solid var(--gray-100)', fontSize:13.5 }}>
              <span style={{ display:'flex', alignItems:'center', gap:9 }}><Avatar initials={r.n.split(' ').map(w=>w[0]).join('')} color={r.c} size={30} /><span style={{ fontWeight:700, color:'var(--ink)' }}>{r.n}</span></span>
              <span style={{ color:'var(--gray-600)' }}>{r.item}</span>
              <span style={{ color:'var(--ink)', fontWeight:700 }}>{r.amt}</span>
              <span style={{ justifySelf:'end' }}><Pill bg={r.stBg} fg={r.stFg}>{r.status}</Pill></span>
            </div>
          ))}
        </Panel>
      </div>
    </div>
  );
}
Object.assign(window, { PaymentsScreen });