// extras.jsx — Success/Delivery · Mobile Admin · SEO Landing
// + animated hero intro helpers + messaging tab
const { useState: _eS, useEffect: _eE } = React;

// ═══════════════════════════════════════════════════════════════
// 1) SUCCESS / DELIVERY SCREEN (desktop + mobile)
// ═══════════════════════════════════════════════════════════════
function SuccessScreen({ L, lang, theme, listing }) {
  const [copied, setCopied] = _eS(null);
  const orderId = 'IS-2026-04-' + String(9184).padStart(5, '0');
  const creds = {
    username: listing.handle.replace('@', ''),
    email: `${listing.handle.replace('@','')}.delivery@instasatis.com`,
    pass: 'K7!vm' + (listing.id.slice(-1) + '39aLp') + 'Z',
    recovery: '+90 5•• ••• •• ••',
  };
  const copy = (k, v) => { navigator.clipboard?.writeText(v); setCopied(k); setTimeout(() => setCopied(null), 1400); };
  return (
    <ScreenFrame theme={theme} width="100%" height="100%">
      <div data-screen-label="07 Başarılı Ödeme (Desktop)" style={{ minHeight: '100%', background: 'var(--bg)' }}>
        <TopNav L={L} lang={lang}/>
        {/* Celebration hero */}
        <div style={{ position: 'relative', padding: '48px 32px 32px', textAlign: 'center', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--g2) 22%, transparent) 0%, transparent 60%)', pointerEvents: 'none' }}/>
          {/* Confetti dots */}
          {Array.from({ length: 24 }).map((_, i) => {
            const seed = (i * 97) % 100;
            const hue = [0, 35, 300, 350, 180, 120][i % 6];
            return <div key={i} style={{
              position: 'absolute', left: `${seed}%`, top: `${10 + (seed * 3) % 60}%`,
              width: 8, height: 8, borderRadius: i % 2 ? '50%' : 2,
              background: `oklch(0.68 0.2 ${hue})`,
              transform: `rotate(${seed * 7}deg)`,
              opacity: 0.7,
              animation: `isFall 2.6s ${i * 0.08}s ease-out infinite`,
            }}/>;
          })}
          <style>{`@keyframes isFall { 0% { transform: translateY(-20px) rotate(0); opacity: 0 } 20% { opacity: .9 } 100% { transform: translateY(60px) rotate(360deg); opacity: 0 } }
                    @keyframes isPop { 0% { transform: scale(0); opacity: 0 } 60% { transform: scale(1.1); opacity: 1 } 100% { transform: scale(1) } }`}</style>
          <div style={{
            width: 84, height: 84, margin: '0 auto', borderRadius: '50%',
            background: 'var(--grad)', display: 'grid', placeItems: 'center',
            boxShadow: '0 20px 50px -10px oklch(0.66 0.25 350 / 0.5)',
            animation: 'isPop 0.5s cubic-bezier(.34,1.56,.64,1)',
          }}>
            <Icon name="check" size={44} color="#fff" strokeWidth={2.6}/>
          </div>
          <h1 className="is-h1 is-grad-text" style={{ fontSize: 44, margin: '22px 0 8px' }}>
            {lang === 'tr' ? 'Ödeme alındı! 🎉' : 'Payment received! 🎉'}
          </h1>
          <div style={{ color: 'var(--ink-2)', fontSize: 16, maxWidth: 560, margin: '0 auto' }}>
            {lang === 'tr'
              ? 'Hesap bilgilerin aşağıda. Ayrıca e-posta adresine de gönderildi.'
              : 'Your account credentials are below. Also sent to your email.'}
          </div>
          <div style={{ marginTop: 14, display: 'inline-flex', alignItems: 'center', gap: 10, padding: '8px 14px', borderRadius: 999, background: 'var(--chip)' }}>
            <span className="is-kicker">{lang === 'tr' ? 'Sipariş No' : 'Order ID'}</span>
            <span className="is-mono" style={{ fontSize: 13, fontWeight: 600 }}>{orderId}</span>
          </div>
        </div>

        {/* Content */}
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 32px 60px', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 20 }}>
          {/* Credentials card */}
          <div className="is-card" style={{ padding: 28 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, paddingBottom: 18, borderBottom: '1px solid var(--line-2)' }}>
              <Avatar handle={listing.handle} postsStyle={listing.postsStyle} size={56}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20 }}>{listing.handle}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>{fmtNum(listing.followers)} {L.card_followers} · {L[`niche_${listing.niche}`]}</div>
              </div>
              <span className="is-chip" style={{ background: 'color-mix(in oklab, var(--success) 22%, var(--card))', color: 'var(--success)', fontWeight: 600 }}>
                <Icon name="check" size={12} color="var(--success)"/> {lang === 'tr' ? 'Devredildi' : 'Transferred'}
              </span>
            </div>
            <div className="is-kicker" style={{ marginTop: 20 }}>{lang === 'tr' ? 'Hesap Erişim Bilgileri' : 'Access Credentials'}</div>
            <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { k: 'username', label: lang === 'tr' ? 'Kullanıcı adı' : 'Username', v: creds.username },
                { k: 'email', label: lang === 'tr' ? 'Bağlı e-posta' : 'Linked email', v: creds.email },
                { k: 'pass', label: lang === 'tr' ? 'Şifre' : 'Password', v: creds.pass, mono: true },
                { k: 'recovery', label: lang === 'tr' ? 'Kurtarma telefonu' : 'Recovery phone', v: creds.recovery, mono: true },
              ].map(r => (
                <div key={r.k} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px', borderRadius: 12, background: 'var(--bg-2)', border: '1px solid var(--line-2)' }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="is-kicker" style={{ fontSize: 10 }}>{r.label}</div>
                    <div style={{ fontSize: 14, fontWeight: 600, fontFamily: r.mono ? 'var(--font-mono)' : 'inherit', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.v}</div>
                  </div>
                  <button className="is-btn is-btn-ghost" onClick={() => copy(r.k, r.v)} style={{ padding: '6px 12px', fontSize: 12 }}>
                    {copied === r.k ? <><Icon name="check" size={12} color="var(--success)"/>{lang === 'tr' ? 'Kopyalandı' : 'Copied'}</> : <>{lang === 'tr' ? 'Kopyala' : 'Copy'}</>}
                  </button>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 18, padding: 14, borderRadius: 12, background: 'color-mix(in oklab, var(--warn) 10%, var(--card))', border: '1px solid color-mix(in oklab, var(--warn) 30%, var(--line-2))', display: 'flex', gap: 12 }}>
              <Icon name="shield" size={18} color="var(--warn)"/>
              <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5 }}>
                <strong style={{ color: 'var(--ink)' }}>{lang === 'tr' ? 'İlk işin şifreyi değiştirmek olsun.' : 'Change the password as your first action.'}</strong>
                {' '}{lang === 'tr' ? 'Bağlı e-postayı ve 2FA’yı kendi cihazına al. 7 gün içinde sorun olursa iade hakkın devam eder.' : 'Link your own email and 2FA. You have 7 days to request a refund if anything goes wrong.'}
              </div>
            </div>
          </div>

          {/* Sidebar: timeline + next steps */}
          <aside style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="is-card" style={{ padding: 22 }}>
              <div className="is-kicker" style={{ marginBottom: 14 }}>{lang === 'tr' ? 'Teslimat Zaman Çizelgesi' : 'Delivery Timeline'}</div>
              <Timeline items={[
                { done: true, t: lang === 'tr' ? 'Ödeme alındı' : 'Payment received', sub: 'şimdi' },
                { done: true, t: lang === 'tr' ? 'Hesap doğrulandı' : 'Account verified', sub: lang === 'tr' ? '1 dk önce' : '1m ago' },
                { done: true, t: lang === 'tr' ? 'Bilgiler devredildi' : 'Credentials transferred', sub: lang === 'tr' ? 'az önce' : 'just now' },
                { done: false, t: lang === 'tr' ? 'Şifreyi değiştir' : 'Change password', sub: lang === 'tr' ? 'senin adımın' : 'your step', current: true },
                { done: false, t: lang === 'tr' ? 'İade süresi biter (7 gün)' : 'Refund window ends (7 days)', sub: lang === 'tr' ? '2 Mayıs' : 'May 2' },
              ]}/>
            </div>
            <div className="is-card" style={{ padding: 22, background: 'linear-gradient(135deg, color-mix(in oklab, var(--g1) 18%, var(--card)), var(--card))' }}>
              <Icon name="sparkle" size={20} color="var(--accent)"/>
              <div className="is-h2" style={{ fontSize: 18, marginTop: 10 }}>{lang === 'tr' ? 'Yardıma ihtiyacın var mı?' : 'Need a hand?'}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 6 }}>{lang === 'tr' ? 'Bağlanamadıysan veya hesapla ilgili her şey için WhatsApp hattı açık.' : 'If you can’t log in or have any issue, WhatsApp is always open.'}</div>
              <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
                <button className="is-btn is-btn-primary" style={{ flex: 1, justifyContent: 'center' }}>WhatsApp</button>
                <button className="is-btn is-btn-ghost" style={{ flex: 1, justifyContent: 'center' }}>Telegram</button>
              </div>
            </div>
            <button className="is-btn is-btn-outline" style={{ justifyContent: 'center', padding: 14 }}>
              {lang === 'tr' ? 'Fatura PDF indir' : 'Download invoice PDF'}
            </button>
          </aside>
        </div>
      </div>
    </ScreenFrame>
  );
}

function Timeline({ items }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      {items.map((it, i) => (
        <div key={i} style={{ display: 'flex', gap: 12, position: 'relative', paddingBottom: i === items.length - 1 ? 0 : 12 }}>
          <div style={{ width: 22, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <div style={{
              width: 18, height: 18, borderRadius: '50%',
              background: it.current ? 'var(--grad)' : it.done ? 'var(--success)' : 'var(--chip)',
              border: it.done || it.current ? 0 : '1px dashed var(--line)',
              display: 'grid', placeItems: 'center', color: '#fff', flexShrink: 0,
              boxShadow: it.current ? '0 0 0 4px color-mix(in oklab, var(--g2) 25%, transparent)' : 'none',
            }}>
              {it.done && <Icon name="check" size={10} color="#fff" strokeWidth={3}/>}
            </div>
            {i < items.length - 1 && <div style={{ width: 2, flex: 1, background: it.done ? 'var(--success)' : 'var(--line-2)' }}/>}
          </div>
          <div style={{ paddingBottom: 4 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: it.done || it.current ? 'var(--ink)' : 'var(--ink-3)' }}>{it.t}</div>
            <div style={{ fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>{it.sub}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

// Success mobile
function SuccessMobile({ L, lang, theme, listing }) {
  return (
    <div style={{ ...theme, width: 390, height: 844, overflow: "hidden", borderRadius: 36, background: "var(--bg)", boxShadow: "0 0 0 10px #111, 0 0 0 11px #333" }}>
      <div data-screen-label="13 Başarılı Ödeme (Mobil)" style={{ height: "100%", background: "var(--bg)", overflow: "auto", paddingBottom: 40 }}>
        <div style={{ position: 'relative', padding: '24px 20px', textAlign: 'center', background: 'radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--g2) 30%, transparent) 0%, transparent 70%)' }}>
          <div style={{ width: 64, height: 64, margin: '8px auto 0', borderRadius: '50%', background: 'var(--grad)', display: 'grid', placeItems: 'center', boxShadow: '0 14px 36px -8px oklch(0.66 0.25 350 / 0.5)' }}>
            <Icon name="check" size={32} color="#fff" strokeWidth={2.6}/>
          </div>
          <h1 className="is-h1 is-grad-text" style={{ fontSize: 28, margin: '14px 0 6px' }}>{lang === 'tr' ? 'Ödeme alındı' : 'Payment received'}</h1>
          <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>{lang === 'tr' ? 'Bilgiler aşağıda ve e-postanda.' : 'Below and in your email.'}</div>
        </div>
        <div style={{ padding: '0 16px' }}>
          <div className="is-card" style={{ padding: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <Avatar handle={listing.handle} postsStyle={listing.postsStyle} size={40}/>
              <div><div style={{ fontWeight: 700 }}>{listing.handle}</div><div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{fmtNum(listing.followers)} {L.card_followers}</div></div>
            </div>
            <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
              {[['Kullanıcı', 'citytrails'], ['Şifre', 'K7!vm…aLpZ'], ['E-posta', 'citytrails.delivery@…']].map(([l, v]) => (
                <div key={l} style={{ padding: 10, background: 'var(--bg-2)', borderRadius: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="is-kicker" style={{ fontSize: 10 }}>{l}</div>
                    <div className="is-mono" style={{ fontSize: 12, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis' }}>{v}</div>
                  </div>
                  <button className="is-btn is-btn-ghost" style={{ padding: '4px 10px', fontSize: 11 }}>Kopyala</button>
                </div>
              ))}
            </div>
          </div>
          <div style={{ marginTop: 14 }}>
            <Timeline items={[
              { done: true, t: lang === 'tr' ? 'Ödeme alındı' : 'Payment received', sub: 'şimdi' },
              { done: true, t: lang === 'tr' ? 'Bilgiler devredildi' : 'Credentials transferred', sub: 'az önce' },
              { done: false, t: lang === 'tr' ? 'Şifreni değiştir' : 'Change password', sub: 'sıra sende', current: true },
            ]}/>
          </div>
          <button className="is-btn is-btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 18, padding: 14 }}>WhatsApp’tan yardım al</button>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// 2) MOBILE ADMIN (telefondan ilan yönetimi)
// ═══════════════════════════════════════════════════════════════
function AdminMobile({ L, lang, theme }) {
  const [tab, setTab] = _eS('inbox');
  const [msgOpen, setMsgOpen] = _eS(false);
  const chats = [
    { h: '@citytrails', who: 'serhat_a', last: 'Taksit yapabilir miyim?', time: '2dk', unread: 2, postsStyle: 'travel' },
    { h: '@byte.daily', who: 'emre.ok', last: 'İbanı atar mısın?', time: '14dk', unread: 1, postsStyle: 'tech' },
    { h: '@gigglesnap', who: 'ayca.k', last: 'Teşekkürler, hallettim!', time: '1sa', unread: 0, postsStyle: 'meme' },
    { h: '@kitchenlab.tr', who: 'mert_47', last: 'Hesap yaşı doğru mu?', time: '3sa', unread: 0, postsStyle: 'food' },
    { h: '@velvet.looks', who: 'selin.vg', last: 'Rezerve edebilir miyim?', time: 'dün', unread: 0, postsStyle: 'fashion' },
  ];
  return (
    <div style={{ ...theme, width: 390, height: 844, overflow: "hidden", borderRadius: 36, background: "var(--bg)", boxShadow: "0 0 0 10px #111, 0 0 0 11px #333", position: "relative" }}>
      <div data-screen-label="14 Admin Mobil" style={{ height: "100%", background: "var(--bg)", display: "flex", flexDirection: "column" }}>
        {/* Header */}
        <div style={{ padding: '14px 16px 10px', borderBottom: '1px solid var(--line-2)', display: 'flex', alignItems: 'center', gap: 10 }}>
          <Logo size={24} showWord={false}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15 }}>Admin · OKx</div>
            <div className="is-kicker" style={{ fontSize: 9 }}>{lang === 'tr' ? 'kontrol merkezi' : 'control'}</div>
          </div>
          <button style={{ width: 34, height: 34, borderRadius: '50%', background: 'var(--chip)', border: 0, display: 'grid', placeItems: 'center', position: 'relative' }}>
            <Icon name="bell" size={16}/>
            <span style={{ position: 'absolute', top: 6, right: 7, width: 8, height: 8, borderRadius: '50%', background: 'var(--danger)' }}/>
          </button>
        </div>

        {/* KPIs — compact */}
        <div style={{ padding: '12px 16px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
          {[
            { l: 'Aktif', v: '11', g: true },
            { l: 'Bu ay', v: '₺184K' },
            { l: 'Toplam', v: '1.8K' },
          ].map(k => (
            <div key={k.l} className="is-card" style={{ padding: 10, background: k.g ? 'linear-gradient(135deg, color-mix(in oklab, var(--g1) 20%, var(--card)), var(--card))' : undefined }}>
              <div className="is-kicker" style={{ fontSize: 9 }}>{k.l}</div>
              <div className={k.g ? 'is-grad-text' : ''} style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20, letterSpacing: '-0.02em', marginTop: 2 }}>{k.v}</div>
            </div>
          ))}
        </div>

        {/* Tabs */}
        <div style={{ padding: '0 16px', display: 'flex', gap: 6, borderBottom: '1px solid var(--line-2)' }}>
          {[
            { id: 'inbox', label: 'Mesajlar', badge: 3 },
            { id: 'inv', label: 'İlanlar' },
            { id: 'sales', label: 'Satış' },
          ].map(t => (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              flex: 1, padding: '12px 0', border: 0, background: 'transparent', cursor: 'pointer',
              color: tab === t.id ? 'var(--ink)' : 'var(--ink-3)',
              fontWeight: tab === t.id ? 700 : 500, fontSize: 13,
              borderBottom: tab === t.id ? '2px solid var(--accent)' : '2px solid transparent',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            }}>
              {t.label}
              {t.badge && <span style={{ background: 'var(--danger)', color: '#fff', fontSize: 10, fontWeight: 700, padding: '1px 6px', borderRadius: 10 }}>{t.badge}</span>}
            </button>
          ))}
        </div>

        {/* Content */}
        <div style={{ flex: 1, overflow: 'auto', padding: '10px 16px 90px' }}>
          {tab === 'inbox' && (
            msgOpen ? <ChatThread onBack={() => setMsgOpen(false)} chat={chats[0]}/> :
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {chats.map((c, i) => (
                <div key={i} onClick={() => setMsgOpen(true)} style={{ display: 'flex', gap: 10, padding: '12px 0', borderBottom: '1px solid var(--line-2)', cursor: 'pointer', alignItems: 'center' }}>
                  <Avatar handle={c.h} postsStyle={c.postsStyle} size={38} ring={false}/>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <div style={{ fontWeight: 600, fontSize: 13 }}>{c.who}</div>
                      <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>{c.time}</div>
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>{c.h}</div>
                    <div style={{ fontSize: 12, color: c.unread ? 'var(--ink)' : 'var(--ink-2)', marginTop: 4, fontWeight: c.unread ? 600 : 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.last}</div>
                  </div>
                  {c.unread > 0 && <span style={{ minWidth: 18, height: 18, padding: '0 5px', background: 'var(--grad)', color: '#fff', fontSize: 10, fontWeight: 700, borderRadius: 10, display: 'grid', placeItems: 'center' }}>{c.unread}</span>}
                </div>
              ))}
            </div>
          )}
          {tab === 'inv' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {LISTINGS.slice(0, 6).map(l => (
                <div key={l.id} className="is-card" style={{ padding: 12, display: 'flex', gap: 12, alignItems: 'center' }}>
                  <div style={{ width: 56 }}><PostGrid handle={l.handle} postsStyle={l.postsStyle} cols={2} rows={2} gap={2} radius={6}/></div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14 }}>{l.handle}</div>
                    <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>{fmtNum(l.followers)} · {L[`niche_${l.niche}`]}</div>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 16, marginTop: 4 }} className="is-grad-text">{fmtPrice(l.price, lang)}</div>
                  </div>
                  <span className="is-chip" style={{ fontSize: 10, background: 'color-mix(in oklab, var(--success) 22%, var(--card))', color: 'var(--success)', fontWeight: 600 }}>● Yayında</span>
                </div>
              ))}
            </div>
          )}
          {tab === 'sales' && (
            <div>
              <div className="is-card" style={{ padding: 14, marginBottom: 12 }}>
                <div className="is-kicker" style={{ marginBottom: 8 }}>Son 7 gün</div>
                <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 70 }}>
                  {[32, 48, 40, 62, 55, 78, 72].map((v, i) => (
                    <div key={i} style={{ flex: 1, height: `${(v/78)*100}%`, background: 'var(--grad)', borderRadius: '3px 3px 0 0' }}/>
                  ))}
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 9, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>
                  <span>Pzt</span><span>Sal</span><span>Çar</span><span>Per</span><span>Cum</span><span>Cmt</span><span>Bug</span>
                </div>
              </div>
              {[
                { h: '@citytrails', b: 'serhat_a', p: 18500, m: 'Kart', t: '2sa' },
                { h: '@byte.daily', b: 'emre.ok', p: 32500, m: 'IBAN', t: '5sa' },
                { h: '@gigglesnap', b: 'ayca.k', p: 24800, m: 'Kart', t: 'dün' },
              ].map((s, i) => (
                <div key={i} style={{ padding: '12px 0', borderBottom: '1px solid var(--line-2)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{s.h}</div>
                    <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{s.b} · {s.m} · {s.t}</div>
                  </div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 15 }} className="is-grad-text">{fmtPrice(s.p, lang)}</div>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* FAB */}
        <button style={{
          position: 'absolute', right: 18, bottom: 28, width: 56, height: 56, borderRadius: '50%',
          background: 'var(--grad)', color: '#fff', border: 0, display: 'grid', placeItems: 'center',
          boxShadow: '0 12px 28px -6px oklch(0.66 0.25 350 / 0.5)',
        }}>
          <Icon name="plus" size={22} color="#fff" strokeWidth={2.5}/>
        </button>
      </div>
    </div>
  );
}

function ChatThread({ onBack, chat }) {
  const msgs = [
    { me: false, t: 'Selam, hesap hala satılık mı?' , time: '14:02' },
    { me: true, t: 'Selam, evet satılık, hazır hesap.', time: '14:04' },
    { me: false, t: 'Takipçiler organik mi?', time: '14:05' },
    { me: true, t: 'Hepsi organik, 3 yıllık aged hesap.', time: '14:06' },
    { me: false, t: 'Taksit yapabilir miyim?', time: '14:12' },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingBottom: 10, borderBottom: '1px solid var(--line-2)' }}>
        <button onClick={onBack} style={{ border: 0, background: 'var(--chip)', width: 30, height: 30, borderRadius: '50%', display: 'grid', placeItems: 'center' }}><Icon name="chevron-left" size={14}/></button>
        <Avatar handle={chat.h} postsStyle={chat.postsStyle} size={32} ring={false}/>
        <div><div style={{ fontWeight: 600, fontSize: 13 }}>{chat.who}</div><div style={{ fontSize: 10, color: 'var(--ink-3)' }}>{chat.h}</div></div>
      </div>
      <div style={{ flex: 1, overflow: 'auto', padding: '12px 0', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {msgs.map((m, i) => (
          <div key={i} style={{ maxWidth: '78%', alignSelf: m.me ? 'flex-end' : 'flex-start', padding: '8px 12px', borderRadius: 14, background: m.me ? 'var(--grad)' : 'var(--chip)', color: m.me ? '#fff' : 'var(--ink)', fontSize: 13, borderBottomRightRadius: m.me ? 4 : 14, borderBottomLeftRadius: m.me ? 14 : 4 }}>
            {m.t}<div style={{ fontSize: 9, opacity: 0.7, marginTop: 2, fontFamily: 'var(--font-mono)' }}>{m.time}</div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', gap: 8, paddingTop: 8, borderTop: '1px solid var(--line-2)' }}>
        <input className="is-input" placeholder="Yanıt yaz…" style={{ flex: 1, padding: '10px 14px' }}/>
        <button className="is-btn is-btn-primary" style={{ padding: '10px 14px' }}><Icon name="arrow-right" size={14} color="#fff"/></button>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// 3) SEO LANDING — "Aged Instagram Hesabı Nedir?" + kategori
// ═══════════════════════════════════════════════════════════════
function SEOLanding({ L, lang, theme }) {
  const faq = lang === 'tr' ? [
    { q: 'Aged Instagram hesabı nedir?', a: 'En az 1 yıl önce açılmış, organik takipçi ve etkileşim geçmişine sahip Instagram hesaplarına aged (yaşlandırılmış) hesap denir. Yeni açılan hesaplara göre Instagram algoritmasında daha güvenilir görünürler.' },
    { q: 'Hesap yaşı neden önemli?', a: 'Yeni hesaplar ilk günlerinde algoritma tarafından daha sıkı denetlenir. 3-5 yıllık bir hesap bu denetim aşamasını çoktan geçmiştir; paylaşımları daha hızlı yayılır, reklam hesabı açarken kısıtlama görme ihtimali düşüktür.' },
    { q: 'Konsept hesap ne demek?', a: 'Belirli bir nişe odaklı (seyahat, yemek, mizah, moda vb.) içerik üreten hesaplara konsept hesap denir. Takipçi kitlesi o niş üzerinde toplandığı için reklam ve iş birliği verimi yüksek olur.' },
    { q: 'Satın aldığım hesap güvenli mi?', a: 'InstaSatış’ta tüm hesaplar kendi envanterimizden. 7 gün iade garantisi, SSL korumalı ödeme ve şifre/mail/telefon devir desteği sağlıyoruz. Sorun çıkarsa tam iade alırsın.' },
    { q: 'Ödeme yöntemleri nedir?', a: 'Kredi/banka kartı (3D Secure korumalı, tek çekim veya 3/6/9 taksit) ve IBAN havalesi/EFT. İki yöntem de SSL ile korunur. Havalede onay ortalama 10 dakika.' },
    { q: 'Hesap teslimi ne kadar sürer?', a: 'Ödeme sonrası kart ödemelerinde 5 dk, havalede onay gelince (~10 dk) hesap bilgileri panelinde ve e-postanda olur. Kullanıcı adı, şifre, bağlı e-posta ve kurtarma bilgilerini teslim ederiz.' },
  ] : [
    { q: 'What is an aged Instagram account?', a: 'An account created at least 1 year ago with organic followers and engagement history. Instagram’s algorithm treats them more favorably than fresh accounts.' },
    { q: 'Why does account age matter?', a: 'New accounts face stricter filtering. A 3-5 year account has already passed that phase — posts spread faster and ad accounts face fewer restrictions.' },
    { q: 'What is a niche account?', a: 'An account focused on a single niche (travel, food, humor, fashion…). Targeted audiences mean higher ad and sponsorship ROI.' },
    { q: 'Is buying accounts safe?', a: 'All accounts on InstaSatış are from our own inventory. 7-day refund, SSL payments, and full credential transfer support.' },
    { q: 'Payment methods?', a: 'Credit/debit card (3D Secure, single or 3/6/9 installments) and IBAN wire transfer.' },
    { q: 'Delivery time?', a: 'Card: ~5 min. Wire: once confirmed (~10 min). You receive username, password, linked email and recovery details.' },
  ];
  const categories = [
    { n: 'travel', c: 42 }, { n: 'food', c: 38 }, { n: 'fashion', c: 51 }, { n: 'meme', c: 29 },
    { n: 'sport', c: 22 }, { n: 'tech', c: 18 }, { n: 'art', c: 24 }, { n: 'lifestyle', c: 33 },
    { n: 'music', c: 15 }, { n: 'beauty', c: 27 }, { n: 'fitness', c: 31 }, { n: 'auto', c: 12 },
  ];
  const [openFaq, setOpenFaq] = _eS(0);
  return (
    <ScreenFrame theme={theme} width="100%" height="100%">
      <div data-screen-label="15 SEO Landing — Aged Hesap Rehberi" style={{ minHeight: '100%', background: 'var(--bg)' }}>
        <TopNav L={L} lang={lang}/>
        {/* Breadcrumb */}
        <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)' }}>
          <span>{lang === 'tr' ? 'Anasayfa' : 'Home'}</span>
          <Icon name="chevron-right" size={10}/>
          <span>{lang === 'tr' ? 'Rehber' : 'Guide'}</span>
          <Icon name="chevron-right" size={10}/>
          <span style={{ color: 'var(--ink)' }}>{lang === 'tr' ? 'Aged Instagram Hesabı' : 'Aged Instagram Accounts'}</span>
        </div>

        {/* Hero article */}
        <div style={{ maxWidth: 800, margin: '0 auto', padding: '24px 32px 40px' }}>
          <div className="is-kicker" style={{ color: 'var(--accent)' }}>{lang === 'tr' ? 'REHBER · 7 DK OKUMA' : 'GUIDE · 7 MIN READ'}</div>
          <h1 className="is-h1" style={{ fontSize: 54, margin: '14px 0 18px', textWrap: 'balance' }}>
            {lang === 'tr' ? (<>Aged Instagram hesabı <span className="is-grad-text">nedir</span>, nasıl seçilir?</>)
                           : (<>What is an <span className="is-grad-text">aged</span> Instagram account?</>)}
          </h1>
          <p style={{ fontSize: 18, color: 'var(--ink-2)', lineHeight: 1.6, textWrap: 'pretty' }}>
            {lang === 'tr'
              ? 'Instagram’da marka kurmanın en hızlı yolu hazır bir temel üzerine inşa etmek. Aged ve konsept hesaplar, yeni açılan hesapların aylarca uğraşacağı algoritmik güveni zaten kazanmış durumda. Bu rehberde doğru hesabı nasıl seçeceğini, nelere bakman gerektiğini ve InstaSatış’ta hesapların nasıl doğrulandığını anlatıyoruz.'
              : 'The fastest way to build on Instagram is to start on a foundation that already has algorithmic trust. This guide walks through what to look for in aged and niche accounts, and how InstaSatış verifies every listing.'}
          </p>

          {/* TOC */}
          <div className="is-card" style={{ padding: 20, marginTop: 28 }}>
            <div className="is-kicker" style={{ marginBottom: 10 }}>{lang === 'tr' ? 'İçindekiler' : 'Contents'}</div>
            {[
              lang === 'tr' ? '1. Aged hesap tanımı' : '1. Definition',
              lang === 'tr' ? '2. Neden önemli?' : '2. Why it matters',
              lang === 'tr' ? '3. Nelere dikkat etmeli?' : '3. What to check',
              lang === 'tr' ? '4. Doğrulama ve teslimat süreci' : '4. Verification & delivery',
              lang === 'tr' ? '5. Sık sorulanlar' : '5. FAQ',
            ].map((t, i) => (
              <a key={i} style={{ display: 'block', padding: '8px 0', borderTop: i === 0 ? 'none' : '1px solid var(--line-2)', fontSize: 14, color: 'var(--ink-2)', cursor: 'pointer' }}>{t}</a>
            ))}
          </div>

          <h2 className="is-h2" style={{ fontSize: 32, marginTop: 40, marginBottom: 14 }}>{lang === 'tr' ? 'Neden aged hesap?' : 'Why aged?'}</h2>
          <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.7 }}>
            {lang === 'tr' ? 'Yeni bir Instagram hesabı kurduğunda algoritma seni ilk 3-6 ay boyunca dikkatle izler. Paylaşımların daha az kişiye gösterilir, story erişimi kısıtlıdır, reklam hesabı açarken doğrulama ister. Bu süreyi atlatmış bir hesapla başlarsan ilk günden itibaren tam hızdasın.' : 'New accounts are throttled for 3-6 months. Aged accounts skip that waiting period.'}
          </p>

          {/* Stat grid — key metrics */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginTop: 26 }}>
            {[
              { k: '3.2×', l: lang === 'tr' ? 'ortalama erişim farkı' : 'avg reach lift' },
              { k: '%74', l: lang === 'tr' ? 'daha hızlı reklam onayı' : 'faster ad approval' },
              { k: '< 7g', l: lang === 'tr' ? 'iade süresi' : 'refund window' },
            ].map((s, i) => (
              <div key={i} className="is-card" style={{ padding: 18 }}>
                <div className="is-grad-text" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 32, letterSpacing: '-0.02em' }}>{s.k}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>{s.l}</div>
              </div>
            ))}
          </div>

          <h2 className="is-h2" style={{ fontSize: 32, marginTop: 40, marginBottom: 14 }}>{lang === 'tr' ? 'Nelere dikkat etmeli?' : 'What to check'}</h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { t: lang === 'tr' ? 'Hesap yaşı' : 'Account age', d: lang === 'tr' ? 'En az 12 ay — ideal 24-60 ay arası.' : 'Min 12 months, ideal 24-60.' },
              { t: lang === 'tr' ? 'Etkileşim oranı (ER)' : 'Engagement rate', d: lang === 'tr' ? '%3 üstü sağlıklıdır. %1 altı şüpheli.' : 'Above 3% is healthy, below 1% is suspect.' },
              { t: lang === 'tr' ? 'Konsept tutarlılığı' : 'Niche consistency', d: lang === 'tr' ? 'Tek konuda düzenli paylaşım kitleyi sadık yapar.' : 'A single niche keeps the audience loyal.' },
              { t: lang === 'tr' ? 'Takipçi kalitesi' : 'Follower quality', d: lang === 'tr' ? 'Botlu değil, organik ve TR/hedef ülke ağırlıklı.' : 'Organic, not botted, target-country-weighted.' },
            ].map((r, i) => (
              <div key={i} style={{ display: 'flex', gap: 14, padding: 16, borderRadius: 14, background: 'var(--card)', border: '1px solid var(--line-2)' }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--grad)', display: 'grid', placeItems: 'center', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 700, flexShrink: 0 }}>{i + 1}</div>
                <div><div style={{ fontWeight: 700, fontSize: 15 }}>{r.t}</div><div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 3 }}>{r.d}</div></div>
              </div>
            ))}
          </div>

          {/* Category grid */}
          <h2 className="is-h2" style={{ fontSize: 32, marginTop: 48, marginBottom: 14 }}>{lang === 'tr' ? 'Kategoriye göre gez' : 'Browse by niche'}</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
            {categories.map(c => (
              <a key={c.n} className="is-card" style={{ padding: 14, cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div style={{ width: 44, height: 44, borderRadius: 10, background: `linear-gradient(135deg, ${NICHE_COLORS[c.n][0]}, ${NICHE_COLORS[c.n][1]})` }}/>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15 }}>{L[`niche_${c.n}`]}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', marginTop: 2 }}>{c.c} {lang === 'tr' ? 'ilan' : 'listings'}</div>
                </div>
              </a>
            ))}
          </div>

          {/* FAQ */}
          <h2 className="is-h2" style={{ fontSize: 32, marginTop: 48, marginBottom: 14 }}>{lang === 'tr' ? 'Sık sorulanlar' : 'FAQ'}</h2>
          <div className="is-card" style={{ padding: 0, overflow: 'hidden' }}>
            {faq.map((f, i) => (
              <div key={i} onClick={() => setOpenFaq(openFaq === i ? -1 : i)} style={{ padding: '18px 22px', borderTop: i === 0 ? 'none' : '1px solid var(--line-2)', cursor: 'pointer' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10 }}>
                  <div style={{ fontWeight: 600, fontSize: 15 }}>{f.q}</div>
                  <div style={{ transform: `rotate(${openFaq === i ? 180 : 0}deg)`, transition: 'transform .2s' }}><Icon name="chevron-down" size={16}/></div>
                </div>
                {openFaq === i && <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 10, textWrap: 'pretty' }}>{f.a}</div>}
              </div>
            ))}
          </div>

          {/* CTA */}
          <div className="is-card" style={{ marginTop: 36, padding: 32, textAlign: 'center', background: 'var(--grad)', color: '#fff' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, letterSpacing: '-0.02em' }}>{lang === 'tr' ? 'Doğru hesabı bulalım mı?' : 'Let’s find the right account.'}</div>
            <div style={{ fontSize: 15, opacity: 0.9, marginTop: 8 }}>{lang === 'tr' ? '265+ aktif ilan, 7 gün iade garantisi.' : '265+ listings, 7-day refund.'}</div>
            <button className="is-btn" style={{ background: '#fff', color: 'var(--ink)', marginTop: 18, padding: '14px 24px', fontSize: 15 }}>
              {lang === 'tr' ? 'İlanları gör' : 'See listings'} <Icon name="arrow-right" size={16}/>
            </button>
          </div>
        </div>
      </div>
    </ScreenFrame>
  );
}

Object.assign(window, { SuccessScreen, SuccessMobile, AdminMobile, SEOLanding });