// extras2.jsx — Hesap Devir Wizard + Karşılaştırma Modu + Arama Sonuçları + Hukuki sayfa
const { useState: _x2S, useEffect: _x2E, useMemo: _x2M } = React;

// ═══════════════════════════════════════════════════════════════
// 1) HESAP DEVİR / ŞİFRE DEĞİŞTİRME WIZARD
// ═══════════════════════════════════════════════════════════════
function TransferWizard({ L, lang, theme, listing }) {
  const [step, setStep] = _x2S(2);
  const steps = lang === 'tr'
    ? ['Giriş yap', 'E-postayı değiştir', 'Şifreyi değiştir', '2FA kur', 'Tamamla']
    : ['Log in', 'Change email', 'Change password', 'Set up 2FA', 'Finish'];
  return (
    <ScreenFrame theme={theme} width="100%" height="100%">
      <div data-screen-label="09 Hesap Devir Wizard (Desktop)" style={{ minHeight: '100%', background: 'var(--bg)' }}>
        <TopNav L={L} lang={lang}/>
        <div style={{ maxWidth: 1000, margin: '0 auto', padding: '32px' }}>
          <div className="is-kicker" style={{ color: 'var(--accent)' }}>{lang === 'tr' ? 'TESLİMAT · ADIM 3/5' : 'DELIVERY · STEP 3/5'}</div>
          <h1 className="is-h1" style={{ fontSize: 40, margin: '10px 0 20px' }}>
            {lang === 'tr' ? <>Hesabı <span className="is-grad-text">güvene al</span></> : <>Secure your <span className="is-grad-text">account</span></>}
          </h1>
          {/* Stepper */}
          <div style={{ display: 'flex', gap: 8, marginBottom: 28 }}>
            {steps.map((s, i) => (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
                <div style={{ height: 4, borderRadius: 4, background: i <= step ? 'var(--grad)' : 'var(--chip)' }}/>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <div style={{ width: 20, height: 20, borderRadius: '50%', background: i < step ? 'var(--success)' : i === step ? 'var(--grad)' : 'var(--chip)', display: 'grid', placeItems: 'center', color: i <= step ? '#fff' : 'var(--ink-3)', fontSize: 10, fontWeight: 700 }}>
                    {i < step ? <Icon name="check" size={10} color="#fff" strokeWidth={3}/> : i + 1}
                  </div>
                  <span style={{ fontSize: 12, color: i === step ? 'var(--ink)' : 'var(--ink-3)', fontWeight: i === step ? 600 : 500 }}>{s}</span>
                </div>
              </div>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 20 }}>
            {/* Main */}
            <div className="is-card" style={{ padding: 32 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
                <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--grad)', display: 'grid', placeItems: 'center', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 800 }}>3</div>
                <div>
                  <div className="is-h2" style={{ fontSize: 22 }}>{lang === 'tr' ? 'Yeni şifre oluştur' : 'Create new password'}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 2 }}>{lang === 'tr' ? 'Kendi seçtiğin güçlü bir şifre kullan. En az 14 karakter, semboller dahil.' : 'Strong password, min 14 chars with symbols.'}</div>
                </div>
              </div>
              <div className="is-kicker" style={{ marginBottom: 6 }}>{lang === 'tr' ? 'Mevcut şifre' : 'Current password'}</div>
              <input className="is-input" defaultValue="K7!vm...aLpZ" type="password" readOnly style={{ marginBottom: 14 }}/>
              <div className="is-kicker" style={{ marginBottom: 6 }}>{lang === 'tr' ? 'Yeni şifre' : 'New password'}</div>
              <input className="is-input" placeholder="••••••••••••••" style={{ marginBottom: 10 }}/>
              {/* Strength */}
              <div style={{ display: 'flex', gap: 4, marginBottom: 6 }}>
                {[1,2,3,4].map(i => <div key={i} style={{ flex: 1, height: 4, borderRadius: 4, background: i <= 3 ? 'var(--success)' : 'var(--chip)' }}/>)}
              </div>
              <div style={{ fontSize: 11, color: 'var(--success)', fontFamily: 'var(--font-mono)' }}>{lang === 'tr' ? '● güçlü' : '● strong'}</div>
              <div className="is-kicker" style={{ marginTop: 16, marginBottom: 6 }}>{lang === 'tr' ? 'Tekrar yaz' : 'Confirm'}</div>
              <input className="is-input" placeholder="••••••••••••••"/>
              <div style={{ display: 'flex', gap: 8, marginTop: 22 }}>
                <button className="is-btn is-btn-ghost" onClick={() => setStep(Math.max(0, step - 1))} style={{ flex: 1, justifyContent: 'center' }}>{lang === 'tr' ? 'Geri' : 'Back'}</button>
                <button className="is-btn is-btn-primary" onClick={() => setStep(Math.min(4, step + 1))} style={{ flex: 2, justifyContent: 'center' }}>{lang === 'tr' ? 'Devam et' : 'Continue'} <Icon name="arrow-right" size={14}/></button>
              </div>
            </div>

            {/* Side — checklist + tip */}
            <aside style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div className="is-card" style={{ padding: 20 }}>
                <div className="is-kicker" style={{ marginBottom: 10 }}>{lang === 'tr' ? 'İpuçları' : 'Tips'}</div>
                {[
                  lang === 'tr' ? 'Şifre yöneticisi kullan (1Password, Bitwarden)' : 'Use a password manager',
                  lang === 'tr' ? 'Eski şifreleri tekrar kullanma' : 'Don\'t reuse old passwords',
                  lang === 'tr' ? 'Hesabı değiştirdikten sonra e-postanı da al' : 'Transfer the email too',
                ].map((t, i) => (
                  <div key={i} style={{ display: 'flex', gap: 8, padding: '8px 0', fontSize: 13, color: 'var(--ink-2)' }}>
                    <Icon name="check" size={14} color="var(--success)"/> {t}
                  </div>
                ))}
              </div>
              <div className="is-card" style={{ padding: 20, background: 'linear-gradient(135deg, color-mix(in oklab, var(--g1) 18%, var(--card)), var(--card))' }}>
                <Icon name="shield" size={18} color="var(--accent)"/>
                <div className="is-h2" style={{ fontSize: 15, marginTop: 8 }}>{lang === 'tr' ? 'İade garantin devam ediyor' : 'Refund still valid'}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4, fontFamily: 'var(--font-mono)' }}>{lang === 'tr' ? '7 gün · kalan: 6 gün 23 sa' : '7 days · 6d 23h left'}</div>
              </div>
            </aside>
          </div>
        </div>
      </div>
    </ScreenFrame>
  );
}

// ═══════════════════════════════════════════════════════════════
// 2) KARŞILAŞTIRMA MODU — novel UX
// ═══════════════════════════════════════════════════════════════
function CompareScreen({ L, lang, theme }) {
  const picks = [LISTINGS[0], LISTINGS[3], LISTINGS[6]];
  const metrics = [
    { k: 'followers', label: lang === 'tr' ? 'Takipçi' : 'Followers', fmt: (v) => fmtNum(v), raw: (l) => l.followers },
    { k: 'age', label: lang === 'tr' ? 'Hesap yaşı' : 'Account age', fmt: (v) => fmtAge(v, lang, L), raw: (l) => l.age },
    { k: 'er', label: 'ER', fmt: (v) => `%${v.toFixed(1)}`, raw: (l) => l.er },
    { k: 'price', label: lang === 'tr' ? 'Fiyat' : 'Price', fmt: (v) => fmtPrice(v, lang), raw: (l) => l.price, lowerBetter: true },
    { k: 'verified', label: lang === 'tr' ? 'Mavi tik' : 'Verified', fmt: (v) => v ? '✓' : '—', raw: (l) => l.verified },
  ];
  const winner = (m, val) => {
    const vals = picks.map(m.raw);
    const best = m.lowerBetter ? Math.min(...vals) : Math.max(...vals);
    return val === best;
  };
  return (
    <ScreenFrame theme={theme} width="100%" height="100%">
      <div data-screen-label="10 Karşılaştırma Modu (Desktop)" style={{ minHeight: '100%', background: 'var(--bg)' }}>
        <TopNav L={L} lang={lang}/>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '32px' }}>
          <div className="is-kicker" style={{ color: 'var(--accent)' }}>{lang === 'tr' ? 'YENİLİK · YAN YANA' : 'NEW · SIDE BY SIDE'}</div>
          <h1 className="is-h1" style={{ fontSize: 44, margin: '10px 0 24px' }}>
            {lang === 'tr' ? <>Hangisi <span className="is-grad-text">senin için</span>?</> : <>Which one <span className="is-grad-text">fits you</span>?</>}
          </h1>

          <div style={{ display: 'grid', gridTemplateColumns: '200px repeat(3, 1fr)', gap: 2, background: 'var(--line-2)', borderRadius: 20, overflow: 'hidden' }}>
            {/* Header row */}
            <div style={{ background: 'var(--card)', padding: '20px 16px' }}/>
            {picks.map(l => (
              <div key={l.id} style={{ background: 'var(--card)', padding: 20, textAlign: 'center' }}>
                <div style={{ margin: '0 auto', width: 80 }}><PostGrid handle={l.handle} postsStyle={l.postsStyle} cols={3} rows={3} gap={2} radius={4}/></div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, marginTop: 10 }}>{l.handle}</div>
                <div className="is-kicker" style={{ fontSize: 10, marginTop: 2 }}>{L[`niche_${l.niche}`]}</div>
              </div>
            ))}
            {/* Metrics rows */}
            {metrics.map(m => (
              <React.Fragment key={m.k}>
                <div style={{ background: 'var(--card)', padding: '16px 20px', display: 'flex', alignItems: 'center', fontSize: 13, color: 'var(--ink-3)', fontWeight: 500 }}>{m.label}</div>
                {picks.map(l => {
                  const v = m.raw(l);
                  const win = winner(m, v);
                  return (
                    <div key={l.id} style={{ background: 'var(--card)', padding: 16, textAlign: 'center', position: 'relative' }}>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: win ? 'transparent' : 'var(--ink)', background: win ? 'var(--grad)' : 'none', WebkitBackgroundClip: win ? 'text' : 'initial', backgroundClip: win ? 'text' : 'initial' }}>
                        {m.fmt(v)}
                      </div>
                      {win && <div style={{ position: 'absolute', top: 8, right: 8, fontSize: 9, fontFamily: 'var(--font-mono)', color: 'var(--success)', fontWeight: 700 }}>★ BEST</div>}
                    </div>
                  );
                })}
              </React.Fragment>
            ))}
            {/* CTA row */}
            <div style={{ background: 'var(--card)', padding: 20 }}/>
            {picks.map(l => (
              <div key={l.id} style={{ background: 'var(--card)', padding: 20, textAlign: 'center' }}>
                <button className="is-btn is-btn-primary" style={{ width: '100%', justifyContent: 'center', padding: 12 }}>{L.card_buy}</button>
              </div>
            ))}
          </div>

          {/* Radar suggestion */}
          <div className="is-card" style={{ marginTop: 22, padding: 22, display: 'flex', gap: 20, alignItems: 'center' }}>
            <Icon name="sparkle" size={24} color="var(--accent)"/>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17 }}>{lang === 'tr' ? 'AI önerisi' : 'AI suggestion'}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 4 }}>
                {lang === 'tr' ? <><b>@byte.daily</b> yaşı ve takipçisiyle en sağlam yatırım — ama ER en yüksek olan <b>@gigglesnap</b> (%7.9) hızlı büyüme istiyorsan daha iyi.</>
                               : <><b>@byte.daily</b> is the safest bet; <b>@gigglesnap</b> has the highest ER (7.9%) for fast growth.</>}
              </div>
            </div>
          </div>
        </div>
      </div>
    </ScreenFrame>
  );
}

// ═══════════════════════════════════════════════════════════════
// 3) ARAMA SONUÇLARI — gelişmiş filtre + chip bar
// ═══════════════════════════════════════════════════════════════
function SearchResults({ L, lang, theme }) {
  // URL'den q oku
  const initialQ = (typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('q')) || '@city';
  const [q, setQ] = _x2S(initialQ);
  const [showSuggest, setShowSuggest] = _x2S(false);
  const inputRef = React.useRef(null);

  // URL'i güncelle
  _x2E(() => {
    if (typeof window === 'undefined') return;
    const params = new URLSearchParams(window.location.search);
    if (q) params.set('q', q); else params.delete('q');
    window.history.replaceState({}, '', window.location.pathname + (params.toString() ? '?' + params.toString() : ''));
  }, [q]);

  const hits = LISTINGS.filter(l => l.handle.toLowerCase().includes(q.toLowerCase().replace('@','')) || q.length < 2);

  // Autocomplete önerileri (handle + niche önerileri)
  const suggestions = _x2M(() => {
    if (q.length < 1) return [];
    const term = q.toLowerCase().replace('@','');
    const handleHits = LISTINGS.filter(l => l.handle.toLowerCase().includes(term)).slice(0, 5);
    const niches = ['travel','fashion','food','tech','beauty','fitness','lifestyle']
      .filter(n => n.includes(term) && term.length >= 2);
    return { handles: handleHits, niches };
  }, [q]);
  const totalSuggest = (suggestions.handles?.length || 0) + (suggestions.niches?.length || 0);

  return (
    <ScreenFrame theme={theme} width="100%" height="100%">
      <div data-screen-label="11 Arama Sonuçları (Desktop)" style={{ minHeight: '100%', background: 'var(--bg)' }}>
        <TopNav L={L} lang={lang}/>
        {/* Search hero */}
        <div style={{ padding: '32px', background: 'radial-gradient(800px 300px at 20% 0%, color-mix(in oklab, var(--g2) 15%, transparent), transparent)' }}>
          <div style={{ maxWidth: 1100, margin: '0 auto' }}>
            <div style={{ position: 'relative', maxWidth: 680 }}>
              <input ref={inputRef} className="is-input" value={q}
                     onChange={e => { setQ(e.target.value); setShowSuggest(true); }}
                     onFocus={() => setShowSuggest(true)}
                     onBlur={() => setTimeout(() => setShowSuggest(false), 200)}
                     placeholder={lang === 'tr' ? 'Hesap ara: @kullanıcı, kategori, takipçi sayısı...' : 'Search: @username, category, follower count...'}
                     style={{ paddingLeft: 48, fontSize: 17, padding: '16px 20px 16px 48px' }}/>
              <div style={{ position: 'absolute', left: 18, top: '50%', transform: 'translateY(-50%)' }}><Icon name="search" size={20} color="var(--ink-3)"/></div>

              {/* Autocomplete dropdown */}
              {showSuggest && q.length > 0 && totalSuggest > 0 && (
                <div style={{
                  position: 'absolute', top: 'calc(100% + 6px)', left: 0, right: 0,
                  background: 'var(--card)', borderRadius: 12,
                  border: '1px solid var(--line-2)',
                  boxShadow: '0 12px 40px rgba(0,0,0,0.12)',
                  zIndex: 50, overflow: 'hidden',
                }}>
                  {suggestions.niches?.length > 0 && (
                    <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--line-2)' }}>
                      <div style={{ fontSize: 10, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '.08em', marginBottom: 8 }}>
                        {lang === 'tr' ? 'Kategoriler' : 'Categories'}
                      </div>
                      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                        {suggestions.niches.map(n => (
                          <span key={n} onMouseDown={() => { setQ(n); setShowSuggest(false); }}
                                className="is-chip" style={{ cursor: 'pointer' }}>
                            <Icon name="tag" size={11}/> {n}
                          </span>
                        ))}
                      </div>
                    </div>
                  )}
                  {suggestions.handles?.length > 0 && (
                    <div>
                      <div style={{ padding: '10px 14px 6px', fontSize: 10, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '.08em' }}>
                        {lang === 'tr' ? 'Hesaplar' : 'Accounts'}
                      </div>
                      {suggestions.handles.map(l => (
                        <a key={l.id} href={`ilan.html?id=${l.id}`}
                           onMouseDown={(e) => { e.preventDefault(); window.location.href = `ilan.html?id=${l.id}`; }}
                           style={{
                             display: 'flex', alignItems: 'center', gap: 12,
                             padding: '10px 14px', textDecoration: 'none', color: 'inherit',
                             borderTop: '1px solid var(--line-2)',
                           }}>
                          <Avatar handle={l.handle} postsStyle={l.postsStyle} size={32}/>
                          <div style={{ flex: 1, minWidth: 0 }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                              <span style={{ fontWeight: 600, fontSize: 13 }}>{l.handle}</span>
                              {l.verified && <Icon name="verified" size={12} color="var(--accent)"/>}
                            </div>
                            <div style={{ fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>
                              {fmtNum(l.followers)} · {l.niche} · {fmtPrice(l.price, lang)}
                            </div>
                          </div>
                          <Icon name="chevron-right" size={14} color="var(--ink-3)"/>
                        </a>
                      ))}
                    </div>
                  )}
                </div>
              )}
            </div>
            <div style={{ display: 'flex', gap: 8, marginTop: 14, flexWrap: 'wrap' }}>
              {[lang === 'tr' ? 'Aged 3+ yıl' : 'Aged 3+', '50K–100K', L.niche_travel, L.niche_tech, `< 20K ₺`].map((c, i) => (
                <span key={i} className="is-chip" style={{ background: i === 0 ? 'var(--grad)' : 'var(--chip)', color: i === 0 ? '#fff' : 'var(--ink-2)', padding: '8px 14px', fontSize: 12 }}>
                  {c} <Icon name="x" size={10} color={i === 0 ? '#fff' : 'var(--ink-3)'}/>
                </span>
              ))}
              <span style={{ fontSize: 12, color: 'var(--ink-3)', alignSelf: 'center', marginLeft: 6 }}>· {hits.length} {lang === 'tr' ? 'sonuç' : 'results'}</span>
            </div>
          </div>
        </div>
        {/* Grid */}
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '24px 32px 60px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {hits.map(l => <ListingCard key={l.id} listing={l} L={L} lang={lang} layout="grid" isFav={false} onToggleFav={() => {}} onView={() => window.location.href = `ilan.html?id=${l.id}`}/>)}
        </div>
      </div>
    </ScreenFrame>
  );
}

// ═══════════════════════════════════════════════════════════════
// 4) HUKUKI — KVKK / Mesafeli Satış / Ön Bilgilendirme
// ═══════════════════════════════════════════════════════════════
function LegalPage({ L, lang, theme, initialTab }) {
  const [tab, setTab] = _x2S(initialTab || 'kvkk');
  const tabs = [
    { k: 'kvkk', label: 'KVKK' },
    { k: 'sale', label: lang === 'tr' ? 'Mesafeli Satış' : 'Distance Sales' },
    { k: 'prior', label: lang === 'tr' ? 'Ön Bilgilendirme' : 'Pre-info' },
    { k: 'terms', label: lang === 'tr' ? 'Kullanım Koşulları' : 'Terms' },
  ];
  return (
    <ScreenFrame theme={theme} width="100%" height="100%">
      <div data-screen-label="12 Hukuki Sayfalar (Desktop)" style={{ minHeight: '100%', background: 'var(--bg)' }}>
        <TopNav L={L} lang={lang}/>
        <div style={{ maxWidth: 900, margin: '0 auto', padding: '32px' }}>
          <div className="is-kicker">{lang === 'tr' ? 'HUKUKİ METİNLER' : 'LEGAL'}</div>
          <h1 className="is-h1" style={{ fontSize: 40, margin: '10px 0 18px' }}>{lang === 'tr' ? 'Sözleşmeler ve aydınlatma' : 'Contracts & notices'}</h1>
          <div style={{ display: 'flex', gap: 6, borderBottom: '1px solid var(--line-2)', marginBottom: 24 }}>
            {tabs.map(t => (
              <button key={t.k} onClick={() => setTab(t.k)} style={{
                padding: '12px 16px', border: 0, background: 'transparent', cursor: 'pointer',
                borderBottom: tab === t.k ? '2px solid var(--accent)' : '2px solid transparent',
                color: tab === t.k ? 'var(--ink)' : 'var(--ink-3)', fontWeight: tab === t.k ? 700 : 500, fontSize: 14,
              }}>{t.label}</button>
            ))}
          </div>
          <article style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.7 }}>
            {tab === 'kvkk' && (
              <>
                <h2 className="is-h2" style={{ fontSize: 22, color: 'var(--ink)' }}>6698 Sayılı KVKK Aydınlatma Metni</h2>
                <p><b style={{ color: 'var(--ink)' }}>Veri Sorumlusu:</b> OKxProject Yazılım A.Ş. — Maslak, İstanbul. instasatis.com üzerinden topladığımız kişisel veriler: ad-soyad, e-posta, telefon, IBAN bilgisi, fatura adresi, ödeme kayıtları ve site kullanım verileri.</p>
                <p style={{ marginTop: 12 }}><b style={{ color: 'var(--ink)' }}>İşleme amaçları:</b> sipariş oluşturma, ödeme alma, hesap teslim etme, fatura düzenleme, iletişim, yasal yükümlülüklerin yerine getirilmesi.</p>
                <p style={{ marginTop: 12 }}><b style={{ color: 'var(--ink)' }}>Haklarınız:</b> verilerinize erişme, düzeltme, silme, itiraz etme hakkınız vardır. Başvuru: <a style={{ color: 'var(--accent)' }}>kvkk@instasatis.com</a></p>
              </>
            )}
            {tab === 'sale' && (
              <>
                <h2 className="is-h2" style={{ fontSize: 22, color: 'var(--ink)' }}>Mesafeli Satış Sözleşmesi</h2>
                <p><b style={{ color: 'var(--ink)' }}>Madde 1 — Taraflar.</b> Satıcı: OKxProject Yazılım A.Ş. (bundan sonra "SATICI"). Alıcı: siparişi oluşturan kullanıcı (bundan sonra "ALICI").</p>
                <p style={{ marginTop: 12 }}><b style={{ color: 'var(--ink)' }}>Madde 2 — Konu.</b> ALICI'nın instasatis.com üzerinden elektronik ortamda sipariş verdiği Instagram hesap erişim bilgilerinin SATICI tarafından ALICI'ya teslim edilmesi.</p>
                <p style={{ marginTop: 12 }}><b style={{ color: 'var(--ink)' }}>Madde 3 — Cayma Hakkı.</b> ALICI, teslimden itibaren 7 gün içinde iade talep edebilir. İadede hesap erişiminin SATICI'ya devredilmemiş olması şarttır.</p>
              </>
            )}
            {tab === 'prior' && (
              <>
                <h2 className="is-h2" style={{ fontSize: 22, color: 'var(--ink)' }}>Ön Bilgilendirme Formu</h2>
                <p>Bu form, 6502 Sayılı Tüketicinin Korunması Hakkında Kanun ve Mesafeli Sözleşmeler Yönetmeliği uyarınca ALICI'yı bilgilendirme amacıyla düzenlenmiştir.</p>
                <p style={{ marginTop: 12 }}><b style={{ color: 'var(--ink)' }}>Ürün:</b> Dijital hizmet / Instagram hesap erişim bilgileri. <b style={{ color: 'var(--ink)' }}>Teslim süresi:</b> ödeme onayından itibaren ortalama 10 dk.</p>
              </>
            )}
            {tab === 'terms' && (
              <>
                <h2 className="is-h2" style={{ fontSize: 22, color: 'var(--ink)' }}>Kullanım Koşulları</h2>
                <p>instasatis.com'u kullanarak bu koşulları kabul etmiş sayılırsınız. Site üzerinden satışa sunulan tüm hesaplar OKxProject Yazılım A.Ş. envanterindedir. Üçüncü taraf satıcı yoktur.</p>
              </>
            )}
          </article>
        </div>
      </div>
    </ScreenFrame>
  );
}

// ═══════════════════════════════════════════════════════════════
// CATEGORY PAGE — /kategori.html?slug=seyahat
// SEO-optimized landing for each niche; auto-pulls matching listings.
// ═══════════════════════════════════════════════════════════════
const CATEGORY_META = {
  travel:    { tr: { name: 'Seyahat', slug: 'seyahat',    h1: 'Seyahat temalı Instagram hesapları', intro: 'Wanderlust kitlesine hitap eden, gezi fotoğrafları ve rota önerileriyle büyümüş hesaplar. Turizm acenteleri, otel zincirleri ve seyahat içerik üreticileri için ideal.', keywords: 'seyahat instagram hesabı satın al, gezgin hesap, travel page satışı' },                            en: { name: 'Travel', slug: 'travel', h1: 'Travel Instagram accounts', intro: 'Pages built around wanderlust — photo journals, route guides, and destination round-ups. Perfect for travel agencies, hotels, and content creators.', keywords: 'buy travel instagram account, travel page for sale' } },
  food:      { tr: { name: 'Yemek',   slug: 'yemek',      h1: 'Yemek ve mutfak hesapları', intro: 'Tarif videoları, restoran rehberleri ve sokak lezzetleri. Restoran sahipleri, yemek markaları ve mutfak içerik üreticileri için.', keywords: 'yemek instagram hesabı, food page satın al, tarif sayfası' },                                                                                          en: { name: 'Food',   slug: 'food',   h1: 'Food & cooking pages', intro: 'Recipe reels, restaurant guides, street-food round-ups. For restaurants, food brands, and culinary creators.', keywords: 'buy food instagram, recipe page' } },
  fashion:   { tr: { name: 'Moda',    slug: 'moda',       h1: 'Moda ve stil hesapları', intro: 'Outfit ilhamı, sezon trendleri ve marka iş birlikleri. Butikler, e-ticaret markaları ve stil içerik üreticileri için.', keywords: 'moda instagram hesabı, fashion sayfa, butik hesap' },                                                                                                                  en: { name: 'Fashion',slug: 'fashion',h1: 'Fashion & style pages', intro: 'Outfit inspo, seasonal trends, brand collabs. For boutiques, e-com brands, and stylists.', keywords: 'fashion instagram for sale' } },
  meme:      { tr: { name: 'Mizah',   slug: 'mizah',      h1: 'Mizah ve meme hesapları', intro: 'Yüksek viralite, organik paylaşım ve kuvvetli kitle bağı. Hızlı erişim isteyen markalar ve içerik üreticileri için.', keywords: 'mizah hesabı satın al, meme sayfası, komedi instagram' },                                                                                                            en: { name: 'Memes',  slug: 'memes',  h1: 'Meme & humor pages', intro: 'High virality, strong organic shares.', keywords: 'meme page for sale' } },
  sport:     { tr: { name: 'Spor',    slug: 'spor',       h1: 'Spor ve takım hesapları', intro: 'Maç özetleri, takım fanlık sayfaları, fitness motivasyonu. Spor markaları ve bahis dışı dijital projeler için.', keywords: 'spor instagram hesabı, takım sayfası satın al' },                                                                                                                            en: { name: 'Sports', slug: 'sports', h1: 'Sports pages', intro: 'Match recaps, team fan pages, fitness motivation.', keywords: 'sports instagram for sale' } },
  tech:      { tr: { name: 'Teknoloji', slug: 'teknoloji',h1: 'Teknoloji hesapları', intro: 'Cihaz incelemeleri, yazılım haberleri, gadget review. SaaS, e-ticaret elektronik ve tech medya için.', keywords: 'teknoloji instagram, tech page, gadget hesabı' },                                                                                                                                              en: { name: 'Tech',   slug: 'tech',   h1: 'Tech pages', intro: 'Device reviews, software news, gadget round-ups.', keywords: 'tech instagram for sale' } },
  art:       { tr: { name: 'Sanat',   slug: 'sanat',      h1: 'Sanat ve illüstrasyon hesapları', intro: 'Dijital sanat, illüstrasyon, fotoğrafçılık. Galeri ve sanatçı portfolyoları için.', keywords: 'sanat instagram hesabı, illüstrasyon sayfası' },                                                                                                                                                       en: { name: 'Art',    slug: 'art',    h1: 'Art & illustration', intro: 'Digital art, illustration, photography.', keywords: 'art instagram for sale' } },
  lifestyle: { tr: { name: 'Yaşam',   slug: 'yasam',      h1: 'Yaşam tarzı hesapları', intro: 'Günlük rutinler, dekorasyon, vlog içerikleri. Yaşam tarzı markaları için yüksek dönüşüm.', keywords: 'yaşam instagram hesabı, lifestyle sayfa' },                                                                                                                                                              en: { name: 'Lifestyle', slug: 'lifestyle', h1: 'Lifestyle pages', intro: 'Daily routines, decor, vlog content.', keywords: 'lifestyle instagram for sale' } },
  music:     { tr: { name: 'Müzik',   slug: 'muzik',      h1: 'Müzik hesapları', intro: 'Klip paylaşımları, sanatçı fan sayfaları, playlist hesapları. Müzik prodüksiyon ve plak şirketleri için.', keywords: 'müzik instagram hesabı, sanatçı sayfası' },                                                                                                                                                  en: { name: 'Music',  slug: 'music',  h1: 'Music pages', intro: 'Clip shares, artist fan pages, playlist accounts.', keywords: 'music instagram for sale' } },
  beauty:    { tr: { name: 'Güzellik', slug: 'guzellik',  h1: 'Güzellik ve makyaj hesapları', intro: 'Makyaj eğitimleri, cilt bakım rutinleri, ürün incelemeleri. Kozmetik markaları için yüksek ROAS.', keywords: 'güzellik instagram, makyaj sayfası, kozmetik hesabı' },                                                                                                                                  en: { name: 'Beauty', slug: 'beauty', h1: 'Beauty pages', intro: 'Makeup tutorials, skincare routines, product reviews.', keywords: 'beauty instagram for sale' } },
  fitness:   { tr: { name: 'Fitness', slug: 'fitness',    h1: 'Fitness ve sağlık hesapları', intro: 'Antrenman rutinleri, beslenme ipuçları, motivasyon. Spor salonu ve sağlık markaları için.', keywords: 'fitness instagram hesabı, antrenman sayfası' },                                                                                                                                                 en: { name: 'Fitness',slug: 'fitness',h1: 'Fitness pages', intro: 'Workout routines, nutrition tips, motivation.', keywords: 'fitness instagram for sale' } },
  auto:      { tr: { name: 'Otomotiv', slug: 'otomotiv',  h1: 'Otomotiv hesapları', intro: 'Araç incelemeleri, modifiye, otomobil fotoğrafçılığı. Galeri ve aksesuar markaları için.', keywords: 'otomotiv instagram, araba sayfası satın al' },                                                                                                                                                            en: { name: 'Auto',   slug: 'auto',   h1: 'Auto pages', intro: 'Car reviews, mods, automotive photography.', keywords: 'auto instagram for sale' } },
};

// Slug ↔ niche helpers
function slugToNiche(slug) {
  for (const [niche, meta] of Object.entries(CATEGORY_META)) {
    if (meta.tr.slug === slug || meta.en.slug === slug || niche === slug) return niche;
  }
  return null;
}

function CategoryPage({ L, lang, theme }) {
  // URL'den slug oku
  const slug = (typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('slug')) || 'travel';
  const niche = slugToNiche(slug) || 'travel';
  const meta = CATEGORY_META[niche][lang] || CATEGORY_META[niche].tr;
  const allListings = LISTINGS.filter(l => l.niche === niche);
  const [sortBy, setSortBy] = _x2S('relevance');
  const [favs, setFavs] = _x2S(() => loadJson(APP_KEYS.favs, []));

  // Document title + meta description (client-side SEO)
  _x2E(() => {
    if (typeof document === 'undefined') return;
    document.title = `${meta.h1} — InstaSatış`;
    let descTag = document.querySelector('meta[name="description"]');
    if (!descTag) { descTag = document.createElement('meta'); descTag.setAttribute('name', 'description'); document.head.appendChild(descTag); }
    descTag.setAttribute('content', meta.intro.slice(0, 160));
    let kwTag = document.querySelector('meta[name="keywords"]');
    if (!kwTag) { kwTag = document.createElement('meta'); kwTag.setAttribute('name', 'keywords'); document.head.appendChild(kwTag); }
    kwTag.setAttribute('content', meta.keywords);
  }, [meta.h1]);

  const sorted = _x2M(() => {
    const arr = [...allListings];
    if (sortBy === 'price-asc') arr.sort((a, b) => a.price - b.price);
    else if (sortBy === 'price-desc') arr.sort((a, b) => b.price - a.price);
    else if (sortBy === 'followers') arr.sort((a, b) => b.followers - a.followers);
    else if (sortBy === 'er') arr.sort((a, b) => b.er - a.er);
    return arr;
  }, [allListings, sortBy]);

  const avgPrice = allListings.length ? Math.round(allListings.reduce((s, l) => s + l.price, 0) / allListings.length) : 0;
  const avgER = allListings.length ? (allListings.reduce((s, l) => s + l.er, 0) / allListings.length).toFixed(1) : 0;
  const totalFollowers = allListings.reduce((s, l) => s + l.followers, 0);
  const c = NICHE_COLORS[niche] || ['#888', '#666'];

  // Other categories for footer links
  const otherCategories = Object.entries(CATEGORY_META)
    .filter(([k]) => k !== niche)
    .slice(0, 8);

  return (
    <ScreenFrame theme={theme} width="100%" height="100%">
      <div data-screen-label={`Kategori — ${meta.name}`} style={{ minHeight: '100%', background: 'var(--bg)' }}>
        <TopNav L={L} lang={lang}/>

        {/* Breadcrumb (also acts as JSON-LD source) */}
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '20px 32px 0', display: 'flex', gap: 6, alignItems: 'center', fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>
          <a href="index.html" style={{ color: 'inherit', textDecoration: 'none' }}>{lang === 'tr' ? 'Anasayfa' : 'Home'}</a>
          <Icon name="chevron-right" size={10}/>
          <span>{lang === 'tr' ? 'Kategoriler' : 'Categories'}</span>
          <Icon name="chevron-right" size={10}/>
          <span style={{ color: 'var(--ink)' }}>{meta.name}</span>
        </div>

        {/* Hero */}
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '24px 32px 0' }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 24, flexWrap: 'wrap' }}>
            <div style={{
              width: 96, height: 96, borderRadius: 24, flexShrink: 0,
              background: `linear-gradient(135deg, ${c[0]}, ${c[1]})`,
              display: 'grid', placeItems: 'center', boxShadow: `0 12px 40px ${c[0]}33`,
            }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 44, color: '#fff' }}>
                {meta.name.charAt(0)}
              </div>
            </div>
            <div style={{ flex: 1, minWidth: 280 }}>
              <div className="is-kicker" style={{ color: 'var(--accent)' }}>
                {lang === 'tr' ? 'KATEGORİ' : 'CATEGORY'} · {allListings.length} {lang === 'tr' ? 'aktif ilan' : 'active listings'}
              </div>
              <h1 className="is-h1" style={{ fontSize: 44, margin: '8px 0 12px', textWrap: 'balance' }}>
                {meta.h1}
              </h1>
              <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.6, textWrap: 'pretty', maxWidth: 720 }}>
                {meta.intro}
              </p>
            </div>
          </div>

          {/* Stats strip */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginTop: 24 }}>
            {[
              { k: allListings.length, l: lang === 'tr' ? 'Aktif ilan' : 'Listings' },
              { k: fmtNum(totalFollowers), l: lang === 'tr' ? 'Toplam takipçi' : 'Total followers' },
              { k: avgER + '%', l: lang === 'tr' ? 'Ortalama ER' : 'Average ER' },
              { k: fmtPrice(avgPrice, lang), l: lang === 'tr' ? 'Ortalama fiyat' : 'Average price' },
            ].map((s, i) => (
              <div key={i} className="is-card" style={{ padding: 16 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, letterSpacing: '-0.01em' }}>{s.k}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 4, fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '.06em' }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Sort + listings */}
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '32px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, flexWrap: 'wrap', gap: 12 }}>
            <h2 className="is-h2" style={{ fontSize: 22, margin: 0 }}>
              {lang === 'tr' ? `${meta.name} kategorisindeki ilanlar` : `Listings in ${meta.name}`}
            </h2>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: 13 }}>
              <span style={{ color: 'var(--ink-3)' }}>{lang === 'tr' ? 'Sırala:' : 'Sort:'}</span>
              <select value={sortBy} onChange={e => setSortBy(e.target.value)}
                      className="is-input" style={{ padding: '8px 12px', fontSize: 13, width: 'auto' }}>
                <option value="relevance">{lang === 'tr' ? 'En uygun' : 'Relevance'}</option>
                <option value="price-asc">{lang === 'tr' ? 'Fiyat ↑' : 'Price ↑'}</option>
                <option value="price-desc">{lang === 'tr' ? 'Fiyat ↓' : 'Price ↓'}</option>
                <option value="followers">{lang === 'tr' ? 'Takipçi ↓' : 'Followers ↓'}</option>
                <option value="er">{lang === 'tr' ? 'Etkileşim ↓' : 'Engagement ↓'}</option>
              </select>
            </div>
          </div>

          {sorted.length === 0 ? (
            <div className="is-card" style={{ padding: 40, textAlign: 'center' }}>
              <div style={{ fontSize: 44, marginBottom: 12 }}>📭</div>
              <div style={{ fontWeight: 600, marginBottom: 6 }}>{lang === 'tr' ? 'Bu kategoride henüz aktif ilan yok' : 'No active listings in this category'}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>{lang === 'tr' ? 'Yakında yeni ilanlar eklenecek.' : 'New listings coming soon.'}</div>
            </div>
          ) : (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
              {sorted.map(l => (
                <ListingCard key={l.id} listing={l} L={L} lang={lang} layout="grid"
                             isFav={favs.includes(l.id)}
                             onToggleFav={() => {
                               const next = favs.includes(l.id) ? favs.filter(x => x !== l.id) : [...favs, l.id];
                               setFavs(next); saveJson(APP_KEYS.favs, next);
                             }}
                             onView={() => window.location.href = `ilan.html?id=${l.id}`}/>
              ))}
            </div>
          )}
        </div>

        {/* SEO content blocks */}
        <div style={{ maxWidth: 800, margin: '0 auto', padding: '0 32px 40px' }}>
          <h2 className="is-h2" style={{ fontSize: 26, marginTop: 24, marginBottom: 12 }}>
            {lang === 'tr' ? `Neden ${meta.name.toLowerCase()} hesabı?` : `Why a ${meta.name.toLowerCase()} account?`}
          </h2>
          <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.7 }}>
            {lang === 'tr'
              ? `${meta.name} kategorisindeki Instagram hesapları, niş kitlesi sayesinde ortalama %${avgER} etkileşim oranıyla genel piyasanın 2-3 katı performans gösterir. Hazır bir ${meta.name.toLowerCase()} hesabı satın aldığında, sıfırdan kitle kurmak için harcanacak 6-12 ayı tamamen atlamış olursun. Reklam hesabı açma kısıtlamaları da yaşlı hesaplarda çok daha azdır.`
              : `${meta.name} accounts deliver ${avgER}% average engagement — 2-3× higher than general pages. Buying an established account skips 6-12 months of audience building.`}
          </p>

          <h2 className="is-h2" style={{ fontSize: 26, marginTop: 28, marginBottom: 12 }}>
            {lang === 'tr' ? 'Doğrulama ve teslimat' : 'Verification & delivery'}
          </h2>
          <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.7 }}>
            {lang === 'tr'
              ? 'Her ilan, ekibimiz tarafından elle inceleniyor: takipçi kalitesi, etkileşim geçmişi ve kitle coğrafyası ölçülüyor. Ödeme sonrası teslimat ortalama 5 dakika; kullanıcı adı, şifre, bağlı e-posta ve kurtarma bilgileri panelinde teslim edilir. 7 gün içinde sorun yaşarsan tam iade alırsın.'
              : 'Every listing is hand-reviewed: follower quality, engagement history, audience geography. Delivery within 5 minutes — username, password, linked email and recovery details. 7-day full refund.'}
          </p>

          {/* Other categories */}
          <h2 className="is-h2" style={{ fontSize: 26, marginTop: 36, marginBottom: 14 }}>
            {lang === 'tr' ? 'Diğer kategoriler' : 'Other categories'}
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
            {otherCategories.map(([k, m]) => {
              const cc = NICHE_COLORS[k] || ['#888', '#666'];
              const mm = m[lang] || m.tr;
              return (
                <a key={k} href={`kategori.html?slug=${mm.slug}`} className="is-card"
                   style={{ padding: 14, textDecoration: 'none', color: 'inherit', display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: `linear-gradient(135deg, ${cc[0]}, ${cc[1]})`, flexShrink: 0 }}/>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{mm.name}</div>
                    <div style={{ fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>
                      {LISTINGS.filter(l => l.niche === k).length} {lang === 'tr' ? 'ilan' : 'listings'}
                    </div>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </div>
    </ScreenFrame>
  );
}

Object.assign(window, { TransferWizard, CompareScreen, SearchResults, LegalPage, CategoryPage, CATEGORY_META, slugToNiche });