// setup-wizard.jsx — First-run setup, 5 steps:
// 1) Language  2) Invite code (skippable)  3) EVM wallet  4) Nickname  5) Appearance

const SETUP_W = 1100;
const SETUP_H = 720;

const SETUP_LANGS = [
  { id: 'zh-CN', native: '简体中文', en: 'Simplified Chinese' },
  { id: 'zh-TW', native: '繁體中文', en: 'Traditional Chinese' },
  { id: 'en',    native: 'English',  en: 'English' },
  { id: 'ja',    native: '日本語',   en: 'Japanese' },
  { id: 'ko',    native: '한국어',    en: 'Korean' },
  { id: 'fr',    native: 'Français', en: 'French' },
  { id: 'vi',    native: 'Tiếng Việt', en: 'Vietnamese' },
  { id: 'ru',    native: 'Русский',  en: 'Russian' },
  { id: 'es',    native: 'Español',  en: 'Spanish' },
  { id: 'de',    native: 'Deutsch',  en: 'German' },
  { id: 'pt',    native: 'Português', en: 'Portuguese' },
  { id: 'ar',    native: 'العربية',  en: 'Arabic' },
];

// Localized strings used across setup steps
const I18N = {
  'zh-CN': { continue: '继续', back: '返回', skip: '跳过', finish: '完成设置', step: '第 {n} / {t} 步' },
  'zh-TW': { continue: '繼續', back: '返回', skip: '跳過', finish: '完成設定', step: '第 {n} / {t} 步' },
  'en':    { continue: 'Continue', back: 'Back', skip: 'Skip', finish: 'Finish setup', step: 'Step {n} of {t}' },
  'ja':    { continue: '続ける', back: '戻る', skip: 'スキップ', finish: '設定を完了', step: 'ステップ {n} / {t}' },
  'ko':    { continue: '계속', back: '뒤로', skip: '건너뛰기', finish: '설정 완료', step: '{n} / {t} 단계' },
  'fr':    { continue: 'Continuer', back: 'Retour', skip: 'Ignorer', finish: 'Terminer', step: 'Étape {n} / {t}' },
  'vi':    { continue: 'Tiếp tục', back: 'Quay lại', skip: 'Bỏ qua', finish: 'Hoàn tất', step: 'Bước {n} / {t}' },
  'ru':    { continue: 'Продолжить', back: 'Назад', skip: 'Пропустить', finish: 'Завершить', step: 'Шаг {n} / {t}' },
  'es':    { continue: 'Continuar', back: 'Atrás', skip: 'Omitir', finish: 'Finalizar', step: 'Paso {n} de {t}' },
  'de':    { continue: 'Weiter', back: 'Zurück', skip: 'Überspringen', finish: 'Fertig', step: 'Schritt {n} / {t}' },
  'pt':    { continue: 'Continuar', back: 'Voltar', skip: 'Pular', finish: 'Concluir', step: 'Passo {n} de {t}' },
  'ar':    { continue: 'متابعة', back: 'رجوع', skip: 'تخطٍ', finish: 'إنهاء الإعداد', step: 'الخطوة {n} / {t}' },
};
const tr = (lang, key, vars = {}) => {
  const s = (I18N[lang] && I18N[lang][key]) || I18N.en[key] || key;
  return s.replace(/\{(\w+)\}/g, (_, k) => vars[k] ?? '');
};

function SetupShell({ dark, step, total = 5, lang = 'en', title, subtitle, children, footer }) {
  const t = dark ? G.d : G.l;
  return (
    <Theme dark={dark}>
      <GhastWindow dark={dark} style={{ height: SETUP_H }}>
        <div style={{ position: 'absolute', top: 16, left: 18, zIndex: 10 }}><TrafficLights /></div>

        {/* progress dots */}
        <div style={{ position: 'absolute', top: 22, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 6, zIndex: 5 }}>
          {Array.from({ length: total }).map((_, i) => (
            <div key={i} style={{
              width: i === step ? 18 : 6, height: 6, borderRadius: 3,
              background: i <= step ? t.fg : t.fg4,
              transition: 'all .3s cubic-bezier(0.32,0.72,0,1)',
            }} />
          ))}
        </div>

        <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', padding: '80px 80px 24px' }}>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
            <div style={{ fontFamily: G.mono, fontSize: 11, color: t.fg3, letterSpacing: 1, textTransform: 'uppercase', marginBottom: 12 }}>
              {tr(lang, 'step', { n: step + 1, t: total })}
            </div>
            <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: -0.8, marginBottom: 8 }}>{title}</div>
            {subtitle && <div style={{ fontSize: 15, color: t.fg2, marginBottom: 28, lineHeight: 1.5, maxWidth: 600 }}>{subtitle}</div>}
            <div style={{ flex: 1 }}>{children}</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 24 }}>
            {footer || <>
              <Button variant="ghost" size="md">{tr(lang, 'skip')}</Button>
              <div style={{ display: 'flex', gap: 8 }}>
                <Button variant="secondary" size="md">{tr(lang, 'back')}</Button>
                <Button variant="primary" size="md" icon={<Icon name="arrowRight" size={14} color={t.bg} />}>{tr(lang, 'continue')}</Button>
              </div>
            </>}
          </div>
        </div>
      </GhastWindow>
    </Theme>
  );
}

// ─────────────────────────────────────────────────────────────
// 1 · LANGUAGE
// ─────────────────────────────────────────────────────────────
function SetupLanguage({ dark, selected = 'zh-CN' }) {
  const t = dark ? G.d : G.l;
  return (
    <SetupShell dark={dark} step={0} lang={selected} title="Choose your language · 选择语言"
      subtitle="Pick how Ghast should speak to you. You can change this anytime in Settings."
      footer={<>
        <div />
        <Button variant="primary" size="md" icon={<Icon name="arrowRight" size={14} color={t.bg} />}>{tr(selected, 'continue')}</Button>
      </>}
    >
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginTop: 4, maxWidth: 800 }}>
        {SETUP_LANGS.map((l) => {
          const on = l.id === selected;
          return (
            <div key={l.id} style={{
              padding: '14px 16px', background: t.surface,
              border: `1px solid ${on ? t.fg : t.border}`, borderWidth: on ? 1.5 : 1,
              borderRadius: 12, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            }}>
              <div>
                <div style={{ fontSize: 15, fontWeight: 500 }}>{l.native}</div>
                <div style={{ fontSize: 11, color: t.fg3, marginTop: 2, fontFamily: G.mono }}>{l.id} · {l.en}</div>
              </div>
              <div style={{
                width: 18, height: 18, borderRadius: 9,
                background: on ? t.fg : 'transparent',
                border: on ? 'none' : `1px solid ${t.border}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{on && <Icon name="check" size={12} color={t.bg} />}</div>
            </div>
          );
        })}
      </div>
    </SetupShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 2 · INVITE CODE — server-driven two-variant
// requireInvite=true   → strict mode, no skip, "Don't have a code?" link only
// requireInvite=false  → optional, "Skip for now" link beside Continue
// verifying=true       → mid-validation; inputs disabled + spinner
// slowVerify=true      → "Slower than usual…" hint after >3s
// skipping=true        → user pressed "Skip for now"; spinner on link
// ─────────────────────────────────────────────────────────────
function SetupInvite({
  dark,
  value = '',
  valid = null,
  lang = 'en',
  requireInvite = false,
  verifying = false,
  slowVerify = false,
  skipping = false,
}) {
  const t = dark ? G.d : G.l;
  const slots = 8;
  const chars = (value || '').padEnd(slots, ' ').split('').slice(0, slots);
  const canContinue = valid === true && !verifying;

  // Title & subtitle differ between variants — strict mode is more direct.
  const title = requireInvite ? 'Enter your invitation code' : 'Have an invite code?';
  const subtitle = requireInvite
    ? 'Ghast is invite-only right now. Paste the 8-character code your inviter gave you.'
    : "Enter your 8-character invite to unlock priority access. Don't have one? You can skip and join the waitlist.";

  // Footer differs: strict mode has no "Skip for now"; optional mode does.
  const footer = (
    <>
      <Button variant="secondary" size="md">{tr(lang, 'back')}</Button>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        {!requireInvite && (
          <button style={{
            background: 'transparent', border: 'none', cursor: skipping ? 'progress' : 'pointer',
            color: t.fg3, fontFamily: G.font, fontSize: 13, padding: '6px 4px',
            display: 'inline-flex', alignItems: 'center', gap: 6,
            opacity: skipping ? 0.7 : 1,
          }}>
            {skipping && (
              <span style={{
                width: 11, height: 11, borderRadius: 6,
                border: `1.5px solid ${t.fg3}`, borderTopColor: 'transparent',
                display: 'inline-block', animation: 'gh-spin .8s linear infinite',
              }} />
            )}
            <span>{skipping ? 'Skipping…' : 'Skip for now →'}</span>
          </button>
        )}
        <Button
          variant="primary" size="md"
          icon={<Icon name="arrowRight" size={14} color={t.bg} />}
          style={{ opacity: canContinue ? 1 : 0.4, pointerEvents: canContinue ? 'auto' : 'none' }}
        >
          {tr(lang, 'continue')}
        </Button>
      </div>
    </>
  );

  return (
    <SetupShell dark={dark} step={1} lang={lang} title={title} subtitle={subtitle} footer={footer}>
      <div style={{ maxWidth: 560, marginTop: 8 }}>
        <div style={{ display: 'flex', gap: 8, marginBottom: 14, alignItems: 'center' }}>
          {chars.map((c, i) => {
            const filled = c.trim() !== '';
            const cursor = i === (value || '').length && !verifying;
            return (
              <div key={i} style={{
                width: 56, height: 64, borderRadius: 12,
                background: filled ? t.surface : t.surface2,
                border: `1px solid ${valid === false ? t.fg : (filled ? t.fg : t.border)}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: G.mono, fontSize: 24, fontWeight: 500,
                color: t.fg, position: 'relative',
                boxShadow: cursor ? `0 0 0 2px ${t.fg}` : 'none',
                opacity: verifying ? 0.55 : 1,
                transition: 'all .15s ease',
              }}>{filled ? c.toUpperCase() : ''}</div>
            );
          })}
          {verifying && (
            <div style={{
              marginLeft: 12,
              width: 18, height: 18, borderRadius: 10,
              border: `2px solid ${t.fg3}`, borderTopColor: 'transparent',
              animation: 'gh-spin .8s linear infinite',
            }} />
          )}
        </div>

        {/* Inline status line */}
        {verifying && !slowVerify && (
          <div style={{ fontSize: 12, color: t.fg3 }}>Checking with the server…</div>
        )}
        {verifying && slowVerify && (
          <div style={{ fontSize: 12, color: t.fg3 }}>Slower than usual… still working.</div>
        )}
        {!verifying && valid === true && (
          <div style={{ fontSize: 12, color: t.fg2, display: 'flex', alignItems: 'center', gap: 6 }}>
            <Icon name="check" size={13} /> Code accepted · Founders tier
          </div>
        )}
        {!verifying && valid === false && (
          <div style={{ fontSize: 12, color: t.fg, display: 'flex', alignItems: 'center', gap: 6 }}>
            ✗ This code isn't valid. Check it and try again.
          </div>
        )}

        {/* Helper text — different in strict vs optional mode */}
        <div style={{ marginTop: 26, padding: 14, background: t.surface2, border: `1px solid ${t.border2}`, borderRadius: 10, display: 'flex', gap: 10, alignItems: 'flex-start', maxWidth: 480 }}>
          <Icon name="info" size={16} color={t.fg3} style={{ marginTop: 1 }} />
          <div style={{ fontSize: 12, color: t.fg2, lineHeight: 1.55 }}>
            {requireInvite ? (
              <>
                Don't have a code yet?{' '}
                <a href="#" style={{ color: t.fg, textDecoration: 'underline', textUnderlineOffset: 2 }}>
                  Request access →
                </a>
              </>
            ) : (
              <>Without a code you'll join the waitlist. Most accounts are admitted within 48 hours.</>
            )}
          </div>
        </div>
      </div>
    </SetupShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 3 · EVM WALLET — multiple sub-states
// state: 'choose' | 'create-show' | 'create-verify' | 'import-mnemonic' | 'import-key' | 'done'
// ─────────────────────────────────────────────────────────────
const FAKE_MNEMONIC = ['ocean','garden','silver','marble','flute','pioneer','breeze','vintage','quartz','meadow','oxygen','lantern'];

function SetupWallet({ dark, state = 'choose', lang = 'en', verifyAnswers = {}, importedKey = '', importedSeed = '' }) {
  const t = dark ? G.d : G.l;

  if (state === 'choose') {
    const opts = [
      { id: 'create', icon: 'sparkles', title: 'Create a new wallet', desc: 'We\'ll generate a 12-word seed phrase. You\'ll back it up next.' },
      { id: 'mnemonic', icon: 'key', title: 'Import seed phrase', desc: 'Restore an existing EVM wallet from 12 or 24 words.' },
      { id: 'private', icon: 'lock', title: 'Import private key', desc: 'Paste a 64-character hex key. Stays encrypted on this device.' },
    ];
    return (
      <SetupShell dark={dark} step={2} lang={lang} title="Connect an EVM wallet"
        subtitle="Ghast uses your wallet for signing on-chain actions and tipping skill creators. Keys are stored encrypted on this device only."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, maxWidth: 700, marginTop: 4 }}>
          {opts.map((o, i) => (
            <div key={o.id} style={{
              padding: 18, background: t.surface, border: `1px solid ${i === 0 ? t.fg : t.border}`,
              borderWidth: i === 0 ? 1.5 : 1, borderRadius: 14, cursor: 'pointer',
              display: 'flex', alignItems: 'center', gap: 16,
            }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: t.surface2, border: `1px solid ${t.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={o.icon} size={20} color={t.fg2} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 15, fontWeight: 600 }}>{o.title}</div>
                <div style={{ fontSize: 12, color: t.fg3, marginTop: 3 }}>{o.desc}</div>
              </div>
              <Icon name="arrowRight" size={16} color={t.fg3} />
            </div>
          ))}
        </div>
      </SetupShell>
    );
  }

  if (state === 'create-show') {
    return (
      <SetupShell dark={dark} step={2} lang={lang} title="Save your seed phrase"
        subtitle="Write these 12 words down in order. Anyone with this phrase controls your wallet. Ghast can never recover it for you."
        footer={<>
          <Button variant="ghost" size="md">← Cancel</Button>
          <div style={{ display: 'flex', gap: 8 }}>
            <Button variant="secondary" size="md" icon={<Icon name="copy" size={13} color={t.fg} />}>Copy</Button>
            <Button variant="primary" size="md">I've written it down</Button>
          </div>
        </>}
      >
        <div style={{ maxWidth: 720, marginTop: 4 }}>
          <div style={{
            padding: 22, background: t.surface, border: `1px solid ${t.border}`, borderRadius: 16,
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10,
          }}>
            {FAKE_MNEMONIC.map((w, i) => (
              <div key={i} style={{
                padding: '10px 14px', background: t.surface2, borderRadius: 8,
                border: `1px solid ${t.border2}`, display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{ fontFamily: G.mono, fontSize: 11, color: t.fg3, width: 18 }}>{i + 1}</span>
                <span style={{ fontSize: 14, fontFamily: G.mono, color: t.fg }}>{w}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 16, padding: 14, background: t.surface2, border: `1px solid ${t.border2}`, borderRadius: 10, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <Icon name="warning" size={16} color={t.fg2} style={{ marginTop: 1 }} />
            <div style={{ fontSize: 12, color: t.fg2, lineHeight: 1.55 }}>
              Never share. Never type into a website. Never store as a screenshot. Pen and paper, kept somewhere only you know.
            </div>
          </div>
        </div>
      </SetupShell>
    );
  }

  if (state === 'create-verify') {
    // Random 3 positions to verify (fixed for screenshot: 3, 7, 11)
    const checks = [3, 7, 11];
    return (
      <SetupShell dark={dark} step={2} lang={lang} title="Verify your seed phrase"
        subtitle="Type the words at these positions. This confirms you saved them correctly."
        footer={<>
          <Button variant="ghost" size="md">← Show phrase again</Button>
          <Button variant="primary" size="md" icon={<Icon name="check" size={14} color={t.bg} />}>Verify</Button>
        </>}
      >
        <div style={{ maxWidth: 560, marginTop: 8 }}>
          {checks.map((pos, i) => {
            const expected = FAKE_MNEMONIC[pos - 1];
            const userVal = verifyAnswers[pos];
            const ok = userVal === expected;
            const showFeedback = userVal !== undefined;
            return (
              <div key={pos} style={{ marginBottom: 18 }}>
                <div style={{ fontSize: 12, color: t.fg3, marginBottom: 6, fontFamily: G.mono, letterSpacing: 0.5 }}>
                  WORD #{pos}
                </div>
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  padding: '12px 14px',
                  background: t.surface,
                  border: `1px solid ${showFeedback ? (ok ? t.fg : t.fg) : t.border}`,
                  borderWidth: showFeedback ? 1.5 : 1,
                  borderRadius: 10,
                }}>
                  <span style={{ fontFamily: G.mono, fontSize: 15, color: userVal ? t.fg : t.fg4, flex: 1 }}>
                    {userVal || 'type the word…'}
                  </span>
                  {showFeedback && (ok
                    ? <Icon name="check" size={14} color={t.fg} />
                    : <span style={{ fontSize: 12, color: t.fg }}>✗</span>)}
                </div>
              </div>
            );
          })}
        </div>
      </SetupShell>
    );
  }

  if (state === 'import-mnemonic') {
    const words = (importedSeed || '').split(/\s+/).filter(Boolean);
    return (
      <SetupShell dark={dark} step={2} lang={lang} title="Import seed phrase"
        subtitle="Paste your 12 or 24-word recovery phrase. We'll restore your EVM addresses."
        footer={<>
          <Button variant="ghost" size="md">← Back</Button>
          <Button variant="primary" size="md" disabled={words.length !== 12 && words.length !== 24}>Import wallet</Button>
        </>}
      >
        <div style={{ maxWidth: 720, marginTop: 4 }}>
          <div style={{
            padding: 14, background: t.surface, border: `1px solid ${t.border}`, borderRadius: 14,
            minHeight: 140,
          }}>
            <textarea
              value={importedSeed}
              readOnly
              placeholder="ocean garden silver marble flute pioneer …"
              style={{
                width: '100%', minHeight: 110, border: 'none', outline: 'none', resize: 'none',
                background: 'transparent', color: t.fg, fontFamily: G.mono, fontSize: 14, lineHeight: 1.7,
              }}
            />
          </div>
          <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ fontSize: 12, color: t.fg3, fontFamily: G.mono }}>
              {words.length} / 12 words {words.length === 12 && '✓'}
            </div>
            <Button variant="ghost" size="sm" icon={<Icon name="copy" size={12} color={t.fg2} />}>Paste from clipboard</Button>
          </div>
        </div>
      </SetupShell>
    );
  }

  if (state === 'import-key') {
    return (
      <SetupShell dark={dark} step={2} lang={lang} title="Import private key"
        subtitle="Paste a 64-character hex key (with or without 0x prefix). It's encrypted on-device with your OS keychain."
        footer={<>
          <Button variant="ghost" size="md">← Back</Button>
          <Button variant="primary" size="md">Import wallet</Button>
        </>}
      >
        <div style={{ maxWidth: 720, marginTop: 4 }}>
          <div style={{
            padding: 16, background: t.surface, border: `1px solid ${t.border}`, borderRadius: 14,
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <Icon name="lock" size={16} color={t.fg2} />
            <span style={{
              fontFamily: G.mono, fontSize: 14, color: importedKey ? t.fg : t.fg4,
              letterSpacing: 0.5, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
            }}>
              {importedKey || '0x_______________________________________________________________'}
            </span>
            <Button variant="ghost" size="sm" icon={<Icon name="eye" size={12} color={t.fg2} />}>Show</Button>
          </div>
          <div style={{ marginTop: 12, fontSize: 12, color: t.fg3 }}>
            {importedKey ? `${importedKey.length} / 66 characters` : '0 / 66 characters'}
          </div>
          <div style={{ marginTop: 18, padding: 14, background: t.surface2, border: `1px solid ${t.border2}`, borderRadius: 10, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <Icon name="warning" size={16} color={t.fg2} style={{ marginTop: 1 }} />
            <div style={{ fontSize: 12, color: t.fg2, lineHeight: 1.55 }}>
              Importing exposes the key to this app. Use a hardware wallet for high-value funds.
            </div>
          </div>
        </div>
      </SetupShell>
    );
  }

  // done
  return (
    <SetupShell dark={dark} step={2} lang={lang} title="Wallet connected"
      subtitle="You're all set. Ghast will ask before signing anything."
      footer={<>
        <div />
        <Button variant="primary" size="md" icon={<Icon name="arrowRight" size={14} color={t.bg} />}>{tr(lang, 'continue')}</Button>
      </>}
    >
      <div style={{ maxWidth: 560, marginTop: 8, padding: 24, background: t.surface, border: `1px solid ${t.border}`, borderRadius: 16, display: 'flex', alignItems: 'center', gap: 16 }}>
        <div style={{ width: 56, height: 56, borderRadius: 16, background: t.surface2, border: `1px solid ${t.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="check" size={24} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12, color: t.fg3, fontFamily: G.mono, letterSpacing: 1 }}>EVM ADDRESS</div>
          <div style={{ fontFamily: G.mono, fontSize: 14, marginTop: 4, color: t.fg }}>0x7f3a…b29C</div>
        </div>
      </div>
    </SetupShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 4 · NICKNAME (single field)
// ─────────────────────────────────────────────────────────────
function SetupNickname({ dark, lang = 'en', value = 'Liu' }) {
  const t = dark ? G.d : G.l;
  return (
    <SetupShell dark={dark} step={3} lang={lang} title="What should we call you?"
      subtitle="Just a nickname — it's how Ghast greets you and signs your shared work."
    >
      <div style={{ maxWidth: 460, marginTop: 14 }}>
        <Input label="Nickname" placeholder="Liu" value={value} />
        <div style={{ marginTop: 10, fontSize: 12, color: t.fg3 }}>
          You can change this anytime in Settings.
        </div>
      </div>
    </SetupShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 5 · APPEARANCE
// ─────────────────────────────────────────────────────────────
function SetupAppearance({ dark, lang = 'en', selected = 'system' }) {
  const t = dark ? G.d : G.l;
  const opts = [
    { id: 'light', label: 'Light', bg: '#FAFAF9', fg: '#0A0A0A' },
    { id: 'dark', label: 'Dark', bg: '#0A0A0A', fg: '#F5F5F4' },
    { id: 'system', label: 'Match System', bg: 'linear-gradient(90deg, #FAFAF9 50%, #0A0A0A 50%)', fg: '#888' },
  ];
  return (
    <SetupShell dark={dark} step={4} lang={lang} title="Pick a look"
      subtitle="Liquid Glass renders well in both. You can switch later."
      footer={<>
        <Button variant="secondary" size="md">{tr(lang, 'back')}</Button>
        <Button variant="primary" size="md" icon={<Icon name="check" size={14} color={t.bg} />}>{tr(lang, 'finish')}</Button>
      </>}
    >
      <div style={{ display: 'flex', gap: 16, marginTop: 14 }}>
        {opts.map((o) => (
          <div key={o.id} style={{
            width: 220, padding: 14,
            background: t.surface,
            border: `1px solid ${selected === o.id ? t.fg : t.border}`,
            borderWidth: selected === o.id ? 1.5 : 1,
            borderRadius: 16, cursor: 'pointer',
          }}>
            <div style={{ height: 130, borderRadius: 10, background: o.bg, position: 'relative', overflow: 'hidden', border: `0.5px solid ${t.border}` }}>
              <div style={{ position: 'absolute', top: 8, left: 8, display: 'flex', gap: 4 }}>
                <div style={{ width: 6, height: 6, borderRadius: 3, background: '#ff5f57' }} />
                <div style={{ width: 6, height: 6, borderRadius: 3, background: '#febc2e' }} />
                <div style={{ width: 6, height: 6, borderRadius: 3, background: '#28c840' }} />
              </div>
              <div style={{ position: 'absolute', bottom: 14, left: 16, right: 16, height: 8, background: o.fg, opacity: 0.8, borderRadius: 4 }} />
              <div style={{ position: 'absolute', bottom: 32, left: 16, width: 70, height: 6, background: o.fg, opacity: 0.55, borderRadius: 3 }} />
              <div style={{ position: 'absolute', bottom: 46, left: 16, width: 96, height: 6, background: o.fg, opacity: 0.4, borderRadius: 3 }} />
            </div>
            <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ fontSize: 13, fontWeight: 500 }}>{o.label}</span>
              {selected === o.id && (
                <div style={{ width: 16, height: 16, borderRadius: 8, background: t.fg, color: t.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name="check" size={11} color={t.bg} />
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </SetupShell>
  );
}

Object.assign(window, {
  SetupLanguage, SetupInvite, SetupWallet, SetupNickname, SetupAppearance,
  SETUP_LANGS, SETUP_W, SETUP_H,
});