// dash-card.jsx — Card tab: flip to reveal, round-up, freeze, transactions

function CardTab({ btcPrice }) {
  const [revealed, setRevealed] = React.useState(false);
  const [frozen, setFrozen] = React.useState(false);
  const [roundUp, setRoundUp] = React.useState('5');
  const [generating, setGenerating] = React.useState(false);
  const [paying, setPaying] = React.useState(false);
  const [benefitsOpen, setBenefitsOpen] = React.useState(false);

  // Card statement state
  const openBalance = 1_847.52;
  const minDue = 85.00;
  const dueDate = 'May 12';
  const statementDate = 'Apr 28';
  const [statementBal, setStatementBal] = React.useState(openBalance);

  return (
    <DashScreen>
      <DashHeader subtitle="Your card" title="BTC Now Card" />

      <div style={{ padding: '0 20px 16px' }}>
        {/* THE CARD */}
        <div style={{
          perspective: 1400, marginBottom: 18,
          filter: frozen ? 'grayscale(0.85) brightness(0.8)' : 'none',
          transition: 'filter 0.4s',
        }}>
          <div
            onClick={() => setRevealed(r => !r)}
            style={{
              position: 'relative', width: '100%', aspectRatio: '1.586 / 1',
              transformStyle: 'preserve-3d',
              transform: `rotateY(${revealed ? 180 : 0}deg)`,
              transition: 'transform 0.7s cubic-bezier(0.16, 1, 0.3, 1)',
              cursor: 'pointer',
            }}>
            {/* FRONT */}
            <div style={{
              position: 'absolute', inset: 0, borderRadius: 20,
              background: 'linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%)',
              border: '1px solid rgba(255,159,10,0.3)',
              boxShadow: '0 20px 50px rgba(0,0,0,0.7), 0 0 40px rgba(255,159,10,0.15)',
              backfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden',
              padding: 20, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              overflow: 'hidden',
            }}>
              <div style={{ position: 'absolute', top: -40, right: -40, width: 160, height: 160, borderRadius: '50%', background: DASH_GRADIENT, opacity: 0.5, filter: 'blur(30px)' }}/>
              <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div style={{ fontFamily: DASH_DISPLAY, fontWeight: 700, fontSize: 18, color: '#fff', letterSpacing: '-0.02em' }}>
                  BTC <span style={{ color: '#FF9F0A' }}>Now</span>
                </div>
                <div style={{ width: 36, height: 28, borderRadius: 5, background: DASH_GRADIENT, position: 'relative' }}>
                  <div style={{ position: 'absolute', inset: 3, borderRadius: 2, background: 'rgba(0,0,0,0.15)', display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr', gap: 1 }}>
                    <div style={{ background: 'rgba(0,0,0,0.15)' }}/><div style={{ background: 'rgba(0,0,0,0.15)' }}/><div style={{ background: 'rgba(0,0,0,0.15)' }}/><div style={{ background: 'rgba(0,0,0,0.15)' }}/>
                  </div>
                </div>
              </div>
              <div style={{ position: 'relative' }}>
                <div style={{ fontFamily: DASH_MONO, fontSize: 18, letterSpacing: '0.15em', fontWeight: 500, color: '#fff' }}>
                  ••••  ••••  ••••  4291
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14, alignItems: 'flex-end' }}>
                  <div>
                    <div style={{ fontFamily: DASH_MONO, fontSize: 8, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.2em', marginBottom: 2 }}>CARDHOLDER</div>
                    <div style={{ fontFamily: DASH_MONO, fontSize: 12, color: '#fff', letterSpacing: '0.08em', fontWeight: 500 }}>MARC DUMPFF</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontFamily: DASH_MONO, fontSize: 8, color: '#FF9F0A', letterSpacing: '0.2em', marginBottom: 2 }}>DYNAMIC</div>
                    <div style={{ fontFamily: DASH_MONO, fontSize: 11, color: 'rgba(255,255,255,0.7)', letterSpacing: '0.1em' }}>VISA</div>
                  </div>
                </div>
              </div>
              {frozen && (
                <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(8,12,20,0.35)', backdropFilter: 'blur(2px)' }}>
                  <div style={{ padding: '8px 16px', borderRadius: 100, background: 'rgba(59,130,246,0.2)', border: '1px solid rgba(59,130,246,0.5)', color: '#60A5FA', fontSize: 11, fontWeight: 600, letterSpacing: '0.2em', textTransform: 'uppercase', fontFamily: DASH_MONO }}>❄ FROZEN</div>
                </div>
              )}
              {!revealed && !frozen && (
                <div style={{ position: 'absolute', bottom: 12, left: '50%', transform: 'translateX(-50%)', fontFamily: DASH_MONO, fontSize: 9, color: 'rgba(255,159,10,0.7)', letterSpacing: '0.2em', textTransform: 'uppercase', animation: 'tapPulse 1.8s ease-in-out infinite' }}>Tap to reveal</div>
              )}
            </div>
            {/* BACK */}
            <div style={{
              position: 'absolute', inset: 0, borderRadius: 20,
              background: 'linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%)',
              border: '1px solid rgba(255,159,10,0.3)',
              boxShadow: '0 20px 50px rgba(0,0,0,0.7)',
              backfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden',
              transform: 'rotateY(180deg)',
              padding: '20px', display: 'flex', flexDirection: 'column', gap: 12,
            }}>
              <div style={{ height: 38, background: '#000', margin: '8px -20px 0' }}/>
              <div>
                <div style={{ fontFamily: DASH_MONO, fontSize: 9, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.2em' }}>CARD NUMBER</div>
                <div style={{ fontFamily: DASH_MONO, fontSize: 18, letterSpacing: '0.12em', color: '#fff', fontWeight: 500, marginTop: 2 }}>4485  2841  9372  4291</div>
              </div>
              <div style={{ display: 'flex', gap: 24 }}>
                <div>
                  <div style={{ fontFamily: DASH_MONO, fontSize: 9, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.2em' }}>EXP</div>
                  <div style={{ fontFamily: DASH_MONO, fontSize: 13, color: '#fff', fontWeight: 500 }}>12 / 29</div>
                </div>
                <div>
                  <div style={{ fontFamily: DASH_MONO, fontSize: 9, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.2em' }}>CVC</div>
                  <div style={{ fontFamily: DASH_MONO, fontSize: 13, color: '#FF9F0A', fontWeight: 600 }}>482</div>
                </div>
                <div>
                  <div style={{ fontFamily: DASH_MONO, fontSize: 9, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.2em' }}>ZIP</div>
                  <div style={{ fontFamily: DASH_MONO, fontSize: 13, color: '#fff', fontWeight: 500 }}>34237</div>
                </div>
              </div>
              <div style={{ flex: 1 }}/>
              <div style={{ fontFamily: DASH_MONO, fontSize: 9, color: 'rgba(255,255,255,0.4)', letterSpacing: '0.15em', textAlign: 'center' }}>TAP AGAIN TO HIDE</div>
            </div>
          </div>
        </div>

        {/* ACTIONS */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginBottom: 14 }}>
          <button onClick={() => setFrozen(f => !f)} style={{
            padding: '14px 8px', borderRadius: 14,
            background: frozen ? 'rgba(59,130,246,0.12)' : 'rgba(255,255,255,0.04)',
            border: `1px solid ${frozen ? 'rgba(59,130,246,0.4)' : 'rgba(255,255,255,0.1)'}`,
            color: frozen ? '#60A5FA' : '#fff',
            fontSize: 12, fontWeight: 600, cursor: 'pointer',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6,
          }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v20M4.93 4.93l14.14 14.14M2 12h20M4.93 19.07 19.07 4.93M7 5l5 2 5-2M7 19l5-2 5 2M5 7l2 5-2 5M19 7l-2 5 2 5"/></svg>
            {frozen ? 'Frozen' : 'Freeze'}
          </button>
          <button onClick={() => setBenefitsOpen(true)} style={{
            padding: '14px 8px', borderRadius: 14,
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.1)',
            color: '#fff',
            fontSize: 12, fontWeight: 600, cursor: 'pointer',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6,
          }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2 9.5 8.5 2 9.5l5.5 5L6 22l6-3 6 3-1.5-7.5L22 9.5 14.5 8.5 12 2z"/></svg>
            Benefits
          </button>
          <button onClick={() => { setGenerating(true); setTimeout(() => setGenerating(false), 1400); }} style={{
            padding: '14px 8px', borderRadius: 14,
            background: DASH_GRADIENT, border: 'none', color: '#000',
            fontSize: 12, fontWeight: 600, cursor: 'pointer',
            boxShadow: '0 0 16px rgba(255,159,10,0.3)',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6,
          }}>
            {generating ? (
              <>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>
                Generating
              </>
            ) : (
              <>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="6" width="20" height="14" rx="2"/><path d="M2 10h20M7 16h2"/><path d="M18 3v4M16 5h4" strokeWidth="1.5"/></svg>
                Virtual
              </>
            )}
          </button>
        </div>

        {/* CURRENT STATEMENT */}
        <DashCard style={{ marginBottom: 14, padding: 18 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
            <div>
              <div style={{ fontFamily: DASH_MONO, fontSize: 9, letterSpacing: '0.2em', color: 'rgba(245,245,247,0.5)', textTransform: 'uppercase', marginBottom: 4 }}>Current statement</div>
              <div style={{ fontFamily: DASH_DISPLAY, fontSize: 28, fontWeight: 700, color: '#fff', letterSpacing: '-0.03em', lineHeight: 1 }}>{fmtUsd(statementBal, { decimals: 2 })}</div>
              <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.55)', marginTop: 4 }}>Statement closed {statementDate}</div>
            </div>
            <div style={{ padding: '4px 9px', borderRadius: 100, background: 'rgba(255,159,10,0.12)', border: '1px solid rgba(255,159,10,0.35)', fontFamily: DASH_MONO, fontSize: 9, letterSpacing: '0.12em', color: '#FF9F0A', fontWeight: 700 }}>DUE {dueDate.toUpperCase()}</div>
          </div>

          {/* Min due + Open balance split */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 14, paddingTop: 14, borderTop: '1px solid rgba(255,255,255,0.06)' }}>
            <div>
              <div style={{ fontSize: 10, color: 'rgba(245,245,247,0.55)', marginBottom: 3 }}>Minimum payment</div>
              <div style={{ fontFamily: DASH_DISPLAY, fontSize: 17, fontWeight: 600, color: '#fff', letterSpacing: '-0.02em' }}>{fmtUsd(minDue, { decimals: 2 })}</div>
              <div style={{ fontFamily: DASH_MONO, fontSize: 9, color: 'rgba(245,245,247,0.4)', marginTop: 2 }}>Auto-debit scheduled</div>
            </div>
            <div>
              <div style={{ fontSize: 10, color: 'rgba(245,245,247,0.55)', marginBottom: 3 }}>Open balance</div>
              <div style={{ fontFamily: DASH_DISPLAY, fontSize: 17, fontWeight: 600, color: '#fff', letterSpacing: '-0.02em' }}>{fmtUsd(statementBal, { decimals: 2 })}</div>
              <div style={{ fontFamily: DASH_MONO, fontSize: 9, color: '#10B981', marginTop: 2 }}>0% APR if paid by due date</div>
            </div>
          </div>

          <button onClick={() => setPaying(true)} style={{
            width: '100%', padding: 13, borderRadius: 100,
            background: DASH_GRADIENT, border: 'none', color: '#000',
            fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: DASH_DISPLAY,
            boxShadow: '0 0 16px rgba(255,159,10,0.3)',
          }}>Make a payment</button>
        </DashCard>

        {/* ROUND-UP SETTINGS */}
        <DashCard style={{ marginBottom: 14 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: '#fff' }}>Round-up → Bitcoin</div>
              <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.55)', marginTop: 2 }}>Converts instantly on every swipe</div>
            </div>
            <div style={{ fontFamily: DASH_MONO, fontSize: 11, color: '#FF9F0A', fontWeight: 600 }}>142,384 sats</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>
            {[{v:'off',l:'Off'},{v:'1',l:'$1'},{v:'5',l:'$5'},{v:'10',l:'$10'}].map(opt => (
              <button key={opt.v} onClick={() => setRoundUp(opt.v)} style={{
                padding: '10px 4px', borderRadius: 10,
                background: roundUp === opt.v ? 'rgba(255,159,10,0.12)' : 'rgba(255,255,255,0.03)',
                border: `1px solid ${roundUp === opt.v ? 'rgba(255,159,10,0.4)' : 'rgba(255,255,255,0.08)'}`,
                color: roundUp === opt.v ? '#FF9F0A' : 'rgba(245,245,247,0.7)',
                fontSize: 12, fontWeight: 600, cursor: 'pointer',
                transition: 'all 0.2s',
              }}>{opt.l}</button>
            ))}
          </div>
        </DashCard>

        {/* TRANSACTIONS */}
        <div style={{ marginBottom: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingLeft: 4 }}>
          <div style={{ fontFamily: DASH_MONO, fontSize: 10, letterSpacing: '0.2em', color: 'rgba(245,245,247,0.45)', textTransform: 'uppercase' }}>All transactions</div>
          <div style={{ fontFamily: DASH_MONO, fontSize: 10, color: '#FF9F0A', fontWeight: 600 }}>
            {MOCK.transactions.reduce((s, t) => s + t.sats, 0).toLocaleString()} sats earned
          </div>
        </div>
        <DashCard style={{ padding: 0, overflow: 'hidden' }}>
          {MOCK.transactions.map((tx, i) => (
            <TxRow key={tx.id} tx={tx} isLast={i === MOCK.transactions.length - 1}/>
          ))}
        </DashCard>
      </div>

      <style>{`@keyframes tapPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }`}</style>

      {paying && (
        <CardPaymentModal
          openBalance={statementBal}
          minDue={minDue}
          dueDate={dueDate}
          onClose={() => setPaying(false)}
          onPay={(amt) => {
            setStatementBal(prev => Math.max(0, prev - amt));
            setPaying(false);
          }}
        />
      )}

      {benefitsOpen && <CardBenefitsModal onClose={() => setBenefitsOpen(false)} />}
    </DashScreen>
  );
}

// ═══ CARD PAYMENT MODAL ═══════════════════════════════════════════════════
function CardPaymentModal({ openBalance, minDue, dueDate, onClose, onPay }) {
  const [payAmount, setPayAmount] = React.useState(openBalance);
  const [source, setSource] = React.useState('usd');
  const [success, setSuccess] = React.useState(null);

  const invalid = payAmount < minDue || payAmount > openBalance;

  if (success) {
    return (
      <div onClick={onClose} style={{
        position: 'absolute', inset: 0, zIndex: 45,
        background: 'rgba(0,0,0,0.78)', backdropFilter: 'blur(10px)',
        display: 'flex', alignItems: 'flex-end',
        animation: 'loanOverlayIn 0.25s ease',
      }}>
        <div onClick={e => e.stopPropagation()} style={{
          width: '100%', background: '#0a0a0f',
          borderTopLeftRadius: 24, borderTopRightRadius: 24,
          border: '1px solid rgba(255,255,255,0.08)', borderBottom: 'none',
          padding: '14px 20px 28px', textAlign: 'center',
          animation: 'loanSheetIn 0.35s cubic-bezier(0.16, 1, 0.3, 1)',
        }}>
          <div style={{ width: 36, height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.15)', margin: '0 auto 20px' }}/>
          <div style={{
            width: 72, height: 72, borderRadius: '50%',
            background: 'rgba(16,185,129,0.15)', border: '2px solid rgba(16,185,129,0.5)',
            margin: '0 auto 16px', display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 0 32px rgba(16,185,129,0.35)',
          }}>
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#10B981" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
          </div>
          <div style={{ fontFamily: DASH_DISPLAY, fontSize: 24, fontWeight: 600, color: '#fff', letterSpacing: '-0.03em', marginBottom: 6 }}>{success.title}</div>
          <div style={{ fontSize: 13, color: 'rgba(245,245,247,0.55)', maxWidth: 280, margin: '0 auto 22px' }}>{success.sub}</div>
          <button onClick={() => { onPay(success.amt); }} style={{
            width: '100%', padding: 16, borderRadius: 100,
            background: DASH_GRADIENT, border: 'none', color: '#000',
            fontSize: 14, fontWeight: 600, cursor: 'pointer',
          }}>Done</button>
        </div>
      </div>
    );
  }

  return (
    <div onClick={onClose} style={{
      position: 'absolute', inset: 0, zIndex: 45,
      background: 'rgba(0,0,0,0.78)', backdropFilter: 'blur(10px)',
      display: 'flex', alignItems: 'flex-end',
      animation: 'loanOverlayIn 0.25s ease',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: '100%', maxHeight: '92%', overflowY: 'auto',
        background: '#0a0a0f',
        borderTopLeftRadius: 24, borderTopRightRadius: 24,
        border: '1px solid rgba(255,255,255,0.08)', borderBottom: 'none',
        padding: '14px 20px 28px',
        animation: 'loanSheetIn 0.35s cubic-bezier(0.16, 1, 0.3, 1)',
      }}>
        <div style={{ width: 36, height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.15)', margin: '0 auto 16px' }}/>

        <div style={{ fontFamily: DASH_MONO, fontSize: 10, letterSpacing: '0.2em', color: '#FF9F0A', textTransform: 'uppercase', fontWeight: 700, marginBottom: 6 }}>Pay card</div>
        <div style={{ fontFamily: DASH_DISPLAY, fontSize: 26, fontWeight: 600, color: '#fff', letterSpacing: '-0.03em', marginBottom: 4 }}>Make a payment</div>
        <div style={{ fontSize: 12, color: 'rgba(245,245,247,0.55)', marginBottom: 18 }}>Due {dueDate} · Open balance {fmtUsd(openBalance, { decimals: 2 })}</div>

        {/* Amount input */}
        <div style={{ padding: 16, borderRadius: 14, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)', marginBottom: 10 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
            <div style={{ fontFamily: DASH_MONO, fontSize: 9, letterSpacing: '0.18em', color: 'rgba(245,245,247,0.55)', textTransform: 'uppercase', fontWeight: 700 }}>Payment amount</div>
            <div style={{ display: 'flex', gap: 4 }}>
              {[
                { lbl: 'Min', val: minDue },
                { lbl: 'Full', val: openBalance },
              ].map(p => (
                <button key={p.lbl} onClick={() => setPayAmount(p.val)} style={{
                  padding: '4px 10px', borderRadius: 6,
                  background: Math.abs(payAmount - p.val) < 0.01 ? 'rgba(255,159,10,0.18)' : 'rgba(255,255,255,0.04)',
                  border: `1px solid ${Math.abs(payAmount - p.val) < 0.01 ? 'rgba(255,159,10,0.4)' : 'rgba(255,255,255,0.08)'}`,
                  color: Math.abs(payAmount - p.val) < 0.01 ? '#FF9F0A' : 'rgba(245,245,247,0.7)',
                  fontSize: 9, fontWeight: 700, fontFamily: DASH_MONO, letterSpacing: '0.05em', cursor: 'pointer',
                }}>{p.lbl}</button>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
            <span style={{ fontFamily: DASH_DISPLAY, fontSize: 28, fontWeight: 700, color: 'rgba(245,245,247,0.55)' }}>$</span>
            <input
              type="number"
              step="0.01"
              value={payAmount}
              onChange={e => setPayAmount(Math.max(0, Math.min(openBalance, Number(e.target.value) || 0)))}
              style={{
                flex: 1,
                background: 'transparent', border: 'none', outline: 'none',
                fontFamily: DASH_DISPLAY, fontSize: 28, fontWeight: 700,
                color: '#fff', letterSpacing: '-0.02em',
                width: '100%', padding: 0,
              }}
            />
          </div>
          <div style={{ fontFamily: DASH_MONO, fontSize: 10, color: 'rgba(245,245,247,0.45)', marginTop: 4 }}>
            Min {fmtUsd(minDue, { decimals: 2 })} · Max {fmtUsd(openBalance, { decimals: 2 })}
          </div>
        </div>

        {/* Source */}
        <div style={{ fontFamily: DASH_MONO, fontSize: 9, letterSpacing: '0.18em', color: 'rgba(245,245,247,0.55)', textTransform: 'uppercase', fontWeight: 700, marginBottom: 8, paddingLeft: 4 }}>From</div>
        <div style={{ borderRadius: 14, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)', overflow: 'hidden', marginBottom: 16 }}>
          {[
            { id: 'usd',  label: 'USD Wallet',      sub: 'Balance $4,283.19',     c: '#10B981' },
            { id: 'btc',  label: 'BTC Wallet',      sub: '0.4821 ₿ · auto-convert', c: '#FF9F0A' },
            { id: 'bank', label: 'Chase ···4821',   sub: 'ACH · 1–2 business days', c: '#3B82F6' },
          ].map((s, i, a) => (
            <button key={s.id} onClick={() => setSource(s.id)} style={{
              width: '100%', padding: 12, background: 'transparent', border: 'none',
              borderBottom: i === a.length - 1 ? 'none' : '1px solid rgba(255,255,255,0.04)',
              display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer', textAlign: 'left',
            }}>
              <div style={{ width: 18, height: 18, borderRadius: '50%', border: `2px solid ${source === s.id ? s.c : 'rgba(255,255,255,0.2)'}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                {source === s.id && <div style={{ width: 8, height: 8, borderRadius: '50%', background: s.c }}/>}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: '#fff' }}>{s.label}</div>
                <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.55)', marginTop: 1 }}>{s.sub}</div>
              </div>
            </button>
          ))}
        </div>

        <button
          disabled={invalid}
          onClick={() => {
            setSuccess({
              title: payAmount >= openBalance ? 'Statement paid in full' : 'Payment sent',
              sub: payAmount >= openBalance
                ? `${fmtUsd(payAmount, { decimals: 2 })} paid — balance is $0.00. Nice.`
                : `${fmtUsd(payAmount, { decimals: 2 })} paid · ${fmtUsd(openBalance - payAmount, { decimals: 2 })} remaining on your statement.`,
              amt: payAmount,
            });
          }}
          style={{
            width: '100%', padding: 15, borderRadius: 100,
            background: invalid ? 'rgba(255,255,255,0.06)' : DASH_GRADIENT,
            border: 'none',
            color: invalid ? 'rgba(245,245,247,0.35)' : '#000',
            fontSize: 14, fontWeight: 600, cursor: invalid ? 'not-allowed' : 'pointer', fontFamily: DASH_DISPLAY,
            boxShadow: invalid ? 'none' : '0 0 24px rgba(255,159,10,0.35)',
          }}
        >
          {payAmount < minDue ? `Minimum ${fmtUsd(minDue, { decimals: 2 })}` : `Pay ${fmtUsd(payAmount, { decimals: 2 })}`}
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { CardTab });

// ═══ CARD BENEFITS MODAL ══════════════════════════════════════════════════
const CARD_BENEFITS = [
  {
    category: 'Rewards',
    accent: '#FF9F0A',
    items: [
      { title: '2% cash back in Bitcoin', sub: 'On every purchase, auto-swept to your BTC wallet daily',
        icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M9.5 7v10M9 10h5.5a2 2 0 010 4H9m0-4v4m6-4v4"/></svg> },
      { title: '5× on travel & dining', sub: 'Booked through BTC Now Rewards · in BTC',
        icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg> },
      { title: 'No foreign transaction fees', sub: 'Swipe anywhere in the world, same price',
        icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18"/></svg> },
    ],
  },
  {
    category: 'Travel',
    accent: '#3B82F6',
    items: [
      { title: 'Unlimited airport lounge access', sub: 'Priority Pass · 1,500+ lounges worldwide, +2 guests',
        icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M17.8 19.2 16 11l3.5-3.5A2.12 2.12 0 0 0 16.5 4.5L13 8 4.8 6.2c-.5-.1-.9.1-1 .5l-.3 1.2c-.1.4.1.8.5 1L10 11l-2 4-3-1-1 1 3 2 2 3 1-1-1-3 4-2 1.2 6.5c.1.4.5.6.9.5l1.2-.3c.4-.1.6-.5.5-1z"/></svg> },
      { title: 'Global Entry / TSA PreCheck credit', sub: '$100 statement credit every 4 years',
        icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 12l2 2 4-4"/><path d="M12 2 4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z"/></svg> },
      { title: 'Travel insurance', sub: 'Up to $1M trip cancellation, delays, lost luggage',
        icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2 4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z"/></svg> },
      { title: '$200 annual hotel credit', sub: 'At Fine Hotels & Resorts partners',
        icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21V8l9-5 9 5v13"/><path d="M9 21v-6h6v6M3 21h18"/></svg> },
    ],
  },
  {
    category: 'Lifestyle',
    accent: '#A78BFA',
    items: [
      { title: 'Unlimited data phone plan', sub: 'T-Mobile 5G · global roaming included',
        icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/></svg> },
      { title: 'Concierge, 24/7', sub: 'Reservations, tickets, bespoke requests',
        icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg> },
      { title: 'Equinox + SoulCycle credit', sub: '$300/year in wellness statement credits',
        icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M6.5 6.5 17.5 17.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/><path d="M8 12 12 8l4 4-4 4-4-4z"/></svg> },
      { title: 'Streaming credits', sub: '$20/mo across Netflix, Spotify, Apple One',
        icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M7 22h10M12 18v4"/></svg> },
    ],
  },
  {
    category: 'Protection',
    accent: '#10B981',
    items: [
      { title: 'Purchase protection', sub: '120 days · up to $10k per item, $50k/year',
        icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2 4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z"/><path d="m9 12 2 2 4-4"/></svg> },
      { title: 'Extended warranty', sub: '+1 year on top of manufacturer warranty',
        icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg> },
      { title: 'Cellphone protection', sub: 'Up to $1,000 when you pay your bill with this card',
        icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M11 18h2"/></svg> },
      { title: 'Zero fraud liability', sub: 'Instant freeze + replacement card next-day',
        icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> },
    ],
  },
];

function CardBenefitsModal({ onClose }) {
  return (
    <div onClick={onClose} style={{
      position: 'absolute', inset: 0, zIndex: 45,
      background: 'rgba(0,0,0,0.78)', backdropFilter: 'blur(10px)',
      display: 'flex', alignItems: 'flex-end',
      animation: 'loanOverlayIn 0.25s ease',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: '100%', height: '92%', overflowY: 'auto',
        background: '#0a0a0f',
        borderTopLeftRadius: 24, borderTopRightRadius: 24,
        border: '1px solid rgba(255,255,255,0.08)', borderBottom: 'none',
        animation: 'loanSheetIn 0.35s cubic-bezier(0.16, 1, 0.3, 1)',
      }}>
        <div style={{ position: 'sticky', top: 0, background: 'linear-gradient(#0a0a0f, #0a0a0f 80%, rgba(10,10,15,0))', padding: '14px 20px 14px', zIndex: 5 }}>
          <div style={{ width: 36, height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.15)', margin: '0 auto 14px' }}/>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div style={{ fontFamily: DASH_MONO, fontSize: 10, letterSpacing: '0.2em', color: '#FF9F0A', textTransform: 'uppercase', fontWeight: 700, marginBottom: 6 }}>Card benefits</div>
              <div style={{ fontFamily: DASH_DISPLAY, fontSize: 26, fontWeight: 600, color: '#fff', letterSpacing: '-0.03em' }}>Dynamic Visa</div>
            </div>
            <button onClick={onClose} style={{ width: 32, height: 32, borderRadius: '50%', background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', color: '#fff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
            </button>
          </div>
        </div>

        <div style={{ padding: '0 20px 28px' }}>
          {/* Hero stat strip */}
          <div style={{
            padding: 16, borderRadius: 16,
            background: 'linear-gradient(135deg, rgba(255,159,10,0.12), rgba(255,69,58,0.03))',
            border: '1px solid rgba(255,159,10,0.3)',
            marginBottom: 18,
            display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8,
          }}>
            {[
              { v: '2%', l: 'Back in BTC' },
              { v: '$0', l: 'Annual fee*' },
              { v: '24/7', l: 'Concierge' },
            ].map(s => (
              <div key={s.l} style={{ textAlign: 'center' }}>
                <div style={{ fontFamily: DASH_DISPLAY, fontSize: 22, fontWeight: 700, color: '#fff', letterSpacing: '-0.03em', lineHeight: 1 }}>{s.v}</div>
                <div style={{ fontFamily: DASH_MONO, fontSize: 9, color: 'rgba(245,245,247,0.55)', textTransform: 'uppercase', letterSpacing: '0.12em', marginTop: 4 }}>{s.l}</div>
              </div>
            ))}
          </div>

          {CARD_BENEFITS.map(group => (
            <div key={group.category} style={{ marginBottom: 18 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10, paddingLeft: 2 }}>
                <div style={{ width: 5, height: 5, borderRadius: '50%', background: group.accent }}/>
                <div style={{ fontFamily: DASH_MONO, fontSize: 9, letterSpacing: '0.2em', color: group.accent, textTransform: 'uppercase', fontWeight: 700 }}>{group.category}</div>
              </div>
              <div style={{ borderRadius: 14, background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.06)', overflow: 'hidden' }}>
                {group.items.map((b, i) => (
                  <div key={b.title} style={{
                    padding: 14,
                    borderBottom: i === group.items.length - 1 ? 'none' : '1px solid rgba(255,255,255,0.04)',
                    display: 'flex', alignItems: 'flex-start', gap: 12,
                  }}>
                    <div style={{ width: 36, height: 36, borderRadius: 10, background: `${group.accent}15`, border: `1px solid ${group.accent}30`, color: group.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{b.icon}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: 600, color: '#fff', marginBottom: 2 }}>{b.title}</div>
                      <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.6)', lineHeight: 1.4 }}>{b.sub}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}

          <div style={{ fontFamily: DASH_MONO, fontSize: 9, color: 'rgba(245,245,247,0.4)', letterSpacing: '0.05em', textAlign: 'center', marginTop: 20, lineHeight: 1.6 }}>
            * $0 annual fee with $50k annual spend, $395 otherwise.<br/>
            Benefits subject to terms. See full benefits guide in Settings.
          </div>
        </div>
      </div>
    </div>
  );
}