// Finance — overview + Stripe Connect
const Finance = ({ view = 'overview', setRoute }) => {
  if (view === 'stripe') return <FinanceStripe setRoute={setRoute}/>;
  return <FinanceOverview setRoute={setRoute}/>;
};

const FinanceOverview = ({ setRoute }) => {
  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>

      {/* Payout mode banner — Desipass-managed vs Stripe Connect */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 18 }}>
        <Card pad={18} style={{ borderColor: 'var(--ink)', borderWidth: 1.5 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
            <div style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--ink)', color: 'var(--bg)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="money" size={14}/></div>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>Platform payouts</div>
            <div style={{ flex: 1 }}/>
            <Chip tone="success" size="sm" icon="check">Active</Chip>
          </div>
          <div style={{ fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.5 }}>
            Desipass collects payments and pays you weekly. <strong style={{ color: 'var(--ink-2)' }}>3% platform fee</strong> + 1.4% + 0.25 € card processing.
          </div>
          <div style={{ display: 'flex', gap: 16, marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--line)' }}>
            <div><div style={{ fontSize: 10.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>This month</div><div className="mono" style={{ fontSize: 14, fontWeight: 600, marginTop: 2 }}>92,300 €</div></div>
            <div><div style={{ fontSize: 10.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>Events</div><div className="mono" style={{ fontSize: 14, fontWeight: 600, marginTop: 2 }}>18</div></div>
          </div>
        </Card>
        <Card pad={18} hover onClick={() => setRoute && setRoute('finance-stripe')} style={{ cursor: 'pointer' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
            <div style={{ width: 28, height: 28, borderRadius: 8, background: '#635BFF', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 600 }}>S</div>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>Direct sales · Stripe Connect</div>
            <div style={{ flex: 1 }}/>
            <Chip tone="warning" size="sm" icon="clock">Onboarding</Chip>
            <Icon name="chevronRight" size={14} style={{ color: 'var(--ink-4)' }}/>
          </div>
          <div style={{ fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.5 }}>
            Connect your own Stripe account, charge customers directly, settle to your bank. <strong style={{ color: 'var(--ink-2)' }}>1% platform fee</strong> + Stripe&apos;s rates.
          </div>
          <div style={{ display: 'flex', gap: 16, marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--line)' }}>
            <div><div style={{ fontSize: 10.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>This month</div><div className="mono" style={{ fontSize: 14, fontWeight: 600, marginTop: 2 }}>14,820 €</div></div>
            <div><div style={{ fontSize: 10.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>Events</div><div className="mono" style={{ fontSize: 14, fontWeight: 600, marginTop: 2 }}>3</div></div>
          </div>
        </Card>
      </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>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// Stripe Connect — connect, configure, monitor
// ─────────────────────────────────────────────────────────────────────────────
const FinanceStripe = ({ setRoute }) => {
  const [tab, setTab] = React.useState('account');
  const [connectType, setConnectType] = React.useState('express');

  const requirements = [
    { label: 'Business representative ID document', status: 'pending', due: 'Due in 6 days' },
    { label: 'External bank account verification', status: 'pending', due: 'Due in 6 days' },
  ];

  const paymentMethods = [
    { k: 'card', l: 'Card', d: 'Visa, Mastercard, Amex', on: true, fee: '1.4% + 0.25 €' },
    { k: 'sepa', l: 'SEPA Direct Debit', d: 'EUR bank debit', on: true, fee: '0.35 €' },
    { k: 'klarna', l: 'Klarna', d: 'Buy now, pay later · DE', on: true, fee: '4.99% + 0.30 €' },
    { k: 'apple', l: 'Apple Pay', d: 'iOS / Safari', on: true, fee: '1.4% + 0.25 €' },
    { k: 'google', l: 'Google Pay', d: 'Android / Chrome', on: true, fee: '1.4% + 0.25 €' },
    { k: 'sofort', l: 'Sofort', d: 'DE / AT bank transfer', on: false, fee: '1.4% + 0.25 €' },
    { k: 'giropay', l: 'Giropay', d: 'DE bank transfer', on: false, fee: '1.4% + 0.25 €' },
  ];

  return (
    <div style={{ padding: '24px 36px 60px', maxWidth: 1400, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: 20 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
            <div style={{ width: 22, height: 22, borderRadius: 6, background: '#635BFF', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontSize: 12, fontWeight: 600 }}>S</div>
            <span style={{ fontSize: 11, fontWeight: 700, color: '#4F47D9', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Stripe Connect</span>
            <Chip tone="warning" size="sm" icon="clock">Onboarding</Chip>
          </div>
          <h1 className="display" style={{ margin: 0, fontSize: 30, fontWeight: 500, letterSpacing: '-0.02em' }}>Direct sales</h1>
          <div style={{ fontSize: 13.5, color: 'var(--ink-3)', marginTop: 4 }}>Connect your own Stripe account so customers buy directly from you.</div>
        </div>
        <div style={{ flex: 1 }}/>
        <Button variant="secondary" icon="external">Open Stripe dashboard</Button>
      </div>

      {/* Account hero */}
      <Card pad={0} style={{ marginBottom: 18, overflow: 'hidden' }}>
        <div style={{ padding: 24, background: 'linear-gradient(135deg, #635BFF 0%, #4F47D9 100%)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 90% -30%, #fff, transparent 50%)', opacity: 0.15 }}/>
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 24 }}>
            <div>
              <div style={{ fontSize: 11, fontWeight: 600, opacity: 0.8, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Connected account</div>
              <div className="mono" style={{ fontSize: 22, fontWeight: 600, marginTop: 8, letterSpacing: '-0.01em' }}>acct_1Q••••••KvL2</div>
              <div style={{ fontSize: 12.5, opacity: 0.85, marginTop: 4 }}>Rhythm Events GmbH · Berlin · DE</div>
              <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '5px 10px', borderRadius: 99, background: 'rgba(255,255,255,0.15)', fontSize: 11.5, fontWeight: 500 }}>
                  <Icon name="check" size={11}/>charges_enabled
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '5px 10px', borderRadius: 99, background: 'rgba(255,255,255,0.15)', fontSize: 11.5, fontWeight: 500 }}>
                  <Icon name="clock" size={11}/>payouts_enabled · pending verification
                </div>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, justifyContent: 'center' }}>
              <Button variant="secondary" size="md" icon="external" style={{ background: '#fff', color: '#4F47D9' }}>Continue onboarding</Button>
              <div style={{ fontSize: 11, opacity: 0.85, textAlign: 'center' }}>2 requirements · est. 5 min</div>
            </div>
          </div>
        </div>

        {/* Requirements list */}
        <div style={{ padding: '14px 18px', background: 'oklch(0.99 0.02 80)', borderTop: '1px solid oklch(0.85 0.05 80)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
            <Icon name="warning" size={13} style={{ color: 'var(--warning)' }}/>
            <span style={{ fontSize: 12, fontWeight: 600 }}>Action required to enable payouts</span>
          </div>
          {requirements.map((r, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: i < requirements.length - 1 ? '1px solid oklch(0.85 0.05 80 / 0.5)' : 'none' }}>
              <div style={{ width: 16, height: 16, borderRadius: 99, border: '1.5px solid var(--warning)', flexShrink: 0 }}/>
              <div style={{ flex: 1, fontSize: 12.5 }}>{r.label}</div>
              <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>{r.due}</span>
              <Button variant="ghost" size="sm" icon="arrow">Submit</Button>
            </div>
          ))}
        </div>
      </Card>

      <Tabs value={tab} onChange={setTab} options={[
        { value: 'account', label: 'Account' },
        { value: 'methods', label: 'Payment methods' },
        { value: 'payouts', label: 'Payouts' },
        { value: 'fees', label: 'Fees & pricing' },
        { value: 'events', label: 'Events on Stripe' },
      ]}/>

      {tab === 'account' && (
        <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <Card>
            <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 4 }}>Connection type</div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginBottom: 14 }}>You can switch between modes for new events. Existing events stay on their current mode.</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { k: 'standard', l: 'Standard', d: 'You manage Stripe directly. Full Stripe dashboard. Best for established merchants.', fee: '1% Desipass fee' },
                { k: 'express', l: 'Express', d: 'Desipass hosts onboarding. Simple Express dashboard. Recommended for most organisers.', fee: '1.5% Desipass fee', recommended: true },
              ].map(o => (
                <button key={o.k} onClick={() => setConnectType(o.k)} style={{
                  textAlign: 'left', padding: '12px 14px', borderRadius: 10,
                  border: `1.5px solid ${connectType === o.k ? '#635BFF' : 'var(--line)'}`,
                  background: connectType === o.k ? 'oklch(0.97 0.02 270)' : 'var(--bg-raised)',
                  fontFamily: 'inherit', cursor: 'pointer', position: 'relative',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <div style={{ width: 16, height: 16, borderRadius: 99, border: `2px solid ${connectType === o.k ? '#635BFF' : 'var(--line-2)'}`, background: connectType === o.k ? '#635BFF' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      {connectType === o.k && <div style={{ width: 6, height: 6, borderRadius: 99, background: '#fff' }}/>}
                    </div>
                    <span style={{ fontSize: 13.5, fontWeight: 600 }}>{o.l}</span>
                    {o.recommended && <Chip tone="accent" size="sm">Recommended</Chip>}
                    <div style={{ flex: 1 }}/>
                    <span className="mono" style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--ink-2)' }}>{o.fee}</span>
                  </div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 6, paddingLeft: 24, lineHeight: 1.5 }}>{o.d}</div>
                </button>
              ))}
            </div>
          </Card>
          <Card>
            <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 14 }}>Account details</div>
            {[
              { l: 'Country', v: 'Germany (DE)' },
              { l: 'Currency', v: 'EUR' },
              { l: 'Business type', v: 'Company · GmbH' },
              { l: 'Business name', v: 'Rhythm Events GmbH' },
              { l: 'Tax ID', v: 'DE312894567', mono: true },
              { l: 'Email on file', v: 'finance@rhythm-events.de' },
            ].map((d, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderBottom: i < 5 ? '1px solid var(--line)' : 'none' }}>
                <span style={{ fontSize: 12.5, color: 'var(--ink-3)' }}>{d.l}</span>
                <span className={d.mono ? 'mono' : ''} style={{ fontSize: 12.5, fontWeight: 500 }}>{d.v}</span>
              </div>
            ))}
          </Card>
        </div>
      )}

      {tab === 'methods' && (
        <Card pad={0} style={{ marginTop: 16 }}>
          <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--line)' }}>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>Accepted payment methods</div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>Toggles apply to new events. Stripe&apos;s own approval may be required for some methods.</div>
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
            <tbody>
              {paymentMethods.map((m, i) => (
                <tr key={m.k} style={{ borderBottom: i < paymentMethods.length - 1 ? '1px solid var(--line)' : 'none' }}>
                  <td style={{ padding: '14px 18px', width: 50 }}>
                    <div style={{ width: 32, height: 22, borderRadius: 5, background: 'var(--bg-sunken)', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9.5, fontWeight: 700, color: 'var(--ink-3)' }}>{m.l.slice(0, 4).toUpperCase()}</div>
                  </td>
                  <td style={{ padding: '14px 0' }}>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{m.l}</div>
                    <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{m.d}</div>
                  </td>
                  <td style={{ padding: '14px 18px', width: 160, textAlign: 'right' }}>
                    <span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>{m.fee}</span>
                  </td>
                  <td style={{ padding: '14px 18px', width: 60, textAlign: 'right' }}>
                    <Toggle checked={m.on} onChange={()=>{}}/>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      )}

      {tab === 'payouts' && (
        <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 14 }}>
          <Card>
            <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 14 }}>Payout schedule</div>
            <Field label="Frequency"><Select value="weekly" options={[
              { value: 'daily', label: 'Daily — every business day' },
              { value: 'weekly', label: 'Weekly — Mondays' },
              { value: 'monthly', label: 'Monthly — 1st of each month' },
              { value: 'manual', label: 'Manual — pay out on demand' },
            ]}/></Field>
            <Field label="Anchor day" style={{ marginTop: 12 }}><Select value="mon" options={[
              { value: 'mon', label: 'Monday' }, { value: 'tue', label: 'Tuesday' }, { value: 'wed', label: 'Wednesday' }, { value: 'thu', label: 'Thursday' }, { value: 'fri', label: 'Friday' },
            ]}/></Field>
            <Field label="Settlement delay" style={{ marginTop: 12 }}><Select value="t2" options={[
              { value: 't2', label: 'T+2 (default)' },
              { value: 't7', label: 'T+7 — lower risk reserve' },
            ]}/></Field>
          </Card>
          <Card>
            <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 14 }}>External account</div>
            <div style={{ padding: 14, borderRadius: 10, background: 'var(--bg-sunken)', display: 'flex', gap: 12, alignItems: 'center' }}>
              <Icon name="money" size={20} style={{ color: 'var(--ink-2)' }}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12.5, fontWeight: 600 }}>Commerzbank</div>
                <div className="mono" style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>DE89 3704 ••••••4821</div>
              </div>
              <Chip tone="success" size="sm" icon="check">Verified</Chip>
            </div>
            <Button variant="secondary" size="sm" icon="plus" style={{ marginTop: 10, width: '100%' }}>Add backup account</Button>
            <div style={{ marginTop: 14, padding: 10, borderRadius: 8, background: 'oklch(0.97 0.02 80)', fontSize: 11, color: 'var(--ink-3)', lineHeight: 1.5 }}>
              Stripe pays out directly to this account in EUR. SEPA settlement typically arrives within 1 business day.
            </div>
          </Card>
        </div>
      )}

      {tab === 'fees' && (
        <Card style={{ marginTop: 16 }}>
          <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 4 }}>Fee breakdown · per ticket sold</div>
          <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginBottom: 18 }}>Example: a 35,00 € ticket sold via Card on Express Connect</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 30 }}>
            <div>
              {[
                { l: 'Ticket price', v: '35,00 €', strong: true },
                { l: 'Stripe processing (1.4% + 0.25 €)', v: '−0,74 €' },
                { l: 'Desipass platform fee (1.5%)', v: '−0,53 €' },
                { l: 'VAT on platform fee (19%)', v: '−0,10 €' },
              ].map((r, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0', borderBottom: i < 3 ? '1px solid var(--line)' : 'none' }}>
                  <span style={{ fontSize: 12.5, fontWeight: r.strong ? 600 : 400, color: r.strong ? 'var(--ink)' : 'var(--ink-2)' }}>{r.l}</span>
                  <span className="mono" style={{ fontSize: 12.5, fontWeight: r.strong ? 600 : 500 }}>{r.v}</span>
                </div>
              ))}
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 0 0', marginTop: 4, borderTop: '2px solid var(--ink)' }}>
                <span style={{ fontSize: 13, fontWeight: 700 }}>You receive</span>
                <span className="mono" style={{ fontSize: 16, fontWeight: 700, color: 'var(--success)' }}>33,63 €</span>
              </div>
            </div>
            <div>
              <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 12, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Compared to Platform payouts</div>
              <div style={{ padding: 14, borderRadius: 10, background: 'var(--bg-sunken)', border: '1px solid var(--line)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, marginBottom: 6 }}><span style={{ color: 'var(--ink-3)' }}>Stripe Connect</span><span className="mono" style={{ fontWeight: 600 }}>33,63 €</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, marginBottom: 6 }}><span style={{ color: 'var(--ink-3)' }}>Platform payouts</span><span className="mono" style={{ fontWeight: 600 }}>32,98 €</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, paddingTop: 8, marginTop: 8, borderTop: '1px solid var(--line)' }}>
                  <span style={{ fontWeight: 600 }}>You keep more</span>
                  <span className="mono" style={{ fontWeight: 700, color: 'var(--success)' }}>+0,65 €</span>
                </div>
              </div>
              <div style={{ marginTop: 14, fontSize: 11.5, color: 'var(--ink-3)', lineHeight: 1.5 }}>
                Stripe Connect adds direct billing relationship with attendees, instant payouts, and your own dispute handling — at slightly better unit economics for higher-volume organisers.
              </div>
            </div>
          </div>
        </Card>
      )}

      {tab === 'events' && (
        <Card pad={0} style={{ marginTop: 16 }}>
          <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 13.5, fontWeight: 600 }}>Events using Stripe Connect</div>
              <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>Each event can be set to platform or direct mode independently</div>
            </div>
            <div style={{ flex: 1 }}/>
            <Button variant="secondary" size="sm" icon="plus">Add event to Stripe</Button>
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
            <thead>
              <tr style={{ background: 'var(--bg-sunken)', borderBottom: '1px solid var(--line)' }}>
                {['Event','Date','Mode','Tickets sold','Volume',''].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>
              {[
                { name: 'Apparat · LP5 Live', date: '24. Mai', mode: 'stripe', sold: 1840, volume: 64400 },
                { name: 'Hot Chip · Astra', date: '12. Jun', mode: 'stripe', sold: 920, volume: 32200 },
                { name: 'Roosevelt · Columbiahalle', date: '08. Jul', mode: 'platform', sold: 1240, volume: 43400 },
                { name: 'Tempelhof Open Air', date: '28. Jul', mode: 'stripe', sold: 4820, volume: 192800 },
              ].map((e, i, arr) => (
                <tr key={i} style={{ borderBottom: i < arr.length - 1 ? '1px solid var(--line)' : 'none', height: 52 }}>
                  <td style={{ padding: '0 14px', fontWeight: 600 }}>{e.name}</td>
                  <td style={{ padding: '0 14px', color: 'var(--ink-2)' }}>{e.date}</td>
                  <td style={{ padding: '0 14px' }}>
                    {e.mode === 'stripe'
                      ? <Chip tone="accent" size="sm">Stripe Connect</Chip>
                      : <Chip tone="neutral" size="sm">Platform</Chip>}
                  </td>
                  <td style={{ padding: '0 14px' }}><span className="mono">{e.sold.toLocaleString()}</span></td>
                  <td style={{ padding: '0 14px' }}><span className="mono" style={{ fontWeight: 600 }}>{euro(e.volume)}</span></td>
                  <td style={{ padding: '0 14px', textAlign: 'right' }}><Button variant="ghost" size="sm" icon="more"/></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      )}
    </div>
  );
};

window.Finance = Finance;