function Billing({ go, user, plan, onCancel }) {
  const wide = useWide();
  const [tab, setTab] = React.useState('overview');
  const [confirm, setConfirm] = React.useState(false);
  const price = plan === 'yearly' ? 800 : 99;
  return (
    <div style={{ background: TH.bg, color: TH.ink, fontFamily: TH.serif, minHeight: '100vh' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: wide ? '40px 32px' : '24px 16px' }}>
        <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.accent, letterSpacing: 2, marginBottom: 10 }}>§ ACCOUNT · BILLING</div>
        <div style={{ fontSize: wide ? 42 : 30, letterSpacing: -1.2, marginBottom: 24 }}>
          Your <span style={{ fontStyle: 'italic', color: TH.accent }}>subscription.</span>
        </div>

        <div style={{ display: 'flex', gap: 0, borderBottom: `1px solid ${TH.rule}`, marginBottom: 24, fontFamily: TH.mono, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase' }}>
          {[['overview','Overview'],['history','Payment history'],['account','Account']].map(([k, l]) => (
            <div key={k} onClick={() => setTab(k)} style={{
              padding: '12px 18px', cursor: 'pointer',
              color: tab === k ? TH.accent : TH.inkSoft,
              borderBottom: tab === k ? `2px solid ${TH.accent}` : '2px solid transparent',
              marginBottom: -1,
            }}>{l}</div>
          ))}
        </div>

        {tab === 'overview' && (
          <div style={{ display: 'grid', gridTemplateColumns: wide ? '1.3fr 1fr' : '1fr', gap: 16 }}>
            <div style={{ background: TH.panel, border: `1px solid ${TH.rule}`, padding: wide ? 28 : 20 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20 }}>
                <div>
                  <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 2, marginBottom: 6 }}>CURRENT PLAN</div>
                  <div style={{ fontFamily: TH.serif, fontSize: 26 }}>Walkforward Membership</div>
                </div>
                <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.green, letterSpacing: 1, padding: '4px 10px', border: `1px solid ${TH.green}` }}>● ACTIVE</div>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 4 }}>
                <span style={{ fontFamily: TH.serif, fontSize: 48, letterSpacing: -1.5 }}>${price}</span>
                <span style={{ fontFamily: TH.mono, fontSize: 11, color: TH.muted }}>/ {plan === 'yearly' ? 'year' : 'month'}</span>
              </div>
              <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.muted, marginBottom: 20, letterSpacing: 1 }}>
                NEXT PAYMENT · APR 18, {plan === 'yearly' ? '2027' : 'MAY 18'} · VIA WHOP
              </div>
              <div style={{ height: 1, background: TH.rule, marginBottom: 20 }} />
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                {plan === 'monthly' ? <Btn primary small onClick={() => { /* upgrade */ }}>Switch to yearly · save $388</Btn> : <Btn ghost small>Switch to monthly</Btn>}
                <Btn ghost small onClick={() => setConfirm(true)}>Cancel subscription</Btn>
              </div>
            </div>

            <div style={{ background: TH.panelHi, border: `1px solid ${TH.rule}`, padding: wide ? 28 : 20 }}>
              <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 2, marginBottom: 14 }}>PAYMENT METHOD</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
                <div style={{ width: 40, height: 40, background: TH.accent, color: TH.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: TH.mono, fontSize: 18, fontWeight: 700 }}>W</div>
                <div>
                  <div style={{ fontFamily: TH.sans, fontSize: 14, fontWeight: 500 }}>Whop Crypto Checkout</div>
                  <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.muted }}>USDC · Ethereum</div>
                </div>
              </div>
              <Btn ghost small style={{ width: '100%' }}>Manage in Whop →</Btn>

              <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, marginTop: 18, lineHeight: 1.7, letterSpacing: 0.5 }}>
                ✓ 30-DAY REFUND WINDOW<br/>
                ✓ ARCHIVE ACCESS · 30 DAYS POST-CANCEL<br/>
                ✓ NO HIDDEN FEES
              </div>
            </div>
          </div>
        )}

        {tab === 'history' && (
          <div style={{ background: TH.panel, border: `1px solid ${TH.rule}` }}>
            {[
              ['Apr 18, 2026', `${plan === 'yearly' ? 'Yearly' : 'Monthly'} renewal`, `$${price}.00`, '0x8fa...3c1e', 'Paid'],
              ['Mar 18, 2026', 'Monthly renewal', '$99.00', '0x2b7...9a4d', 'Paid'],
              ['Feb 18, 2026', 'Monthly renewal', '$99.00', '0xe41...77cc', 'Paid'],
              ['Jan 18, 2026', 'Monthly renewal', '$99.00', '0x5f2...88a1', 'Paid'],
              ['Dec 18, 2025', 'Initial subscription', '$99.00', '0xa89...12ff', 'Paid'],
            ].map((row, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: wide ? '140px 1fr 100px 140px 80px' : '100px 1fr 80px',
                padding: '14px 20px', borderBottom: i < 4 ? `1px solid ${TH.rule}` : 'none',
                fontFamily: TH.mono, fontSize: 12, alignItems: 'center', gap: 10,
              }}>
                <span style={{ color: TH.muted }}>{row[0]}</span>
                <span style={{ fontFamily: TH.serif, fontSize: 14, color: TH.ink }}>{row[1]}</span>
                {wide && <span style={{ color: TH.ink }}>{row[2]}</span>}
                {wide && <span style={{ color: TH.accent, fontSize: 11 }}>{row[3]}</span>}
                <span style={{ color: TH.green, letterSpacing: 1, textAlign: 'right' }}>● {row[4].toUpperCase()}</span>
              </div>
            ))}
          </div>
        )}

        {tab === 'account' && (
          <div style={{ background: TH.panel, border: `1px solid ${TH.rule}`, padding: wide ? 28 : 20, maxWidth: 560 }}>
            <Field label="Display name" defaultValue={user.name}/>
            <Field label="Email" type="email" defaultValue={user.email}/>
            <Field label="Connected wallet" defaultValue={user.wallet || 'Not connected'} readOnly/>
            <Btn primary style={{ marginTop: 8 }}>Save changes</Btn>
          </div>
        )}

        {confirm && (
          <div style={{ position: 'fixed', inset: 0, background: 'rgba(13,13,10,0.85)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100, padding: 20 }}>
            <div style={{ background: TH.panel, border: `1px solid ${TH.accent}`, padding: 32, maxWidth: 440 }}>
              <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.red, letterSpacing: 2, marginBottom: 12 }}>⚠ CANCEL SUBSCRIPTION</div>
              <div style={{ fontFamily: TH.serif, fontSize: 24, marginBottom: 12, letterSpacing: -0.5 }}>Sorry to see you go.</div>
              <div style={{ fontFamily: TH.serif, fontSize: 15, color: TH.inkSoft, lineHeight: 1.6, marginBottom: 20 }}>
                Your access continues through <b>{plan === 'yearly' ? 'Apr 18, 2027' : 'May 18, 2026'}</b>. Archive access
                stays for 30 days after that. No hard feelings — reactivate anytime.
              </div>
              <div style={{ display: 'flex', gap: 10 }}>
                <Btn ghost onClick={() => setConfirm(false)} style={{ flex: 1 }}>Keep subscription</Btn>
                <Btn onClick={() => { onCancel(); setConfirm(false); go('landing'); }} style={{ flex: 1, borderColor: TH.red, color: TH.red }}>Confirm cancel</Btn>
              </div>
            </div>
          </div>
        )}
      </div>
      <Footer/>
    </div>
  );
}

Object.assign(window, { Billing });