// screens.jsx — the 4 main screens: Home, Detail, Auth, Dashboard

const { useState: _uS, useEffect: _uE, useMemo: _uM, useRef: _uR } = React;

// ─────────────────────────────────────────────────────────────
// HOME — hero + filter + grid of listings
// ─────────────────────────────────────────────────────────────
function HomeScreen({ L, lang, setLang, theme, layout, filters, setFilters, favs, setFavs, onView, onAuth, sort, setSort, onLayout }) {
  const filtered = _uM(() => {
    let out = LISTINGS.slice();
    if (filters.age && filters.age !== 'any') {
      const min = +filters.age * 12;
      out = out.filter(l => l.age >= min);
    }
    if (filters.niche) out = out.filter(l => l.niche === filters.niche);
    if (filters.followers === '10k') out = out.filter(l => l.followers < 10000);
    else if (filters.followers === '100k') out = out.filter(l => l.followers >= 10000 && l.followers < 100000);
    else if (filters.followers === '1m') out = out.filter(l => l.followers >= 100000);
    if (filters.priceMax) out = out.filter(l => l.price <= filters.priceMax);
    if (sort === 'price_low') out.sort((a,b) => a.price - b.price);
    else if (sort === 'price_high') out.sort((a,b) => b.price - a.price);
    else if (sort === 'followers') out.sort((a,b) => b.followers - a.followers);
    else if (sort === 'age') out.sort((a,b) => b.age - a.age);
    return out;
  }, [filters, sort]);

  const toggleFav = (id) => setFavs(f => f.includes(id) ? f.filter(x => x !== id) : [...f, id]);

  return (
    <ScreenFrame theme={theme} width="100%" height="100%">
      <div data-screen-label="01 Home (Desktop)" style={{ minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <TopNav L={L} lang={lang} setLang={setLang} active="home" onAuth={onAuth}/>

      {/* HERO — animated gradient + floating post mosaic */}
      <style>{`
        @keyframes isHeroGrad { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } }
        @keyframes isFloat1 { 0%, 100% { transform: translateY(0) rotate(-4deg) } 50% { transform: translateY(-14px) rotate(-4deg) } }
        @keyframes isFloat2 { 0%, 100% { transform: translateY(0) rotate(3deg) } 50% { transform: translateY(-10px) rotate(3deg) } }
        @keyframes isFadeUp { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: translateY(0) } }
        @keyframes isShine { 0% { background-position: -200% 50% } 100% { background-position: 200% 50% } }
        @keyframes isCardIn { from { opacity: 0; transform: translateY(20px) scale(.97) } to { opacity: 1; transform: translateY(0) scale(1) } }
        .is-card-stagger { animation: isCardIn .55s cubic-bezier(.2,.8,.2,1) both; }
        .is-hero-title { background: linear-gradient(120deg, var(--ink) 0%, var(--ink) 40%, var(--g2) 55%, var(--ink) 70%, var(--ink) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: isShine 6s ease-in-out infinite; }
        .is-hero-fade { animation: isFadeUp .7s cubic-bezier(.2,.8,.2,1) both; }
      `}</style>
      <section style={{
        position: 'relative', overflow: 'hidden',
        padding: '56px 32px 60px',
        background: 'radial-gradient(1200px 600px at 85% 10%, color-mix(in oklab, var(--g2) 45%, transparent), transparent), radial-gradient(900px 500px at 10% 100%, color-mix(in oklab, var(--g1) 40%, transparent), transparent), var(--bg)',
        backgroundSize: '200% 200%, 200% 200%, 100% 100%',
        animation: 'isHeroGrad 14s ease-in-out infinite',
      }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 40, alignItems: 'center' }}>
          <div className="is-hero-fade">
            <div className="is-kicker" style={{ color: 'var(--ink-2)', marginBottom: 14, display: 'inline-flex', alignItems: 'center', gap: 8, animation: 'isFadeUp .6s .05s both' }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--grad)' }}/>
              {L.hero_kicker}
            </div>
            <h1 className="is-h1" style={{ fontSize: 68, margin: 0, animation: 'isFadeUp .8s .1s both' }}>
              <span className="is-hero-title">{L.hero_title.split(',')[0]},</span><br/>
              <span className="is-grad-text">{L.hero_title.split(',')[1]?.trim()}</span>
            </h1>
            <p style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.5, marginTop: 18, maxWidth: 520 }}>{L.hero_sub}</p>
            <div style={{ display: 'flex', gap: 10, marginTop: 26 }}>
              <button className="is-btn is-btn-primary" style={{ padding: '14px 22px', fontSize: 15 }}>
                {L.hero_cta} <Icon name="arrow-right" size={16}/>
              </button>
              <button className="is-btn is-btn-outline" style={{ padding: '14px 22px', fontSize: 15 }}>{L.hero_cta2}</button>
            </div>
            <div style={{ marginTop: 32 }}><TrustBar L={L}/></div>
            {/* Social proof: rating + sales */}
            <div style={{ marginTop: 22, display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ display: 'flex', gap: 2 }}>
                  {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={16} color="var(--warn)" strokeWidth={2.4}/>)}
                </div>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15 }}>4.9</span>
                <span style={{ color: 'var(--ink-3)', fontSize: 12 }}>· 312 yorum</span>
              </div>
              <div style={{ height: 20, width: 1, background: 'var(--line)' }}/>
              <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>
                <span className="is-grad-text" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17 }}>1.847</span>
                <span style={{ marginLeft: 6 }}>hesap teslim edildi</span>
              </div>
            </div>
          </div>
          {/* Right: floating listing previews */}
          <div style={{ position: 'relative', height: 420 }}>
            <FloatingPreview listing={LISTINGS[0]} L={L} lang={lang} style={{ position: 'absolute', top: 0, right: 20, width: 240, transform: 'rotate(3deg)' }}/>
            <FloatingPreview listing={LISTINGS[4]} L={L} lang={lang} layout="stat" style={{ position: 'absolute', top: 90, left: 0, width: 220, transform: 'rotate(-4deg)' }}/>
            <FloatingPreview listing={LISTINGS[7]} L={L} lang={lang} style={{ position: 'absolute', bottom: 0, right: 60, width: 230, transform: 'rotate(2deg)' }}/>
          </div>
        </div>
      </section>

      {/* Stats strip */}
      <section style={{ background: 'var(--bg-2)', borderTop: '1px solid var(--line-2)', borderBottom: '1px solid var(--line-2)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '22px 32px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {[
            { n: '2.847', l: L.stat_listings },
            { n: '14.2K', l: L.stat_sold },
            { n: '99.6%', l: L.stat_uptime },
          ].map((s, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
              <div className="is-grad-text" style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 36, letterSpacing: '-0.03em' }}>{s.n}</div>
              <div style={{ color: 'var(--ink-2)', fontSize: 14 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Marketplace grid */}
      <section style={{ padding: '40px 32px 60px', maxWidth: 1280, margin: '0 auto', width: '100%', display: 'grid', gridTemplateColumns: '260px 1fr', gap: 32 }}>
        <FilterPanel L={L} filters={filters} setFilters={setFilters}/>
        <div style={{ minWidth: 0, display: 'flex', flexDirection: 'column', gap: 18 }}>
          <SortBar L={L} sort={sort} setSort={setSort} count={filtered.length} layout={layout} setLayout={onLayout}/>
          <div style={{
            display: 'grid',
            gridTemplateColumns: layout === 'passport' ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)',
            gap: 'var(--gap)',
          }}>
            {filtered.map((l, i) => (
              <div key={l.id} className="is-card-stagger" style={{ animationDelay: `${Math.min(i, 11) * 50}ms` }}>
              <ListingCard listing={l} L={L} lang={lang} layout={layout}
                           isFav={favs.includes(l.id)} onToggleFav={toggleFav}
                           onView={onView}/>
              </div>
            ))}
          </div>
        </div>
      </section>

      <footer style={{ borderTop: '1px solid var(--line-2)', padding: '28px 32px', background: 'var(--bg-2)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <Logo size={28}/>
            <span style={{ fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', letterSpacing: '.08em', textTransform: 'uppercase' }}>bir <span className="is-grad-text" style={{ fontWeight: 700 }}>OKxProject</span> ürünüdür</span>
          </div>
          <div style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>© 2026 · instasatis.com</div>
        </div>
      </footer>
      </div>
    </ScreenFrame>
  );
}

function FloatingPreview({ listing, L, lang, layout = 'grid', style }) {
  return (
    <div style={{ ...style, filter: 'drop-shadow(0 20px 40px rgba(0,0,0,.15))' }}>
      <ListingCard listing={listing} L={L} lang={lang} layout={layout}
                   isFav={false} onToggleFav={() => {}} onView={() => {}}/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// DETAIL screen
// ─────────────────────────────────────────────────────────────
function DetailScreen({ L, lang, setLang, theme, listing, onBack, onAuth, favs, setFavs }) {
  const l = listing || LISTINGS[0];
  const isFav = favs.includes(l.id);
  const [contactOpen, setContactOpen] = _uS(false);
  const niche = L[`niche_${l.niche}`] || l.niche;
  const toggleFav = () => setFavs(f => f.includes(l.id) ? f.filter(x => x !== l.id) : [...f, l.id]);

  // SEO: Product JSON-LD + dynamic title/meta per listing
  React.useEffect(() => {
    if (typeof document === 'undefined') return;
    document.title = `${l.handle} — ${niche} · ${fmtNum(l.followers)} takipçi · 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', `${l.handle} — ${niche} kategorisinde ${fmtNum(l.followers)} takipçili Instagram hesabı. ${l.age} aylık, %${l.er} etkileşim. ${fmtPrice(l.price, lang)}.`);

    // Inject Product schema
    const oldLd = document.getElementById('__listing_jsonld');
    if (oldLd) oldLd.remove();
    const ld = document.createElement('script');
    ld.id = '__listing_jsonld';
    ld.type = 'application/ld+json';
    ld.textContent = JSON.stringify({
      "@context": "https://schema.org",
      "@type": "Product",
      "name": `${l.handle} — Instagram ${niche} hesabı`,
      "description": `${fmtNum(l.followers)} takipçili, ${l.age} aylık, ${niche} kategorisinde Instagram hesabı.`,
      "category": niche,
      "brand": { "@type": "Brand", "name": "InstaSatış" },
      "offers": {
        "@type": "Offer",
        "price": l.price,
        "priceCurrency": "TRY",
        "availability": l.status === 'sold' ? "https://schema.org/SoldOut" : "https://schema.org/InStock",
        "url": `https://instasatis.com/ilan.html?id=${l.id}`,
        "seller": { "@type": "Organization", "name": "InstaSatış" }
      },
      "aggregateRating": l.er >= 3 ? {
        "@type": "AggregateRating",
        "ratingValue": Math.min(5, 3 + l.er / 5).toFixed(1),
        "reviewCount": Math.floor(l.followers / 1000)
      } : undefined,
    });
    document.head.appendChild(ld);
    return () => { const el = document.getElementById('__listing_jsonld'); if (el) el.remove(); };
  }, [l.id, l.handle, l.followers, l.price, niche, lang]);

  return (
    <ScreenFrame theme={theme} width="100%" height="100%">
      <div data-screen-label="02 Listing Detail (Desktop)" style={{ minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <TopNav L={L} lang={lang} setLang={setLang} active="home" onAuth={onAuth}/>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '28px 32px', width: '100%' }}>
        <a onClick={onBack} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--ink-3)', fontSize: 13, cursor: 'pointer', marginBottom: 18 }}>
          <Icon name="chevron-left" size={14}/> {L.nav_explore}
        </a>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 36 }}>
          {/* LEFT — profile, posts, metrics */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            {/* Profile card */}
            <div className="is-card" style={{ padding: 24, display: 'flex', gap: 20, alignItems: 'center' }}>
              <Avatar handle={l.handle} postsStyle={l.postsStyle} size={88}/>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <h1 className="is-h1" style={{ fontSize: 32, margin: 0 }}>{l.handle}</h1>
                  {l.verified && <Icon name="verified" size={22} color="var(--accent)"/>}
                  <StatusBadge kind={l.badge} L={L}/>
                </div>
                <div style={{ color: 'var(--ink-3)', fontSize: 13, fontFamily: 'var(--font-mono)', marginTop: 4, textTransform: 'uppercase', letterSpacing: '.06em' }}>
                  {niche} · {l.country} · listed 2 days ago
                </div>
                <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
                  <span className="is-chip"><Icon name="users" size={12}/> {fmtNum(l.followers)} {L.card_followers}</span>
                  <span className="is-chip"><Icon name="calendar" size={12}/> {fmtAge(l.age, lang, L)}</span>
                  <span className="is-chip"><Icon name="bolt" size={12}/> {l.er.toFixed(1)}% ER</span>
                </div>
              </div>
            </div>

            {/* Metrics — novel: radial chart + bars */}
            <div className="is-card" style={{ padding: 24 }}>
              <div className="is-kicker" style={{ marginBottom: 16 }}>{L.detail_metrics}</div>
              <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 24, alignItems: 'center' }}>
                <MetricRadial er={l.er}/>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <MetricBar label="Followers" value={l.followers} max={500000} fmt={fmtNum}/>
                  <MetricBar label="Monthly reach" value={Math.round(l.followers * 1.8)} max={1000000} fmt={fmtNum}/>
                  <MetricBar label="Avg. likes" value={Math.round(l.followers * l.er / 100)} max={50000} fmt={fmtNum}/>
                  <MetricBar label="Avg. comments" value={Math.round(l.followers * l.er / 1200)} max={2000} fmt={fmtNum}/>
                </div>
              </div>
            </div>

            {/* Post samples */}
            <div className="is-card" style={{ padding: 24 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
                <div className="is-kicker">{L.detail_content}</div>
                <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>12 of 428 posts</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
                {Array.from({ length: 12 }).map((_, i) => (
                  <div key={i} style={{ aspectRatio: '1', borderRadius: 10, overflow: 'hidden' }}>
                    <PostGrid handle={l.handle + i} postsStyle={l.postsStyle} cols={1} rows={1} gap={0} radius={0}/>
                  </div>
                ))}
              </div>
            </div>

            {/* Account age "rings" — novel visualization */}
            <div className="is-card" style={{ padding: 24 }}>
              <div className="is-kicker" style={{ marginBottom: 14 }}>Account timeline</div>
              <AgeTimeline months={l.age}/>
            </div>

            {/* Reviews / yorumlar */}
            <ReviewsSection listing={l} lang={lang} L={L}/>
          </div>

          {/* RIGHT — purchase card sticky */}
          <aside style={{ display: 'flex', flexDirection: 'column', gap: 18, position: 'sticky', top: 88, alignSelf: 'flex-start' }}>
            <div className="is-card" style={{ padding: 24 }}>
              <div className="is-kicker">{L.price_ttl}</div>
              <div className="is-grad-text" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 44, letterSpacing: '-0.03em', lineHeight: 1, marginTop: 6 }}>
                {fmtPrice(l.price, lang)}
              </div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 6 }}>
                ≈ ${Math.round(l.price / 32)} USD · ≈ €{Math.round(l.price / 34)}
              </div>
              <button className="is-btn is-btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 18, padding: '14px', fontSize: 15 }}>
                <Icon name="bolt" size={16}/> {L.detail_buy_now}
              </button>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 8 }}>
                <button className="is-btn is-btn-ghost" style={{ justifyContent: 'center' }} onClick={toggleFav}>
                  <Icon name={isFav ? 'heart-fill' : 'heart'} size={14}/> {isFav ? L.card_saved : L.card_save}
                </button>
                <button className="is-btn is-btn-ghost" style={{ justifyContent: 'center' }}>
                  <Icon name="share" size={14}/> Share
                </button>
              </div>
              <div style={{ marginTop: 18, paddingTop: 18, borderTop: '1px dashed var(--line)' }}>
                <TrustBar L={L} compact/>
              </div>
            </div>

            {/* Satıcı kartı */}
            <SellerCard listing={l} lang={lang} L={L}/>

            {/* InstaSatış Garantisi card */}
            <div className="is-card" style={{ padding: 20 }}>
              <div className="is-kicker" style={{ marginBottom: 12 }}>InstaSatış Garantisi</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 46, height: 46, borderRadius: 12, background: 'var(--grad)', display: 'grid', placeItems: 'center', color: '#fff' }}>
                  <Icon name="shield" size={20} color="#fff" strokeWidth={2.2}/>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>7 gün iade güvencesi</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>E-posta + şifre teslim — sorun çıkarsa tam iade.</div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
                <button className="is-btn is-btn-ghost" onClick={() => setContactOpen(true)} style={{ flex: 1, justifyContent: 'center', padding: '9px', fontSize: 12 }}>
                  <span style={{ width: 14, height: 14, borderRadius: 3, background: '#25d366', display: 'grid', placeItems: 'center', color: '#fff', fontSize: 9, fontWeight: 700 }}>W</span>
                  WhatsApp
                </button>
                <button className="is-btn is-btn-ghost" onClick={() => setContactOpen(true)} style={{ flex: 1, justifyContent: 'center', padding: '9px', fontSize: 12 }}>
                  <span style={{ width: 14, height: 14, borderRadius: 3, background: '#229ED9', display: 'grid', placeItems: 'center', color: '#fff', fontSize: 9, fontWeight: 700 }}>T</span>
                  Telegram
                </button>
              </div>
              <button className="is-btn is-btn-outline" onClick={() => setContactOpen(true)} style={{ width: '100%', justifyContent: 'center', marginTop: 8, padding: '10px', fontSize: 13 }}>
                <Icon name="chat" size={14}/> Satıcıya soru sor
              </button>
            </div>

            <button style={{ background: 'none', border: 0, color: 'var(--ink-3)', fontSize: 12, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6, justifyContent: 'center' }}>
              <Icon name="flag" size={12}/> {L.detail_report}
            </button>
          </aside>
        </div>
      </div>
      {contactOpen && typeof ContactModal !== 'undefined' && (
        <ContactModal listing={l} onClose={() => setContactOpen(false)}/>
      )}
      </div>
    </ScreenFrame>
  );
}

function MetricRadial({ er }) {
  const pct = Math.min(er / 10, 1);
  const r = 56;
  const c = 2 * Math.PI * r;
  return (
    <div style={{ position: 'relative', width: 140, height: 140, margin: '0 auto' }}>
      <svg width="140" height="140">
        <defs>
          <linearGradient id="rad" x1="0" x2="1" y1="0" y2="1">
            <stop offset="0" stopColor="oklch(0.74 0.19 35)"/>
            <stop offset="0.5" stopColor="oklch(0.66 0.25 350)"/>
            <stop offset="1" stopColor="oklch(0.58 0.22 300)"/>
          </linearGradient>
        </defs>
        <circle cx="70" cy="70" r={r} fill="none" stroke="var(--chip)" strokeWidth="12"/>
        <circle cx="70" cy="70" r={r} fill="none" stroke="url(#rad)" strokeWidth="12"
                strokeLinecap="round"
                strokeDasharray={`${c * pct} ${c}`}
                transform="rotate(-90 70 70)"/>
      </svg>
      <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
        <div style={{ textAlign: 'center' }}>
          <div className="is-grad-text" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 30, letterSpacing: '-0.02em', lineHeight: 1 }}>{er.toFixed(1)}%</div>
          <div style={{ fontSize: 10, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', letterSpacing: '.1em', marginTop: 2 }}>ENGAGEMENT</div>
        </div>
      </div>
    </div>
  );
}
function MetricBar({ label, value, max, fmt }) {
  const pct = Math.min(value / max, 1);
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 5 }}>
        <span style={{ color: 'var(--ink-2)' }}>{label}</span>
        <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 600 }}>{fmt(value)}</span>
      </div>
      <div style={{ height: 6, background: 'var(--chip)', borderRadius: 999, overflow: 'hidden' }}>
        <div style={{ width: `${pct * 100}%`, height: '100%', background: 'var(--grad)', borderRadius: 999 }}/>
      </div>
    </div>
  );
}
function AgeTimeline({ months }) {
  const years = Math.ceil(months / 12);
  const now = new Date(); const start = new Date(now); start.setMonth(start.getMonth() - months);
  return (
    <div>
      <div style={{ display: 'flex', gap: 4, height: 40, alignItems: 'flex-end' }}>
        {Array.from({ length: months }).map((_, i) => {
          const h = 20 + ((i * 37) % 20);
          return <div key={i} style={{ flex: 1, height: h, background: `color-mix(in oklab, var(--g${(i%3)+1}) 70%, transparent)`, borderRadius: 2 }}/>;
        })}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>
        <span>{start.toLocaleDateString('tr-TR', { month: 'short', year: 'numeric' })}</span>
        <span style={{ color: 'var(--ink)', fontWeight: 600 }}>{years} year{years > 1 ? 's' : ''} active · {months} posts/month avg</span>
        <span>Today</span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// AUTH screen
// ─────────────────────────────────────────────────────────────
function AuthScreen({ L, lang, setLang, theme, mode = 'login', onMode, onBack }) {
  const [m, setM] = _uS(mode);
  const [name, setName] = _uS('');
  const [email, setEmail] = _uS('');
  const [pass, setPass] = _uS('');
  const [phone, setPhone] = _uS('');
  const [loading, setLoading] = _uS(false);
  const [error, setError] = _uS('');
  // 2FA aşaması
  const [needs2FA, setNeeds2FA] = _uS(false);
  const [totpCode, setTotpCode] = _uS('');
  _uE(() => setM(mode), [mode]);

  const handleSubmit = async (e) => {
    e?.preventDefault?.();
    setError('');
    if (!email || !pass) return setError(lang === 'tr' ? 'E-posta ve şifre gerekli' : 'Email and password required');
    if (m === 'signup' && !name) return setError(lang === 'tr' ? 'İsim gerekli' : 'Name required');
    if (m === 'signup' && pass.length < 8) return setError(lang === 'tr' ? 'Şifre en az 8 karakter' : 'Password min 8 chars');
    if (needs2FA && totpCode.length !== 6) return setError(lang === 'tr' ? '6 haneli kodu gir' : 'Enter 6-digit code');

    if (!window.api) {
      // API yüklü değil → demo modu (localStorage)
      localStorage.setItem('instasatis_user', JSON.stringify({ email, name: name || email.split('@')[0] }));
      window.location.href = 'panelim.html';
      return;
    }

    setLoading(true);
    try {
      if (m === 'login') {
        const res = await window.api.auth.login(email, pass, needs2FA ? totpCode : undefined);
        // 2FA gerekiyorsa ikinci aşamaya geç
        if (res && res.needs2FA) {
          setNeeds2FA(true);
          setLoading(false);
          return;
        }
      } else {
        await window.api.auth.register(email, pass, name, phone);
      }
      window.location.href = 'panelim.html';
    } catch (err) {
      setError(err.message || (lang === 'tr' ? 'Bir hata oluştu' : 'An error occurred'));
    } finally {
      setLoading(false);
    }
  };
  return (
    <ScreenFrame theme={theme} width="100%" height="100%">
      <div data-screen-label="03 Auth (Desktop)" style={{ minHeight: '100%', display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
      {/* LEFT — brand panel */}
      <div style={{
        background: 'var(--grad)',
        position: 'relative', overflow: 'hidden',
        padding: '44px 44px', color: '#fff',
        display: 'flex', flexDirection: 'column',
      }}>
        <Logo size={32} wordColor="#fff"/>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.14em', textTransform: 'uppercase', opacity: 0.8, marginBottom: 16 }}>instasatis.com</div>
            <div className="is-h1" style={{ color: '#fff', fontSize: 48, maxWidth: 420 }}>
              {L.hero_title.split(',')[0]}, <br/>{L.hero_title.split(',')[1]?.trim()}
            </div>
            <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 10, opacity: 0.92 }}>
              {[L.trust_ssl, L.trust_escrow, L.trust_refund, L.trust_verified].map((t,i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14 }}>
                  <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'rgba(255,255,255,0.2)', display: 'grid', placeItems: 'center' }}>
                    <Icon name="check" size={13} color="#fff" strokeWidth={2.4}/>
                  </span> {t}
                </div>
              ))}
            </div>
          </div>
        </div>
        {/* decorative post mosaic */}
        <div style={{ position: 'absolute', right: -80, bottom: -40, width: 320, opacity: 0.25 }}>
          <PostGrid handle="@authdeco" postsStyle="fashion" cols={3} rows={3} gap={4} radius={8}/>
        </div>
      </div>

      {/* RIGHT — form */}
      <div style={{ padding: '44px 44px', display: 'flex', flexDirection: 'column', background: 'var(--bg)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <a onClick={onBack} style={{ fontSize: 13, color: 'var(--ink-3)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <Icon name="chevron-left" size={14}/> {L.nav_explore}
          </a>
          <button className="is-btn is-btn-ghost" onClick={() => setLang(lang === 'tr' ? 'en' : 'tr')}
                  style={{ padding: '6px 12px', fontSize: 12, fontFamily: 'var(--font-mono)', textTransform: 'uppercase' }}>
            <Icon name="globe" size={12}/> {lang}
          </button>
        </div>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ width: '100%', maxWidth: 360 }}>
            <div className="is-kicker" style={{ marginBottom: 10 }}>{L.auth_welcome}</div>
            <h2 className="is-h1" style={{ fontSize: 32, margin: '0 0 8px' }}>
              {m === 'login' ? L.auth_login : L.auth_signup}
            </h2>
            <p style={{ color: 'var(--ink-2)', fontSize: 14, marginBottom: 22 }}>{L.auth_sub}</p>

            {/* Tabs */}
            <div style={{ display: 'flex', gap: 4, background: 'var(--chip)', padding: 4, borderRadius: 12, marginBottom: 22 }}>
              {['login','signup'].map(t => (
                <button key={t} onClick={() => { setM(t); onMode && onMode(t); }}
                        style={{
                          flex: 1, border: 0, padding: '8px 12px', borderRadius: 8, cursor: 'pointer',
                          background: m === t ? 'var(--card)' : 'transparent',
                          color: m === t ? 'var(--ink)' : 'var(--ink-2)',
                          fontWeight: 600, fontSize: 13, fontFamily: 'var(--font-body)',
                          boxShadow: m === t ? '0 1px 3px rgba(0,0,0,.08)' : 'none',
                        }}>{t === 'login' ? L.auth_tab_login : L.auth_tab_signup}</button>
              ))}
            </div>

            <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {needs2FA ? (
                /* ── 2FA aşaması ── */
                <>
                  <div style={{ textAlign: 'center', padding: '8px 0 4px' }}>
                    <div style={{ width: 56, height: 56, borderRadius: 14, background: 'linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%)', display: 'inline-grid', placeItems: 'center', marginBottom: 12 }}>
                      <Icon name="shield" size={26} color="#fff"/>
                    </div>
                    <div style={{ fontWeight: 700, fontSize: 18, marginBottom: 4 }}>İki adımlı doğrulama</div>
                    <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>
                      Authenticator uygulamandan 6 haneli kodu gir
                    </div>
                  </div>
                  <input
                    type="text"
                    inputMode="numeric"
                    pattern="\d{6}"
                    maxLength={6}
                    autoFocus
                    value={totpCode}
                    onChange={(e) => setTotpCode(e.target.value.replace(/\D/g, ''))}
                    placeholder="000000"
                    style={{
                      width: '100%', padding: '16px', fontSize: 24, textAlign: 'center',
                      letterSpacing: '0.5em', fontFamily: 'var(--font-mono, ui-monospace, monospace)',
                      fontWeight: 600, background: 'var(--card)', color: 'var(--ink)',
                      border: '1.5px solid var(--line)', borderRadius: 12, outline: 'none',
                      boxSizing: 'border-box',
                    }}
                  />
                  <div style={{ fontSize: 11, color: 'var(--ink-3)', textAlign: 'center', marginTop: -4 }}>
                    Telefonunu kaybettin mi? Kurtarma kodlarından birini gir.
                  </div>
                </>
              ) : (
                /* ── Normal giriş/kayıt aşaması ── */
                <>
                  {m === 'signup' && (
                    <Field icon="users" placeholder={lang === 'tr' ? 'İsim' : 'Name'} value={name} onChange={setName}/>
                  )}
                  <Field icon="mail" placeholder={L.auth_email} type="email" value={email} onChange={setEmail}/>
                  <Field icon="lock" placeholder={L.auth_pass} type="password" value={pass} onChange={setPass}/>
                  {m === 'signup' && (
                    <Field icon="phone" placeholder={lang === 'tr' ? 'Telefon (ops.)' : 'Phone (opt.)'} type="tel" value={phone} onChange={setPhone}/>
                  )}
                  {m === 'login' && (
                    <div style={{ textAlign: 'right' }}>
                      <a href="sifre-sifirla.html" style={{ fontSize: 12, color: 'var(--ink-3)', cursor: 'pointer', textDecoration: 'none' }}>Şifremi unuttum</a>
                    </div>
                  )}
                </>
              )}
              {error && (
                <div style={{ padding: '10px 12px', background: 'rgba(220,38,38,0.08)', color: '#dc2626', borderRadius: 8, fontSize: 13, border: '1px solid rgba(220,38,38,0.2)' }}>
                  {error}
                </div>
              )}
              <button type="submit" disabled={loading} className="is-btn is-btn-primary" style={{ width: '100%', justifyContent: 'center', padding: '14px', fontSize: 15, opacity: loading ? 0.6 : 1 }}>
                {loading
                  ? (lang === 'tr' ? 'Bekle...' : 'Loading...')
                  : needs2FA
                    ? (lang === 'tr' ? 'Doğrula' : 'Verify')
                    : (m === 'login' ? L.auth_login : L.auth_signup)
                } <Icon name="arrow-right" size={14}/>
              </button>
              {needs2FA ? (
                <button
                  type="button"
                  onClick={() => { setNeeds2FA(false); setTotpCode(''); setError(''); }}
                  style={{
                    background: 'transparent', border: 0, color: 'var(--ink-3)',
                    cursor: 'pointer', fontSize: 12, padding: 8, fontFamily: 'var(--font-body)',
                  }}
                >
                  ← Geri dön
                </button>
              ) : (
                <>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--ink-3)', fontSize: 12, margin: '4px 0' }}>
                    <div style={{ flex: 1, height: 1, background: 'var(--line)' }}/> {L.auth_or} <div style={{ flex: 1, height: 1, background: 'var(--line)' }}/>
                  </div>
                  <button type="button" className="is-btn is-btn-outline" style={{ width: '100%', justifyContent: 'center', padding: '12px' }}>
                    <span style={{ width: 16, height: 16, borderRadius: '50%', background: 'conic-gradient(#4285f4, #34a853, #fbbc05, #ea4335, #4285f4)' }}/>
                    {L.auth_google}
                  </button>
                  <p style={{ fontSize: 11, color: 'var(--ink-3)', textAlign: 'center', marginTop: 8 }}>{L.auth_tos}</p>
                </>
              )}
            </form>
          </div>
        </div>
      </div>
      </div>
    </ScreenFrame>
  );
}
function Field({ icon, placeholder, type = 'text', defaultValue, value, onChange }) {
  const isControlled = value !== undefined && onChange;
  return (
    <div style={{ position: 'relative' }}>
      <span style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: 'var(--ink-3)' }}>
        <Icon name={icon} size={16}/>
      </span>
      {isControlled ? (
        <input className="is-input" placeholder={placeholder} type={type} value={value} onChange={(e) => onChange(e.target.value)} style={{ paddingLeft: 40 }}/>
      ) : (
        <input className="is-input" placeholder={placeholder} type={type} defaultValue={defaultValue || ''} style={{ paddingLeft: 40 }}/>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// DASHBOARD — buyer side
// ─────────────────────────────────────────────────────────────
function DashboardScreen({ L, lang, setLang, theme, favs, setFavs, onView, onAuth }) {
  const [tab, setTab] = _uS('fav');
  const favItems = LISTINGS.filter(l => favs.includes(l.id));

  return (
    <ScreenFrame theme={theme} width="100%" height="100%">
      <div data-screen-label="04 Dashboard (Desktop)" style={{ minHeight: '100%' }}>
      <TopNav L={L} lang={lang} setLang={setLang} active="dash" onAuth={onAuth}/>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '32px', display: 'grid', gridTemplateColumns: '260px 1fr', gap: 32 }}>
        {/* Sidebar */}
        <aside style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div className="is-card" style={{ padding: 18, display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'var(--grad)', display: 'grid', placeItems: 'center', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 700 }}>{((typeof window !== 'undefined' && window.api?.getUser?.()?.name) || 'U').charAt(0).toUpperCase()}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{L.dash_hello}</div>
              <div style={{ fontWeight: 600, fontSize: 14 }}>{(typeof window !== 'undefined' && window.api?.getUser?.()?.name) || (typeof window !== 'undefined' && window.api?.getUser?.()?.email?.split('@')[0]) || 'Misafir'}</div>
            </div>
          </div>
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {[
              { id: 'fav', label: L.dash_fav, icon: 'heart', count: favs.length },
              { id: 'watch', label: L.dash_watch, icon: 'eye', count: 3 },
              { id: 'offers', label: L.dash_offers, icon: 'tag', count: 1 },
              { id: 'purchases', label: L.dash_purchases, icon: 'check', count: 2 },
              { id: 'security', label: lang === 'tr' ? 'Güvenlik' : 'Security', icon: 'shield', count: '·' },
            ].map(it => (
              <a key={it.id} onClick={() => setTab(it.id)}
                 style={{
                   padding: '10px 14px', borderRadius: 10, cursor: 'pointer',
                   display: 'flex', alignItems: 'center', gap: 10,
                   background: tab === it.id ? 'var(--chip)' : 'transparent',
                   color: tab === it.id ? 'var(--ink)' : 'var(--ink-2)',
                   fontWeight: tab === it.id ? 600 : 500, fontSize: 14,
                 }}>
                <Icon name={it.icon} size={16}/> <span style={{ flex: 1 }}>{it.label}</span>
                <span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', background: tab === it.id ? 'var(--card)' : 'var(--chip)', padding: '2px 7px', borderRadius: 999 }}>{it.count}</span>
              </a>
            ))}
          </nav>
          <div className="is-card" style={{ padding: 16, background: 'linear-gradient(135deg, color-mix(in oklab, var(--g1) 20%, var(--card)), var(--card))' }}>
            <Icon name="sparkle" size={18} color="var(--accent)"/>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, marginTop: 8 }}>Yardıma mı ihtiyacın var?</div>
            <div style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 2 }}>WhatsApp'tan 7/24 dönüyöruz.</div>
            <button className="is-btn is-btn-primary" style={{ marginTop: 10, padding: '8px 14px', fontSize: 12 }}>İletişime geç</button>
          </div>
        </aside>

        {/* Main */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
            <h2 className="is-h1" style={{ fontSize: 28, margin: 0 }}>
              {tab === 'fav' ? L.dash_fav : tab === 'watch' ? L.dash_watch : tab === 'offers' ? L.dash_offers : tab === 'security' ? (lang === 'tr' ? 'Güvenlik' : 'Security') : L.dash_purchases}
            </h2>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>
              {tab === 'fav' ? favs.length : tab === 'watch' ? 3 : tab === 'offers' ? 1 : 2} items
            </div>
          </div>

          {tab === 'fav' && (
            favItems.length === 0 ? (
              <div className="is-card" style={{ padding: 48, textAlign: 'center', color: 'var(--ink-3)' }}>
                <Icon name="heart" size={28} color="var(--ink-3)"/>
                <div style={{ marginTop: 10, fontSize: 14 }}>{L.empty_fav}</div>
              </div>
            ) : (
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'var(--gap)' }}>
                {favItems.map(l => (
                  <ListingCard key={l.id} listing={l} L={L} lang={lang} layout="passport"
                               isFav onToggleFav={(id) => setFavs(f => f.filter(x => x !== id))}
                               onView={onView}/>
                ))}
              </div>
            )
          )}

          {tab === 'offers' && (
            <div className="is-card" style={{ padding: 22 }}>
              <OfferRow L={L} lang={lang} listing={LISTINGS[1]} status="pending" amount={13500}/>
            </div>
          )}
          {tab === 'watch' && (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--gap)' }}>
              {[LISTINGS[3], LISTINGS[6], LISTINGS[11]].map(l => (
                <ListingCard key={l.id} listing={l} L={L} lang={lang} layout="stat"
                             isFav={favs.includes(l.id)}
                             onToggleFav={(id) => setFavs(f => f.includes(id) ? f.filter(x => x !== id) : [...f, id])}
                             onView={onView}/>
              ))}
            </div>
          )}
          {tab === 'purchases' && (
            <div className="is-card" style={{ padding: 0, overflow: 'hidden' }}>
              {[
                { l: LISTINGS[2], date: '12 Nis 2026', status: 'delivered' },
                { l: LISTINGS[5], date: '28 Mar 2026', status: 'delivered' },
              ].map((p, i) => (
                <PurchaseRow key={i} L={L} lang={lang} {...p} isFirst={i === 0}/>
              ))}
            </div>
          )}
          {tab === 'security' && <SecurityPanel L={L} lang={lang}/>}
        </div>
      </div>
      </div>
    </ScreenFrame>
  );
}

function OfferRow({ L, lang, listing, status, amount }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <div style={{ width: 64 }}><PostGrid handle={listing.handle} postsStyle={listing.postsStyle} cols={2} rows={2} gap={2} radius={4}/></div>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15 }}>{listing.handle}</div>
        <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{L[`niche_${listing.niche}`]} · {fmtNum(listing.followers)} {L.card_followers}</div>
      </div>
      <div style={{ textAlign: 'right' }}>
        <div style={{ fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase' }}>Teklifin</div>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18 }}>{fmtPrice(amount, lang)}</div>
      </div>
      <span className="is-chip" style={{ background: 'var(--warn)', color: '#fff' }}>Bekliyor</span>
    </div>
  );
}
function PurchaseRow({ L, lang, l, date, status, isFirst }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: 20, borderTop: isFirst ? 'none' : '1px solid var(--line-2)' }}>
      <Avatar handle={l.handle} postsStyle={l.postsStyle} size={42} ring={false}/>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15 }}>{l.handle}</div>
        <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{date} · Teslim edildi</div>
      </div>
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16 }}>{fmtPrice(l.price, lang)}</div>
      <span className="is-chip" style={{ background: 'var(--success)', color: '#fff' }}>
        <Icon name="check" size={11} strokeWidth={2.4}/> Teslim
      </span>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Satıcı kartı — listing aside'da gösterilen mini profil
// ─────────────────────────────────────────────────────────────
function SellerCard({ listing, lang, L }) {
  const l = listing;
  // Mock satıcı verisi (API olunca gerçek gelecek)
  const seller = {
    name: l.seller_name || (l.handle.replace('@','').split('.')[0].charAt(0).toUpperCase() + l.handle.replace('@','').split('.')[0].slice(1) + ' Y.'),
    handle: '@seller_' + l.handle.replace('@','').slice(0, 8),
    rating: 4.8,
    review_count: 23,
    listings_count: 7,
    response_time: lang === 'tr' ? '~2 saat' : '~2h',
    member_since: 2023,
    verified_seller: true,
  };

  return (
    <div className="is-card" style={{ padding: 20 }}>
      <div className="is-kicker" style={{ marginBottom: 12 }}>{lang === 'tr' ? 'Satıcı' : 'Seller'}</div>
      <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 14 }}>
        <div style={{
          width: 48, height: 48, borderRadius: '50%',
          background: 'var(--grad)', color: '#fff',
          display: 'grid', placeItems: 'center',
          fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18,
          flexShrink: 0,
        }}>{seller.name.charAt(0)}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{ fontWeight: 600, fontSize: 14, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{seller.name}</div>
            {seller.verified_seller && <Icon name="verified" size={14} color="var(--accent)"/>}
          </div>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', marginTop: 2 }}>
            {lang === 'tr' ? 'Üye' : 'Member'} {seller.member_since}
          </div>
        </div>
      </div>

      {/* Rating */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
        <StarRating value={seller.rating} size={14}/>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16 }}>{seller.rating}</span>
        <span style={{ fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>
          ({seller.review_count} {lang === 'tr' ? 'yorum' : 'reviews'})
        </span>
      </div>

      {/* İstatistikler */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 12, paddingTop: 12, borderTop: '1px dashed var(--line)' }}>
        <div>
          <div style={{ fontSize: 10, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '.06em' }}>
            {lang === 'tr' ? 'Toplam İlan' : 'Listings'}
          </div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16 }}>{seller.listings_count}</div>
        </div>
        <div>
          <div style={{ fontSize: 10, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '.06em' }}>
            {lang === 'tr' ? 'Cevap Süresi' : 'Response'}
          </div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16 }}>{seller.response_time}</div>
        </div>
      </div>

      <a href="#" style={{ display: 'block', textAlign: 'center', fontSize: 12, color: 'var(--accent)', fontWeight: 600, fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '.06em', textDecoration: 'none' }}>
        {lang === 'tr' ? 'Tüm ilanlarını gör →' : 'View all listings →'}
      </a>
    </div>
  );
}

// Yıldız puanlama
function StarRating({ value, size = 16, interactive = false, onChange }) {
  const stars = [1, 2, 3, 4, 5];
  return (
    <div style={{ display: 'inline-flex', gap: 2 }}>
      {stars.map(s => {
        const filled = value >= s;
        const half = !filled && value >= s - 0.5;
        return (
          <button key={s}
                  onClick={() => interactive && onChange?.(s)}
                  disabled={!interactive}
                  style={{
                    background: 'none', border: 0, padding: 0,
                    cursor: interactive ? 'pointer' : 'default',
                    color: filled || half ? '#f5b800' : 'var(--line)',
                    display: 'inline-flex',
                  }}>
            <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
              {half ? (
                <>
                  <defs>
                    <linearGradient id={`half-${s}`}>
                      <stop offset="50%" stopColor="#f5b800"/>
                      <stop offset="50%" stopColor="var(--line)"/>
                    </linearGradient>
                  </defs>
                  <path fill={`url(#half-${s})`} d="M12 2l3 6.9 7.5.7-5.6 5.1 1.7 7.4L12 18l-6.6 4 1.7-7.4L1.5 9.6l7.5-.7L12 2z"/>
                </>
              ) : (
                <path d="M12 2l3 6.9 7.5.7-5.6 5.1 1.7 7.4L12 18l-6.6 4 1.7-7.4L1.5 9.6l7.5-.7L12 2z"/>
              )}
            </svg>
          </button>
        );
      })}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Yorumlar bölümü
// ─────────────────────────────────────────────────────────────
function ReviewsSection({ listing, lang, L }) {
  // Mock yorumlar (API'den gelecek)
  const reviews = [
    { id: 1, name: 'Ahmet K.', initials: 'AK', rating: 5, date: '2 hafta önce', text: lang === 'tr' ? 'Süreç çok pürüzsüzdü, hesap aynen ilanda yazdığı gibiydi. Komisyon karşılığında bu güvenliği almak çok değerli.' : 'Smooth process, account exactly as listed. Worth the commission for the security.', verified_purchase: true },
    { id: 2, name: 'Selin Ö.', initials: 'SÖ', rating: 5, date: '1 ay önce', text: lang === 'tr' ? 'Satıcı çok hızlı yanıt verdi ve devir 24 saat içinde tamamlandı. Tavsiye ederim.' : 'Seller responded quickly, transfer completed within 24 hours. Recommended.', verified_purchase: true },
    { id: 3, name: 'Mert D.', initials: 'MD', rating: 4, date: '2 ay önce', text: lang === 'tr' ? 'Hesap iyi, takipçi sayısı doğru. Tek eksik birkaç eski post silinmesi gerekti.' : 'Good account, follower count accurate. Only minor: had to delete some old posts.', verified_purchase: true },
  ];

  const avg = reviews.reduce((s, r) => s + r.rating, 0) / reviews.length;
  const distribution = [5,4,3,2,1].map(n => ({
    n, count: reviews.filter(r => r.rating === n).length,
    pct: (reviews.filter(r => r.rating === n).length / reviews.length) * 100,
  }));

  return (
    <div className="is-card" style={{ padding: 24 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 18 }}>
        <div className="is-kicker">{lang === 'tr' ? 'Yorumlar & Değerlendirmeler' : 'Reviews & Ratings'}</div>
        <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>{reviews.length} {lang === 'tr' ? 'yorum' : 'reviews'}</span>
      </div>

      {/* Özet */}
      <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 24, marginBottom: 24, paddingBottom: 24, borderBottom: '1px solid var(--line-2)' }}>
        <div style={{ textAlign: 'center' }}>
          <div className="is-grad-text" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 56, lineHeight: 1, letterSpacing: '-0.03em' }}>
            {avg.toFixed(1)}
          </div>
          <div style={{ marginTop: 6 }}><StarRating value={avg} size={16}/></div>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', marginTop: 4 }}>
            {reviews.length} {lang === 'tr' ? 'değerlendirme' : 'ratings'}
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {distribution.map(d => (
            <div key={d.n} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12 }}>
              <span style={{ width: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>{d.n}</span>
              <Icon name="star" size={11} color="#f5b800"/>
              <div style={{ flex: 1, height: 6, background: 'var(--chip)', borderRadius: 999, overflow: 'hidden' }}>
                <div style={{ width: `${d.pct}%`, height: '100%', background: '#f5b800', borderRadius: 999 }}/>
              </div>
              <span style={{ width: 24, textAlign: 'right', color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', fontSize: 11 }}>{d.count}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Yorum listesi */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        {reviews.map(r => (
          <div key={r.id} style={{ display: 'flex', gap: 14 }}>
            <div style={{
              width: 40, height: 40, borderRadius: '50%',
              background: 'var(--chip)', color: 'var(--ink)',
              display: 'grid', placeItems: 'center', flexShrink: 0,
              fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14,
            }}>{r.initials}</div>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                <span style={{ fontWeight: 600, fontSize: 14 }}>{r.name}</span>
                {r.verified_purchase && (
                  <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--success)', background: 'color-mix(in oklab, var(--success) 12%, transparent)', padding: '2px 6px', borderRadius: 4, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                    <Icon name="check" size={9}/>
                    {lang === 'tr' ? 'DOĞRULANMIŞ ALIM' : 'VERIFIED'}
                  </span>
                )}
                <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>{r.date}</span>
              </div>
              <div style={{ marginBottom: 6 }}><StarRating value={r.rating} size={12}/></div>
              <p style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.55, margin: 0 }}>{r.text}</p>
            </div>
          </div>
        ))}
      </div>

      <button style={{
        marginTop: 18, width: '100%', padding: '10px',
        background: 'transparent', border: '1px solid var(--line)',
        borderRadius: 10, color: 'var(--ink-2)', fontSize: 12,
        fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '.06em',
        cursor: 'pointer', fontWeight: 600,
      }}>
        {lang === 'tr' ? 'Tüm Yorumları Gör' : 'View All Reviews'}
      </button>
    </div>
  );
}

Object.assign(window, { HomeScreen, DetailScreen, AuthScreen, DashboardScreen, SellerCard, StarRating, ReviewsSection });
