// dash-wallet-actions.jsx — Send / Receive / Convert / Buy bottom-sheet flows

function WalletActionSheet({ action, kind, btcPrice, onClose }) {
  return (
    <div onClick={onClose} style={{
      position: 'absolute', inset: 0, zIndex: 50,
      background: 'rgba(0,0,0,0.75)', backdropFilter: 'blur(8px)',
      display: 'flex', alignItems: 'flex-end',
      animation: 'waOverlayIn 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: 'waSheetIn 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 14px' }}/>

        {action === 'send'    && <SendFlow kind={kind} btcPrice={btcPrice} onClose={onClose} />}
        {action === 'receive' && <ReceiveFlow kind={kind} onClose={onClose} />}
        {action === 'convert' && <ConvertFlow kind={kind} btcPrice={btcPrice} onClose={onClose} />}
        {action === 'buy'     && <BuyFlow btcPrice={btcPrice} onClose={onClose} />}
      </div>
      <style>{`
        @keyframes waOverlayIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes waSheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
      `}</style>
    </div>
  );
}

function SheetHeader({ title, subtitle, onClose }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 18 }}>
      <div>
        <div style={{ fontFamily: DASH_MONO, fontSize: 10, letterSpacing: '0.2em', color: 'rgba(245,245,247,0.5)', textTransform: 'uppercase' }}>{subtitle}</div>
        <div style={{ fontFamily: DASH_DISPLAY, fontSize: 22, fontWeight: 600, color: '#fff', letterSpacing: '-0.03em', marginTop: 2 }}>{title}</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="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
      </button>
    </div>
  );
}

function FormLabel({ children }) {
  return <label style={{ fontFamily: DASH_MONO, fontSize: 9, letterSpacing: '0.18em', color: 'rgba(245,245,247,0.5)', textTransform: 'uppercase', marginBottom: 6, display: 'block' }}>{children}</label>;
}

function FormInput({ value, onChange, placeholder, type = 'text', inputMode }) {
  return (
    <input type={type} inputMode={inputMode} placeholder={placeholder} value={value} onChange={e => onChange(e.target.value)} style={{
      width: '100%', padding: '14px', borderRadius: 12,
      background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)',
      color: '#fff', fontSize: 14, outline: 'none', boxSizing: 'border-box',
      fontFamily: 'Inter, sans-serif',
    }}/>
  );
}

function PrimaryCTA({ children, onClick, disabled }) {
  return (
    <button onClick={onClick} disabled={disabled} style={{
      width: '100%', padding: 16, borderRadius: 100,
      background: disabled ? 'rgba(255,255,255,0.08)' : DASH_GRADIENT,
      border: 'none', color: disabled ? 'rgba(255,255,255,0.4)' : '#000',
      fontSize: 14, fontWeight: 600, cursor: disabled ? 'not-allowed' : 'pointer',
      boxShadow: disabled ? 'none' : '0 0 24px rgba(255,159,10,0.35)',
      marginTop: 16,
    }}>{children}</button>
  );
}

// ═══ SEND ══════════════════════════════════════════════════════════════════
const SEND_CONTACTS = [
  { id: 'c1', name: 'Amara Okafor',   handle: '@amara',    avatar: '#A78BFA' },
  { id: 'c2', name: 'Jax Liu',        handle: '@jaxl',     avatar: '#10B981' },
  { id: 'c3', name: 'Sofia Reyes',    handle: '@sofiar',   avatar: '#EC4899' },
  { id: 'c4', name: 'Cold Storage',   handle: 'bc1q…k4zp', avatar: '#FF9F0A' },
];

function SendFlow({ kind, btcPrice, onClose }) {
  const [stage, setStage] = React.useState('form');
  const [amount, setAmount] = React.useState('');
  const [recipient, setRecipient] = React.useState('');
  const [contact, setContact] = React.useState(null);

  const amt = parseFloat(amount) || 0;
  const usdPreview = kind === 'btc' ? amt * btcPrice : amt;
  const ok = amt > 0 && (recipient || contact);

  if (stage === 'sent') {
    return <SuccessState title="Sent" message={`${kind === 'btc' ? fmtBtc(amt) : fmtUsd(amt)} to ${contact ? contact.name : recipient}`} onClose={onClose}/>;
  }

  if (stage === 'review') {
    return (
      <>
        <SheetHeader title="Review" subtitle={`Send · ${kind.toUpperCase()}`} onClose={onClose}/>
        <div style={{ textAlign: 'center', padding: '20px 0 24px' }}>
          <div style={{ fontFamily: DASH_DISPLAY, fontSize: 44, fontWeight: 600, color: '#fff', letterSpacing: '-0.04em' }}>
            {kind === 'btc' ? fmtBtc(amt) : fmtUsd(amt)}
          </div>
          {kind === 'btc' && <div style={{ fontSize: 13, color: 'rgba(245,245,247,0.55)', marginTop: 4 }}>≈ {fmtUsd(usdPreview, { decimals: 2 })}</div>}
        </div>
        <ReviewLine label="To" value={contact ? `${contact.name} · ${contact.handle}` : recipient}/>
        <ReviewLine label="Network" value={kind === 'btc' ? 'Lightning · instant' : 'ACH · 1 business day'}/>
        <ReviewLine label="Fee" value={kind === 'btc' ? '~10 sats' : 'Free'} isLast/>
        <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
          <button onClick={() => setStage('form')} style={{ flex: 1, padding: 16, borderRadius: 100, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', color: '#fff', fontSize: 14, fontWeight: 600, cursor: 'pointer' }}>Edit</button>
          <button onClick={() => setStage('sent')} style={{ flex: 2, padding: 16, borderRadius: 100, background: DASH_GRADIENT, border: 'none', color: '#000', fontSize: 14, fontWeight: 600, cursor: 'pointer', boxShadow: '0 0 24px rgba(255,159,10,0.35)' }}>Slide to send</button>
        </div>
      </>
    );
  }

  return (
    <>
      <SheetHeader title={`Send ${kind === 'btc' ? 'Bitcoin' : 'USD'}`} subtitle="Pay anyone" onClose={onClose}/>

      <FormLabel>Amount</FormLabel>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 12, padding: '14px', marginBottom: 8 }}>
        <span style={{ fontFamily: DASH_DISPLAY, fontSize: 22, color: 'rgba(245,245,247,0.5)', fontWeight: 600 }}>{kind === 'btc' ? '₿' : '$'}</span>
        <input type="text" inputMode="decimal" placeholder="0" value={amount} onChange={e => setAmount(e.target.value)} style={{
          flex: 1, background: 'transparent', border: 'none', outline: 'none',
          color: '#fff', fontFamily: DASH_DISPLAY, fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em',
        }}/>
      </div>
      {amt > 0 && kind === 'btc' && <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.5)', marginBottom: 12, fontFamily: DASH_MONO }}>≈ {fmtUsd(usdPreview, { decimals: 2 })}</div>}

      <FormLabel>Recent</FormLabel>
      <div style={{ display: 'flex', gap: 8, overflowX: 'auto', marginBottom: 14, paddingBottom: 2 }}>
        {SEND_CONTACTS.map(c => (
          <button key={c.id} onClick={() => { setContact(c); setRecipient(''); }} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5,
            minWidth: 66, padding: '8px 4px',
            background: contact?.id === c.id ? 'rgba(255,159,10,0.1)' : 'rgba(255,255,255,0.03)',
            border: `1px solid ${contact?.id === c.id ? 'rgba(255,159,10,0.4)' : 'rgba(255,255,255,0.06)'}`,
            borderRadius: 14, cursor: 'pointer',
          }}>
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: c.avatar, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: DASH_DISPLAY, fontWeight: 700, color: '#000', fontSize: 13 }}>{c.name[0]}</div>
            <div style={{ fontSize: 10, color: '#fff', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 60 }}>{c.name.split(' ')[0]}</div>
          </button>
        ))}
      </div>

      <FormLabel>Or paste {kind === 'btc' ? 'address / Lightning invoice' : 'account / @username'}</FormLabel>
      <FormInput value={recipient} onChange={v => { setRecipient(v); setContact(null); }} placeholder={kind === 'btc' ? 'bc1q… or lnbc1…' : '@username or routing + acct'}/>

      <PrimaryCTA onClick={() => setStage('review')} disabled={!ok}>Review →</PrimaryCTA>
    </>
  );
}

// ═══ RECEIVE ═══════════════════════════════════════════════════════════════
function ReceiveFlow({ kind, onClose }) {
  const address = kind === 'btc'
    ? 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh'
    : 'Routing · 021000021 · Acct · 4485283491';
  const [copied, setCopied] = React.useState(false);

  const copy = () => {
    navigator.clipboard?.writeText(address);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };

  return (
    <>
      <SheetHeader title={`Receive ${kind === 'btc' ? 'Bitcoin' : 'USD'}`} subtitle="Share to get paid" onClose={onClose}/>

      {/* QR */}
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 18 }}>
        <div style={{
          width: 200, height: 200, padding: 14,
          background: '#fff', borderRadius: 18,
          boxShadow: '0 0 40px rgba(255,159,10,0.15)',
          position: 'relative',
        }}>
          <FakeQR accent={kind === 'btc' ? '#FF9F0A' : '#10B981'}/>
          <div style={{
            position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
            width: 40, height: 40, borderRadius: 10, background: '#000',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: kind === 'btc' ? '#FF9F0A' : '#10B981',
            fontFamily: DASH_DISPLAY, fontWeight: 800, fontSize: 22,
          }}>{kind === 'btc' ? '₿' : '$'}</div>
        </div>
      </div>

      <FormLabel>{kind === 'btc' ? 'Bitcoin address' : 'Bank details'}</FormLabel>
      <button onClick={copy} style={{
        width: '100%', padding: '14px',
        background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)',
        borderRadius: 12, cursor: 'pointer', textAlign: 'left',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        color: '#fff', fontFamily: DASH_MONO, fontSize: 12,
        wordBreak: 'break-all', gap: 10,
      }}>
        <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}>{address}</span>
        <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600, color: copied ? '#10B981' : '#FF9F0A', flexShrink: 0 }}>{copied ? '✓ Copied' : 'Copy'}</span>
      </button>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 12 }}>
        <button style={{ padding: 14, borderRadius: 100, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', color: '#fff', fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>Share</button>
        <button onClick={onClose} style={{ padding: 14, borderRadius: 100, background: DASH_GRADIENT, border: 'none', color: '#000', fontSize: 13, fontWeight: 600, cursor: 'pointer', boxShadow: '0 0 16px rgba(255,159,10,0.3)' }}>Done</button>
      </div>
    </>
  );
}

function FakeQR({ accent }) {
  // Deterministic pseudo-QR grid
  const size = 21;
  const cells = React.useMemo(() => {
    const arr = [];
    let seed = 7;
    const rand = () => { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; };
    for (let i = 0; i < size * size; i++) arr.push(rand() > 0.55 ? 1 : 0);
    return arr;
  }, []);
  const corner = (x, y) => (
    <>
      <rect x={x} y={y} width="7" height="7" fill="#000"/>
      <rect x={x+1} y={y+1} width="5" height="5" fill="#fff"/>
      <rect x={x+2} y={y+2} width="3" height="3" fill="#000"/>
    </>
  );
  return (
    <svg viewBox={`0 0 ${size} ${size}`} width="100%" height="100%" shapeRendering="crispEdges">
      {cells.map((c, i) => {
        if (!c) return null;
        const x = i % size, y = Math.floor(i / size);
        // skip finder areas
        if ((x < 7 && y < 7) || (x > size - 8 && y < 7) || (x < 7 && y > size - 8)) return null;
        return <rect key={i} x={x} y={y} width="1" height="1" fill="#000"/>;
      })}
      {corner(0, 0)}
      {corner(size - 7, 0)}
      {corner(0, size - 7)}
    </svg>
  );
}

// ═══ CONVERT ═══════════════════════════════════════════════════════════════
function ConvertFlow({ kind, btcPrice, onClose }) {
  const [stage, setStage] = React.useState('form');
  const [amount, setAmount] = React.useState('');
  // kind = source wallet
  const from = kind;
  const to = kind === 'btc' ? 'usd' : 'btc';
  const amt = parseFloat(amount) || 0;
  const rate = btcPrice;
  const receive = from === 'btc' ? amt * rate : amt / rate;
  const ok = amt > 0;

  if (stage === 'done') {
    return <SuccessState title="Converted" message={`${from === 'btc' ? fmtBtc(amt) : fmtUsd(amt)} → ${to === 'btc' ? fmtBtc(receive) : fmtUsd(receive)}`} onClose={onClose}/>;
  }

  return (
    <>
      <SheetHeader title="Convert" subtitle={`${from.toUpperCase()} → ${to.toUpperCase()} · Instant`} onClose={onClose}/>

      {/* From */}
      <div style={{ padding: 16, borderRadius: 14, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', marginBottom: 8 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
          <div style={{ fontFamily: DASH_MONO, fontSize: 9, letterSpacing: '0.18em', color: 'rgba(245,245,247,0.5)', textTransform: 'uppercase' }}>You pay</div>
          <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.5)' }}>Balance: {from === 'btc' ? fmtBtc(MOCK.btc) : fmtUsd(MOCK.cashUsd, { decimals: 0 })}</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ fontFamily: DASH_DISPLAY, fontSize: 28, color: 'rgba(245,245,247,0.5)', fontWeight: 600 }}>{from === 'btc' ? '₿' : '$'}</span>
          <input type="text" inputMode="decimal" placeholder="0" value={amount} onChange={e => setAmount(e.target.value)} style={{
            flex: 1, background: 'transparent', border: 'none', outline: 'none',
            color: '#fff', fontFamily: DASH_DISPLAY, fontSize: 30, fontWeight: 600, letterSpacing: '-0.03em',
          }}/>
          <button onClick={() => setAmount(from === 'btc' ? MOCK.btc.toFixed(4) : MOCK.cashUsd.toFixed(0))} style={{ padding: '5px 10px', borderRadius: 100, background: 'rgba(255,159,10,0.1)', border: '1px solid rgba(255,159,10,0.3)', color: '#FF9F0A', fontSize: 10, fontWeight: 700, cursor: 'pointer' }}>MAX</button>
        </div>
      </div>

      {/* Swap icon */}
      <div style={{ display: 'flex', justifyContent: 'center', margin: '-4px 0' }}>
        <div style={{ width: 32, height: 32, borderRadius: '50%', background: '#0a0a0f', border: '1px solid rgba(255,255,255,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#FF9F0A' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M6 13l6 6 6-6"/></svg>
        </div>
      </div>

      {/* To */}
      <div style={{ padding: 16, borderRadius: 14, background: 'rgba(255,159,10,0.06)', border: '1px solid rgba(255,159,10,0.2)', marginTop: 8 }}>
        <div style={{ fontFamily: DASH_MONO, fontSize: 9, letterSpacing: '0.18em', color: '#FF9F0A', textTransform: 'uppercase', marginBottom: 6 }}>You receive</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ fontFamily: DASH_DISPLAY, fontSize: 28, color: 'rgba(245,245,247,0.5)', fontWeight: 600 }}>{to === 'btc' ? '₿' : '$'}</span>
          <div style={{ flex: 1, fontFamily: DASH_DISPLAY, fontSize: 30, fontWeight: 600, color: '#fff', letterSpacing: '-0.03em' }}>
            {amt > 0 ? (to === 'btc' ? receive.toFixed(6) : receive.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })) : '0'}
          </div>
        </div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14, padding: '0 4px', fontSize: 11, color: 'rgba(245,245,247,0.55)' }}>
        <span>Rate</span>
        <span style={{ fontFamily: DASH_MONO, color: '#fff', fontWeight: 600 }}>1 BTC = {fmtUsd(rate, { decimals: 0 })}</span>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, padding: '0 4px', fontSize: 11, color: 'rgba(245,245,247,0.55)' }}>
        <span>Spread</span>
        <span style={{ fontFamily: DASH_MONO, color: '#10B981', fontWeight: 600 }}>0.00% · no fees</span>
      </div>

      <PrimaryCTA onClick={() => setStage('done')} disabled={!ok}>Convert</PrimaryCTA>
    </>
  );
}

// ═══ BUY BTC ═══════════════════════════════════════════════════════════════
function BuyFlow({ btcPrice, onClose }) {
  const [stage, setStage] = React.useState('form');
  const [usd, setUsd] = React.useState('1000');
  const amt = parseFloat(usd) || 0;
  const btc = amt / btcPrice;
  const [source, setSource] = React.useState('usd');
  const [recurring, setRecurring] = React.useState('once');

  if (stage === 'done') {
    return <SuccessState title="Bitcoin purchased" message={`+${fmtBtc(btc)} · ${fmtUsd(amt, { decimals: 0 })}`} onClose={onClose}/>;
  }

  return (
    <>
      <SheetHeader title="Buy Bitcoin" subtitle="Instant · @ live price" onClose={onClose}/>

      <div style={{ padding: '16px', borderRadius: 14, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', marginBottom: 12 }}>
        <div style={{ fontFamily: DASH_MONO, fontSize: 9, letterSpacing: '0.18em', color: 'rgba(245,245,247,0.5)', textTransform: 'uppercase', marginBottom: 8 }}>Amount (USD)</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontFamily: DASH_DISPLAY, fontSize: 30, color: 'rgba(245,245,247,0.5)', fontWeight: 600 }}>$</span>
          <input type="text" inputMode="decimal" value={usd} onChange={e => setUsd(e.target.value)} style={{
            flex: 1, background: 'transparent', border: 'none', outline: 'none',
            color: '#fff', fontFamily: DASH_DISPLAY, fontSize: 34, fontWeight: 600, letterSpacing: '-0.03em',
          }}/>
        </div>
        <div style={{ fontSize: 12, color: 'rgba(245,245,247,0.55)', marginTop: 6, fontFamily: DASH_MONO }}>
          ≈ <span style={{ color: '#FF9F0A', fontWeight: 700 }}>{fmtBtc(btc)}</span>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
        {['100', '500', '1000', '5000'].map(v => (
          <button key={v} onClick={() => setUsd(v)} style={{
            flex: 1, padding: '10px 0', borderRadius: 100,
            background: usd === v ? 'rgba(255,159,10,0.12)' : 'rgba(255,255,255,0.03)',
            border: `1px solid ${usd === v ? 'rgba(255,159,10,0.4)' : 'rgba(255,255,255,0.08)'}`,
            color: usd === v ? '#FF9F0A' : '#fff',
            fontSize: 12, fontWeight: 600, cursor: 'pointer',
          }}>${v}</button>
        ))}
      </div>

      <FormLabel>Pay with</FormLabel>
      <div style={{ display: 'grid', gap: 8, marginBottom: 14 }}>
        {[
          { v: 'usd',  l: 'USD Wallet', sub: fmtUsd(MOCK.cashUsd, { decimals: 0 }) + ' available' },
          { v: 'bank', l: 'Chase •• 4485', sub: 'ACH · 1 day settle' },
          { v: 'card', l: 'Debit card', sub: '+1.5% fee' },
        ].map(opt => (
          <button key={opt.v} onClick={() => setSource(opt.v)} style={{
            padding: 14, borderRadius: 12, textAlign: 'left',
            background: source === opt.v ? 'rgba(255,159,10,0.08)' : 'rgba(255,255,255,0.03)',
            border: `1px solid ${source === opt.v ? 'rgba(255,159,10,0.4)' : 'rgba(255,255,255,0.08)'}`,
            color: '#fff', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{opt.l}</div>
              <div style={{ fontSize: 10, color: 'rgba(245,245,247,0.55)', marginTop: 1 }}>{opt.sub}</div>
            </div>
            <div style={{ width: 18, height: 18, borderRadius: '50%', border: `2px solid ${source === opt.v ? '#FF9F0A' : 'rgba(255,255,255,0.2)'}`, background: source === opt.v ? '#FF9F0A' : 'transparent' }}/>
          </button>
        ))}
      </div>

      <FormLabel>Frequency</FormLabel>
      <div style={{ display: 'flex', gap: 6, marginBottom: 6 }}>
        {[{v:'once',l:'Once'},{v:'weekly',l:'Weekly'},{v:'biweekly',l:'Bi-weekly'},{v:'monthly',l:'Monthly'}].map(opt => (
          <button key={opt.v} onClick={() => setRecurring(opt.v)} style={{
            flex: 1, padding: '10px 0', borderRadius: 100,
            background: recurring === opt.v ? 'rgba(255,159,10,0.12)' : 'rgba(255,255,255,0.03)',
            border: `1px solid ${recurring === opt.v ? 'rgba(255,159,10,0.4)' : 'rgba(255,255,255,0.08)'}`,
            color: recurring === opt.v ? '#FF9F0A' : '#fff',
            fontSize: 11, fontWeight: 600, cursor: 'pointer',
          }}>{opt.l}</button>
        ))}
      </div>

      <PrimaryCTA onClick={() => setStage('done')} disabled={amt <= 0}>Buy {fmtUsd(amt, { decimals: 0 })} of BTC</PrimaryCTA>
    </>
  );
}

// ═══ SHARED ════════════════════════════════════════════════════════════════
function ReviewLine({ label, value, isLast }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '12px 0',
      borderBottom: isLast ? 'none' : '1px solid rgba(255,255,255,0.05)',
    }}>
      <span style={{ fontSize: 12, color: 'rgba(245,245,247,0.55)' }}>{label}</span>
      <span style={{ fontSize: 13, fontWeight: 600, color: '#fff', fontFamily: DASH_MONO, textAlign: 'right', maxWidth: '60%', wordBreak: 'break-all' }}>{value}</span>
    </div>
  );
}

function SuccessState({ title, message, onClose }) {
  return (
    <div style={{ textAlign: 'center', padding: '10px 0 0' }}>
      <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: '20px auto 16px',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 0 32px rgba(16,185,129,0.35)',
        animation: 'readyPop 0.5s cubic-bezier(0.16, 1, 0.3, 1)',
      }}>
        <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: 22, fontWeight: 600, color: '#fff', letterSpacing: '-0.03em', marginBottom: 6 }}>{title}</div>
      <div style={{ fontSize: 13, color: 'rgba(245,245,247,0.6)', marginBottom: 22 }}>{message}</div>
      <button onClick={onClose} style={{
        width: '100%', padding: 16, borderRadius: 100,
        background: DASH_GRADIENT, border: 'none', color: '#000',
        fontSize: 14, fontWeight: 600, cursor: 'pointer',
        boxShadow: '0 0 24px rgba(255,159,10,0.35)',
      }}>Done</button>
    </div>
  );
}

Object.assign(window, { WalletActionSheet });