// flow-screens.jsx — All onboarding screens

const GRADIENT = 'linear-gradient(135deg, #FFD60A 0%, #FF9F0A 50%, #FF453A 100%)';
const MONO = "'JetBrains Mono', ui-monospace, monospace";
const DISPLAY = "'Clash Display', 'Inter', sans-serif";

// ═══════════════════════════════════════════════════════════════════════════
// 0. SPLASH — big logo with gradient glow, short hold
// ═══════════════════════════════════════════════════════════════════════════
function SplashScreen({ onContinue }) {
  React.useEffect(() => {
    const t = setTimeout(onContinue, 2200);
    return () => clearTimeout(t);
  }, []);
  return (
    <Screen style={{ justifyContent: 'center', alignItems: 'center', padTop: 0 }}>
      <div style={{
        animation: 'splashPulse 2.2s ease-out',
        textAlign: 'center',
      }}>
        <div style={{
          width: 88, height: 88, borderRadius: '50%',
          background: GRADIENT,
          margin: '0 auto 24px',
          boxShadow: '0 0 80px rgba(255,159,10,0.6), 0 0 160px rgba(255,69,58,0.3)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: DISPLAY, fontSize: 48, fontWeight: 700, color: '#000',
        }}>₿</div>
        <div style={{
          fontFamily: DISPLAY, fontSize: 38, fontWeight: 600,
          letterSpacing: '-0.04em', color: '#fff',
        }}>BTC <span style={{ color: '#FF9F0A' }}>Now</span></div>
        <div style={{
          marginTop: 10, fontFamily: MONO, fontSize: 10,
          letterSpacing: '0.3em', textTransform: 'uppercase',
          color: 'rgba(245,245,247,0.4)',
        }}>Financial Operating System</div>
      </div>
      <style>{`
        @keyframes splashPulse {
          0% { opacity: 0; transform: scale(0.94); }
          30% { opacity: 1; transform: scale(1); }
          100% { opacity: 1; transform: scale(1); }
        }
      `}</style>
    </Screen>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// 1. SOCIAL LOGIN
// ═══════════════════════════════════════════════════════════════════════════
function SocialScreen({ onContinue }) {
  return (
    <Screen padTop={72}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
        {/* Hero mark */}
        <div style={{ marginBottom: 48 }}>
          <div style={{
            width: 64, height: 64, borderRadius: '50%', background: GRADIENT,
            boxShadow: '0 0 50px rgba(255,159,10,0.45)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: DISPLAY, fontSize: 36, color: '#000', fontWeight: 700,
            marginBottom: 28,
          }}>₿</div>
          <h1 style={{
            fontFamily: DISPLAY, fontSize: 38, fontWeight: 600,
            letterSpacing: '-0.035em', lineHeight: 1.02,
            color: '#fff', margin: 0, marginBottom: 12,
          }}>
            Your coin.<br/>Your command line.
          </h1>
          <p style={{
            fontSize: 15, lineHeight: 1.5, color: 'rgba(245,245,247,0.55)',
            margin: 0, letterSpacing: '-0.01em',
          }}>
            One key unlocks the whole operating system.
          </p>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <SocialButton provider="apple" onClick={onContinue} />
          <SocialButton provider="google" onClick={onContinue} />
          <SocialButton provider="passkey" onClick={onContinue} />
          <div style={{ display: 'flex', gap: 10 }}>
            <div style={{ flex: 1 }}><SocialButton provider="x" onClick={onContinue} /></div>
            <div style={{ flex: 1 }}><SocialButton provider="email" onClick={onContinue} /></div>
          </div>
        </div>

        <div style={{
          marginTop: 20, textAlign: 'center',
          fontSize: 11, color: 'rgba(245,245,247,0.4)',
          lineHeight: 1.5, letterSpacing: '-0.005em',
        }}>
          By continuing, you agree to BTC Now's<br/>
          <span style={{ color: 'rgba(245,245,247,0.65)' }}>Terms</span> and <span style={{ color: 'rgba(245,245,247,0.65)' }}>Privacy Policy</span>.
        </div>
      </div>
    </Screen>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// 2. WELCOME BOOT SEQUENCE — terminal type-on
// ═══════════════════════════════════════════════════════════════════════════
function WelcomeBootScreen({ onContinue, variant = 'boot' }) {
  const [phase, setPhase] = React.useState(0);

  const bootLines = [
    { t: '> Initializing BTC-NOW OS...', c: 'rgba(245,245,247,0.55)', d: 120 },
    { t: '> Handshake · Lightning Network ............. OK', c: 'rgba(16,185,129,0.9)', d: 320 },
    { t: '> Handshake · Custody Layer .................. OK', c: 'rgba(16,185,129,0.9)', d: 280 },
    { t: '> Handshake · Credit Engine .................. OK', c: 'rgba(16,185,129,0.9)', d: 280 },
    { t: '> Handshake · Velocity Concierge ............. OK', c: 'rgba(16,185,129,0.9)', d: 280 },
    { t: '> Price feed .................... $68,412.40 ▲', c: '#FF9F0A', d: 320 },
    { t: '> Operating system ready.', c: 'rgba(245,245,247,0.85)', d: 400 },
    { t: '', c: '', d: 200 },
  ];

  React.useEffect(() => {
    if (phase < bootLines.length) {
      const t = setTimeout(() => setPhase(p => p + 1), bootLines[phase].d);
      return () => clearTimeout(t);
    }
  }, [phase]);

  const cinematic = variant === 'cinematic';
  const kinetic = variant === 'kinetic';
  const boot = variant === 'boot';

  return (
    <Screen padTop={72} style={{ justifyContent: 'flex-start' }}>
      {boot && (
        <>
          <div style={{
            fontFamily: MONO, fontSize: 11,
            color: 'rgba(245,245,247,0.3)',
            letterSpacing: '0.15em', marginBottom: 20,
          }}>
            BTC-NOW OS · v1.0.0 · boot.log
          </div>
          <div style={{
            fontFamily: MONO, fontSize: 12, lineHeight: 1.9,
            flex: 1, overflow: 'hidden',
          }}>
            {bootLines.slice(0, phase).map((l, i) => (
              <div key={i} style={{ color: l.c, whiteSpace: 'pre' }}>
                {l.t || '\u00A0'}
              </div>
            ))}
            {phase < bootLines.length && (
              <span style={{
                display: 'inline-block', width: 7, height: 14,
                background: '#FF9F0A', verticalAlign: 'middle',
                animation: 'blink 1s steps(2) infinite',
              }}/>
            )}
          </div>

          {phase >= bootLines.length && (
            <div style={{ animation: 'welcomeFadeIn 0.8s ease-out' }}>
              <div style={{
                height: 1, background: 'linear-gradient(90deg, transparent, rgba(255,159,10,0.4), transparent)',
                marginBottom: 28,
              }}/>
              <div style={{
                fontFamily: MONO, fontSize: 10, letterSpacing: '0.25em',
                color: '#FF9F0A', marginBottom: 14, textTransform: 'uppercase',
              }}>Welcome to</div>
              <h1 style={{
                fontFamily: DISPLAY, fontSize: 44, fontWeight: 600,
                letterSpacing: '-0.04em', lineHeight: 1.0,
                margin: 0, marginBottom: 16, color: '#fff',
              }}>
                BTC <span style={{
                  background: GRADIENT,
                  WebkitBackgroundClip: 'text',
                  WebkitTextFillColor: 'transparent',
                }}>Now</span>.
              </h1>
              <p style={{
                fontSize: 15, color: 'rgba(245,245,247,0.6)',
                lineHeight: 1.5, margin: 0, marginBottom: 28,
                letterSpacing: '-0.01em',
              }}>
                Your Bitcoin Financial Operating System.
              </p>
              <PrimaryButton onClick={onContinue}>
                Begin setup
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: 2 }}><path d="M5 12h14M12 5l7 7-7 7"/></svg>
              </PrimaryButton>
            </div>
          )}
        </>
      )}

      {cinematic && (
        <CinematicWelcome onContinue={onContinue} />
      )}
      {kinetic && (
        <KineticWelcome onContinue={onContinue} />
      )}

      <style>{`
        @keyframes blink { 50% { opacity: 0; } }
        @keyframes welcomeFadeIn {
          0% { opacity: 0; transform: translateY(8px); }
          100% { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </Screen>
  );
}

// ── Variant: Cinematic (word by word reveal)
function CinematicWelcome({ onContinue }) {
  const words = ['Welcome', 'to', 'your', 'Bitcoin', 'Financial', 'Operating', 'System.'];
  const [visible, setVisible] = React.useState(0);
  React.useEffect(() => {
    if (visible < words.length + 1) {
      const t = setTimeout(() => setVisible(v => v + 1), 420);
      return () => clearTimeout(t);
    }
  }, [visible]);
  return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column',
      justifyContent: 'center', paddingBottom: 40,
    }}>
      <h1 style={{
        fontFamily: DISPLAY, fontSize: 40, fontWeight: 500,
        letterSpacing: '-0.035em', lineHeight: 1.1, margin: 0, marginBottom: 32,
      }}>
        {words.map((w, i) => (
          <span key={i} style={{
            display: 'inline-block', marginRight: 10,
            opacity: i < visible ? 1 : 0,
            transform: i < visible ? 'translateY(0)' : 'translateY(14px)',
            transition: 'all 0.7s cubic-bezier(0.16, 1, 0.3, 1)',
            color: w === 'Financial' || w === 'Operating' || w === 'System.'
              ? 'transparent' : '#fff',
            background: (w === 'Financial' || w === 'Operating' || w === 'System.')
              ? GRADIENT : undefined,
            WebkitBackgroundClip: (w === 'Financial' || w === 'Operating' || w === 'System.')
              ? 'text' : undefined,
            backgroundClip: (w === 'Financial' || w === 'Operating' || w === 'System.')
              ? 'text' : undefined,
          }}>{w}</span>
        ))}
      </h1>
      <div style={{
        opacity: visible > words.length ? 1 : 0,
        transition: 'opacity 0.6s',
      }}>
        <PrimaryButton onClick={onContinue}>Begin</PrimaryButton>
      </div>
    </div>
  );
}

// ── Variant: Kinetic
function KineticWelcome({ onContinue }) {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>
      <div style={{
        width: 120, height: 120, borderRadius: '50%', background: GRADIENT,
        animation: 'spin 14s linear infinite',
        boxShadow: '0 0 80px rgba(255,159,10,0.5)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: DISPLAY, fontSize: 64, fontWeight: 700, color: '#000',
        marginBottom: 40,
      }}>₿</div>
      <h1 style={{
        fontFamily: DISPLAY, fontSize: 44, fontWeight: 600,
        letterSpacing: '-0.04em', lineHeight: 1.0, margin: 0, marginBottom: 12, color: '#fff',
      }}>Welcome to <span style={{ background: GRADIENT, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>BTC Now</span></h1>
      <p style={{ color: 'rgba(245,245,247,0.6)', fontSize: 15, margin: 0, marginBottom: 36 }}>Your Bitcoin Financial OS.</p>
      <div style={{ width: '100%' }}><PrimaryButton onClick={onContinue}>Begin</PrimaryButton></div>
      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// 3. PHONE
// ═══════════════════════════════════════════════════════════════════════════
function PhoneScreen({ onBack, onContinue, state, setState }) {
  const valid = state.phone.replace(/\D/g, '').length >= 10;
  const formatted = formatPhone(state.phone);
  return (
    <Screen padTop={110}>
      <ProgressDots current={1} total={6} />
      <BackButton onClick={onBack} />
      <ScreenHeading
        eyebrow="01 / Identity"
        title="What's your number?"
        subtitle="We'll send a one-time code. Used for recovery and fraud alerts only." />
      <TextInput
        label="Phone"
        prefix="🇺🇸 +1"
        value={formatted}
        onChange={(v) => setState({ ...state, phone: v.replace(/\D/g, '').slice(0, 10) })}
        placeholder="(555) 123-4567"
        inputMode="tel"
        autoFocus
      />
      <div style={{ flex: 1 }}/>
      <PrimaryButton onClick={onContinue} disabled={!valid}>
        Send code
      </PrimaryButton>
    </Screen>
  );
}

function formatPhone(raw) {
  const d = (raw || '').replace(/\D/g, '').slice(0, 10);
  if (d.length <= 3) return d;
  if (d.length <= 6) return `(${d.slice(0, 3)}) ${d.slice(3)}`;
  return `(${d.slice(0, 3)}) ${d.slice(3, 6)}-${d.slice(6)}`;
}

// ═══════════════════════════════════════════════════════════════════════════
// 4. OTP
// ═══════════════════════════════════════════════════════════════════════════
function OtpScreen({ onBack, onContinue, state, setState }) {
  const [otp, setOtp] = React.useState(['', '', '', '', '', '']);
  const [error, setError] = React.useState(false);
  const refs = React.useRef([]);

  React.useEffect(() => { if (refs.current[0]) refs.current[0].focus(); }, []);

  const handleChange = (i, v) => {
    const digit = v.replace(/\D/g, '').slice(-1);
    const next = [...otp]; next[i] = digit; setOtp(next);
    setError(false);
    if (digit && i < 5) refs.current[i + 1]?.focus();
    if (next.every(Boolean)) {
      // auto verify after short delay
      setTimeout(() => {
        if (next.join('') === '000000') { setError(true); return; }
        onContinue();
      }, 220);
    }
  };
  const handleKey = (i, e) => {
    if (e.key === 'Backspace' && !otp[i] && i > 0) refs.current[i - 1]?.focus();
  };

  const autoFill = () => {
    const code = ['1','2','3','4','5','6'];
    setOtp(code);
    setTimeout(onContinue, 320);
  };

  return (
    <Screen padTop={110}>
      <ProgressDots current={2} total={6} />
      <BackButton onClick={onBack} />
      <ScreenHeading
        eyebrow="02 / Verify"
        title="Enter the code"
        subtitle={`Sent to ${formatPhone(state.phone) || '(555) 123-4567'}. Valid for 10 minutes.`} />

      <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
        {otp.map((d, i) => (
          <input key={i} ref={el => refs.current[i] = el}
            value={d}
            onChange={(e) => handleChange(i, e.target.value)}
            onKeyDown={(e) => handleKey(i, e)}
            inputMode="numeric" maxLength={1}
            style={{
              flex: 1, height: 60, minWidth: 0,
              background: 'rgba(255,255,255,0.03)',
              border: `1.5px solid ${error ? 'rgba(239,68,68,0.6)' : d ? 'rgba(255,159,10,0.5)' : 'rgba(255,255,255,0.08)'}`,
              borderRadius: 14,
              color: '#fff',
              fontSize: 26, fontWeight: 600, textAlign: 'center',
              fontFamily: MONO, outline: 'none',
              boxShadow: d ? '0 0 0 3px rgba(255,159,10,0.08)' : 'none',
              transition: 'all 0.2s',
            }}
          />
        ))}
      </div>

      {error && (
        <div style={{ color: '#EF4444', fontSize: 13, marginBottom: 12 }}>
          Code didn't match. Try again.
        </div>
      )}

      <button onClick={autoFill} style={{
        background: 'transparent', border: 'none',
        color: 'rgba(245,245,247,0.45)', fontSize: 13,
        fontFamily: MONO, letterSpacing: '0.05em',
        cursor: 'pointer', textAlign: 'left', padding: 0,
      }}>
        [ demo · tap to autofill ]
      </button>

      <div style={{ flex: 1 }}/>

      <div style={{ textAlign: 'center', color: 'rgba(245,245,247,0.5)', fontSize: 13 }}>
        Didn't get it? <span style={{ color: '#FF9F0A', fontWeight: 500 }}>Resend in 0:42</span>
      </div>
    </Screen>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// 5. PROFILE (name + DOB)
// ═══════════════════════════════════════════════════════════════════════════
function ProfileScreen({ onBack, onContinue, state, setState }) {
  const valid = state.firstName.trim() && state.lastName.trim() && state.dob.replace(/\D/g, '').length === 8;
  return (
    <Screen padTop={110}>
      <ProgressDots current={3} total={6} />
      <BackButton onClick={onBack} />
      <ScreenHeading
        eyebrow="03 / Who you are"
        title="Let's make it yours."
        subtitle="Legal name. We'll match it against public records." />

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{ display: 'flex', gap: 10 }}>
          <div style={{ flex: 1 }}>
            <TextInput label="First" value={state.firstName} placeholder="Marc"
              onChange={(v) => setState({ ...state, firstName: v })} autoFocus />
          </div>
          <div style={{ flex: 1 }}>
            <TextInput label="Last" value={state.lastName} placeholder="Dumpff"
              onChange={(v) => setState({ ...state, lastName: v })} />
          </div>
        </div>
        <TextInput label="Date of birth" value={state.dob} placeholder="MM / DD / YYYY"
          onChange={(v) => setState({ ...state, dob: formatDOB(v) })}
          inputMode="numeric" maxLength={14} />
      </div>

      <div style={{
        marginTop: 20, padding: '12px 14px',
        background: 'rgba(255,159,10,0.06)',
        border: '1px solid rgba(255,159,10,0.15)',
        borderRadius: 12,
        display: 'flex', alignItems: 'flex-start', gap: 10,
      }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FF9F0A" strokeWidth="2" strokeLinecap="round" style={{ flexShrink: 0, marginTop: 1 }}><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
        <div style={{ fontSize: 12, color: 'rgba(245,245,247,0.7)', lineHeight: 1.5 }}>
          BTC Now is a regulated financial institution. Your info is encrypted and never sold.
        </div>
      </div>

      <div style={{ flex: 1 }}/>
      <PrimaryButton onClick={onContinue} disabled={!valid}>Continue</PrimaryButton>
    </Screen>
  );
}

function formatDOB(raw) {
  const d = (raw || '').replace(/\D/g, '').slice(0, 8);
  if (d.length <= 2) return d;
  if (d.length <= 4) return `${d.slice(0,2)} / ${d.slice(2)}`;
  return `${d.slice(0,2)} / ${d.slice(2,4)} / ${d.slice(4)}`;
}

// ═══════════════════════════════════════════════════════════════════════════
// 6. ADDRESS — Google-places style autocomplete
// ═══════════════════════════════════════════════════════════════════════════
const ADDRESS_SUGGESTIONS = [
  { main: '1421 Clearwater Pkwy', sub: 'Sarasota, FL 34237, USA' },
  { main: '1421 Clear Creek Rd', sub: 'Austin, TX 78745, USA' },
  { main: '1421 Clearview Ave NE', sub: 'Atlanta, GA 30306, USA' },
  { main: '1421 Clearmont Dr', sub: 'Miami Beach, FL 33140, USA' },
  { main: '1421 Clearfield Blvd', sub: 'Denver, CO 80220, USA' },
];

function AddressScreen({ onBack, onContinue, state, setState }) {
  const [query, setQuery] = React.useState(state.address || '');
  const [selected, setSelected] = React.useState(null);
  const hasQuery = query.trim().length >= 2;

  const suggestions = ADDRESS_SUGGESTIONS.filter(s =>
    s.main.toLowerCase().includes(query.toLowerCase())
    || query.toLowerCase().includes('1421')
    || query.toLowerCase().includes('clear')
  ).slice(0, 4);

  const pick = (s) => {
    setSelected(s);
    setQuery(`${s.main}, ${s.sub}`);
    setState({ ...state, address: `${s.main}, ${s.sub}` });
  };

  return (
    <Screen padTop={110}>
      <ProgressDots current={4} total={6} />
      <BackButton onClick={onBack} />
      <ScreenHeading
        eyebrow="04 / Address"
        title="Where do we ship your card?"
        subtitle="Your physical Bitcoin card. Start typing — we'll autocomplete." />

      <div style={{ position: 'relative' }}>
        <div style={{
          display: 'flex', alignItems: 'center',
          background: 'rgba(255,255,255,0.03)',
          border: `1px solid ${selected ? 'rgba(16,185,129,0.45)' : hasQuery ? 'rgba(255,159,10,0.5)' : 'rgba(255,255,255,0.08)'}`,
          borderRadius: 14, padding: '14px 16px',
          transition: 'all 0.2s',
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(245,245,247,0.5)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 10, flexShrink: 0 }}>
            <circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>
          </svg>
          <input
            autoFocus value={query}
            onChange={(e) => { setQuery(e.target.value); setSelected(null); }}
            placeholder="Start typing your address"
            style={{
              flex: 1, background: 'transparent', border: 'none', outline: 'none',
              color: '#fff', fontSize: 15, fontWeight: 500,
              fontFamily: "'Inter', sans-serif",
              letterSpacing: '-0.01em', minWidth: 0,
            }}
          />
          {selected && (
            <svg width="18" height="18" 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>

        {hasQuery && !selected && suggestions.length > 0 && (
          <div style={{
            marginTop: 8,
            background: 'rgba(13,13,18,0.95)',
            border: '1px solid rgba(255,255,255,0.08)',
            borderRadius: 14,
            overflow: 'hidden',
            backdropFilter: 'blur(20px)',
            boxShadow: '0 12px 40px rgba(0,0,0,0.5)',
          }}>
            {suggestions.map((s, i) => (
              <button key={i} onClick={() => pick(s)} style={{
                width: '100%', display: 'flex', alignItems: 'center', gap: 12,
                padding: '12px 14px', background: 'transparent', border: 'none',
                borderBottom: i < suggestions.length - 1 ? '1px solid rgba(255,255,255,0.05)' : 'none',
                color: '#fff', cursor: 'pointer', textAlign: 'left',
                transition: 'background 0.15s',
              }}
              onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,159,10,0.06)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                <div style={{
                  width: 28, height: 28, borderRadius: 8,
                  background: 'rgba(255,159,10,0.12)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#FF9F0A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>
                  </svg>
                </div>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 500, color: '#fff', marginBottom: 2 }}>{s.main}</div>
                  <div style={{ fontSize: 12, color: 'rgba(245,245,247,0.5)' }}>{s.sub}</div>
                </div>
              </button>
            ))}
            <div style={{
              padding: '10px 14px',
              fontSize: 10, color: 'rgba(245,245,247,0.3)',
              fontFamily: MONO, letterSpacing: '0.12em', textTransform: 'uppercase',
              borderTop: '1px solid rgba(255,255,255,0.05)',
              display: 'flex', justifyContent: 'space-between',
            }}>
              <span>Powered by BTC Now Maps</span>
              <span>4 results</span>
            </div>
          </div>
        )}
      </div>

      <div style={{ flex: 1 }}/>
      <PrimaryButton onClick={onContinue} disabled={!selected}>Confirm address</PrimaryButton>
    </Screen>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// 7. BIOMETRIC — Face ID scan
// ═══════════════════════════════════════════════════════════════════════════
function BiometricScreen({ onContinue, state }) {
  const [phase, setPhase] = React.useState('idle'); // idle | scanning | done

  const scan = () => {
    setPhase('scanning');
    setTimeout(() => setPhase('done'), 2600);
    setTimeout(onContinue, 3400);
  };

  return (
    <Screen padTop={96} padX={24}>
      <ProgressDots current={5} total={6} />

      <div style={{ textAlign: 'center', marginBottom: 12 }}>
        <div style={{
          fontFamily: MONO, fontSize: 10, letterSpacing: '0.25em',
          color: '#FF9F0A', textTransform: 'uppercase', marginBottom: 10,
        }}>05 / Secure</div>
        <h1 style={{
          fontFamily: DISPLAY, fontSize: 30, fontWeight: 600,
          letterSpacing: '-0.035em', margin: 0, marginBottom: 8, color: '#fff',
        }}>
          {phase === 'done' ? 'You\'re locked in.' : 'Lock this device.'}
        </h1>
        <p style={{
          fontSize: 14, color: 'rgba(245,245,247,0.55)',
          margin: 0, letterSpacing: '-0.01em',
        }}>
          {phase === 'idle' && 'Face ID gates every transaction.'}
          {phase === 'scanning' && 'Hold still. Scanning biometric.'}
          {phase === 'done' && 'Face ID enrolled. You\'re the key.'}
        </p>
      </div>

      {/* Face scan visual */}
      <div style={{
        flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
        position: 'relative',
      }}>
        <FaceScanViz phase={phase} />
      </div>

      {phase === 'idle' && (
        <PrimaryButton onClick={scan}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2M9 10h.01M15 10h.01M9 15c.8.667 1.8 1 3 1s2.2-.333 3-1"/></svg>
          Enable Face ID
        </PrimaryButton>
      )}
      {phase === 'scanning' && (
        <div style={{ textAlign: 'center', fontSize: 13, fontFamily: MONO, color: 'rgba(245,245,247,0.5)', letterSpacing: '0.1em' }}>
          ENROLLING · DO NOT MOVE
        </div>
      )}
      {phase === 'done' && (
        <div style={{ textAlign: 'center' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            color: '#10B981', fontSize: 14, fontWeight: 500,
          }}>
            <svg width="18" height="18" 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>
            Device secured
          </div>
        </div>
      )}
    </Screen>
  );
}

function FaceScanViz({ phase }) {
  const size = 240;
  return (
    <div style={{
      width: size, height: size, position: 'relative',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      {/* outer orange ring */}
      <div style={{
        position: 'absolute', inset: 0, borderRadius: '50%',
        background: phase === 'done' ? 'conic-gradient(#10B981 360deg, #10B981 360deg)'
          : phase === 'scanning' ? 'conic-gradient(from 270deg, #FF9F0A 0deg, #FF9F0A 360deg, transparent 360deg)'
          : 'conic-gradient(from 0deg, rgba(255,255,255,0.12) 0deg, rgba(255,255,255,0.12) 360deg)',
        animation: phase === 'scanning' ? 'ringRotate 2.6s linear' : 'none',
        filter: phase !== 'idle' ? 'drop-shadow(0 0 20px rgba(255,159,10,0.5))' : 'none',
        transition: 'filter 0.3s',
        padding: 2,
      }}>
        <div style={{
          width: '100%', height: '100%', borderRadius: '50%',
          background: '#050507',
        }}/>
      </div>

      {/* face SVG */}
      <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 100 100"
        style={{ position: 'relative', zIndex: 2 }}>
        <defs>
          <linearGradient id="faceGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#FFD60A"/>
            <stop offset="50%" stopColor="#FF9F0A"/>
            <stop offset="100%" stopColor="#FF453A"/>
          </linearGradient>
        </defs>
        {/* mesh dots — a sparse face mesh */}
        {phase !== 'idle' && [
          [50,20],[40,24],[60,24],[32,32],[68,32],[28,44],[72,44],
          [26,56],[74,56],[30,68],[70,68],[38,76],[62,76],[50,82],
          [50,38],[40,44],[60,44],[50,52],[42,58],[58,58],[50,65],
        ].map(([x,y], i) => (
          <circle key={i} cx={x} cy={y} r="1"
            fill="url(#faceGrad)"
            opacity={phase === 'done' ? 0.9 : 0.7}
            style={{
              animation: phase === 'scanning' ? `meshPulse 1.5s ease-in-out ${i * 0.05}s infinite` : 'none',
            }}/>
        ))}
        {/* face outline */}
        <path d="M50 14 C72 14, 84 30, 82 50 C80 72, 66 86, 50 86 C34 86, 20 72, 18 50 C16 30, 28 14, 50 14 Z"
          fill="none"
          stroke={phase === 'idle' ? 'rgba(255,255,255,0.2)' : 'url(#faceGrad)'}
          strokeWidth="1.2" strokeLinecap="round"
          style={{ transition: 'stroke 0.4s' }}/>
        {/* eyes */}
        <circle cx="40" cy="42" r="1.8" fill={phase === 'idle' ? 'rgba(255,255,255,0.25)' : '#FF9F0A'}/>
        <circle cx="60" cy="42" r="1.8" fill={phase === 'idle' ? 'rgba(255,255,255,0.25)' : '#FF9F0A'}/>
        {/* mouth */}
        <path d="M42 62 Q50 68, 58 62" fill="none" stroke={phase === 'idle' ? 'rgba(255,255,255,0.25)' : '#FF9F0A'} strokeWidth="1.2" strokeLinecap="round"/>
      </svg>

      {/* scan line */}
      {phase === 'scanning' && (
        <div style={{
          position: 'absolute', left: '10%', right: '10%',
          height: 2, background: 'linear-gradient(90deg, transparent, #FF9F0A, transparent)',
          boxShadow: '0 0 16px #FF9F0A',
          animation: 'scanLine 1.3s ease-in-out infinite',
          zIndex: 3,
        }}/>
      )}

      <style>{`
        @keyframes ringRotate {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
        @keyframes scanLine {
          0% { top: 15%; opacity: 0; }
          10% { opacity: 1; }
          90% { opacity: 1; }
          100% { top: 85%; opacity: 0; }
        }
        @keyframes meshPulse {
          0%, 100% { opacity: 0.35; }
          50% { opacity: 1; }
        }
      `}</style>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// 8. WELCOME BACK — personalized
// ═══════════════════════════════════════════════════════════════════════════
function WelcomeBackScreen({ onContinue, state }) {
  const name = state.firstName || 'Marc';
  return (
    <Screen padTop={80} style={{ justifyContent: 'center' }}>
      <div style={{ textAlign: 'center', animation: 'welcomeFadeIn 0.9s ease-out' }}>
        <div style={{
          fontFamily: MONO, fontSize: 10, letterSpacing: '0.28em',
          color: '#FF9F0A', textTransform: 'uppercase', marginBottom: 20,
        }}>
          OS · session bound · ✓
        </div>
        <h1 style={{
          fontFamily: DISPLAY, fontSize: 50, fontWeight: 600,
          letterSpacing: '-0.045em', lineHeight: 0.95,
          margin: 0, marginBottom: 6, color: '#fff',
        }}>Welcome,</h1>
        <h1 style={{
          fontFamily: DISPLAY, fontSize: 50, fontWeight: 600,
          letterSpacing: '-0.045em', lineHeight: 0.95,
          margin: 0, marginBottom: 32,
          background: GRADIENT,
          WebkitBackgroundClip: 'text',
          WebkitTextFillColor: 'transparent',
          filter: 'drop-shadow(0 0 30px rgba(255,159,10,0.35))',
        }}>{name}.</h1>
        <p style={{
          fontSize: 16, lineHeight: 1.5,
          color: 'rgba(245,245,247,0.6)', margin: 0,
          letterSpacing: '-0.01em', maxWidth: 280, marginLeft: 'auto', marginRight: 'auto',
        }}>
          Your operating system is ready.<br/>Here's what it can do.
        </p>
      </div>
      <div style={{ flex: 1 }}/>
      <PrimaryButton onClick={onContinue}>
        See what's inside
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: 2 }}><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </PrimaryButton>
    </Screen>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// 9. OFFERINGS — swipeable card stack
// ═══════════════════════════════════════════════════════════════════════════
const OFFERINGS = [
  {
    num: '01', tag: 'Accumulate',
    title: 'Bitcoin on installment.',
    body: 'Lock a price. Pay monthly. Your coin from day one.',
    viz: 'installment',
  },
  {
    num: '02', tag: 'Hold',
    title: 'Bitcoin + USD wallets.',
    body: 'One for each side of the hedge. Move between them instantly.',
    viz: 'wallets',
  },
  {
    num: '03', tag: 'Spend',
    title: 'Dynamic credit card.',
    body: 'Your limit adjusts live with cash, BTC price, FICO, and income. Earn sats on every swipe.',
    viz: 'card',
  },
  {
    num: '04', tag: 'Borrow',
    title: 'Personal loans in 24h.',
    body: 'Up to $100k, up to 7 years. Or pledge BTC for a USD line — interest only.',
    viz: 'loans',
  },
  {
    num: '05', tag: 'Grow',
    title: 'Over-roll to bitcoin.',
    body: 'Set a ceiling. Every dollar above it auto-converts to BTC. Round-ups too.',
    viz: 'overroll',
  },
  {
    num: '06', tag: 'Invest',
    title: 'BTC Now Index.',
    body: 'Spot BTC, plus every public company that actually holds it. Robo-allocated.',
    viz: 'index',
  },
  {
    num: '07', tag: 'Live',
    title: 'Velocity Black Concierge.',
    body: 'Black-card service. Wealth advisor chat. Anything, anywhere.',
    viz: 'concierge',
  },
];

function OfferingsScreen({ onFinish }) {
  const [i, setI] = React.useState(0);
  const [drag, setDrag] = React.useState(0);
  const [dragging, setDragging] = React.useState(false);
  const startX = React.useRef(null);
  const moved = React.useRef(false);
  const total = OFFERINGS.length;

  const advance = () => {
    if (i < total - 1) setI(v => v + 1);
    else onFinish();
  };
  const back = () => { if (i > 0) setI(v => v - 1); };

  const onStart = (e) => {
    startX.current = (e.touches?.[0] || e).clientX;
    moved.current = false;
    setDragging(true);
  };
  const onMove = (e) => {
    if (startX.current == null) return;
    const cx = (e.touches?.[0] || e).clientX;
    const d = cx - startX.current;
    if (Math.abs(d) > 4) moved.current = true;
    setDrag(d);
  };
  const onEnd = () => {
    if (Math.abs(drag) > 50) {
      if (drag < 0) advance(); else back();
    } else if (!moved.current && startX.current != null) {
      // treated as a tap → advance
      advance();
    }
    setDrag(0);
    setDragging(false);
    startX.current = null;
  };

  return (
    <Screen padTop={68} padX={0} padBottom={24}>
      <div style={{ padding: '0 24px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{
          fontFamily: MONO, fontSize: 10, letterSpacing: '0.25em',
          color: 'rgba(245,245,247,0.45)', textTransform: 'uppercase',
        }}>Offerings · {String(i+1).padStart(2,'0')} of {String(total).padStart(2,'0')}</div>
        <button onClick={onFinish} style={{
          background: 'transparent', border: 'none',
          color: 'rgba(245,245,247,0.5)', fontSize: 13, fontWeight: 500,
          cursor: 'pointer', padding: 0,
        }}>Skip →</button>
      </div>

      {/* card stack */}
      <div style={{
        flex: 1, position: 'relative', margin: '0 24px',
        touchAction: 'pan-y', userSelect: 'none',
        cursor: dragging ? 'grabbing' : 'pointer',
      }}
        onMouseDown={onStart} onMouseMove={onMove} onMouseUp={onEnd} onMouseLeave={() => { if (dragging) onEnd(); }}
        onTouchStart={onStart} onTouchMove={onMove} onTouchEnd={onEnd}>
        {OFFERINGS.map((o, idx) => {
          const rel = idx - i;
          if (rel < 0 || rel > 2) return null;
          const isTop = rel === 0;
          const offset = rel * 12;
          const scale = 1 - rel * 0.045;
          const opacity = rel === 0 ? 1 : rel === 1 ? 0.55 : 0.25;
          return (
            <div key={idx} style={{
              position: 'absolute', inset: 0,
              transform: `translateX(${isTop ? drag : 0}px) translateY(${offset}px) scale(${scale}) rotate(${isTop ? drag * 0.03 : 0}deg)`,
              opacity,
              zIndex: total - rel,
              transition: isTop && drag === 0 ? 'transform 0.35s cubic-bezier(0.16,1,0.3,1)' : 'none',
              pointerEvents: isTop ? 'auto' : 'none',
            }}>
              <OfferingCard o={o} />
            </div>
          );
        })}

        {/* subtle tap hint, fades after first card */}
        {i === 0 && (
          <div style={{
            position: 'absolute', bottom: 12, left: '50%', transform: 'translateX(-50%)',
            fontFamily: MONO, fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'rgba(255,159,10,0.75)',
            animation: 'tapPulse 1.8s ease-in-out infinite',
            pointerEvents: 'none',
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <span>Tap</span>
            <span style={{ opacity: 0.4 }}>·</span>
            <span>Swipe to explore</span>
          </div>
        )}
      </div>

      {/* bottom nav — prev / progress / next */}
      <div style={{ padding: '18px 24px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
        <button onClick={back} disabled={i === 0} style={{
          width: 44, height: 44, borderRadius: '50%',
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.1)',
          color: i === 0 ? 'rgba(245,245,247,0.2)' : 'rgba(245,245,247,0.8)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: i === 0 ? 'default' : 'pointer', flexShrink: 0,
          opacity: i === 0 ? 0.4 : 1,
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
        </button>

        <div style={{ flex: 1, display: 'flex', gap: 4 }}>
          {Array.from({ length: total }).map((_, idx) => (
            <div key={idx} style={{
              flex: 1, height: 3, borderRadius: 2,
              background: idx <= i ? 'linear-gradient(90deg, #FFD60A, #FF9F0A)' : 'rgba(255,255,255,0.08)',
              transition: 'background 0.3s',
            }}/>
          ))}
        </div>

        <button onClick={advance} style={{
          height: 44, borderRadius: 100,
          padding: i === total - 1 ? '0 20px' : '0',
          width: i === total - 1 ? 'auto' : 44,
          background: GRADIENT, border: 'none',
          boxShadow: '0 0 24px rgba(255,159,10,0.45)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          cursor: 'pointer', flexShrink: 0,
          fontFamily: "'Inter', sans-serif", fontSize: 14, fontWeight: 600, color: '#000',
        }}>
          {i === total - 1 ? (
            <>
              Enter BTC Now
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#000" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </>
          ) : (
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#000" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          )}
        </button>
      </div>

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

function OfferingCard({ o }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      borderRadius: 28,
      background: 'linear-gradient(180deg, rgba(20,20,26,0.85) 0%, rgba(10,10,14,0.95) 100%)',
      border: '1px solid rgba(255,255,255,0.08)',
      boxShadow: '0 24px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06)',
      padding: 24,
      display: 'flex', flexDirection: 'column',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* tag + num */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
        <div style={{
          padding: '5px 10px', borderRadius: 100,
          background: 'rgba(255,159,10,0.1)',
          border: '1px solid rgba(255,159,10,0.25)',
          fontSize: 10, fontWeight: 600, letterSpacing: '0.12em',
          color: '#FF9F0A', textTransform: 'uppercase',
        }}>{o.tag}</div>
        <div style={{
          fontFamily: MONO, fontSize: 11, letterSpacing: '0.1em',
          color: 'rgba(245,245,247,0.35)',
        }}>{o.num} / 07</div>
      </div>

      {/* viz */}
      <div style={{
        flex: 1, minHeight: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
        marginBottom: 20,
      }}>
        <OfferingViz kind={o.viz} />
      </div>

      {/* title + body */}
      <div>
        <h2 style={{
          fontFamily: DISPLAY, fontSize: 28, fontWeight: 600,
          letterSpacing: '-0.035em', lineHeight: 1.1,
          margin: 0, marginBottom: 8, color: '#fff',
          textWrap: 'balance',
        }}>{o.title}</h2>
        <p style={{
          fontSize: 14, lineHeight: 1.5, margin: 0,
          color: 'rgba(245,245,247,0.6)', letterSpacing: '-0.01em',
          textWrap: 'pretty',
        }}>{o.body}</p>
      </div>
    </div>
  );
}

// ── One illustration per offering — SVG signatures
function OfferingViz({ kind }) {
  const common = { width: '100%', height: '100%', maxWidth: 300, maxHeight: 200 };

  if (kind === 'installment') {
    // Coin ascending a staircase of bars
    return (
      <svg viewBox="0 0 300 180" style={common}>
        <defs>
          <linearGradient id="g1" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stopColor="#FFD60A"/><stop offset="100%" stopColor="#FF453A"/></linearGradient>
        </defs>
        {[0,1,2,3,4,5].map(i => (
          <rect key={i} x={30+i*40} y={140-i*18} width="28" height={18*(i+1)+4} rx="4"
            fill={i === 5 ? 'url(#g1)' : 'rgba(255,255,255,0.08)'}
            stroke={i === 5 ? 'none' : 'rgba(255,255,255,0.04)'}/>
        ))}
        {/* coin */}
        <circle cx="254" cy="42" r="22" fill="url(#g1)" filter="drop-shadow(0 0 12px rgba(255,159,10,0.6))"/>
        <text x="254" y="50" textAnchor="middle" fontFamily="Clash Display" fontSize="24" fontWeight="700" fill="#000">₿</text>
        {/* dotted path */}
        <path d="M 44 128 Q 120 70, 254 42" fill="none" stroke="rgba(255,159,10,0.4)" strokeWidth="1.5" strokeDasharray="3 4"/>
      </svg>
    );
  }

  if (kind === 'wallets') {
    return (
      <svg viewBox="0 0 300 180" style={common}>
        <defs>
          <linearGradient id="g2a" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stopColor="#FFD60A"/><stop offset="100%" stopColor="#FF453A"/></linearGradient>
          <linearGradient id="g2b" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stopColor="#10B981"/><stop offset="100%" stopColor="#059669"/></linearGradient>
        </defs>
        {/* BTC wallet */}
        <rect x="28" y="36" width="130" height="108" rx="14" fill="url(#g2a)" filter="drop-shadow(0 8px 20px rgba(255,159,10,0.35))"/>
        <text x="44" y="64" fontFamily="JetBrains Mono" fontSize="9" fontWeight="600" fill="#000" opacity="0.7" letterSpacing="2">BTC</text>
        <text x="44" y="118" fontFamily="Clash Display" fontSize="36" fontWeight="600" fill="#000">₿ 0.42</text>
        {/* USD wallet */}
        <rect x="142" y="58" width="130" height="108" rx="14" fill="url(#g2b)" filter="drop-shadow(0 8px 20px rgba(16,185,129,0.3))"/>
        <text x="158" y="86" fontFamily="JetBrains Mono" fontSize="9" fontWeight="600" fill="#000" opacity="0.7" letterSpacing="2">USD</text>
        <text x="158" y="140" fontFamily="Clash Display" fontSize="30" fontWeight="600" fill="#000">$12,400</text>
        {/* arrows between */}
        <path d="M 154 110 L 148 110 M 148 110 L 152 106 M 148 110 L 152 114" stroke="#fff" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
      </svg>
    );
  }

  if (kind === 'card') {
    return (
      <svg viewBox="0 0 300 180" style={common}>
        <defs>
          <linearGradient id="g3" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#1a1a1a"/>
            <stop offset="100%" stopColor="#000"/>
          </linearGradient>
          <linearGradient id="g3b" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stopColor="#FFD60A"/><stop offset="100%" stopColor="#FF453A"/></linearGradient>
        </defs>
        <rect x="40" y="24" width="220" height="140" rx="14" fill="url(#g3)" stroke="rgba(255,159,10,0.3)" strokeWidth="1" filter="drop-shadow(0 16px 30px rgba(0,0,0,0.6))"/>
        {/* gradient corner accent */}
        <path d="M 40 38 L 40 24 Q 40 24, 54 24 L 80 24 Q 50 40, 40 60 Z" fill="url(#g3b)" opacity="0.9"/>
        <text x="58" y="58" fontFamily="Clash Display" fontSize="14" fontWeight="700" fill="#fff">BTC Now</text>
        <text x="58" y="118" fontFamily="JetBrains Mono" fontSize="13" fontWeight="500" fill="#fff" letterSpacing="3">•••• •••• •••• 4291</text>
        <text x="58" y="144" fontFamily="JetBrains Mono" fontSize="8" fontWeight="500" fill="rgba(255,255,255,0.5)" letterSpacing="2">DYNAMIC · M. DUMPFF</text>
        {/* orange chip */}
        <rect x="212" y="40" width="32" height="24" rx="4" fill="url(#g3b)"/>
        {/* glow */}
        <rect x="40" y="24" width="220" height="140" rx="14" fill="none" stroke="url(#g3b)" strokeWidth="0.5" opacity="0.5"/>
      </svg>
    );
  }

  if (kind === 'loans') {
    return (
      <svg viewBox="0 0 300 180" style={common}>
        <defs>
          <linearGradient id="g4" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stopColor="#FFD60A"/><stop offset="100%" stopColor="#FF453A"/></linearGradient>
        </defs>
        {/* house */}
        <rect x="30" y="90" width="70" height="58" rx="4" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.15)"/>
        <path d="M 22 92 L 65 62 L 108 92" fill="rgba(255,159,10,0.15)" stroke="rgba(255,159,10,0.5)" strokeLinejoin="round"/>
        <rect x="55" y="112" width="20" height="36" fill="rgba(255,159,10,0.3)"/>
        {/* car */}
        <rect x="120" y="110" width="70" height="26" rx="6" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.15)"/>
        <path d="M 128 110 L 138 96 L 172 96 L 182 110" fill="rgba(255,159,10,0.15)" stroke="rgba(255,159,10,0.5)" strokeLinejoin="round"/>
        <circle cx="136" cy="140" r="7" fill="#0A0A0A" stroke="rgba(255,159,10,0.5)"/>
        <circle cx="174" cy="140" r="7" fill="#0A0A0A" stroke="rgba(255,159,10,0.5)"/>
        {/* amount pill */}
        <rect x="205" y="62" width="78" height="62" rx="14" fill="url(#g4)" filter="drop-shadow(0 0 16px rgba(255,159,10,0.4))"/>
        <text x="244" y="90" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fontWeight="600" fill="#000" opacity="0.7" letterSpacing="2">UP TO</text>
        <text x="244" y="112" textAnchor="middle" fontFamily="Clash Display" fontSize="22" fontWeight="700" fill="#000">$100k</text>
        {/* time */}
        <text x="150" y="170" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fontWeight="500" fill="#FF9F0A" letterSpacing="2">FUNDED IN 24h</text>
      </svg>
    );
  }

  if (kind === 'overroll') {
    return (
      <svg viewBox="0 0 300 180" style={common}>
        <defs>
          <linearGradient id="g5" x1="0" y1="1" x2="0" y2="0"><stop offset="0%" stopColor="#FF453A"/><stop offset="100%" stopColor="#FFD60A"/></linearGradient>
        </defs>
        {/* USD bucket */}
        <rect x="30" y="50" width="90" height="110" rx="12" fill="none" stroke="rgba(255,255,255,0.2)" strokeWidth="1.5"/>
        <rect x="30" y="100" width="90" height="60" rx="12" fill="rgba(16,185,129,0.2)" stroke="rgba(16,185,129,0.5)" strokeWidth="1.5"/>
        <text x="75" y="134" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fontWeight="600" fill="#10B981" letterSpacing="1.5">USD</text>
        {/* overflow arrow */}
        <path d="M 128 80 L 168 80 Q 180 80, 180 92 L 180 110" fill="none" stroke="url(#g5)" strokeWidth="2.5" strokeLinecap="round"/>
        <path d="M 175 104 L 180 112 L 185 104" fill="none" stroke="url(#g5)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
        {/* threshold line */}
        <line x1="26" y1="90" x2="124" y2="90" stroke="#FF9F0A" strokeWidth="1" strokeDasharray="3 3"/>
        <text x="120" y="85" textAnchor="end" fontFamily="JetBrains Mono" fontSize="8" fill="#FF9F0A" letterSpacing="1">CEILING</text>
        {/* BTC bucket */}
        <circle cx="220" cy="110" r="52" fill="url(#g5)" filter="drop-shadow(0 0 20px rgba(255,159,10,0.4))"/>
        <text x="220" y="120" textAnchor="middle" fontFamily="Clash Display" fontSize="48" fontWeight="700" fill="#000">₿</text>
      </svg>
    );
  }

  if (kind === 'index') {
    return (
      <svg viewBox="0 0 300 180" style={common}>
        <defs>
          <linearGradient id="g6" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stopColor="#FFD60A"/><stop offset="100%" stopColor="#FF453A"/></linearGradient>
        </defs>
        {/* chart line */}
        <path d="M 20 130 L 60 110 L 90 118 L 120 85 L 160 95 L 200 60 L 240 70 L 280 30"
          fill="none" stroke="url(#g6)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
          filter="drop-shadow(0 0 8px rgba(255,159,10,0.5))"/>
        <path d="M 20 130 L 60 110 L 90 118 L 120 85 L 160 95 L 200 60 L 240 70 L 280 30 L 280 160 L 20 160 Z"
          fill="url(#g6)" opacity="0.1"/>
        {/* ticker chips */}
        <g transform="translate(18, 145)">
          {['MSTR','TSLA','COIN','BTC','HUT'].map((t, i) => (
            <g key={t} transform={`translate(${i * 56}, 0)`}>
              <rect width="50" height="22" rx="11" fill="rgba(255,255,255,0.06)" stroke="rgba(255,159,10,0.3)"/>
              <text x="25" y="15" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fontWeight="600" fill="#FF9F0A" letterSpacing="1">{t}</text>
            </g>
          ))}
        </g>
        {/* value */}
        <text x="20" y="42" fontFamily="JetBrains Mono" fontSize="8" fill="rgba(245,245,247,0.5)" letterSpacing="2">BTC NOW INDEX</text>
        <text x="20" y="72" fontFamily="Clash Display" fontSize="22" fontWeight="600" fill="#fff">+48.2%</text>
      </svg>
    );
  }

  if (kind === 'concierge') {
    return (
      <svg viewBox="0 0 300 180" style={common}>
        <defs>
          <linearGradient id="g7" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stopColor="#FFD60A"/><stop offset="100%" stopColor="#FF453A"/></linearGradient>
        </defs>
        {/* chat bubble 1 (user) */}
        <rect x="24" y="32" width="180" height="34" rx="17" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.1)"/>
        <text x="38" y="54" fontFamily="Inter" fontSize="11" fill="rgba(245,245,247,0.9)" fontWeight="500">Book a yacht in Monaco, tonight.</text>
        {/* chat bubble 2 (concierge) */}
        <rect x="80" y="76" width="196" height="34" rx="17" fill="url(#g7)" filter="drop-shadow(0 0 12px rgba(255,159,10,0.3))"/>
        <text x="96" y="98" fontFamily="Inter" fontSize="11" fill="#000" fontWeight="600">On it. 60-ft Sunseeker confirmed.</text>
        {/* chat bubble 3 (user) */}
        <rect x="24" y="120" width="140" height="34" rx="17" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.1)"/>
        <text x="38" y="142" fontFamily="Inter" fontSize="11" fill="rgba(245,245,247,0.9)" fontWeight="500">Flight too?</text>
        {/* typing indicator */}
        <g transform="translate(170, 150)">
          <rect width="54" height="22" rx="11" fill="rgba(255,159,10,0.1)" stroke="rgba(255,159,10,0.3)"/>
          <circle cx="16" cy="11" r="2.5" fill="#FF9F0A"/>
          <circle cx="27" cy="11" r="2.5" fill="#FF9F0A" opacity="0.6"/>
          <circle cx="38" cy="11" r="2.5" fill="#FF9F0A" opacity="0.3"/>
        </g>
      </svg>
    );
  }

  return null;
}

// ═══════════════════════════════════════════════════════════════════════════
// 10. READY — final handoff screen
// ═══════════════════════════════════════════════════════════════════════════
function ReadyScreen({ state, onRestart, onOpen }) {
  const name = state.firstName || 'Marc';
  return (
    <Screen padTop={80} style={{ justifyContent: 'center', alignItems: 'center' }}>
      <div style={{ textAlign: 'center' }}>
        <div style={{
          width: 80, height: 80, borderRadius: '50%',
          background: 'rgba(16,185,129,0.15)',
          border: '2px solid rgba(16,185,129,0.5)',
          margin: '0 auto 24px',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 0 40px rgba(16,185,129,0.3)',
          animation: 'readyPop 0.5s cubic-bezier(0.16, 1, 0.3, 1)',
        }}>
          <svg width="36" height="36" 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>
        <h1 style={{
          fontFamily: DISPLAY, fontSize: 36, fontWeight: 600,
          letterSpacing: '-0.04em', lineHeight: 1.05,
          margin: 0, marginBottom: 10, color: '#fff',
        }}>You're in, {name}.</h1>
        <p style={{
          fontSize: 15, color: 'rgba(245,245,247,0.55)',
          margin: 0, marginBottom: 32,
          letterSpacing: '-0.01em', maxWidth: 280, marginLeft: 'auto', marginRight: 'auto',
        }}>
          Your dashboard is loading. Make your first move.
        </p>
        <div style={{ width: 280, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <PrimaryButton onClick={onOpen}>
            Open dashboard
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: 2 }}><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </PrimaryButton>
          <button onClick={onRestart} style={{
            background: 'transparent', border: 'none',
            color: 'rgba(245,245,247,0.45)', fontSize: 13,
            cursor: 'pointer', padding: '8px',
            fontFamily: MONO, letterSpacing: '0.1em', textTransform: 'uppercase',
          }}>
            ↻ Restart flow
          </button>
        </div>
      </div>
      <style>{`
        @keyframes readyPop {
          0% { opacity: 0; transform: scale(0.6); }
          100% { opacity: 1; transform: scale(1); }
        }
      `}</style>
    </Screen>
  );
}

// ═══ exports ═══════════════════════════════════════════════════════════════
Object.assign(window, {
  SplashScreen, SocialScreen, WelcomeBootScreen,
  PhoneScreen, OtpScreen, ProfileScreen, AddressScreen,
  BiometricScreen, WelcomeBackScreen, OfferingsScreen, ReadyScreen,
});