// Finance / Payouts
const Finance = () => {
  const payouts = [
    { id:'PO-2026-04-17', date:'17. Apr', amount:32140, events:3, status:'paid', bank:'Commerzbank ••4821' },
    { id:'PO-2026-04-10', date:'10. Apr', amount:21450, events:2, status:'paid', bank:'Commerzbank ••4821' },
    { id:'PO-2026-04-03', date:'03. Apr', amount:18590, events:4, status:'paid', bank:'Commerzbank ••4821' },
    { id:'PO-2026-03-27', date:'27. Mär', amount:27460, events:3, status:'paid', bank:'Commerzbank ••4821' },
  ];

  return (
    <div style={{ padding: '24px 36px 60px', maxWidth: 1400, margin: '0 auto' }}>
      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom: 22 }}>
        <div>
          <h1 className="display" style={{ margin: 0, fontSize: 30, fontWeight: 500, letterSpacing: '-0.02em' }}>Finance</h1>
          <div style={{ fontSize: 13.5, color: 'var(--ink-3)', marginTop: 4 }}>Payouts, invoices, and tax breakdowns for your workspace.</div>
        </div>
        <div style={{ display:'flex', gap: 8 }}>
          <Button variant="secondary" icon="download">VAT report</Button>
          <Button variant="secondary" icon="edit">Bank details</Button>
        </div>
      </div>

      {/* Hero: next payout */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 16, marginBottom: 18 }}>
        <Card pad={24} style={{ background: 'linear-gradient(135deg, var(--ink) 0%, oklch(0.28 0.02 60) 100%)', color: 'var(--bg)', border: 'none', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position:'absolute', inset:0, background:'radial-gradient(circle at 80% -20%, var(--accent), transparent 50%)', opacity: 0.3 }}/>
          <div style={{ position: 'relative' }}>
            <div style={{ fontSize: 11.5, fontWeight: 600, opacity: 0.7, textTransform:'uppercase', letterSpacing: '0.08em' }}>Next payout · in 4 days</div>
            <div style={{ display: 'flex', alignItems:'baseline', gap: 10, marginTop: 8 }}>
              <span className="display" style={{ fontSize: 52, fontWeight: 500, letterSpacing: '-0.02em' }}><AnimateNumber value={45830}/> €</span>
            </div>
            <div style={{ fontSize: 13, opacity: 0.8, marginTop: 4 }}>Across 4 events · settles to DE89 3704 ••4821 on 22. Apr</div>
            <div style={{ display:'flex', gap: 20, marginTop: 22, paddingTop: 18, borderTop: '1px solid rgba(255,255,255,0.1)' }}>
              <div>
                <div style={{ fontSize: 11, opacity: 0.7 }}>Gross sales</div>
                <div className="mono" style={{ fontSize: 15, fontWeight: 600, marginTop: 2 }}>52.300 €</div>
              </div>
              <div>
                <div style={{ fontSize: 11, opacity: 0.7 }}>Platform fee (3%)</div>
                <div className="mono" style={{ fontSize: 15, fontWeight: 600, marginTop: 2 }}>−1.569 €</div>
              </div>
              <div>
                <div style={{ fontSize: 11, opacity: 0.7 }}>Payment gateway</div>
                <div className="mono" style={{ fontSize: 15, fontWeight: 600, marginTop: 2 }}>−1.226 €</div>
              </div>
              <div>
                <div style={{ fontSize: 11, opacity: 0.7 }}>VAT (19%)</div>
                <div className="mono" style={{ fontSize: 15, fontWeight: 600, marginTop: 2 }}>−531 €</div>
              </div>
              <div>
                <div style={{ fontSize: 11, opacity: 0.7 }}>Refunds</div>
                <div className="mono" style={{ fontSize: 15, fontWeight: 600, marginTop: 2 }}>−2.630 €</div>
              </div>
            </div>
          </div>
        </Card>
        <Card pad={20}>
          <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Payout schedule</div>
          <div style={{ display:'flex', alignItems:'center', gap: 10, marginTop: 10 }}>
            <CircularProgress value={75} size={56} label="T+2"/>
            <div>
              <div style={{ fontSize: 14.5, fontWeight: 600 }}>Weekly — Mondays</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>Events settle 2 days after completion</div>
            </div>
          </div>
          <Divider style={{ margin: '16px 0' }}/>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ display:'flex', justifyContent:'space-between' }}>
              <span style={{ fontSize: 12.5, color: 'var(--ink-3)' }}>USt-IdNr</span>
              <span className="mono" style={{ fontSize: 12.5, fontWeight: 500 }}>DE312894567</span>
            </div>
            <div style={{ display:'flex', justifyContent:'space-between' }}>
              <span style={{ fontSize: 12.5, color: 'var(--ink-3)' }}>Steuernummer</span>
              <span className="mono" style={{ fontSize: 12.5, fontWeight: 500 }}>29/451/00234</span>
            </div>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
              <span style={{ fontSize: 12.5, color: 'var(--ink-3)' }}>KYC status</span>
              <Chip tone="success" size="sm" icon="check">Verified</Chip>
            </div>
          </div>
        </Card>
      </div>

      {/* Revenue breakdown + chart */}
      <div style={{ display:'grid', gridTemplateColumns: '2fr 1fr', gap: 16, marginBottom: 18 }}>
        <Card pad={20}>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom: 18 }}>
            <div>
              <div style={{ fontSize: 13.5, fontWeight: 600 }}>Revenue by month</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>Last 6 months · Gross & net</div>
            </div>
            <SegControl value="6m" onChange={()=>{}} options={[
              { value:'3m', label:'3M' },{ value:'6m', label:'6M' },{ value:'1y', label:'1Y' },
            ]}/>
          </div>
          {/* Bar chart */}
          <div style={{ display:'flex', alignItems:'flex-end', gap: 16, height: 180 }}>
            {[
              { m:'Nov', gross:42, net:31 },
              { m:'Dez', gross:58, net:43 },
              { m:'Jan', gross:51, net:38 },
              { m:'Feb', gross:62, net:47 },
              { m:'Mär', gross:78, net:60 },
              { m:'Apr', gross:92, net:71 },
            ].map(b => (
              <div key={b.m} style={{ flex: 1, display: 'flex', flexDirection:'column', alignItems:'center', gap: 6 }}>
                <div style={{ display:'flex', alignItems:'flex-end', gap: 4, width:'100%', height: 160 }}>
                  <div style={{ flex: 1, height: `${b.gross}%`, background: 'var(--ink)', borderRadius: '4px 4px 0 0', transition: `height ${MOTION.dur.slow}ms ${MOTION.ease.out}` }}/>
                  <div style={{ flex: 1, height: `${b.net}%`, background: 'var(--accent)', borderRadius: '4px 4px 0 0', transition: `height ${MOTION.dur.slow}ms ${MOTION.ease.out}` }}/>
                </div>
                <div style={{ fontSize: 11.5, color: 'var(--ink-3)', fontWeight: 500 }}>{b.m}</div>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 16, marginTop: 12, fontSize: 12, color: 'var(--ink-3)' }}>
            <span style={{ display:'inline-flex', alignItems:'center', gap: 6 }}><span style={{ width: 10, height: 10, borderRadius: 3, background:'var(--ink)' }}/>Gross</span>
            <span style={{ display:'inline-flex', alignItems:'center', gap: 6 }}><span style={{ width: 10, height: 10, borderRadius: 3, background:'var(--accent)' }}/>Net payout</span>
          </div>
        </Card>
        <Card pad={20}>
          <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 14 }}>Top events by revenue</div>
          {[
            { name:'Apparat · Berghain', rev:58400, pct:100 },
            { name:'Hot Chip · Astra', rev:28400, pct:49 },
            { name:'Roosevelt · Columbiahalle', rev:19200, pct:33 },
            { name:'Tempelhof Open Air', rev:12800, pct:22 },
          ].map((e, i) => (
            <div key={i} style={{ marginBottom: 14 }}>
              <div style={{ display:'flex', justifyContent: 'space-between', fontSize: 12.5, marginBottom: 4 }}>
                <span style={{ fontWeight: 500 }}>{e.name}</span>
                <span className="mono" style={{ fontWeight: 500 }}>{euro(e.rev, { compact: true })}</span>
              </div>
              <div style={{ height: 4, borderRadius: 99, background: 'var(--bg-muted)' }}>
                <div style={{ height: '100%', width: `${e.pct}%`, background: 'var(--accent)', borderRadius: 99 }}/>
              </div>
            </div>
          ))}
        </Card>
      </div>

      {/* Payouts table */}
      <Card pad={0}>
        <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--line)', display:'flex', alignItems:'center' }}>
          <div style={{ fontSize: 13.5, fontWeight: 600 }}>Payout history</div>
          <div style={{ flex: 1 }}/>
          <Button variant="ghost" size="sm" icon="download">Download statements</Button>
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
          <thead>
            <tr style={{ background: 'var(--bg-sunken)', borderBottom: '1px solid var(--line)' }}>
              {['Payout ID','Date','Events','Amount','Destination','Status',''].map(h => (
                <th key={h} style={{ padding: '10px 14px', textAlign: 'left', fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {payouts.map(p => (
              <tr key={p.id} style={{ borderBottom: '1px solid var(--line)', height: 52 }}>
                <td style={{ padding: '0 14px' }}><span className="mono" style={{ fontWeight: 500 }}>{p.id}</span></td>
                <td style={{ padding: '0 14px', color: 'var(--ink-2)' }}>{p.date}</td>
                <td style={{ padding: '0 14px' }}>{p.events} events</td>
                <td style={{ padding: '0 14px' }}><span className="mono" style={{ fontWeight: 600 }}>{euro(p.amount)}</span></td>
                <td style={{ padding: '0 14px', color: 'var(--ink-2)' }}>{p.bank}</td>
                <td style={{ padding: '0 14px' }}><Chip tone="success" size="sm" icon="check">{p.status}</Chip></td>
                <td style={{ padding: '0 14px' }}><Button variant="ghost" size="sm" icon="download">Invoice</Button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div>
  );
};

window.Finance = Finance;