// seller.jsx — İlan Oluşturma Wizard'ı (4 adımlı satıcı akışı)
// Adımlar:
//   1) Hesap Bilgileri (kullanıcı adı, ülke, dil, hesap yaşı, kategori)
//   2) Metrikler & Görseller (takipçi, ER, screenshot upload, sample posts)
//   3) Fiyatlandırma (sabit fiyat, pazarlık, açık artırma)
//   4) Önizleme & Yayınla (kart preview + onay)
// localStorage'a kaydeder; admin panel "Onay Bekleyen" sekmesinde görür.

const { useState: _slS, useEffect: _slE, useMemo: _slM } = React;

const SELLER_DRAFT_KEY = 'is:seller:draft';
const SELLER_PENDING_KEY = 'is:seller:pending';

const STEPS = [
  { id: 1, key: 'about', tr: 'Hesap', en: 'Account' },
  { id: 2, key: 'metrics', tr: 'Metrikler', en: 'Metrics' },
  { id: 3, key: 'price', tr: 'Fiyat', en: 'Price' },
  { id: 4, key: 'review', tr: 'Önizleme', en: 'Review' },
];

const NICHES = [
  { id: 'travel', tr: 'Seyahat', en: 'Travel' },
  { id: 'fashion', tr: 'Moda', en: 'Fashion' },
  { id: 'food', tr: 'Yemek', en: 'Food' },
  { id: 'fitness', tr: 'Fitness', en: 'Fitness' },
  { id: 'beauty', tr: 'Güzellik', en: 'Beauty' },
  { id: 'gaming', tr: 'Oyun', en: 'Gaming' },
  { id: 'meme', tr: 'Mizah / Meme', en: 'Meme' },
  { id: 'auto', tr: 'Otomotiv', en: 'Auto' },
  { id: 'pets', tr: 'Evcil Hayvan', en: 'Pets' },
  { id: 'art', tr: 'Sanat', en: 'Art' },
  { id: 'music', tr: 'Müzik', en: 'Music' },
  { id: 'tech', tr: 'Teknoloji', en: 'Tech' },
];

const COUNTRIES = [
  { c: 'tr', tr: 'Türkiye', en: 'Turkey', flag: '🇹🇷' },
  { c: 'us', tr: 'ABD', en: 'USA', flag: '🇺🇸' },
  { c: 'gb', tr: 'İngiltere', en: 'UK', flag: '🇬🇧' },
  { c: 'de', tr: 'Almanya', en: 'Germany', flag: '🇩🇪' },
  { c: 'fr', tr: 'Fransa', en: 'France', flag: '🇫🇷' },
  { c: 'br', tr: 'Brezilya', en: 'Brazil', flag: '🇧🇷' },
  { c: 'mx', tr: 'Meksika', en: 'Mexico', flag: '🇲🇽' },
  { c: 'ww', tr: 'Karışık', en: 'Worldwide', flag: '🌍' },
];

const initialDraft = () => ({
  username: '', niche: 'travel', country: 'tr', lang: 'tr',
  ageMonths: 12, verified: false, original: false, bio: '',
  followers: 5000, posts: 100, er: 4.0,
  screenshots: [], samplePosts: [],
  priceMode: 'fixed', price: 1000, offerOpen: true, minPrice: 800,
  auctionDays: 7, includesEmail: true, includesPhone: false,
});

// ─────────────────────────────────────────────────────────────
// SellerWizard — desktop
// ─────────────────────────────────────────────────────────────
function SellerWizard({ L, lang, theme }) {
  const [step, setStep] = _slS(1);
  const [draft, setDraft] = _slS(() => loadJson(SELLER_DRAFT_KEY, initialDraft()));
  const [submitted, setSubmitted] = _slS(false);
  const [touched, setTouched] = _slS(false);

  _slE(() => { saveJson(SELLER_DRAFT_KEY, draft); }, [draft]);

  const set = (k, v) => { setTouched(true); setDraft(d => ({ ...d, [k]: v })); };

  const errors = validate(draft, step);
  const showErrors = touched;
  const canNext = Object.keys(errors).length === 0;

  const submit = async () => {
    // API varsa gerçek backend'e gönder
    if (window.api && window.api.isLoggedIn()) {
      try {
        const payload = {
          username: (draft.handle || '').replace(/^@/, ''),
          category: draft.niche || 'lifestyle',
          niche: draft.niche || null,
          followers: parseInt(draft.followers) || 0,
          engagement: parseFloat(draft.er) || null,
          country: draft.country || 'TR',
          account_age_months: parseInt(draft.age) || null,
          is_aged: (parseInt(draft.age) || 0) >= 24,
          description: draft.description || '',
          price: parseInt(draft.price) || 0,
          gallery: draft.images || [],
          proof_images: draft.proofs || [],
          tags: draft.tags || [],
        };
        await window.api.listings.create(payload);
        saveJson(SELLER_DRAFT_KEY, initialDraft());
        setSubmitted(true);
        return;
      } catch (e) {
        if (e.status === 401) {
          alert('Önce giriş yapmalısın. Giriş sayfasına yönlendiriliyorsun...');
          window.location.href = 'giris.html';
          return;
        }
        alert('Hata: ' + e.message + '\n(Yerel taslak olarak kaydediliyor)');
      }
    }
    // Fallback: localStorage
    const pending = loadJson(SELLER_PENDING_KEY, []);
    const id = 'pl_' + Date.now().toString(36);
    const item = {
      id, ...draft, status: 'pending',
      submittedAt: new Date().toISOString(),
    };
    saveJson(SELLER_PENDING_KEY, [item, ...pending]);
    saveJson(SELLER_DRAFT_KEY, initialDraft());
    setSubmitted(true);
  };

  if (submitted) {
    return <SellerSuccess L={L} lang={lang} draft={draft}/>;
  }

  return (
    <div data-screen-label="13 İlan Oluşturma (Desktop)" style={{ minHeight: '100%', background: 'var(--bg)' }}>
      <TopNav L={L} lang={lang}/>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '32px' }}>
        <div className="is-kicker" style={{ color: 'var(--accent)' }}>
          {lang === 'tr' ? 'SATICI · İLAN VER' : 'SELLER · LIST ACCOUNT'}
        </div>
        <h1 className="is-h1" style={{ fontSize: 36, margin: '6px 0 20px', maxWidth: 720 }}>
          {lang === 'tr' ? 'Hesabını sat. 4 adımda yayında.' : 'Sell your account. Live in 4 steps.'}
        </h1>

        {/* Stepper */}
        <Stepper step={step} lang={lang}/>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 32, marginTop: 28 }}>
          <div className="is-card" style={{ padding: 28 }}>
            {step === 1 && <StepAbout draft={draft} set={set} lang={lang} errors={showErrors ? errors : {}}/>}
            {step === 2 && <StepMetrics draft={draft} set={set} lang={lang} errors={showErrors ? errors : {}}/>}
            {step === 3 && <StepPrice draft={draft} set={set} lang={lang} errors={showErrors ? errors : {}}/>}
            {step === 4 && <StepReview draft={draft} lang={lang} L={L}/>}

            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 28, paddingTop: 20, borderTop: '1px solid var(--line-2)' }}>
              <button className="is-btn is-btn-ghost"
                      disabled={step === 1}
                      onClick={() => setStep(s => Math.max(1, s - 1))}
                      style={{ opacity: step === 1 ? 0.4 : 1 }}>
                <Icon name="chevron-left" size={14}/> {lang === 'tr' ? 'Geri' : 'Back'}
              </button>
              {step < 4 ? (
                <button className="is-btn is-btn-primary"
                        disabled={!canNext}
                        onClick={() => setStep(s => s + 1)}
                        style={{ opacity: canNext ? 1 : 0.4, padding: '10px 20px' }}>
                  {lang === 'tr' ? 'Devam Et' : 'Continue'} <Icon name="arrow-right" size={14}/>
                </button>
              ) : (
                <button className="is-btn is-btn-primary"
                        onClick={submit}
                        style={{ padding: '10px 20px', background: 'var(--g1)' }}>
                  <Icon name="check" size={14}/> {lang === 'tr' ? 'Yayına Gönder' : 'Submit for Review'}
                </button>
              )}
            </div>
          </div>

          {/* Sidebar — preview + tips */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <SellerPreview draft={draft} lang={lang} L={L}/>
            <SellerTips lang={lang} step={step}/>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Stepper
// ─────────────────────────────────────────────────────────────
function Stepper({ step, lang }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontFamily: 'var(--font-mono)', fontSize: 12 }}>
      {STEPS.map((s, i) => {
        const done = step > s.id;
        const active = step === s.id;
        return (
          <React.Fragment key={s.id}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '8px 14px', borderRadius: 999,
              background: active ? 'var(--ink)' : done ? 'color-mix(in oklab, var(--g1) 22%, transparent)' : 'var(--chip)',
              color: active ? 'var(--bg)' : done ? 'var(--g1)' : 'var(--ink-3)',
              border: active ? 0 : '1px solid var(--line-2)',
              transition: 'all .25s',
            }}>
              <span style={{
                width: 18, height: 18, borderRadius: '50%',
                background: active ? 'var(--bg)' : done ? 'var(--g1)' : 'var(--line-2)',
                color: active ? 'var(--ink)' : done ? '#fff' : 'var(--ink-3)',
                display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 10,
              }}>
                {done ? '✓' : s.id}
              </span>
              <span style={{ textTransform: 'uppercase', letterSpacing: 0.5 }}>{lang === 'tr' ? s.tr : s.en}</span>
            </div>
            {i < STEPS.length - 1 && (
              <div style={{ flex: 1, height: 1, background: done ? 'var(--g1)' : 'var(--line-2)', maxWidth: 40 }}/>
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Step 1 — Hesap Bilgileri
// ─────────────────────────────────────────────────────────────
function StepAbout({ draft, set, lang, errors }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionHead n="1" tr="Hesap bilgileri" en="Account info" lang={lang}
                   sub={lang === 'tr' ? 'Hesabını tanıyalım. Bu bilgiler ilan kartında görünür.' : "Let's get to know the account. These appear on the listing card."}/>

      <Field label={lang === 'tr' ? 'Kullanıcı adı (görünmez tutulur — onayda doğrulanır)' : 'Username (kept private — verified on approval)'}
             error={errors.username}>
        <div style={{ display: 'flex', gap: 0 }}>
          <span style={{
            padding: '12px 14px', borderRadius: '12px 0 0 12px',
            background: 'var(--chip)', border: '1px solid var(--line-2)',
            borderRight: 0, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)',
            display: 'flex', alignItems: 'center',
          }}>@</span>
          <input className="is-input" placeholder="citytrails"
                 value={draft.username}
                 onChange={e => set('username', e.target.value.toLowerCase().replace(/[^a-z0-9_.]/g, ''))}
                 style={{ borderRadius: '0 12px 12px 0', flex: 1 }}/>
        </div>
      </Field>

      <Field label={lang === 'tr' ? 'Kategori / Niş' : 'Category / Niche'}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {NICHES.map(n => (
            <button key={n.id} type="button"
                    onClick={() => set('niche', n.id)}
                    className="is-chip"
                    style={{
                      padding: '8px 14px', borderRadius: 999,
                      border: '1px solid ' + (draft.niche === n.id ? 'var(--ink)' : 'var(--line-2)'),
                      background: draft.niche === n.id ? 'var(--ink)' : 'transparent',
                      color: draft.niche === n.id ? 'var(--bg)' : 'var(--ink-2)',
                      cursor: 'pointer', fontSize: 13,
                    }}>
              {lang === 'tr' ? n.tr : n.en}
            </button>
          ))}
        </div>
      </Field>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <Field label={lang === 'tr' ? 'Hedef ülke / kitle' : 'Audience country'}>
          <select className="is-input" value={draft.country} onChange={e => set('country', e.target.value)}>
            {COUNTRIES.map(c => (
              <option key={c.c} value={c.c}>{c.flag} {lang === 'tr' ? c.tr : c.en}</option>
            ))}
          </select>
        </Field>
        <Field label={lang === 'tr' ? 'İçerik dili' : 'Content language'}>
          <select className="is-input" value={draft.lang} onChange={e => set('lang', e.target.value)}>
            <option value="tr">Türkçe</option>
            <option value="en">English</option>
            <option value="multi">{lang === 'tr' ? 'Çoklu / Görsel' : 'Multi / Visual'}</option>
          </select>
        </Field>
      </div>

      <Field label={lang === 'tr' ? 'Hesap yaşı' : 'Account age'}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <input type="range" min="1" max="120" value={draft.ageMonths}
                 onChange={e => set('ageMonths', parseInt(e.target.value))}
                 style={{ flex: 1, accentColor: 'var(--accent)' }}/>
          <div style={{
            minWidth: 110, textAlign: 'right', fontFamily: 'var(--font-mono)',
            fontWeight: 600, color: 'var(--ink)',
          }}>
            {fmtAge(draft.ageMonths, lang, { age_year: lang === 'tr' ? 'yıl' : 'yr', age_month: lang === 'tr' ? 'ay' : 'mo' })}
          </div>
        </div>
      </Field>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <CheckRow checked={draft.verified} onChange={v => set('verified', v)}
                  label={lang === 'tr' ? 'Mavi tikli (verified)' : 'Verified (blue check)'}
                  hint={lang === 'tr' ? 'Onaylama gerekir' : 'Requires verification'}/>
        <CheckRow checked={draft.original} onChange={v => set('original', v)}
                  label={lang === 'tr' ? 'Orijinal kurucu hesap' : 'Original founder account'}
                  hint={lang === 'tr' ? 'İlk sahibi sensin' : 'You are the original owner'}/>
      </div>

      <Field label={lang === 'tr' ? 'Kısa açıklama (opsiyonel)' : 'Short description (optional)'}>
        <textarea className="is-input" rows={3}
                  placeholder={lang === 'tr' ? 'Bu hesap neyi temsil ediyor? Hangi içeriklerle büyüdü?' : 'What does this account represent? How did it grow?'}
                  value={draft.bio}
                  onChange={e => set('bio', e.target.value.slice(0, 200))}
                  style={{ resize: 'vertical', fontFamily: 'inherit' }}/>
        <div style={{ fontSize: 11, color: 'var(--ink-3)', textAlign: 'right', fontFamily: 'var(--font-mono)' }}>
          {draft.bio.length}/200
        </div>
      </Field>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Step 2 — Metrikler
// ─────────────────────────────────────────────────────────────
function StepMetrics({ draft, set, lang, errors }) {
  const fileRef = React.useRef();
  const onUpload = (e) => {
    const files = Array.from(e.target.files || []).slice(0, 5);
    Promise.all(files.map(f => new Promise((res) => {
      const r = new FileReader();
      r.onload = () => res({ name: f.name, data: r.result });
      r.readAsDataURL(f);
    }))).then(arr => set('screenshots', [...(draft.screenshots || []), ...arr].slice(0, 5)));
    e.target.value = '';
  };
  const removeShot = (i) => set('screenshots', draft.screenshots.filter((_, j) => j !== i));

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionHead n="2" tr="Metrikler ve görseller" en="Metrics & visuals" lang={lang}
                   sub={lang === 'tr' ? 'Alıcının hesabı değerlendireceği temel veriler.' : 'Core data buyers use to evaluate.'}/>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}>
        <NumberInput label={lang === 'tr' ? 'Takipçi sayısı' : 'Followers'}
                     value={draft.followers} onChange={v => set('followers', v)}
                     min={100} max={10000000} step={100} format="num"
                     error={errors.followers}/>
        <NumberInput label={lang === 'tr' ? 'Toplam post' : 'Total posts'}
                     value={draft.posts} onChange={v => set('posts', v)}
                     min={1} max={50000} step={1} format="num"/>
        <NumberInput label={lang === 'tr' ? 'Etkileşim oranı (ER)' : 'Engagement rate (ER)'}
                     value={draft.er} onChange={v => set('er', v)}
                     min={0.1} max={20} step={0.1} format="pct"/>
      </div>

      <Field label={lang === 'tr' ? 'Insights ekran görüntüleri (en fazla 5)' : 'Insights screenshots (up to 5)'}
             hint={lang === 'tr' ? 'Sadece onayda biz görürüz, alıcıya gösterilmez.' : "Only visible to us during review — not shown to buyers."}>
        <div style={{
          border: '2px dashed var(--line-2)', borderRadius: 14, padding: 20,
          display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap',
        }}>
          {(draft.screenshots || []).map((s, i) => (
            <div key={i} style={{
              position: 'relative', width: 90, height: 90, borderRadius: 10, overflow: 'hidden',
              background: 'var(--chip)',
            }}>
              <img src={s.data} alt={s.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
              <button onClick={() => removeShot(i)}
                      style={{
                        position: 'absolute', top: 4, right: 4, width: 22, height: 22,
                        borderRadius: '50%', border: 0, background: 'rgba(0,0,0,.65)', color: '#fff',
                        cursor: 'pointer', fontSize: 12,
                      }}>×</button>
            </div>
          ))}
          {(draft.screenshots || []).length < 5 && (
            <button type="button" onClick={() => fileRef.current && fileRef.current.click()}
                    style={{
                      width: 90, height: 90, borderRadius: 10, cursor: 'pointer',
                      background: 'var(--chip)', border: '1px solid var(--line-2)',
                      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                      gap: 4, color: 'var(--ink-3)',
                    }}>
              <Icon name="upload" size={18}/>
              <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)' }}>UPLOAD</span>
            </button>
          )}
          <input ref={fileRef} type="file" accept="image/*" multiple onChange={onUpload} style={{ display: 'none' }}/>
        </div>
      </Field>

      <SamplePostsBuilder draft={draft} set={set} lang={lang}/>
    </div>
  );
}

function SamplePostsBuilder({ draft, set, lang }) {
  const fileRef = React.useRef();
  const onUpload = (e) => {
    const files = Array.from(e.target.files || []).slice(0, 9);
    Promise.all(files.map(f => new Promise((res) => {
      const r = new FileReader();
      r.onload = () => res({ data: r.result });
      r.readAsDataURL(f);
    }))).then(arr => set('samplePosts', [...(draft.samplePosts || []), ...arr].slice(0, 9)));
    e.target.value = '';
  };
  const remove = (i) => set('samplePosts', draft.samplePosts.filter((_, j) => j !== i));

  return (
    <Field label={lang === 'tr' ? 'Örnek post görselleri (alıcıya görünür — en fazla 9)' : 'Sample post images (visible to buyers — up to 9)'}
           hint={lang === 'tr' ? 'En iyi 9 postunu seç. İlan kartında ve detayda görünür.' : 'Pick your top 9 posts. Shown on listing card & detail.'}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(9, 1fr)', gap: 6, maxWidth: 540 }}>
        {Array.from({ length: 9 }, (_, i) => {
          const p = (draft.samplePosts || [])[i];
          return p ? (
            <div key={i} style={{ position: 'relative', aspectRatio: '1/1', borderRadius: 6, overflow: 'hidden' }}>
              <img src={p.data} style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
              <button onClick={() => remove(i)}
                      style={{
                        position: 'absolute', top: 2, right: 2, width: 18, height: 18,
                        borderRadius: '50%', border: 0, background: 'rgba(0,0,0,.7)', color: '#fff',
                        cursor: 'pointer', fontSize: 10,
                      }}>×</button>
            </div>
          ) : (
            <button key={i} type="button" onClick={() => fileRef.current && fileRef.current.click()}
                    style={{
                      aspectRatio: '1/1', borderRadius: 6, cursor: 'pointer',
                      background: 'var(--chip)', border: '1px dashed var(--line-2)',
                      display: 'grid', placeItems: 'center', color: 'var(--ink-3)',
                    }}>
              <Icon name="plus" size={14}/>
            </button>
          );
        })}
      </div>
      <input ref={fileRef} type="file" accept="image/*" multiple onChange={onUpload} style={{ display: 'none' }}/>
    </Field>
  );
}

// ─────────────────────────────────────────────────────────────
// Step 3 — Fiyat
// ─────────────────────────────────────────────────────────────
function StepPrice({ draft, set, lang, errors }) {
  const commission = Math.round(draft.price * 0.08);
  const youGet = draft.price - commission;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionHead n="3" tr="Fiyatlandırma" en="Pricing" lang={lang}
                   sub={lang === 'tr' ? 'Sabit fiyat, pazarlık veya açık artırma — sen seç.' : 'Fixed price, negotiation, or auction — your call.'}/>

      <Field label={lang === 'tr' ? 'Satış modeli' : 'Sale mode'}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
          {[
            { id: 'fixed', tr: 'Sabit Fiyat', en: 'Fixed', icon: 'tag', desc_tr: 'Hızlı satış', desc_en: 'Fast sale' },
            { id: 'offer', tr: 'Teklif Al', en: 'Offers', icon: 'mail', desc_tr: 'Pazarlık aç', desc_en: 'Negotiate' },
            { id: 'auction', tr: 'Açık Artırma', en: 'Auction', icon: 'bolt', desc_tr: 'Süreli yarış', desc_en: 'Timed' },
          ].map(m => (
            <button key={m.id} type="button" onClick={() => set('priceMode', m.id)}
                    style={{
                      padding: '14px 16px', borderRadius: 14, cursor: 'pointer',
                      background: draft.priceMode === m.id ? 'var(--ink)' : 'transparent',
                      color: draft.priceMode === m.id ? 'var(--bg)' : 'var(--ink-2)',
                      border: '1px solid ' + (draft.priceMode === m.id ? 'var(--ink)' : 'var(--line-2)'),
                      textAlign: 'left',
                    }}>
              <Icon name={m.icon} size={16}/>
              <div style={{ fontWeight: 600, fontSize: 14, marginTop: 6 }}>{lang === 'tr' ? m.tr : m.en}</div>
              <div style={{ fontSize: 11, opacity: 0.7, fontFamily: 'var(--font-mono)' }}>
                {lang === 'tr' ? m.desc_tr : m.desc_en}
              </div>
            </button>
          ))}
        </div>
      </Field>

      <NumberInput label={lang === 'tr' ? (draft.priceMode === 'auction' ? 'Başlangıç fiyatı (₺)' : 'Liste fiyatı (₺)') : (draft.priceMode === 'auction' ? 'Starting bid (₺)' : 'List price (₺)')}
                   value={draft.price} onChange={v => set('price', v)}
                   min={50} max={10000000} step={50} format="price"
                   error={errors.price}/>

      {draft.priceMode === 'offer' && (
        <NumberInput label={lang === 'tr' ? 'Kabul ettiğin minimum (₺)' : 'Minimum acceptable (₺)'}
                     value={draft.minPrice} onChange={v => set('minPrice', v)}
                     min={50} max={draft.price} step={50} format="price"/>
      )}

      {draft.priceMode === 'auction' && (
        <Field label={lang === 'tr' ? 'Açık artırma süresi' : 'Auction duration'}>
          <div style={{ display: 'flex', gap: 8 }}>
            {[3, 5, 7, 10].map(d => (
              <button key={d} type="button" onClick={() => set('auctionDays', d)}
                      style={{
                        flex: 1, padding: '10px', borderRadius: 10, cursor: 'pointer',
                        background: draft.auctionDays === d ? 'var(--ink)' : 'transparent',
                        color: draft.auctionDays === d ? 'var(--bg)' : 'var(--ink-2)',
                        border: '1px solid ' + (draft.auctionDays === d ? 'var(--ink)' : 'var(--line-2)'),
                        fontWeight: 600,
                      }}>{d} {lang === 'tr' ? 'gün' : 'days'}</button>
            ))}
          </div>
        </Field>
      )}

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <CheckRow checked={draft.includesEmail} onChange={v => set('includesEmail', v)}
                  label={lang === 'tr' ? 'E-posta da devrediliyor' : 'Email transferred'}
                  hint={lang === 'tr' ? 'Tavsiye edilir' : 'Recommended'}/>
        <CheckRow checked={draft.includesPhone} onChange={v => set('includesPhone', v)}
                  label={lang === 'tr' ? 'Telefon numarası kaldırılıyor' : 'Phone removed'}
                  hint={lang === 'tr' ? 'Güvenlik için tavsiye' : 'Security recommended'}/>
      </div>

      {/* Commission breakdown */}
      <div className="is-card" style={{
        padding: 18, background: 'color-mix(in oklab, var(--g1) 8%, transparent)',
        border: '1px solid color-mix(in oklab, var(--g1) 30%, transparent)',
      }}>
        <div className="is-kicker" style={{ color: 'var(--g1)', fontSize: 11 }}>
          {lang === 'tr' ? 'KAZANÇ HESABI' : 'EARNINGS BREAKDOWN'}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14, marginTop: 12 }}>
          <Money label={lang === 'tr' ? 'Liste fiyatı' : 'List price'} value={draft.price} bold/>
          <Money label={lang === 'tr' ? 'Komisyon (8%)' : 'Commission (8%)'} value={-commission} muted/>
          <Money label={lang === 'tr' ? 'Sana kalan' : 'You receive'} value={youGet} accent/>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Step 4 — Review
// ─────────────────────────────────────────────────────────────
function StepReview({ draft, lang, L }) {
  const niche = NICHES.find(n => n.id === draft.niche);
  const country = COUNTRIES.find(c => c.c === draft.country);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionHead n="4" tr="Önizleme ve onay" en="Review & submit" lang={lang}
                   sub={lang === 'tr' ? 'Yayına göndermeden önce kontrol et. Onaydan sonra 24 saat içinde yayında.' : 'Check before submitting. Goes live within 24h after review.'}/>

      <div className="is-card" style={{ padding: 20, background: 'var(--bg-2)' }}>
        <div className="is-kicker" style={{ color: 'var(--ink-3)', fontSize: 11 }}>
          {lang === 'tr' ? 'HESAP' : 'ACCOUNT'}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 8 }}>
          <Pair label={lang === 'tr' ? 'Kullanıcı adı' : 'Username'} value={`@${draft.username || '—'}`}/>
          <Pair label={lang === 'tr' ? 'Kategori' : 'Category'} value={niche ? (lang === 'tr' ? niche.tr : niche.en) : '—'}/>
          <Pair label={lang === 'tr' ? 'Hedef ülke' : 'Country'} value={country ? `${country.flag} ${lang === 'tr' ? country.tr : country.en}` : '—'}/>
          <Pair label={lang === 'tr' ? 'Hesap yaşı' : 'Age'} value={fmtAge(draft.ageMonths, lang, { age_year: lang === 'tr' ? 'yıl' : 'yr', age_month: lang === 'tr' ? 'ay' : 'mo' })}/>
        </div>
      </div>

      <div className="is-card" style={{ padding: 20, background: 'var(--bg-2)' }}>
        <div className="is-kicker" style={{ color: 'var(--ink-3)', fontSize: 11 }}>
          {lang === 'tr' ? 'METRİKLER' : 'METRICS'}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 16, marginTop: 8 }}>
          <Pair label={lang === 'tr' ? 'Takipçi' : 'Followers'} value={fmtNum(draft.followers)}/>
          <Pair label={lang === 'tr' ? 'Post' : 'Posts'} value={fmtNum(draft.posts)}/>
          <Pair label="ER" value={`${draft.er.toFixed(1)}%`}/>
          <Pair label={lang === 'tr' ? 'Görsel' : 'Images'}
                value={`${(draft.samplePosts || []).length}/9`}/>
        </div>
      </div>

      <div className="is-card" style={{ padding: 20, background: 'var(--bg-2)' }}>
        <div className="is-kicker" style={{ color: 'var(--ink-3)', fontSize: 11 }}>
          {lang === 'tr' ? 'FİYAT' : 'PRICE'}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, marginTop: 8 }}>
          <Pair label={lang === 'tr' ? 'Mod' : 'Mode'}
                value={draft.priceMode === 'fixed' ? (lang === 'tr' ? 'Sabit' : 'Fixed')
                  : draft.priceMode === 'offer' ? (lang === 'tr' ? 'Teklif' : 'Offer')
                  : (lang === 'tr' ? 'Açık Artırma' : 'Auction')}/>
          <Pair label={lang === 'tr' ? 'Fiyat' : 'Price'} value={fmtPrice(draft.price, '₺')}/>
          <Pair label={lang === 'tr' ? 'Net kazanç' : 'You receive'}
                value={fmtPrice(Math.round(draft.price * 0.92), '₺')} accent/>
        </div>
      </div>

      <div style={{
        padding: 14, borderRadius: 12,
        background: 'color-mix(in oklab, var(--accent) 8%, transparent)',
        border: '1px solid color-mix(in oklab, var(--accent) 30%, transparent)',
        display: 'flex', gap: 10, alignItems: 'flex-start',
      }}>
        <Icon name="shield" size={16} color="var(--accent)"/>
        <div style={{ fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>
          <strong>{lang === 'tr' ? 'Onay süreci:' : 'Review process:'}</strong>{' '}
          {lang === 'tr'
            ? 'Ekibimiz hesabı doğrular, screenshot\'ları kontrol eder ve 24 saat içinde yayına alır. Sat\u0131ş tamamlandığında ödeme escrow hesabında tutulur, hesap devri tamamlanınca sana aktarılır.'
            : 'Our team verifies the account, checks screenshots, and goes live within 24h. When sold, payment is held in escrow and released once transfer is complete.'}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Sidebar — Live Preview Card
// ─────────────────────────────────────────────────────────────
function SellerPreview({ draft, lang, L }) {
  const niche = NICHES.find(n => n.id === draft.niche);
  const country = COUNTRIES.find(c => c.c === draft.country);
  return (
    <div className="is-card" style={{ padding: 18, position: 'sticky', top: 88 }}>
      <div className="is-kicker" style={{ color: 'var(--ink-3)', fontSize: 11 }}>
        {lang === 'tr' ? 'CANLI ÖNİZLEME' : 'LIVE PREVIEW'}
      </div>
      <div style={{
        marginTop: 14, padding: 14, borderRadius: 14,
        background: 'var(--bg-2)', border: '1px solid var(--line-2)',
      }}>
        {/* Sample posts mini grid */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 3,
          aspectRatio: '3/3', borderRadius: 8, overflow: 'hidden', marginBottom: 12,
          background: 'var(--chip)',
        }}>
          {Array.from({ length: 9 }, (_, i) => {
            const p = (draft.samplePosts || [])[i];
            return p ? (
              <div key={i} style={{ aspectRatio: '1/1', overflow: 'hidden' }}>
                <img src={p.data} style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
              </div>
            ) : (
              <div key={i} style={{
                aspectRatio: '1/1',
                background: `linear-gradient(135deg, color-mix(in oklab, var(--accent) ${15 + i * 4}%, var(--chip)), var(--chip))`,
              }}/>
            );
          })}
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 600 }}>@{draft.username || 'username'}</span>
          {draft.verified && <Icon name="verified" size={14} color="var(--accent)"/>}
        </div>
        <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2, fontFamily: 'var(--font-mono)' }}>
          {country && country.flag} · {niche ? (lang === 'tr' ? niche.tr : niche.en) : ''} · {fmtAge(draft.ageMonths, lang, { age_year: lang === 'tr' ? 'yıl' : 'yr', age_month: lang === 'tr' ? 'ay' : 'mo' })}
        </div>
        <div style={{ display: 'flex', gap: 14, marginTop: 10, paddingTop: 10, borderTop: '1px dashed var(--line-2)' }}>
          <MiniMetric label={lang === 'tr' ? 'Takipçi' : 'Foll.'} value={fmtNum(draft.followers)}/>
          <MiniMetric label="Post" value={fmtNum(draft.posts)}/>
          <MiniMetric label="ER" value={`${draft.er.toFixed(1)}%`}/>
        </div>
        <div style={{ marginTop: 12, paddingTop: 10, borderTop: '1px dashed var(--line-2)' }}>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>
            {draft.priceMode === 'auction' ? (lang === 'tr' ? 'Başlangıç' : 'Starting at') : (lang === 'tr' ? 'Fiyat' : 'Price')}
          </div>
          <div style={{ fontSize: 22, fontWeight: 700 }}>{fmtPrice(draft.price, '₺')}</div>
        </div>
      </div>
    </div>
  );
}

function SellerTips({ lang, step }) {
  const tipsByStep = {
    1: [
      lang === 'tr' ? 'Doğru kategori seçimi alıcı bulma süresini yarıya indirir.' : 'Right category cuts time-to-buyer in half.',
      lang === 'tr' ? '1+ yıl yaşındaki hesaplar genelde 3x daha değerli.' : 'Accounts 1+ year old are typically 3x more valuable.',
    ],
    2: [
      lang === 'tr' ? 'En az 1 Insights screenshot ekle — fiyatı %30 yukarı çeker.' : 'Add at least one Insights screenshot — bumps price ~30%.',
      lang === 'tr' ? 'En iyi 9 postunu seç. İlk 3 satır karar verdirir.' : 'Pick your top 9. The first row decides the buy.',
    ],
    3: [
      lang === 'tr' ? 'Pazarlık açıkken satış %2x daha hızlı tamamlanır.' : 'Listings with offers close ~2x faster.',
      lang === 'tr' ? '8% komisyon escrow + ödeme + destek dahil.' : '8% covers escrow + payments + support.',
    ],
    4: [
      lang === 'tr' ? 'Onay genelde 4-12 saat sürer. SMS ile bildiririz.' : 'Review usually takes 4-12h. We\'ll text you.',
    ],
  };
  return (
    <div className="is-card" style={{
      padding: 16, background: 'color-mix(in oklab, var(--accent) 5%, var(--bg-2))',
      border: '1px solid color-mix(in oklab, var(--accent) 20%, transparent)',
    }}>
      <div className="is-kicker" style={{ color: 'var(--accent)', fontSize: 11, display: 'flex', alignItems: 'center', gap: 6 }}>
        <Icon name="sparkle" size={12}/> {lang === 'tr' ? 'PRO İPUCU' : 'PRO TIP'}
      </div>
      <ul style={{ margin: '10px 0 0', paddingLeft: 18, color: 'var(--ink-2)', fontSize: 12.5, lineHeight: 1.6 }}>
        {(tipsByStep[step] || []).map((t, i) => <li key={i}>{t}</li>)}
      </ul>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Submit success
// ─────────────────────────────────────────────────────────────
function SellerSuccess({ L, lang, draft }) {
  return (
    <div data-screen-label="14 İlan Gönderildi (Desktop)" style={{ minHeight: '100%', background: 'var(--bg)' }}>
      <TopNav L={L} lang={lang}/>
      <div style={{
        maxWidth: 640, margin: '0 auto', padding: '64px 32px',
        textAlign: 'center',
      }}>
        <div style={{
          width: 88, height: 88, margin: '0 auto 20px',
          borderRadius: '50%',
          background: 'linear-gradient(135deg, var(--g1), var(--g2))',
          display: 'grid', placeItems: 'center', color: '#fff',
          animation: 'sellerPop .6s cubic-bezier(.2,.9,.4,1.4) both',
        }}>
          <style>{`@keyframes sellerPop { from { transform: scale(0); } to { transform: scale(1); } }`}</style>
          <Icon name="check" size={40} strokeWidth={3} color="#fff"/>
        </div>
        <h1 className="is-h1" style={{ fontSize: 36, margin: '0 0 12px' }}>
          {lang === 'tr' ? 'İlanın gönderildi!' : 'Listing submitted!'}
        </h1>
        <p style={{ color: 'var(--ink-2)', fontSize: 16, lineHeight: 1.6, marginBottom: 28 }}>
          {lang === 'tr'
            ? <>Ekibimiz <strong>@{draft.username}</strong> hesabını inceleyecek. Onay genelde <strong>4-12 saat</strong> sürer. Yayına alındığında SMS ile haberdar oluruz.</>
            : <>Our team will review <strong>@{draft.username}</strong>. Review usually takes <strong>4-12h</strong>. We'll text you when it goes live.</>}
        </p>
        <div className="is-card" style={{ padding: 20, textAlign: 'left', marginBottom: 24 }}>
          <div className="is-kicker" style={{ color: 'var(--ink-3)' }}>
            {lang === 'tr' ? 'SONRAKİ ADIMLAR' : 'NEXT STEPS'}
          </div>
          <ol style={{ paddingLeft: 18, margin: '10px 0 0', fontSize: 14, lineHeight: 1.7, color: 'var(--ink-2)' }}>
            <li>{lang === 'tr' ? 'Ekibimiz hesabı doğrular (4-12 saat).' : 'We verify your account (4-12h).'}</li>
            <li>{lang === 'tr' ? 'Onaylanırsa ilan otomatik yayına alınır.' : 'If approved, listing goes live automatically.'}</li>
            <li>{lang === 'tr' ? 'Alıcı çıktığında ödeme escrow hesabında tutulur.' : 'When sold, payment is held in escrow.'}</li>
            <li>{lang === 'tr' ? 'Hesap devri tamamlanınca para hesabına aktarılır.' : 'Payment released after account transfer.'}</li>
          </ol>
        </div>
        <div style={{ display: 'flex', gap: 10, justifyContent: 'center' }}>
          <a href="panelim.html" className="is-btn is-btn-primary" style={{ padding: '12px 22px', textDecoration: 'none' }}>
            {lang === 'tr' ? 'Panelime Git' : 'Go to Dashboard'} <Icon name="arrow-right" size={14}/>
          </a>
          <a href="index.html" className="is-btn is-btn-outline" style={{ padding: '12px 22px', textDecoration: 'none' }}>
            {lang === 'tr' ? 'Ana Sayfa' : 'Home'}
          </a>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Mobile version — same wizard, single column
// ─────────────────────────────────────────────────────────────
function SellerWizardMobile({ L, lang, theme }) {
  const [step, setStep] = _slS(1);
  const [draft, setDraft] = _slS(() => loadJson(SELLER_DRAFT_KEY, initialDraft()));
  const [submitted, setSubmitted] = _slS(false);
  const [touched, setTouched] = _slS(false);

  _slE(() => { saveJson(SELLER_DRAFT_KEY, draft); }, [draft]);
  const set = (k, v) => { setTouched(true); setDraft(d => ({ ...d, [k]: v })); };
  const errors = validate(draft, step);
  const showErrors = touched;
  const canNext = Object.keys(errors).length === 0;

  const submit = async () => {
    if (window.api && window.api.isLoggedIn()) {
      try {
        await window.api.listings.create({
          username: (draft.handle || '').replace(/^@/, ''),
          category: draft.niche || 'lifestyle',
          niche: draft.niche || null,
          followers: parseInt(draft.followers) || 0,
          engagement: parseFloat(draft.er) || null,
          country: draft.country || 'TR',
          account_age_months: parseInt(draft.age) || null,
          is_aged: (parseInt(draft.age) || 0) >= 24,
          description: draft.description || '',
          price: parseInt(draft.price) || 0,
          gallery: draft.images || [],
          proof_images: draft.proofs || [],
          tags: draft.tags || [],
        });
        saveJson(SELLER_DRAFT_KEY, initialDraft());
        setSubmitted(true);
        return;
      } catch (e) {
        if (e.status === 401) { window.location.href = 'giris.html'; return; }
        alert('Hata: ' + e.message);
      }
    }
    const pending = loadJson(SELLER_PENDING_KEY, []);
    const id = 'pl_' + Date.now().toString(36);
    const item = { id, ...draft, status: 'pending', submittedAt: new Date().toISOString() };
    saveJson(SELLER_PENDING_KEY, [item, ...pending]);
    saveJson(SELLER_DRAFT_KEY, initialDraft());
    setSubmitted(true);
  };

  if (submitted) return <SellerSuccess L={L} lang={lang} draft={draft}/>;

  const pct = (step / 4) * 100;

  return (
    <div data-screen-label="13 İlan Oluşturma (Mobil)" style={{ minHeight: '100vh', background: 'var(--bg)', paddingBottom: 100 }}>
      {/* Sticky header w/ progress */}
      <div style={{
        position: 'sticky', top: 0, zIndex: 30,
        background: 'color-mix(in oklab, var(--bg) 92%, transparent)',
        backdropFilter: 'blur(12px)', borderBottom: '1px solid var(--line-2)',
        padding: '14px 16px',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <a href="index.html" style={{ color: 'var(--ink-2)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 13 }}>
            <Icon name="chevron-left" size={16}/> {lang === 'tr' ? 'İptal' : 'Cancel'}
          </a>
          <div style={{ flex: 1, fontWeight: 700, textAlign: 'center', fontSize: 14 }}>
            {lang === 'tr' ? 'İlan Ver' : 'List Account'} <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--ink-3)', fontSize: 11 }}>{step}/4</span>
          </div>
          <div style={{ width: 56 }}/>
        </div>
        <div style={{ marginTop: 12, height: 4, borderRadius: 2, background: 'var(--chip)', overflow: 'hidden' }}>
          <div style={{ width: `${pct}%`, height: '100%', background: 'linear-gradient(90deg, var(--g1), var(--g2))', transition: 'width .3s' }}/>
        </div>
      </div>

      <div style={{ padding: '20px 16px' }}>
        {step === 1 && <StepAbout draft={draft} set={set} lang={lang} errors={showErrors ? errors : {}}/>}
        {step === 2 && <StepMetrics draft={draft} set={set} lang={lang} errors={showErrors ? errors : {}}/>}
        {step === 3 && <StepPrice draft={draft} set={set} lang={lang} errors={showErrors ? errors : {}}/>}
        {step === 4 && <StepReview draft={draft} lang={lang} L={L}/>}
      </div>

      {/* Sticky footer */}
      <div style={{
        position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 30,
        background: 'var(--bg)', borderTop: '1px solid var(--line-2)',
        padding: '12px 16px', display: 'flex', gap: 10,
      }}>
        {step > 1 && (
          <button className="is-btn is-btn-outline" onClick={() => setStep(s => s - 1)} style={{ flex: 1, padding: 14 }}>
            {lang === 'tr' ? 'Geri' : 'Back'}
          </button>
        )}
        {step < 4 ? (
          <button className="is-btn is-btn-primary" disabled={!canNext} onClick={() => setStep(s => s + 1)}
                  style={{ flex: 2, padding: 14, opacity: canNext ? 1 : 0.4 }}>
            {lang === 'tr' ? 'Devam' : 'Continue'} <Icon name="arrow-right" size={14}/>
          </button>
        ) : (
          <button className="is-btn is-btn-primary" onClick={submit} style={{ flex: 2, padding: 14, background: 'var(--g1)' }}>
            <Icon name="check" size={14}/> {lang === 'tr' ? 'Yayına Gönder' : 'Submit'}
          </button>
        )}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Helpers — reusable form atoms
// ─────────────────────────────────────────────────────────────
function SectionHead({ n, tr, en, lang, sub }) {
  return (
    <div>
      <div className="is-kicker" style={{ color: 'var(--ink-3)' }}>{lang === 'tr' ? `ADIM ${n}` : `STEP ${n}`}</div>
      <h2 style={{ fontSize: 22, margin: '4px 0 4px', fontFamily: 'var(--font-display)' }}>
        {lang === 'tr' ? tr : en}
      </h2>
      {sub && <div style={{ color: 'var(--ink-3)', fontSize: 13.5 }}>{sub}</div>}
    </div>
  );
}

function Field({ label, hint, error, children }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <div style={{ fontWeight: 600, fontSize: 13, color: 'var(--ink-2)' }}>{label}</div>
      {children}
      {error && <div style={{ fontSize: 11.5, color: 'var(--danger)', fontFamily: 'var(--font-mono)' }}>⚠ {error}</div>}
      {hint && !error && <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{hint}</div>}
    </label>
  );
}

function NumberInput({ label, value, onChange, min, max, step, format, error }) {
  const display = format === 'pct' ? `${Number(value).toFixed(1)}%`
                : format === 'price' ? fmtPrice(value, '₺')
                : fmtNum(value);
  return (
    <Field label={label} error={error}>
      <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
        <input type="range" min={min} max={max} step={step} value={value}
               onChange={e => onChange(format === 'pct' ? parseFloat(e.target.value) : parseInt(e.target.value))}
               style={{ flex: 1, accentColor: 'var(--accent)' }}/>
        <div style={{
          minWidth: 110, padding: '8px 12px', borderRadius: 10,
          background: 'var(--chip)', textAlign: 'right',
          fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 14,
        }}>{display}</div>
      </div>
    </Field>
  );
}

function CheckRow({ checked, onChange, label, hint }) {
  return (
    <label style={{
      display: 'flex', alignItems: 'flex-start', gap: 12, cursor: 'pointer',
      padding: 14, borderRadius: 12, border: '1px solid var(--line-2)',
      background: checked ? 'color-mix(in oklab, var(--g1) 8%, transparent)' : 'transparent',
      borderColor: checked ? 'color-mix(in oklab, var(--g1) 40%, var(--line-2))' : 'var(--line-2)',
      transition: 'all .15s',
    }}>
      <div style={{
        width: 20, height: 20, borderRadius: 6, flexShrink: 0,
        background: checked ? 'var(--g1)' : 'transparent',
        border: '2px solid ' + (checked ? 'var(--g1)' : 'var(--line)'),
        display: 'grid', placeItems: 'center', color: '#fff',
        marginTop: 1,
      }}>{checked && <Icon name="check" size={12} strokeWidth={3} color="#fff"/>}</div>
      <div>
        <div style={{ fontWeight: 600, fontSize: 13.5 }}>{label}</div>
        {hint && <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>{hint}</div>}
      </div>
      <input type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)} style={{ display: 'none' }}/>
    </label>
  );
}

function MiniMetric({ label, value }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)', textTransform: 'uppercase' }}>{label}</div>
      <div style={{ fontWeight: 700, fontSize: 14 }}>{value}</div>
    </div>
  );
}

function Pair({ label, value, accent }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: 0.5 }}>{label}</div>
      <div style={{ fontWeight: 600, fontSize: 14, marginTop: 2, color: accent ? 'var(--g1)' : 'var(--ink)' }}>{value}</div>
    </div>
  );
}

function Money({ label, value, bold, muted, accent }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)', textTransform: 'uppercase' }}>{label}</div>
      <div style={{
        fontWeight: bold || accent ? 700 : 500,
        fontSize: bold || accent ? 18 : 15,
        color: accent ? 'var(--g1)' : muted ? 'var(--ink-3)' : 'var(--ink)',
      }}>{value < 0 ? '−' : ''}{fmtPrice(Math.abs(value), '₺')}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Validation
// ─────────────────────────────────────────────────────────────
function validate(d, step) {
  const e = {};
  if (step >= 1) {
    if (!d.username || d.username.length < 3) e.username = 'Kullanıcı adı en az 3 karakter olmalı.';
  }
  if (step >= 2) {
    if (!d.followers || d.followers < 100) e.followers = 'Takipçi en az 100 olmalı.';
  }
  if (step >= 3) {
    if (!d.price || d.price < 50) e.price = 'Fiyat en az 50 ₺ olmalı.';
  }
  return e;
}

Object.assign(window, { SellerWizard, SellerWizardMobile });