/* listgetbuy — Seller scroll story (satıcı gözünden, scroll-position driven) */
const sClamp = (v, a = 0, b = 1) => Math.max(a, Math.min(b, v));
const sLerp = (a, b, t) => a + (b - a) * t;
const sEaseIO = (t) => (t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2);
const sTL = (n) => '€' + Math.round(n).toLocaleString('de-DE');

const S_BUDGET = 550;
const S_TH = [0.04, 0.30, 0.58, 0.86];
const SB = { introEnd: 0.12, offEnd: 0.50, dealEnd: 0.66, payEnd: 0.84 };

const S_STEPS_LANG = {
  tr: [
    { k: '01', t: 'Talep zaten kapında', s: 'Alıcı ne istediğini bütçesiyle yazar. Sen aramazsın — iş ayağına gelir.' },
    { k: '02', t: 'Reklam yok, doping yok', s: 'Görünmek için kuruş harcamazsın. Vitrin yarışı, algoritma oyunu yok.' },
    { k: '03', t: 'Tek yapman gereken: teklif ver', s: 'Seni öne çıkaran tek şey fiyatın. Birkaç saniyede teklifini bırak.' },
    { k: '04', t: 'Rekabette öne geç', s: 'En iyi teklif en üstte. Çaba değil, doğru fiyat kazandırır.' },
    { k: '05', t: 'Süre dolunca anında sat', s: 'Satış senin. Ödeme güvende, beklemek ve pazarlık yok.' },
  ],
  en: [
    { k: '01', t: 'Demands are at your doorstep', s: 'The buyer writes what they want and their budget. No searching — work comes to you.' },
    { k: '02', t: 'No ads, no listing fees', s: 'You don\'t spend a penny to be seen. No bidding wars for visibility, no algorithm games.' },
    { k: '03', t: 'All you do is make offers', s: 'The only thing that highlights you is your price. Leave your offer in seconds.' },
    { k: '04', t: 'Lead the competition', s: 'The best offer is at the top. True price wins, not marketing effort.' },
    { k: '05', t: 'Sell instantly when time is up', s: 'The sale is yours. Payment is secured, no waiting, no negotiation.' },
  ],
  de: [
    { k: '01', t: 'Nachfragen vor deiner Tür', s: 'Der Käufer schreibt, was er will und sein Budget. Kein Suchen — die Arbeit kommt zu dir.' },
    { k: '02', t: 'Keine Werbung, keine Gebühren', s: 'Du gibst keinen Cent aus, um gesehen zu werden. Keine Schaufenster-Rennen, keine Algorithmen.' },
    { k: '03', t: 'Gib einfach Angebote ab', s: 'Das Einzige, was dich hervorhebt, ist dein Preis. Hinterlasse dein Angebot in Sekunden.' },
    { k: '04', t: 'Führe den Wettbewerb an', s: 'Das beste Angebot steht ganz oben. Der richtige Preis gewinnt, nicht der Aufwand.' },
    { k: '05', t: 'Sofort verkaufen bei Zeitablauf', s: 'Der Verkauf gehört dir. Die Zahlung ist gesichert, kein Warten, kein Verhandeln.' },
  ],
};

const S_LABELS = {
  tr: {
    title: 'PlayStation 5 Slim aranıyor',
    buyer: 'Alıcı: Seda Y. · Bütçe',
    timeUp: 'Süre doldu',
    salePrice: 'SATIŞ TUTARI',
    yourOffer: 'SENİN TEKLİFİN · EN DÜŞÜK',
    lowestOffer: 'EN DÜŞÜK TEKLİF',
    buyerBudget: 'ALICININ BÜTÇESİ',
    adExpense: 'Reklam gideri €0',
    livePending: 'Talep yayında. Teklif vermek için hazırsın…',
    you: 'SEN',
    lowest: 'EN DÜŞÜK',
    outbid: 'GEÇİLDİ',
    offerWon: 'Teklifin kazandı',
    saleToYou: 'Satış sana kaldı',
    lowestYours: 'En düşük teklif senin',
    paymentSecured: 'Ödemen güvende',
    paidDesc: 'Alıcı ödedi. Ürünü gönder, para hesabına geçsin.',
    earnings: 'Kazancın',
    shipped: 'Kargoya verildi…',
    shipProduct: 'Ürünü gönder',
    sold: 'Sattın',
    details: 'PlayStation 5 Slim · Alıcı: Seda Y.',
    adStats: 'Reklam €0 · Doping €0 🎉',
    badge: 'SATICIYSAN',
    closeTitle: 'Satmak için ödemezsin. Sadece teklif verirsin.',
    closeStrips: ['Sıfır reklam, sıfır doping', 'Talep hazır, alıcı arıyor', 'Teklif ver, süre dolunca sat'],
    notes: {
      mert: 'Sıfır, faturalı',
      deniz: 'Kapalı kutu',
      burak: '2. kol dahil',
      you: 'Sıfır · kapalı kutu · 2 kol'
    }
  },
  en: {
    title: 'Looking for PlayStation 5 Slim',
    buyer: 'Buyer: Seda Y. · Budget',
    timeUp: 'Time expired',
    salePrice: 'SALE PRICE',
    yourOffer: 'YOUR OFFER · LOWEST',
    lowestOffer: 'LOWEST OFFER',
    buyerBudget: 'BUYER\'S BUDGET',
    adExpense: 'Ad expense €0',
    livePending: 'Request is live. Ready to make an offer…',
    you: 'YOU',
    lowest: 'LOWEST',
    outbid: 'OUTBID',
    offerWon: 'Your offer won',
    saleToYou: 'Sale awarded to you',
    lowestYours: 'You gave the lowest offer',
    paymentSecured: 'Payment secured',
    paidDesc: 'Buyer paid. Ship the product to receive funds.',
    earnings: 'Your earnings',
    shipped: 'Shipped…',
    shipProduct: 'Ship product',
    sold: 'Sold',
    details: 'PlayStation 5 Slim · Buyer: Seda Y.',
    adStats: 'Ad €0 · Boosting ₺0 🎉',
    badge: 'FOR SELLERS',
    closeTitle: 'You don\'t pay to sell. You just make offers.',
    closeStrips: ['Zero ads, zero boosting fees', 'Ready demand, active buyers', 'Make offers, sell when time is up'],
    notes: {
      mert: 'New, with invoice',
      deniz: 'Sealed box',
      burak: '2nd controller included',
      you: 'New · Sealed box · 2 controllers'
    }
  },
  de: {
    title: 'PlayStation 5 Slim gesucht',
    buyer: 'Käufer: Seda Y. · Budget',
    timeUp: 'Abgelaufen',
    salePrice: 'VERKAUFSPREIS',
    yourOffer: 'DEIN ANGEBOT · BESTES',
    lowestOffer: 'NIEDRIGSTES ANGEBOT',
    buyerBudget: 'KÄUFERBUDGET',
    adExpense: 'Werbekosten €0',
    livePending: 'Nachfrage live. Bereit für ein Angebot…',
    you: 'DU',
    lowest: 'BESTES',
    outbid: 'ÜBERBOTEN',
    offerWon: 'Dein Angebot hat gewonnen',
    saleToYou: 'Verkauf an dich vergeben',
    lowestYours: 'Dein Angebot ist das beste',
    paymentSecured: 'Zahlung gesichert',
    paidDesc: 'Käufer hat bezahlt. Versende das Produkt für die Auszahlung.',
    earnings: 'Dein Gewinn',
    shipped: 'Versendet…',
    shipProduct: 'Produkt versenden',
    sold: 'Verkauft',
    details: 'PlayStation 5 Slim · Käufer: Seda Y.',
    adStats: 'Werbung €0 · Doping €0 🎉',
    badge: 'FÜR VERKÄUFER',
    closeTitle: 'Du zahlst nichts fürs Verkaufen. Du machst nur Angebote.',
    closeStrips: ['Keine Werbung, keine Doping-Gebühren', 'Bereite Nachfrage, aktive Käufer', 'Angebote machen, verkaufen bei Zeitablauf'],
    notes: {
      mert: 'Neu, mit Rechnung',
      deniz: 'Originalverpackt',
      burak: 'Inkl. 2. Controller',
      you: 'Neu · OVP · 2 Controller'
    }
  }
};

function SAvatar({ o, size = 38 }) {
  const url = o.avatar || o.avatar_url;
  return (
    <div style={{
      width: size, height: size, borderRadius: o.shop ? size * 0.28 : 999, flexShrink: 0,
      background: url ? '#ddd' : o.you ? 'var(--green)' : `oklch(0.93 0.05 ${o.hue})`,
      color: o.you ? '#fff' : `oklch(0.45 0.12 ${o.hue})`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.36, fontWeight: 800, letterSpacing: '-0.02em',
      overflow: 'hidden',
    }}>
      {url ? <img src={url} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : o.initials}
    </div>
  );
}

function SOfferRow({ o, leader, beaten, reveal = 1, labels }) {
  const you = o.you;
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 11, padding: '11px 13px', borderRadius: 16,
      background: leader ? 'var(--green-soft)' : 'var(--surface)',
      boxShadow: leader ? '0 0 0 1.5px var(--green)' : 'inset 0 0 0 1px var(--line)',
      opacity: (beaten ? 0.5 : 1) * reveal,
      transform: `translateY(${(1 - reveal) * 12}px)`,
      transition: 'background .3s, box-shadow .3s',
    }}>
      <SAvatar o={o} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ fontSize: 14, fontWeight: 800, color: 'var(--ink)' }}>{o.name}</span>
          {you && <span className="mono" style={{ fontSize: 9, fontWeight: 700, color: '#fff', background: 'var(--green)', padding: '2px 6px', borderRadius: 6 }}>{labels.you}</span>}
        </div>
        <div style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{o.note}</div>
      </div>
      <div style={{ textAlign: 'right' }}>
        <div className="mono" style={{ fontSize: 15, fontWeight: 700, color: leader ? 'var(--green-ink)' : 'var(--ink)', textDecoration: beaten ? 'line-through' : 'none' }}>{sTL(o.price)}</div>
        {leader ? (
          <div className="mono" style={{ fontSize: 8.5, fontWeight: 700, color: 'var(--green-ink)', letterSpacing: '0.08em' }}>{labels.lowest}</div>
        ) : beaten ? (
          <div className="mono" style={{ fontSize: 8.5, fontWeight: 700, color: 'var(--muted)', letterSpacing: '0.06em' }}>{labels.outbid}</div>
        ) : null}
      </div>
    </div>
  );
}

function SStage({ p, lang = 'tr' }) {
  const labels = S_LABELS[lang] || S_LABELS.tr;
  const S_OFFERS = [
    { initials: 'MK', hue: 158, name: 'Mert K.',  note: labels.notes.mert,   price: 510, avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=120&h=120&q=80' },
    { initials: 'DA', hue: 340, name: 'Deniz A.', note: labels.notes.deniz,  price: 490, avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=120&h=120&q=80' },
    { initials: 'BT', hue: 25,  name: 'Burak T.', note: labels.notes.burak,  price: 470, avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=120&h=120&q=80' },
    { initials: 'SN', hue: 200, name: labels.you, note: labels.notes.you,    price: 449, you: true, shop: true, avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=120&h=120&q=80' },
  ];
  const S_LOW = S_OFFERS[S_OFFERS.length - 1].price; // your winning offer

  const tBand = sClamp((p - SB.introEnd) / (SB.offEnd - SB.introEnd));
  const dealLocked = p >= SB.offEnd;
  const paying = p >= SB.dealEnd;
  const paid = p >= SB.payEnd;

  const revealed = S_OFFERS.map((o, i) => ({ o, i, rev: p < SB.introEnd ? 0 : sClamp((tBand - S_TH[i]) / 0.07) }))
    .filter((x) => x.rev > 0.02);
  const ordered = [...revealed].sort((a, b) => a.o.price - b.o.price); // cheapest first
  const shown = revealed.length;
  const leaderIsYou = ordered.length > 0 && ordered[0].o.you;
  const ovOp = sClamp((p - (SB.offEnd - 0.02)) / 0.04);

  const bigPrice = p < SB.introEnd ? S_BUDGET : sLerp(S_BUDGET, S_LOW, sEaseIO(tBand));
  const showLow = p >= SB.introEnd;

  const remain = sClamp(1 - tBand);
  const totalMin = Math.round(remain * 188);
  const hh = String(Math.floor(totalMin / 60)).padStart(2, '0');
  const mm = String(totalMin % 60).padStart(2, '0');
  const payProg = sClamp((p - SB.dealEnd) / (SB.payEnd - SB.dealEnd));

  return (
    <div style={{
      width: 'min(380px, 90vw)', background: 'var(--surface)', borderRadius: 28,
      boxShadow: '0 30px 60px -20px rgba(20,40,30,0.28), 0 0 0 1px var(--line)',
      overflow: 'hidden', position: 'relative',
    }}>
      {/* request header */}
      <div style={{ padding: '16px 16px 14px', borderBottom: '1px solid var(--line)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 42, height: 42, borderRadius: 12, overflow: 'hidden', border: '1px solid var(--line)', flexShrink: 0 }}>
            <img src="https://images.unsplash.com/photo-1606813907291-d86efa9b94db?auto=format&fit=crop&w=120&h=120&q=80" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14.5, fontWeight: 800, color: 'var(--ink)', letterSpacing: '-0.02em' }}>{labels.title}</div>
            <div className="mono" style={{ fontSize: 11, fontWeight: 600, color: 'var(--muted)' }}>{labels.buyer} {sTL(S_BUDGET)}</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5, background: dealLocked ? 'var(--surface-2)' : 'var(--orange-soft)', padding: '6px 9px', borderRadius: 999 }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: dealLocked ? 'var(--muted)' : 'var(--orange)', animation: dealLocked ? 'none' : 'pulseDot 1.6s infinite' }} />
            <span className="mono" style={{ fontSize: 11, fontWeight: 700, color: dealLocked ? 'var(--muted)' : 'var(--orange)' }}>{dealLocked ? labels.timeUp : `${hh}:${mm}`}</span>
          </div>
        </div>
      </div>

      {/* big price + reklam ₺0 */}
      <div style={{ padding: '18px 18px 6px', textAlign: 'center' }}>
        <div className="mono" style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.12em', color: leaderIsYou ? 'var(--green-ink)' : showLow ? 'var(--ink-2)' : 'var(--muted)' }}>
          {paid ? labels.salePrice : leaderIsYou ? labels.yourOffer : showLow ? labels.lowestOffer : labels.buyerBudget}
        </div>
        <div className="mono" style={{ fontSize: 46, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.05, color: showLow ? 'var(--green-ink)' : 'var(--ink-2)', transition: 'color .4s' }}>
          {sTL(Math.round((paid ? S_LOW : bigPrice) / 50) * 50)}
        </div>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, marginTop: 2, padding: '3px 9px', borderRadius: 999, background: 'var(--green-soft)' }}>
          <span style={{ fontSize: 11, fontWeight: 800, color: 'var(--green-ink)' }}>✕</span>
          <span className="mono" style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--green-ink)' }}>{labels.adExpense}</span>
        </div>
      </div>

      {/* offers (sen + rakipler) */}
      <div style={{ padding: '10px 14px 16px', display: 'flex', flexDirection: 'column', gap: 8, minHeight: 220 }}>
        {shown === 0 && (
          <div style={{ textAlign: 'center', padding: '40px 16px', color: 'var(--muted)', fontSize: 13, fontWeight: 600 }}>
            {labels.livePending}
          </div>
        )}
        {ordered.map(({ o, rev }, idx) => (
          <SOfferRow key={o.initials} o={o} reveal={rev} leader={idx === 0} beaten={idx !== 0} labels={labels} />
        ))}
      </div>

      {/* sell / payout overlay */}
      {p >= SB.offEnd - 0.02 && (
        <div style={{
          position: 'absolute', inset: 0, background: paid ? 'var(--green)' : 'rgba(20,30,25,0.42)',
          backdropFilter: paid ? 'none' : 'blur(3px)', display: 'flex', alignItems: 'flex-end',
          transition: 'background .5s', opacity: ovOp,
        }}>
          {!paid && (
            <div style={{ width: '100%', background: 'var(--surface)', borderRadius: '24px 24px 0 0', padding: '20px 18px 22px', boxShadow: '0 -20px 40px rgba(0,0,0,0.18)' }}>
              {!paying ? (
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
                    <div style={{ width: 26, height: 26, borderRadius: 999, background: 'var(--green)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 15, fontWeight: 800 }}>✓</div>
                    <div style={{ fontSize: 17, fontWeight: 800, color: 'var(--ink)', letterSpacing: '-0.02em' }}>{labels.offerWon}</div>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 11, padding: 12, background: 'var(--green-soft)', borderRadius: 16, boxShadow: 'inset 0 0 0 1.5px var(--green)' }}>
                    <SAvatar o={S_OFFERS[3]} />
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 14, fontWeight: 800 }}>{labels.saleToYou}</div>
                      <div style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--muted)' }}>{labels.lowestYours}</div>
                    </div>
                    <div className="mono" style={{ fontSize: 18, fontWeight: 700, color: 'var(--green-ink)' }}>{sTL(S_LOW)}</div>
                  </div>
                </div>
              ) : (
                <div>
                  <div style={{ fontSize: 17, fontWeight: 800, color: 'var(--ink)', letterSpacing: '-0.02em', marginBottom: 4 }}>{labels.paymentSecured}</div>
                  <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--muted)', marginBottom: 14 }}>{labels.paidDesc}</div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
                    <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink-2)' }}>{labels.earnings}</span>
                    <span className="mono" style={{ fontSize: 22, fontWeight: 700, color: 'var(--ink)' }}>{sTL(S_LOW)}</span>
                  </div>
                  <div style={{ height: 46, borderRadius: 14, background: 'var(--green)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 15, fontWeight: 800, position: 'relative', overflow: 'hidden' }}>
                    <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${payProg * 100}%`, background: 'rgba(255,255,255,0.18)' }} />
                    <span style={{ position: 'relative' }}>{payProg > 0.92 ? labels.shipped : labels.shipProduct}</span>
                  </div>
                </div>
              )}
            </div>
          )}
          {paid && (
            <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: '#fff', padding: 24, textAlign: 'center' }}>
              <div style={{ width: 72, height: 72, borderRadius: 999, background: 'rgba(255,255,255,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 38 }}>✓</div>
              <div style={{ fontSize: 22, fontWeight: 800, margin: '16px 0 2px', letterSpacing: '-0.02em' }}>{labels.sold} · {sTL(S_LOW)}</div>
              <div style={{ fontSize: 13.5, fontWeight: 600, opacity: 0.9 }}>{labels.details}</div>
              <div style={{ marginTop: 18, padding: '10px 16px', background: 'rgba(255,255,255,0.16)', borderRadius: 999 }}>
                <span className="mono" style={{ fontSize: 14, fontWeight: 700 }}>{labels.adStats}</span>
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

function SellerStory({ lang = 'tr' }) {
  const ref = React.useRef(null);
  const [p, setP] = React.useState(0);
  React.useEffect(() => {
    let raf = 0;
    const update = () => {
      raf = 0;
      const el = ref.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const total = rect.height - window.innerHeight;
      setP(sClamp(-rect.top / total));
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    update();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); cancelAnimationFrame(raf); };
  }, []);

  const S_STEPS = S_STEPS_LANG[lang] || S_STEPS_LANG.tr;
  const labels = S_LABELS[lang] || S_LABELS.tr;

  const o0 = SB.introEnd, span = (SB.offEnd - SB.introEnd) / 3;
  const stepIdx = p < o0 ? 0
    : p < o0 + span ? 1
    : p < o0 + 2 * span ? 2
    : p < SB.dealEnd ? 3
    : 4;
  const step = S_STEPS[stepIdx];

  return (
    <section ref={ref} style={{ position: 'relative', height: '600vh' }}>
      <div style={{ position: 'sticky', top: 0, height: '100vh', display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
        <div style={{ width: 'min(1100px, 100%)', margin: '0 auto', padding: '0 5vw', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 'clamp(24px, 6vw, 80px)', flexWrap: 'wrap' }}>
          <div style={{ flex: '1 1 280px', maxWidth: 420, minWidth: 260 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '6px 12px', borderRadius: 999, background: 'var(--green-soft)', marginBottom: 22 }}>
              <span className="mono" style={{ fontSize: 11, fontWeight: 700, color: 'var(--green-ink)', letterSpacing: '0.06em' }}>{labels.badge}</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', marginBottom: 26 }}>
              {S_STEPS.map((s, i) => (
                <div key={s.k} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '5px 0', opacity: i === stepIdx ? 1 : 0.32, transition: 'opacity .3s' }}>
                  <span className="mono" style={{ fontSize: 11, fontWeight: 700, color: i === stepIdx ? 'var(--green-ink)' : 'var(--muted)', width: 20 }}>{s.k}</span>
                  <span style={{ height: 2, flex: i === stepIdx ? '0 0 28px' : '0 0 14px', borderRadius: 2, background: i === stepIdx ? 'var(--green)' : 'var(--line2)', transition: 'flex .3s, background .3s' }} />
                  <span style={{ fontSize: 12.5, fontWeight: 700, color: i === stepIdx ? 'var(--ink)' : 'var(--muted)' }}>{s.t}</span>
                </div>
              ))}
            </div>
            <div key={stepIdx}>
              <h2 style={{ fontSize: 'clamp(28px, 4vw, 40px)', fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1.08, color: 'var(--ink)', margin: '0 0 12px' }}>{step.t}</h2>
              <p style={{ fontSize: 'clamp(15px, 1.6vw, 17px)', fontWeight: 600, lineHeight: 1.5, color: 'var(--ink-2)', margin: 0, textWrap: 'pretty' }}>{step.s}</p>
            </div>
          </div>
          <div style={{ flex: '0 0 auto', display: 'flex', justifyContent: 'center' }}>
            <SStage p={p} lang={lang} />
          </div>
        </div>
      </div>
    </section>
  );
}

/* closing compare strip */
function SellerClose({ lang = 'tr' }) {
  const labels = S_LABELS[lang] || S_LABELS.tr;
  return (
    <section style={{ padding: 'clamp(40px, 8vh, 90px) 5vw clamp(60px, 10vh, 110px)', maxWidth: 1100, margin: '0 auto' }}>
      <h2 style={{ fontSize: 'clamp(26px, 4vw, 42px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1.05, margin: '0 0 28px', maxWidth: 560, textWrap: 'balance' }}>
        {labels.closeTitle}
      </h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 16 }}>
        {labels.closeStrips.map((text, i) => (
          <div key={i} style={{ padding: '18px 20px', borderRadius: 18, background: 'var(--green-soft)', boxShadow: 'inset 0 0 0 1.5px var(--green)' }}>
            <div className="mono" style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em', color: 'var(--green-ink)', marginBottom: 10 }}>LISTGETBUY</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '5px 0', fontSize: 13.5, fontWeight: 700, color: 'var(--green-ink)' }}>
              <span style={{ fontWeight: 800 }}>✓</span>{text}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function SellerSection({ lang = 'tr' }) {
  return (
    <div>
      <SellerStory lang={lang} />
      <SellerClose lang={lang} />
    </div>
  );
}

window.SellerSection = SellerSection;
