// extras3.jsx — Hakkında + 404 + skeleton + hover preview helpers
const { useState: _x3S, useEffect: _x3E } = React;

// ═══════════════════════════════════════════════════════════════
// 1) HAKKINDA — kim olduğumuzu, neden güvenli olduğumuzu anlatır
// ═══════════════════════════════════════════════════════════════
function AboutScreen({ L, lang, theme }) {
  const stats = [
    { v: '6.4K+', l: lang === 'tr' ? 'Tamamlanan satış' : 'Completed sales' },
    { v: '%99.2', l: lang === 'tr' ? 'Memnuniyet' : 'Satisfaction' },
    { v: '4 dk', l: lang === 'tr' ? 'Ortalama yanıt' : 'Avg response' },
    { v: '2022', l: lang === 'tr' ? 'Kuruluş' : 'Founded' },
  ];
  const principles = lang === 'tr' ? [
    { t: 'Emanet model', d: 'Ödemen biz devir tamamlanana kadar emanet hesapta bekler. Sorun çıkarsa iadesi 24 saatte yapılır.' },
    { t: 'Her hesap doğrulanır', d: '3 katmanlı kontrol — yaş, organik takipçi oranı, içerik geçmişi. Sahte metrikleri filtreleyen iç skorlama sistemimiz var.' },
    { t: 'Şifre & e-posta devri', d: 'Wizard ile adım adım yönlendiriyoruz. 2FA dahil tüm bağlı her şeyi sıfırdan kuruyorsun. Eski sahip geri dönemiyor.' },
    { t: 'Şeffaf komisyon', d: 'İlan başına %8 + KDV. Gizli ücret yok. Satıcı ve alıcı her ikisi de neye ödediğini görür.' },
  ] : [
    { t: 'Escrow model', d: 'Your payment is held in escrow until the transfer is complete. Refund within 24h on issues.' },
    { t: 'Every account verified', d: '3-layer check — age, organic follower ratio, content history. Internal scoring filters fake metrics.' },
    { t: 'Password & email handover', d: 'Step-by-step wizard. You set up everything from scratch including 2FA. The seller can never come back.' },
    { t: 'Transparent commission', d: '8% + VAT per listing. No hidden fees. Both buyer and seller see what they pay for.' },
  ];

  return (
    <ScreenFrame theme={theme} width="100%" height="100%">
      <div data-screen-label="Hakkinda (Desktop)" style={{ minHeight: '100%', background: 'var(--bg)' }}>
        <TopNav L={L} lang={lang}/>

        {/* HERO */}
        <section style={{
          padding: '64px 32px 48px', position: 'relative', overflow: 'hidden',
          background: 'linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg)) 0%, var(--bg) 60%)',
        }}>
          <div style={{ maxWidth: 1120, margin: '0 auto' }}>
            <div className="is-kicker" style={{ color: 'var(--accent)' }}>{lang === 'tr' ? 'INSTASATIŞ HAKKINDA' : 'ABOUT INSTASATIŞ'}</div>
            <h1 className="is-h1" style={{ fontSize: 'clamp(40px, 6vw, 72px)', lineHeight: 1.05, margin: '14px 0 20px', maxWidth: 900 }}>
              {lang === 'tr'
                ? <>Instagram hesabı satışını <span className="is-grad-text">dürüst</span> yaparız.</>
                : <>We make Instagram sales <span className="is-grad-text">honest</span>.</>}
            </h1>
            <p style={{ fontSize: 19, color: 'var(--ink-2)', lineHeight: 1.6, maxWidth: 720, margin: '0 0 32px' }}>
              {lang === 'tr'
                ? 'InstaSatış 2022\'de DM\'lerde dolaşan dolandırıcılığa son vermek için kuruldu. Her hesap insan eliyle doğrulanır, ödemen emanette bekler, devir bizim wizard\'ımızla yapılır. Karanlık piyasayı aydınlatıyoruz.'
                : 'InstaSatış launched in 2022 to end DM-based scams. Every account is human-verified, your payment sits in escrow, the transfer happens via our wizard. Lighting up the dark market.'}
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, maxWidth: 760 }}>
              {stats.map((s, i) => (
                <div key={i} className="is-card" style={{ padding: '20px 18px' }}>
                  <div className="is-h2 is-grad-text" style={{ fontSize: 28, fontFamily: 'var(--font-display)' }}>{s.v}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4, textTransform: 'uppercase', letterSpacing: '.06em' }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* PRENSIPLER */}
        <section style={{ padding: '64px 32px', maxWidth: 1120, margin: '0 auto' }}>
          <div className="is-kicker">{lang === 'tr' ? 'NASIL ÇALIŞIYORUZ' : 'HOW WE OPERATE'}</div>
          <h2 className="is-h1" style={{ fontSize: 38, margin: '8px 0 32px' }}>{lang === 'tr' ? 'Dört prensip, sıfır tolerans' : 'Four principles, zero tolerance'}</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
            {principles.map((p, i) => (
              <div key={i} className="is-card" style={{ padding: 28, position: 'relative' }}>
                <div style={{
                  position: 'absolute', top: 18, right: 20, fontSize: 64, fontWeight: 800,
                  fontFamily: 'var(--font-display)', color: 'color-mix(in srgb, var(--accent) 12%, transparent)',
                  lineHeight: 1, letterSpacing: '-.04em',
                }}>0{i + 1}</div>
                <div className="is-h2" style={{ fontSize: 22, marginBottom: 10 }}>{p.t}</div>
                <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.6, margin: 0 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </section>

        {/* CTA */}
        <section style={{ padding: '32px 32px 80px', maxWidth: 1120, margin: '0 auto' }}>
          <div style={{
            padding: '48px 40px', borderRadius: 24,
            background: 'var(--grad)', color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap',
          }}>
            <div>
              <div style={{ fontSize: 13, opacity: .85, textTransform: 'uppercase', letterSpacing: '.1em', fontWeight: 600 }}>
                {lang === 'tr' ? 'BAŞLAMAYA HAZIR MISIN?' : 'READY TO START?'}
              </div>
              <div className="is-h1" style={{ fontSize: 32, color: '#fff', margin: '6px 0 0' }}>
                {lang === 'tr' ? 'Hesabını saatler içinde sat veya al.' : 'Buy or sell in hours.'}
              </div>
            </div>
            <div style={{ display: 'flex', gap: 12 }}>
              <a href="ilan-ver.html" style={{
                padding: '14px 24px', borderRadius: 14, background: '#fff', color: 'var(--ink)',
                fontWeight: 700, fontSize: 15, textDecoration: 'none',
              }}>{lang === 'tr' ? 'İlan Ver' : 'List account'}</a>
              <a href="index.html" style={{
                padding: '14px 24px', borderRadius: 14, background: 'rgba(255,255,255,.18)', color: '#fff',
                fontWeight: 700, fontSize: 15, textDecoration: 'none', border: '1px solid rgba(255,255,255,.35)',
              }}>{lang === 'tr' ? 'Hesapları keşfet' : 'Browse accounts'}</a>
            </div>
          </div>
        </section>
      </div>
    </ScreenFrame>
  );
}

// ═══════════════════════════════════════════════════════════════
// 2) 404 — eğlenceli, marka-uyumlu
// ═══════════════════════════════════════════════════════════════
function NotFoundScreen({ L, lang, theme }) {
  return (
    <ScreenFrame theme={theme} width="100%" height="100%">
      <div data-screen-label="404 (Desktop)" style={{
        minHeight: '100vh', background: 'var(--bg)', display: 'grid', placeItems: 'center',
        position: 'relative', overflow: 'hidden',
      }}>
        {/* Arkaplan grad */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 50%), radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 50%)',
          pointerEvents: 'none',
        }}/>

        <div style={{ textAlign: 'center', maxWidth: 600, padding: 32, position: 'relative', zIndex: 1 }}>
          {/* Big 404 */}
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(120px, 22vw, 220px)',
            lineHeight: .9, letterSpacing: '-.05em',
            background: 'var(--grad)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            backgroundClip: 'text', margin: 0,
          }}>404</div>

          <div className="is-kicker" style={{ color: 'var(--accent)', marginTop: 8 }}>
            {lang === 'tr' ? 'KAYIP HESAP' : 'LOST ACCOUNT'}
          </div>
          <h1 className="is-h1" style={{ fontSize: 36, margin: '10px 0 14px' }}>
            {lang === 'tr' ? 'Bu sayfa unfollowed.' : 'This page unfollowed.'}
          </h1>
          <p style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.6, margin: '0 0 32px' }}>
            {lang === 'tr'
              ? 'Aradığın sayfa kaldırılmış, taşınmış veya hiç var olmamış olabilir. Belki ilanı sahibi geri çekmiştir.'
              : 'The page you\'re looking for moved, was removed, or never existed. Maybe the seller pulled the listing.'}
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href="index.html" className="is-btn" style={{
              padding: '14px 22px', borderRadius: 14, background: 'var(--grad)', color: '#fff',
              fontWeight: 700, fontSize: 15, textDecoration: 'none',
            }}>{lang === 'tr' ? 'Ana sayfaya dön' : 'Back to home'}</a>
            <a href="arama.html" style={{
              padding: '14px 22px', borderRadius: 14, background: 'transparent', color: 'var(--ink)',
              fontWeight: 700, fontSize: 15, textDecoration: 'none', border: '1px solid var(--line-2)',
            }}>{lang === 'tr' ? 'Hesap ara' : 'Search'}</a>
          </div>
        </div>
      </div>
    </ScreenFrame>
  );
}

// ═══════════════════════════════════════════════════════════════
// 3) PASSWORD RESET — sifre-sifirla.html için
// 3-step: e-posta → kod → yeni şifre. Mock akış (backend hazır).
// ═══════════════════════════════════════════════════════════════
function PasswordResetScreen({ L, lang, theme }) {
  const [step, setStep] = _x3S(1);
  const [email, setEmail] = _x3S('');
  const [code, setCode] = _x3S('');
  const [newPw, setNewPw] = _x3S('');
  const [newPw2, setNewPw2] = _x3S('');
  const [busy, setBusy] = _x3S(false);
  const [err, setErr] = _x3S('');

  const submitEmail = async (e) => {
    e.preventDefault();
    if (!email.match(/^[^@]+@[^@]+\.[^@]+$/)) { setErr(lang === 'tr' ? 'Geçerli bir e-posta gir.' : 'Enter a valid email.'); return; }
    setErr(''); setBusy(true);
    try {
      if (window.api?.auth?.requestReset) {
        await window.api.auth.requestReset(email);
      }
    } catch (e) { /* silent — always show success to avoid email enumeration */ }
    setBusy(false);
    setStep(2);
  };

  const submitCode = (e) => {
    e.preventDefault();
    if (code.length !== 6) { setErr(lang === 'tr' ? '6 haneli kodu gir.' : 'Enter 6-digit code.'); return; }
    setErr('');
    setStep(3);
  };

  const submitNewPw = async (e) => {
    e.preventDefault();
    if (newPw.length < 8) { setErr(lang === 'tr' ? 'En az 8 karakter olmalı.' : 'Min 8 chars.'); return; }
    if (newPw !== newPw2) { setErr(lang === 'tr' ? 'Şifreler eşleşmiyor.' : 'Passwords do not match.'); return; }
    setErr(''); setBusy(true);
    try {
      if (window.api?.auth?.resetPassword) {
        await window.api.auth.resetPassword(email, code, newPw);
      }
    } catch (e) { setErr(e.message || 'Hata'); setBusy(false); return; }
    setBusy(false);
    setStep(4);
  };

  const Card = ({ children }) => (
    <div className="is-card" style={{ padding: 36, maxWidth: 440, width: '100%' }}>{children}</div>
  );

  return (
    <ScreenFrame theme={theme} width="100%" height="100%">
      <div data-screen-label="Şifre Sıfırlama" style={{ minHeight: '100%', background: 'var(--bg)' }}>
        <TopNav L={L} lang={lang}/>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '60px 32px', display: 'grid', placeItems: 'center' }}>
          <Card>
            {/* Step indicator */}
            <div style={{ display: 'flex', gap: 6, marginBottom: 24 }}>
              {[1, 2, 3].map(s => (
                <div key={s} style={{
                  flex: 1, height: 4, borderRadius: 2,
                  background: step >= s ? 'var(--grad)' : 'var(--line-2)',
                  transition: 'background .3s',
                }}/>
              ))}
            </div>

            {step === 1 && (
              <form onSubmit={submitEmail}>
                <div className="is-kicker" style={{ color: 'var(--accent)' }}>{lang === 'tr' ? 'ADIM 1 / 3' : 'STEP 1 / 3'}</div>
                <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, margin: '8px 0 6px', letterSpacing: '-0.02em' }}>
                  {lang === 'tr' ? 'Şifreni mi unuttun?' : 'Forgot password?'}
                </h1>
                <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5, marginBottom: 22 }}>
                  {lang === 'tr' ? 'Kayıtlı e-postanı gir, 6 haneli sıfırlama kodu gönderelim.' : 'Enter your email — we\'ll send a 6-digit reset code.'}
                </p>
                <label style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '.06em' }}>E-posta</label>
                <input type="email" required autoFocus value={email} onChange={e => setEmail(e.target.value)}
                       className="is-input" placeholder="ornek@mail.com" style={{ marginTop: 6, marginBottom: 16 }}/>
                {err && <div style={{ fontSize: 12, color: '#e25822', marginBottom: 12 }}>{err}</div>}
                <button type="submit" disabled={busy} className="is-btn is-btn-primary" style={{ width: '100%', justifyContent: 'center', padding: '14px', opacity: busy ? 0.6 : 1 }}>
                  {busy ? (lang === 'tr' ? 'Gönderiliyor…' : 'Sending…') : (lang === 'tr' ? 'Kodu gönder' : 'Send code')}
                </button>
                <a href="giris.html" style={{ display: 'block', textAlign: 'center', marginTop: 14, fontSize: 13, color: 'var(--ink-3)', textDecoration: 'none' }}>
                  ← {lang === 'tr' ? 'Girişe dön' : 'Back to login'}
                </a>
              </form>
            )}

            {step === 2 && (
              <form onSubmit={submitCode}>
                <div className="is-kicker" style={{ color: 'var(--accent)' }}>{lang === 'tr' ? 'ADIM 2 / 3' : 'STEP 2 / 3'}</div>
                <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, margin: '8px 0 6px', letterSpacing: '-0.02em' }}>
                  {lang === 'tr' ? 'Kodunu gir' : 'Enter the code'}
                </h1>
                <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5, marginBottom: 22 }}>
                  {lang === 'tr' ? <><b>{email}</b> adresine 6 haneli kod gönderdik. Spam klasörünü de kontrol et.</> : <>We sent a 6-digit code to <b>{email}</b>. Check spam too.</>}
                </p>
                <input value={code} onChange={e => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
                       inputMode="numeric" autoFocus
                       className="is-input"
                       style={{
                         marginBottom: 16, fontSize: 28, textAlign: 'center', letterSpacing: '0.4em',
                         fontFamily: 'var(--font-mono)', padding: '18px',
                       }}
                       placeholder="000000" maxLength={6}/>
                {err && <div style={{ fontSize: 12, color: '#e25822', marginBottom: 12 }}>{err}</div>}
                <button type="submit" disabled={code.length !== 6} className="is-btn is-btn-primary"
                        style={{ width: '100%', justifyContent: 'center', padding: '14px', opacity: code.length !== 6 ? 0.5 : 1 }}>
                  {lang === 'tr' ? 'Doğrula' : 'Verify'}
                </button>
                <button type="button" onClick={() => setStep(1)}
                        style={{ display: 'block', margin: '14px auto 0', background: 'none', border: 0, color: 'var(--ink-3)', fontSize: 13, cursor: 'pointer' }}>
                  ← {lang === 'tr' ? 'E-postayı değiştir' : 'Change email'}
                </button>
              </form>
            )}

            {step === 3 && (
              <form onSubmit={submitNewPw}>
                <div className="is-kicker" style={{ color: 'var(--accent)' }}>{lang === 'tr' ? 'ADIM 3 / 3' : 'STEP 3 / 3'}</div>
                <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, margin: '8px 0 6px', letterSpacing: '-0.02em' }}>
                  {lang === 'tr' ? 'Yeni şifre belirle' : 'Set new password'}
                </h1>
                <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5, marginBottom: 22 }}>
                  {lang === 'tr' ? 'En az 8 karakter, harf ve rakam.' : 'Min 8 chars, letter + number.'}
                </p>
                <label style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>{lang === 'tr' ? 'YENİ ŞİFRE' : 'NEW PASSWORD'}</label>
                <input type="password" required autoFocus value={newPw} onChange={e => setNewPw(e.target.value)}
                       className="is-input" style={{ marginTop: 6, marginBottom: 14 }}/>
                <label style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>{lang === 'tr' ? 'TEKRAR' : 'CONFIRM'}</label>
                <input type="password" required value={newPw2} onChange={e => setNewPw2(e.target.value)}
                       className="is-input" style={{ marginTop: 6, marginBottom: 16 }}/>
                {err && <div style={{ fontSize: 12, color: '#e25822', marginBottom: 12 }}>{err}</div>}
                <button type="submit" disabled={busy} className="is-btn is-btn-primary"
                        style={{ width: '100%', justifyContent: 'center', padding: '14px', opacity: busy ? 0.6 : 1 }}>
                  {busy ? (lang === 'tr' ? 'Kaydediliyor…' : 'Saving…') : (lang === 'tr' ? 'Şifreyi güncelle' : 'Update password')}
                </button>
              </form>
            )}

            {step === 4 && (
              <div style={{ textAlign: 'center', padding: '20px 0' }}>
                <div style={{ width: 64, height: 64, margin: '0 auto 20px', borderRadius: '50%', background: 'var(--grad)', display: 'grid', placeItems: 'center' }}>
                  <Icon name="check" size={32} color="#fff"/>
                </div>
                <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 26, margin: '0 0 8px', letterSpacing: '-0.02em' }}>
                  {lang === 'tr' ? 'Şifren güncellendi' : 'Password updated'}
                </h1>
                <p style={{ fontSize: 14, color: 'var(--ink-2)', marginBottom: 24 }}>
                  {lang === 'tr' ? 'Yeni şifrenle giriş yapabilirsin.' : 'You can sign in with the new password.'}
                </p>
                <a href="giris.html" className="is-btn is-btn-primary" style={{ padding: '12px 24px' }}>
                  {lang === 'tr' ? 'Giriş yap' : 'Sign in'} <Icon name="arrow-right" size={14}/>
                </a>
              </div>
            )}
          </Card>
        </div>
      </div>
    </ScreenFrame>
  );
}

// ═══════════════════════════════════════════════════════════════
// 4) SELLER VERIFICATION WIZARD — satici-dogrulama.html için
// 4 adımlı: kimlik + Instagram giriş kanıtı + iletişim + onay
// ═══════════════════════════════════════════════════════════════
function SellerVerifyWizard({ L, lang, theme }) {
  const [step, setStep] = _x3S(1);
  const [data, setData] = _x3S({
    fullName: '', tckn: '', phone: '',
    idFrontFile: null, idBackFile: null,
    igHandle: '', igProofFile: null,
    address: '', iban: '',
    accept: false,
  });
  const [submitted, setSubmitted] = _x3S(false);
  const set = (k, v) => setData(d => ({ ...d, [k]: v }));

  const steps = [
    { n: 1, label: lang === 'tr' ? 'Kimlik' : 'Identity' },
    { n: 2, label: lang === 'tr' ? 'Hesap kanıtı' : 'Account proof' },
    { n: 3, label: lang === 'tr' ? 'İletişim' : 'Contact' },
    { n: 4, label: lang === 'tr' ? 'Gönder' : 'Submit' },
  ];

  const canNext = () => {
    if (step === 1) return data.fullName.length >= 4 && data.tckn.length === 11 && data.idFrontFile && data.idBackFile;
    if (step === 2) return data.igHandle.length >= 2 && data.igProofFile;
    if (step === 3) return data.phone.length >= 10 && data.address.length >= 10 && data.iban.length >= 16;
    return data.accept;
  };

  const submit = async () => {
    try {
      if (window.api?.seller?.requestVerification) {
        // Backend FormData bekliyor (dosya yüklemesi var)
        const fd = new FormData();
        fd.append('fullName', data.fullName);
        fd.append('tckn', data.tckn);
        fd.append('phone', data.phone);
        fd.append('igHandle', data.igHandle);
        fd.append('address', data.address);
        fd.append('iban', data.iban);
        if (data.idFrontFile) fd.append('idFrontFile', data.idFrontFile);
        if (data.idBackFile)  fd.append('idBackFile',  data.idBackFile);
        if (data.igProofFile) fd.append('igProofFile', data.igProofFile);
        await window.api.seller.requestVerification(fd);
      }
    } catch (e) { /* fallback to local */ }
    saveJson('is:seller_verify', {
      // dosyaları localStorage'a JSON olarak kaydedemeyiz — sadece metadata sakla
      fullName: data.fullName, tckn: data.tckn, phone: data.phone,
      igHandle: data.igHandle, address: data.address, iban: data.iban,
      hasIdFront: !!data.idFrontFile, hasIdBack: !!data.idBackFile, hasIgProof: !!data.igProofFile,
      status: 'pending', submittedAt: Date.now(),
    });
    setSubmitted(true);
  };

  const FileInput = ({ label, value, onChange, accept = 'image/*,application/pdf' }) => (
    <label style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: 14, borderRadius: 12,
      border: `2px dashed ${value ? 'var(--accent)' : 'var(--line-2)'}`,
      background: value ? 'color-mix(in oklab, var(--accent) 8%, transparent)' : 'var(--card-2)',
      cursor: 'pointer', transition: 'all .15s',
    }}>
      <Icon name={value ? 'check' : 'upload'} size={18} color={value ? 'var(--accent)' : 'var(--ink-3)'}/>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13, fontWeight: 600 }}>{label}</div>
        <div style={{ fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
          {value ? value.name : (lang === 'tr' ? 'PDF veya görsel · max 8MB' : 'PDF or image · max 8MB')}
        </div>
      </div>
      <input type="file" accept={accept} onChange={e => onChange(e.target.files[0] || null)} style={{ display: 'none' }}/>
    </label>
  );

  if (submitted) {
    return (
      <ScreenFrame theme={theme} width="100%" height="100%">
        <div data-screen-label="Doğrulama Gönderildi" style={{ minHeight: '100%', background: 'var(--bg)' }}>
          <TopNav L={L} lang={lang}/>
          <div style={{ maxWidth: 600, margin: '0 auto', padding: '80px 32px', textAlign: 'center' }}>
            <div style={{ width: 80, height: 80, margin: '0 auto 24px', borderRadius: '50%', background: 'var(--grad)', display: 'grid', placeItems: 'center' }}>
              <Icon name="check" size={40} color="#fff"/>
            </div>
            <h1 className="is-h1" style={{ fontSize: 36, margin: '0 0 12px' }}>
              {lang === 'tr' ? 'Başvurun bize ulaştı' : 'We received your request'}
            </h1>
            <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.6, marginBottom: 28, textWrap: 'pretty' }}>
              {lang === 'tr'
                ? '24 saat içinde ekibimiz belgelerini inceleyip e-posta ile dönüş yapacak. Onaylandıktan sonra ilan ver butonuyla hesabını listeleyebilirsin.'
                : 'Our team will review your documents within 24 hours and reply via email. Once approved, you can list your account.'}
            </p>
            <div className="is-card" style={{ padding: 20, marginBottom: 24, textAlign: 'left' }}>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 8 }}>
                {lang === 'tr' ? 'BAŞVURU NUMARASI' : 'REFERENCE'}
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 18, fontWeight: 600 }}>
                #SV-{Date.now().toString(36).toUpperCase().slice(-8)}
              </div>
            </div>
            <a href="panelim.html" className="is-btn is-btn-primary" style={{ padding: '12px 24px' }}>
              {lang === 'tr' ? 'Panele dön' : 'Back to panel'} <Icon name="arrow-right" size={14}/>
            </a>
          </div>
        </div>
      </ScreenFrame>
    );
  }

  return (
    <ScreenFrame theme={theme} width="100%" height="100%">
      <div data-screen-label="Satıcı Doğrulama" style={{ minHeight: '100%', background: 'var(--bg)' }}>
        <TopNav L={L} lang={lang}/>
        <div style={{ maxWidth: 720, margin: '0 auto', padding: '40px 32px 60px' }}>
          {/* Header */}
          <div className="is-kicker" style={{ color: 'var(--accent)', marginBottom: 8 }}>
            {lang === 'tr' ? 'SATICI DOĞRULAMA' : 'SELLER VERIFICATION'}
          </div>
          <h1 className="is-h1" style={{ fontSize: 38, margin: '0 0 10px', letterSpacing: '-0.025em' }}>
            {lang === 'tr' ? 'Satışa hazırlık' : 'Get verified to sell'}
          </h1>
          <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.6, marginBottom: 28, maxWidth: 540 }}>
            {lang === 'tr'
              ? 'KVKK ve MASAK uyumu için kimlik + hesap sahipliği kanıtı istiyoruz. Tüm belgeler şifrelenir, sadece doğrulama ekibi görür.'
              : 'For KYC compliance, we need your ID + proof of account ownership. All documents are encrypted; only the verification team sees them.'}
          </p>

          {/* Steps */}
          <div style={{ display: 'flex', gap: 6, marginBottom: 28 }}>
            {steps.map((s) => (
              <div key={s.n} style={{ flex: 1 }}>
                <div style={{
                  height: 4, borderRadius: 2,
                  background: step >= s.n ? 'var(--grad)' : 'var(--line-2)',
                  transition: 'background .3s',
                }}/>
                <div style={{
                  fontSize: 11, marginTop: 8,
                  color: step >= s.n ? 'var(--ink)' : 'var(--ink-3)',
                  fontFamily: 'var(--font-mono)',
                  textTransform: 'uppercase', letterSpacing: '.06em',
                }}>{s.n}. {s.label}</div>
              </div>
            ))}
          </div>

          <div className="is-card" style={{ padding: 28 }}>
            {step === 1 && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, margin: 0, letterSpacing: '-0.01em' }}>
                  {lang === 'tr' ? 'Kimlik bilgileri' : 'Identity'}
                </h2>
                <div>
                  <label style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>{lang === 'tr' ? 'AD SOYAD' : 'FULL NAME'}</label>
                  <input className="is-input" value={data.fullName} onChange={e => set('fullName', e.target.value)}
                         placeholder={lang === 'tr' ? 'Nüfusta yazdığı gibi' : 'As on ID'} style={{ marginTop: 6 }}/>
                </div>
                <div>
                  <label style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>{lang === 'tr' ? 'TC KİMLİK NO' : 'NATIONAL ID'}</label>
                  <input className="is-input" value={data.tckn} onChange={e => set('tckn', e.target.value.replace(/\D/g, '').slice(0, 11))}
                         inputMode="numeric" placeholder="11 hane" style={{ marginTop: 6, fontFamily: 'var(--font-mono)' }}/>
                </div>
                <FileInput label={lang === 'tr' ? 'Kimlik ön yüz' : 'ID front'} value={data.idFrontFile} onChange={f => set('idFrontFile', f)}/>
                <FileInput label={lang === 'tr' ? 'Kimlik arka yüz' : 'ID back'} value={data.idBackFile} onChange={f => set('idBackFile', f)}/>
              </div>
            )}

            {step === 2 && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, margin: 0, letterSpacing: '-0.01em' }}>
                  {lang === 'tr' ? 'Hesap sahipliği' : 'Account ownership'}
                </h2>
                <div>
                  <label style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>{lang === 'tr' ? 'INSTAGRAM KULLANICI ADI' : 'INSTAGRAM HANDLE'}</label>
                  <input className="is-input" value={data.igHandle} onChange={e => set('igHandle', e.target.value.replace(/[^@a-zA-Z0-9._]/g, ''))}
                         placeholder="@kullaniciadi" style={{ marginTop: 6, fontFamily: 'var(--font-mono)' }}/>
                </div>
                <div className="is-card" style={{ padding: 14, background: 'var(--card-2)', border: '1px dashed var(--line-2)', boxShadow: 'none' }}>
                  <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 8 }}>
                    {lang === 'tr' ? '📸 Yapman gereken:' : '📸 What to do:'}
                  </div>
                  <ol style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.6, paddingLeft: 18, margin: 0 }}>
                    <li>{lang === 'tr' ? `Instagram’da Ayarlar → Hesap Bilgileri ekranını aç` : 'Open Settings → Account info on Instagram'}</li>
                    <li>{lang === 'tr' ? 'Bu sayfanın ekran görüntüsünü al (URL’deki kullanıcı adı görünmeli)' : 'Take a screenshot (handle in URL must be visible)'}</li>
                    <li>{lang === 'tr' ? 'Aşağıya yükle' : 'Upload below'}</li>
                  </ol>
                </div>
                <FileInput label={lang === 'tr' ? 'Hesap bilgileri ekran görüntüsü' : 'Account info screenshot'} value={data.igProofFile} onChange={f => set('igProofFile', f)}/>
              </div>
            )}

            {step === 3 && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, margin: 0, letterSpacing: '-0.01em' }}>
                  {lang === 'tr' ? 'İletişim & ödeme' : 'Contact & payout'}
                </h2>
                <div>
                  <label style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>{lang === 'tr' ? 'TELEFON' : 'PHONE'}</label>
                  <input className="is-input" value={data.phone} onChange={e => set('phone', e.target.value)}
                         placeholder="+90 555 ..." style={{ marginTop: 6, fontFamily: 'var(--font-mono)' }}/>
                </div>
                <div>
                  <label style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>{lang === 'tr' ? 'ADRES' : 'ADDRESS'}</label>
                  <textarea className="is-input" value={data.address} onChange={e => set('address', e.target.value)}
                            rows={3} style={{ marginTop: 6, resize: 'none' }}/>
                </div>
                <div>
                  <label style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>{lang === 'tr' ? 'IBAN (ödemeler için)' : 'IBAN (for payouts)'}</label>
                  <input className="is-input" value={data.iban} onChange={e => set('iban', e.target.value.toUpperCase())}
                         placeholder="TR..." style={{ marginTop: 6, fontFamily: 'var(--font-mono)', letterSpacing: '0.05em' }}/>
                </div>
              </div>
            )}

            {step === 4 && (
              <div>
                <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, margin: '0 0 14px', letterSpacing: '-0.01em' }}>
                  {lang === 'tr' ? 'Özet & onay' : 'Review & submit'}
                </h2>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 18 }}>
                  {[
                    [lang === 'tr' ? 'Ad Soyad' : 'Name', data.fullName],
                    ['TCKN', data.tckn ? data.tckn.slice(0, 3) + '••••••' + data.tckn.slice(-2) : '—'],
                    [lang === 'tr' ? 'Instagram' : 'Instagram', data.igHandle],
                    ['IBAN', data.iban ? data.iban.slice(0, 6) + '••••' + data.iban.slice(-4) : '—'],
                    [lang === 'tr' ? 'Belgeler' : 'Documents', `${[data.idFrontFile, data.idBackFile, data.igProofFile].filter(Boolean).length} / 3`],
                  ].map(([k, v]) => (
                    <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0', borderTop: '1px solid var(--line-2)', fontSize: 13 }}>
                      <span style={{ color: 'var(--ink-3)' }}>{k}</span>
                      <span style={{ fontWeight: 600, fontFamily: 'var(--font-mono)' }}>{v || '—'}</span>
                    </div>
                  ))}
                </div>
                <label style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: 14, borderRadius: 12, background: 'var(--card-2)', cursor: 'pointer' }}>
                  <input type="checkbox" checked={data.accept} onChange={e => set('accept', e.target.checked)}
                         style={{ marginTop: 2, accentColor: 'var(--accent)', width: 16, height: 16 }}/>
                  <span style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5 }}>
                    {lang === 'tr'
                      ? <>Beyan ettiğim tüm bilgilerin doğru olduğunu, KVKK kapsamında verilerimin işlenmesine onay verdiğimi kabul ediyorum.</>
                      : 'I confirm all information is accurate and consent to data processing under GDPR/KVKK.'}
                  </span>
                </label>
              </div>
            )}

            {/* Nav */}
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 28 }}>
              <button onClick={() => setStep(s => Math.max(1, s - 1))}
                      disabled={step === 1}
                      style={{ background: 'none', border: 0, color: 'var(--ink-3)', fontSize: 13, cursor: step === 1 ? 'default' : 'pointer', opacity: step === 1 ? 0.4 : 1 }}>
                ← {lang === 'tr' ? 'Geri' : 'Back'}
              </button>
              {step < 4 ? (
                <button onClick={() => canNext() && setStep(s => s + 1)} disabled={!canNext()}
                        className="is-btn is-btn-primary" style={{ opacity: canNext() ? 1 : 0.5 }}>
                  {lang === 'tr' ? 'Devam' : 'Continue'} <Icon name="arrow-right" size={14}/>
                </button>
              ) : (
                <button onClick={submit} disabled={!canNext()} className="is-btn is-btn-primary"
                        style={{ opacity: canNext() ? 1 : 0.5, padding: '12px 22px' }}>
                  {lang === 'tr' ? 'Başvuruyu gönder' : 'Submit'} <Icon name="check" size={14}/>
                </button>
              )}
            </div>
          </div>

          {/* Trust strip */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginTop: 16 }}>
            {[
              { i: 'shield', t: lang === 'tr' ? 'Şifrelenir' : 'Encrypted' },
              { i: 'lock',   t: lang === 'tr' ? 'KVKK uyumlu' : 'GDPR compliant' },
              { i: 'check',  t: lang === 'tr' ? '24 saatte yanıt' : '24h response' },
            ].map((b, i) => (
              <div key={i} className="is-card" style={{ padding: 12, display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }}>
                <Icon name={b.i} size={14} color="var(--accent)"/>
                <span style={{ color: 'var(--ink-2)' }}>{b.t}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </ScreenFrame>
  );
}

// ═══════════════════════════════════════════════════════════════
// 5) SECURITY PANEL — Dashboard'da "Güvenlik" sekmesinde
// 2FA aç/kapa + recovery codes + şifre değiştir
// ═══════════════════════════════════════════════════════════════
function SecurityPanel({ L, lang }) {
  // Backend'den çekilen kullanıcı (totp_enabled var mı?)
  const [me, setMe] = _x3S(null);
  const [loading, setLoading] = _x3S(true);

  // 2FA aktivasyon wizard state
  const [stage, setStage] = _x3S('idle'); // idle | qr | verify | done | disable
  const [setupData, setSetupData] = _x3S(null); // { secret, qrUrl }
  const [code, setCode] = _x3S('');
  const [recovery, setRecovery] = _x3S([]);
  const [pwConfirm, setPwConfirm] = _x3S('');
  const [busy, setBusy] = _x3S(false);
  const [err, setErr] = _x3S('');

  _x3E(() => {
    (async () => {
      try {
        if (window.api?.auth?.me) {
          const u = await window.api.auth.me();
          setMe(u || {});
        } else {
          // Demo modu
          setMe({ email: 'demo@instasatis.com', totp_enabled: 0 });
        }
      } catch (e) { setMe({}); }
      setLoading(false);
    })();
  }, []);

  const startEnable = async () => {
    setErr(''); setBusy(true);
    try {
      const res = await window.api.auth.enable2FA();
      setSetupData(res);
      setStage('qr');
    } catch (e) { setErr(e.message || 'Hata oluştu'); }
    setBusy(false);
  };

  const verifyEnable = async () => {
    if (code.length !== 6) { setErr('6 haneli kodu gir'); return; }
    setErr(''); setBusy(true);
    try {
      const res = await window.api.auth.enable2FA(code);
      setRecovery(res.recoveryCodes || []);
      setStage('done');
      // Kullanıcı state'i güncelle
      setMe(m => ({ ...m, totp_enabled: 1 }));
      setCode('');
    } catch (e) { setErr(e.message || 'Kod hatalı'); }
    setBusy(false);
  };

  const doDisable = async () => {
    if (!pwConfirm) { setErr('Şifreni gir'); return; }
    setErr(''); setBusy(true);
    try {
      await window.api.auth.disable2FA(pwConfirm);
      setMe(m => ({ ...m, totp_enabled: 0 }));
      setStage('idle');
      setPwConfirm('');
    } catch (e) { setErr(e.message || 'Şifre hatalı'); }
    setBusy(false);
  };

  if (loading) {
    return (
      <div className="is-card" style={{ padding: 32, textAlign: 'center', color: 'var(--ink-3)' }}>
        {lang === 'tr' ? 'Yükleniyor…' : 'Loading…'}
      </div>
    );
  }

  const enabled = !!me?.totp_enabled;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>

      {/* ─── 2FA card ─── */}
      <div className="is-card" style={{ padding: 24 }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16 }}>
          <div style={{
            width: 48, height: 48, borderRadius: 12,
            background: enabled ? 'var(--grad)' : 'var(--chip)',
            display: 'grid', placeItems: 'center',
          }}>
            <Icon name="shield" size={22} color={enabled ? '#fff' : 'var(--ink-3)'}/>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'space-between' }}>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, margin: 0, lineHeight: 1.25 }}>
                {lang === 'tr' ? 'İki adımlı doğrulama (2FA)' : 'Two-factor authentication'}
              </h3>
              {enabled ? (
                <span className="is-chip" style={{ background: 'var(--ok)', color: '#fff', fontSize: 11, flexShrink: 0 }}>
                  {lang === 'tr' ? 'Aktif' : 'Enabled'}
                </span>
              ) : (
                <span className="is-chip" style={{ background: 'var(--chip)', color: 'var(--ink-3)', fontSize: 11, flexShrink: 0 }}>
                  {lang === 'tr' ? 'Kapalı' : 'Disabled'}
                </span>
              )}
            </div>
            <p style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 6, lineHeight: 1.5 }}>
              {lang === 'tr'
                ? 'Hesabını ekstra güvenlik katmanıyla koru. Her giriş Google Authenticator, Authy veya 1Password’den 6 haneli kod isteyecek.'
                : 'Add an extra layer. Every sign-in will require a 6-digit code from Google Authenticator, Authy or 1Password.'}
            </p>

            {/* IDLE */}
            {stage === 'idle' && (
              <div style={{ marginTop: 16 }}>
                {!enabled ? (
                  <button onClick={startEnable} disabled={busy} className="is-btn is-btn-primary">
                    <Icon name="shield" size={14}/> {busy ? '…' : (lang === 'tr' ? '2FA’yı aktif et' : 'Enable 2FA')}
                  </button>
                ) : (
                  <button onClick={() => setStage('disable')} className="is-btn is-btn-outline" style={{ color: '#dc2626', borderColor: 'rgba(220,38,38,0.3)' }}>
                    {lang === 'tr' ? '2FA’yı kapat' : 'Disable 2FA'}
                  </button>
                )}
              </div>
            )}

            {/* QR scan */}
            {stage === 'qr' && setupData && (
              <div style={{ marginTop: 16, padding: 18, background: 'var(--card-2)', borderRadius: 12, border: '1px solid var(--line-2)' }}>
                <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 12 }}>
                  {lang === 'tr' ? '1. Authenticator uygulamandan QR’ı tara' : '1. Scan QR with your authenticator app'}
                </div>
                <div style={{ display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap' }}>
                  <div style={{ width: 180, height: 180, background: '#fff', padding: 8, borderRadius: 8, flexShrink: 0 }}>
                    <img src={setupData.qrUrl} alt="QR" style={{ width: '100%', height: '100%', display: 'block' }}/>
                  </div>
                  <div style={{ flex: 1, minWidth: 200 }}>
                    <div style={{ fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 6 }}>
                      {lang === 'tr' ? 'Manuel giriş kodu' : 'Manual entry'}
                    </div>
                    <div style={{
                      fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600,
                      padding: '8px 10px', background: 'var(--card)', borderRadius: 6,
                      letterSpacing: '0.1em', wordBreak: 'break-all',
                    }}>
                      {setupData.secret}
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 8 }}>
                      {lang === 'tr' ? 'QR taramayı yapamazsan bu kodu manuel ekle.' : 'If you can\'t scan, enter this code manually.'}
                    </div>
                  </div>
                </div>
                <button onClick={() => setStage('verify')} className="is-btn is-btn-primary" style={{ marginTop: 16 }}>
                  {lang === 'tr' ? 'Devam' : 'Continue'} <Icon name="arrow-right" size={14}/>
                </button>
              </div>
            )}

            {/* VERIFY code */}
            {stage === 'verify' && (
              <div style={{ marginTop: 16, padding: 18, background: 'var(--card-2)', borderRadius: 12, border: '1px solid var(--line-2)' }}>
                <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 12 }}>
                  {lang === 'tr' ? '2. Uygulamada gözüken 6 haneli kodu gir' : '2. Enter the 6-digit code from your app'}
                </div>
                <input
                  value={code}
                  onChange={e => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
                  inputMode="numeric"
                  autoFocus
                  className="is-input"
                  style={{
                    fontSize: 26, textAlign: 'center', letterSpacing: '0.4em',
                    fontFamily: 'var(--font-mono)', fontWeight: 600, padding: 16,
                  }}
                  placeholder="000000"
                  maxLength={6}
                />
                {err && <div style={{ fontSize: 12, color: '#dc2626', marginTop: 8 }}>{err}</div>}
                <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
                  <button onClick={() => setStage('qr')} className="is-btn is-btn-outline">
                    ← {lang === 'tr' ? 'QR\'a geri dön' : 'Back to QR'}
                  </button>
                  <button onClick={verifyEnable} disabled={busy || code.length !== 6} className="is-btn is-btn-primary" style={{ flex: 1, justifyContent: 'center' }}>
                    {busy ? '…' : (lang === 'tr' ? 'Doğrula ve aktif et' : 'Verify & enable')}
                  </button>
                </div>
              </div>
            )}

            {/* DONE — recovery codes */}
            {stage === 'done' && recovery.length > 0 && (
              <div style={{ marginTop: 16, padding: 18, background: 'color-mix(in oklab, var(--ok) 8%, var(--card-2))', borderRadius: 12, border: '1px solid color-mix(in oklab, var(--ok) 30%, transparent)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                  <Icon name="check" size={18} color="var(--ok)"/>
                  <div style={{ fontSize: 14, fontWeight: 700 }}>
                    {lang === 'tr' ? '2FA aktif edildi' : '2FA enabled'}
                  </div>
                </div>
                <p style={{ fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.5, marginTop: 0 }}>
                  {lang === 'tr'
                    ? 'Bu kurtarma kodlarını güvenli bir yerde sakla. Her kod tek kullanımlık. Telefonunu kaybedersen giriş için lazım olacak.'
                    : 'Save these recovery codes somewhere safe. Each is single-use; needed if you lose your phone.'}
                </p>
                <div style={{
                  display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 6,
                  padding: 14, background: 'var(--card)', borderRadius: 8, marginTop: 10,
                  fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600,
                }}>
                  {recovery.map((c, i) => (
                    <div key={i} style={{ padding: '4px 8px', background: 'var(--chip)', borderRadius: 4, textAlign: 'center', letterSpacing: '0.1em' }}>{c}</div>
                  ))}
                </div>
                <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
                  <button
                    onClick={() => {
                      navigator.clipboard?.writeText(recovery.join('\n'));
                    }}
                    className="is-btn is-btn-outline"
                  >
                    <Icon name="copy" size={13}/> {lang === 'tr' ? 'Kopyala' : 'Copy'}
                  </button>
                  <button onClick={() => { setStage('idle'); setRecovery([]); }} className="is-btn is-btn-primary" style={{ flex: 1, justifyContent: 'center' }}>
                    {lang === 'tr' ? 'Sakladım, devam et' : 'I saved them, continue'}
                  </button>
                </div>
              </div>
            )}

            {/* DISABLE confirm */}
            {stage === 'disable' && (
              <div style={{ marginTop: 16, padding: 18, background: 'color-mix(in oklab, #dc2626 6%, var(--card-2))', borderRadius: 12, border: '1px solid color-mix(in oklab, #dc2626 25%, transparent)' }}>
                <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 8, color: '#dc2626' }}>
                  {lang === 'tr' ? '2FA’yı kapat' : 'Disable 2FA'}
                </div>
                <p style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 0, marginBottom: 10 }}>
                  {lang === 'tr' ? 'Onaylamak için şifreni gir.' : 'Enter your password to confirm.'}
                </p>
                <input
                  type="password"
                  value={pwConfirm}
                  onChange={e => setPwConfirm(e.target.value)}
                  className="is-input"
                  placeholder={lang === 'tr' ? 'Şifren' : 'Your password'}
                />
                {err && <div style={{ fontSize: 12, color: '#dc2626', marginTop: 8 }}>{err}</div>}
                <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
                  <button onClick={() => { setStage('idle'); setPwConfirm(''); setErr(''); }} className="is-btn is-btn-outline">
                    {lang === 'tr' ? 'Vazgeç' : 'Cancel'}
                  </button>
                  <button onClick={doDisable} disabled={busy} className="is-btn is-btn-primary" style={{ flex: 1, justifyContent: 'center', background: '#dc2626' }}>
                    {busy ? '…' : (lang === 'tr' ? '2FA’yı kapat' : 'Disable')}
                  </button>
                </div>
              </div>
            )}

            {err && stage === 'idle' && <div style={{ fontSize: 12, color: '#dc2626', marginTop: 10 }}>{err}</div>}
          </div>
        </div>
      </div>

      {/* ─── Password change card ─── */}
      <div className="is-card" style={{ padding: 24 }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16 }}>
          <div style={{ width: 48, height: 48, borderRadius: 12, background: 'var(--chip)', display: 'grid', placeItems: 'center' }}>
            <Icon name="lock" size={22} color="var(--ink-2)"/>
          </div>
          <div style={{ flex: 1 }}>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, margin: 0 }}>
              {lang === 'tr' ? 'Şifre' : 'Password'}
            </h3>
            <p style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 6, lineHeight: 1.5 }}>
              {lang === 'tr' ? 'Şifreni unuttuysan e-posta üzerinden sıfırlayabilirsin.' : 'If you forgot your password, reset via email.'}
            </p>
            <a href="sifre-sifirla.html" className="is-btn is-btn-outline" style={{ marginTop: 12, textDecoration: 'none' }}>
              {lang === 'tr' ? 'Şifre sıfırla' : 'Reset password'} <Icon name="arrow-right" size={13}/>
            </a>
          </div>
        </div>
      </div>

      {/* ─── Sessions / activity placeholder ─── */}
      <div className="is-card" style={{ padding: 24 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
          <Icon name="eye" size={18} color="var(--ink-2)"/>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, margin: 0 }}>
            {lang === 'tr' ? 'Son aktiviteler' : 'Recent activity'}
          </h3>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {[
            { t: lang === 'tr' ? 'Bu cihazdan giriş' : 'Sign-in from this device', d: lang === 'tr' ? 'Şimdi · İstanbul' : 'Just now · Istanbul', mono: 'Chrome 134 · macOS' },
            { t: lang === 'tr' ? 'Önceki giriş' : 'Previous sign-in', d: lang === 'tr' ? '2 gün önce · İstanbul' : '2 days ago · Istanbul', mono: 'Safari · iOS 18' },
          ].map((s, i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 0', borderTop: i ? '1px solid var(--line-2)' : 'none' }}>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{s.t}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>{s.d}</div>
              </div>
              <div style={{ fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>{s.mono}</div>
            </div>
          ))}
        </div>
      </div>

    </div>
  );
}

Object.assign(window, { AboutScreen, NotFoundScreen, PasswordResetScreen, SellerVerifyWizard, SecurityPanel });