function Social() {
  const isTR = window.__locale === 'tr';
  const gems = isTR ? [
    { a: '01', n: 'Gezgin 01', msg: 'sana bir mekân önerdi', sub: 'Bakırköy Baruthanesi', c: 'var(--gold)' },
    { a: '02', n: 'Gezgin 02', msg: 'Panagia Belgradu\'yu önerdi', sub: 'Fatih · Ender', c: 'var(--teal)' },
    { a: '03', n: 'Gezgin 03', msg: 'on beş mekân paylaştı', sub: 'Haritada gör →', c: 'var(--text-soft)' },
  ] : [
    { a: '01', n: 'Traveler 01', msg: 'suggested a place to you', sub: 'Bakırköy Gunpowder Mill', c: 'var(--gold)' },
    { a: '02', n: 'Traveler 02', msg: 'suggested Panagia of Belgradu', sub: 'Fatih · Rare', c: 'var(--teal)' },
    { a: '03', n: 'Traveler 03', msg: 'shared fifteen places', sub: 'See on map →', c: 'var(--text-soft)' },
  ];
  const leaderboard = isTR ? [
    { r: 'I',   n: 'Gezgin 01',   v: '42 paylaşım' },
    { r: 'II',  n: 'Gezgin 02',   v: '31 paylaşım' },
    { r: 'III', n: 'Gezgin 03',   v: '24 paylaşım' },
    { r: 'IV',  n: 'Gezgin 04',   v: '19 paylaşım' },
    { r: 'V',   n: 'Gezgin 05',   v: '14 paylaşım' },
    { r: 'VI',  n: 'Gezgin 06',   v: '11 paylaşım' },
    { r: 'VII', n: 'Gezgin 07',   v: '09 paylaşım' },
  ] : [
    { r: 'I',   n: 'Traveler 01', v: '42 shares' },
    { r: 'II',  n: 'Traveler 02', v: '31 shares' },
    { r: 'III', n: 'Traveler 03', v: '24 shares' },
    { r: 'IV',  n: 'Traveler 04', v: '19 shares' },
    { r: 'V',   n: 'Traveler 05', v: '14 shares' },
    { r: 'VI',  n: 'Traveler 06', v: '11 shares' },
    { r: 'VII', n: 'Traveler 07', v: '09 shares' },
  ];
  const groups = isTR ? [
    { t: 'Ortak sohbet',  s: 'Her mesaj en fazla 500 karakter' },
    { t: 'Küçük oylama',  s: 'Hangi mekâna birlikte gidelim?' },
    { t: 'Ortak gezi',    s: 'Takvime düşen, paylaşılan bir plan' },
    { t: 'Ortak hedef',   s: 'Üç ayda yirmi mekân — birlikte' },
  ] : [
    { t: 'Shared chat',  s: 'Each message up to 500 characters' },
    { t: 'Small poll',   s: 'Which place shall we visit together?' },
    { t: 'Group trip',   s: 'A shared plan on the calendar' },
    { t: 'Shared goal',  s: 'Twenty places in three months — together' },
  ];
  const feed = isTR ? [
    { n: 'Gezgin 01',   act: 'Yedinci Gün Adventist Kilisesi\'ne vardı.', meta: 'Cami/Kilise · Ender' },
    { n: 'Gezgin 02',   act: 'Maceracı unvanına erişti.',                 meta: 'On beşinci basamak' },
    { n: 'Gezgin 03',   act: '"Cami Uzmanı" hâtırasını aldı.',            meta: 'Destansı · 80 / 80' },
  ] : [
    { n: 'Traveler 01', act: 'arrived at Seventh-day Adventist Church.',   meta: 'Mosque/Church · Rare' },
    { n: 'Traveler 02', act: 'reached the Adventurer title.',              meta: 'Fifteenth step' },
    { n: 'Traveler 03', act: 'earned the "Mosque Expert" memento.',        meta: 'Epic · 80 / 80' },
  ];
  const daysAgo = isTR ? '3 gün önce' : '3 days ago';
  return (
    <section id="sosyal">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t('06 / ORTAK HÂTIRA', '06 / SHARED MEMORY')}</span>
            <h2 className="h-1">{t('Şehir', 'A city')} <span className="serif">{t('yalnız gezilmez.', "isn't walked alone.")}</span></h2>
          </div>
          <p className="lede" style={{ textAlign: 'right' }}>
            {t(
              "Sevdiğin bir yeri arkadaşına öner. O varınca ikinizin de pasaportuna aynı tarih düşer. 50 kişilik gruplar kur, ortak hedefler koy.",
              "Recommend a place you love. When your friend arrives, the same date lands in both your passports. Build groups of 50, set shared goals."
            )}
          </p>
        </div>

        <div className="social-grid">
          <div className="social-card span-4 tall">
            <div className="label">{t('TAVSİYE DEFTERİ', 'RECOMMENDATION BOOK')}</div>
            <h3>{t('Sevdiğin bir yeri', 'Recommend a place you love')} <span className="serif">{t('bir dostuna öner.', 'to a friend.')}</span></h3>
            <p style={{ marginBottom: 22, fontSize: 14.5, color: 'var(--text-soft)' }}>
              {t(
                'Arkadaşın oraya vardığında ikinize de aynı bildirim gelir.',
                'When your friend arrives, the same notification reaches both of you.'
              )}
            </p>

            <div style={{ display: 'grid', gap: 10 }}>
              {gems.map((g, i) => (
                <div key={i} className="gem-card" style={{ opacity: 1 - i * 0.12 }}>
                  <div className="avatar" style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 18, letterSpacing: '-0.02em' }}>{g.a}</div>
                  <div className="body">
                    <div className="who" style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, fontSize: 16 }}>{g.n} <span className="dim" style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontStyle: 'normal' }}>{g.msg}</span></div>
                    <div className="msg" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{g.sub}</div>
                  </div>
                  <div className="diamond" style={{ background: g.c, boxShadow: 'none' }}/>
                </div>
              ))}
            </div>
          </div>

          <div className="social-card span-2 tall">
            <div className="label">{t("ŞEHRİN REHBERLERİ", "CITY'S GUIDES")}</div>
            <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 15, color: 'var(--text-soft)', marginTop: 6, marginBottom: 14, lineHeight: 1.4 }}>
              {t('Bu ay en çok mekân paylaşanlar.', 'Top sharers this month.')}
            </div>
            <div>
              {leaderboard.map((r, i) => (
                <div key={i} className={`lb-row ${i < 3 ? `rank-${i+1}` : ''}`}>
                  <div className="rank" style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 15 }}>{r.r}</div>
                  <div className="name">{r.n}</div>
                  <div className="xp" style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', color: 'var(--text-mute)' }}>{r.v}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="social-card span-3">
            <div className="label">{t('KÜÇÜK TOPLULUKLAR', 'SMALL COMMUNITIES')}</div>
            <h3 style={{ fontSize: 21, fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, lineHeight: 1.25 }}>
              {t('Elli kişiye kadar —', 'Up to fifty people —')} <span style={{ color: 'var(--gold)' }}>{t('bir mahalle kahvesi büyüklüğünde.', 'the size of a neighborhood café.')}</span>
            </h3>
            <div style={{ marginTop: 18, display: 'grid', gap: 8 }}>
              {groups.map((g, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', gap: 14, paddingBottom: 8, borderBottom: i < 3 ? '1px solid var(--stroke-hair)' : 'none' }}>
                  <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 15, color: 'var(--text)' }}>{g.t}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-mute)', textAlign: 'right' }}>{g.s}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="social-card span-3">
            <div className="label">{t('BULUŞMA · HAFTALIK', 'MEETUP · WEEKLY')}</div>
            <h3 style={{ fontSize: 21, fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400 }}>{t('Bir dostla, bir mekânda.', 'With a friend, at a place.')}</h3>
            <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 16 }}>
              <div style={{ textAlign: 'center', flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, letterSpacing: '-0.02em' }}>02</div>
                <div style={{ fontSize: 13, fontWeight: 500, marginTop: 4 }}>{isTR ? 'Gezgin 02' : 'Traveler 02'}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', marginTop: 4, letterSpacing: '0.12em' }}>{t('VARDI', 'ARRIVED')}</div>
              </div>
              <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, color: 'var(--text-mute)' }}>&</div>
              <div style={{ textAlign: 'center', flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, letterSpacing: '-0.02em' }}>01</div>
                <div style={{ fontSize: 13, fontWeight: 500, marginTop: 4 }}>{isTR ? 'Gezgin 01' : 'Traveler 01'}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--gold)', marginTop: 4, letterSpacing: '0.12em' }}>{t('YOLDA', 'ON THE WAY')}</div>
              </div>
            </div>
            <div style={{ marginTop: 18, paddingTop: 14, borderTop: '1px solid var(--stroke-hair)', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', letterSpacing: '0.14em', textAlign: 'center' }}>
              {t('CUMA · 16:00 · PİERRE LOTİ', 'FRIDAY · 16:00 · PİERRE LOTİ')}
            </div>
          </div>

          <div className="social-card span-6">
            <div className="label">{t('DEFTER · SON KAYITLAR', 'NOTEBOOK · LATEST ENTRIES')}</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginTop: 16 }}>
              {feed.map((a, i) => (
                <div key={i} style={{ padding: '18px 20px', border: '1px solid var(--stroke)', borderRadius: 4, background: 'var(--bg-card)' }}>
                  <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 17, color: 'var(--text)', lineHeight: 1.3 }}>{a.n}</div>
                  <div style={{ fontSize: 13, color: 'var(--text-soft)', lineHeight: 1.45, marginTop: 4 }}>{a.act}</div>
                  <div style={{ marginTop: 10, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{a.meta} · {daysAgo}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Social });