function Rarity() {
  const isTR = window.__locale === 'tr';
  const tiers = [
    { name: 'Common',    tr: 'Yaygın',   abbr: isTR ? 'YGN' : 'CMN', note: isTR ? 'Mahalle çeşmesi, köprü başı' : 'Neighborhood fountain, bridgehead', color: '#A8B5C8' },
    { name: 'Uncommon',  tr: 'Nadir',    abbr: isTR ? 'NDR' : 'UNC', note: isTR ? 'Küçük mescit, tarihî sokak'   : 'Small mosque, historic street',    color: '#6A8F6F' },
    { name: 'Rare',      tr: 'Ender',    abbr: isTR ? 'END' : 'RAR', note: isTR ? 'Konak, kilise, han'          : 'Mansion, church, inn',            color: '#5A7E9E' },
    { name: 'Epic',      tr: 'Destansı', abbr: isTR ? 'DST' : 'EPC', note: isTR ? 'Saray bahçesi, müze'         : 'Palace garden, museum',           color: '#8068A6' },
    { name: 'Legendary', tr: 'Efsanevi', abbr: isTR ? 'EFS' : 'LGD', note: isTR ? 'Ayasofya, Topkapı, Galata'   : 'Hagia Sophia, Topkapı, Galata',   color: '#8B6914' },
  ];
  return (
    <section id="rarity" className="tight">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t('03 / MERTEBE', '03 / RARITY')}</span>
            <h2 className="h-1">{t('Beş mertebe.', 'Five rarities.')} <span className="serif">{t('Beş his.', 'Five feelings.')}</span></h2>
          </div>
          <p className="lede" style={{ textAlign: 'right' }}>
            {t(
              'Bir mahalle çeşmesi ile Ayasofya aynı şey değil. 5 mertebe; her birinin kendi rengi, kendi XP\'si, kendi rozeti var.',
              'A neighborhood fountain and Hagia Sophia are not the same. Five rarities; each with its own color, XP, and badge.'
            )}
          </p>
        </div>

        <div className="rarity-grid">
          {tiers.map((tier, i) => (
            <div key={i} className="rarity-card" style={{ '--glow': tier.color }}>
              <div className="orb"/>
              <div className="r-name">{tier.abbr} · {isTR ? tier.tr : tier.name}</div>
              <div className="r-tr">{isTR ? tier.name : tier.tr}</div>
              <div style={{ marginTop: 14, fontSize: 12, color: 'var(--text-mute)', textAlign: 'center', lineHeight: 1.45, padding: '0 4px' }}>
                {tier.note}
              </div>
            </div>
          ))}
        </div>

        <div className="rarity-showcase">
          <div className="rarity-showcase-head">
            <span className="eyebrow gold">{t('UYGULAMA İÇİNDEN', 'FROM THE APP')}</span>
            <h3 className="h-3" style={{ marginTop: 8 }}>
              {isTR ? (
                <>Ayasofya bir <span className="serif">efsane.</span> Sarnıç bir <span className="serif" style={{ color: '#A855F7' }}>destan.</span> Fatih Camii çeşmesi bir <span className="serif" style={{ color: '#3B82F6' }}>ender</span>.</>
              ) : (
                <>Hagia Sophia is a <span className="serif">legend.</span> The Cistern, an <span className="serif" style={{ color: '#A855F7' }}>epic.</span> The Fatih Mosque fountain, a <span className="serif" style={{ color: '#3B82F6' }}>rare</span>.</>
              )}
            </h3>
            <p className="caption" style={{ marginTop: 12, maxWidth: 640 }}>
              {t(
                "Kart bordürü, UV motif yoğunluğu, XP miktarı — hepsi mertebeye göre değişir.",
                "Card border, UV motif density, XP amount — all change by rarity."
              )}
            </p>
          </div>

          <div className="rarity-cards">
            <PlaceDetailPill
              name={isTR ? 'Fatih Camii Çeşmesi' : 'Fatih Mosque Fountain'}
              district="Fatih" neighborhood="Sultanahmet"
              description={t(
                'III. Ahmed döneminden kalma, mermer işçiliğiyle bilinen küçük bir külliye çeşmesi.',
                'A small complex fountain from the era of Ahmed III, known for its marble craftsmanship.'
              )}
              xp={50} rarity="rare" categoryIcon="⛲" unlocked={true}/>
            <PlaceDetailPill
              name={isTR ? 'Yerebatan Sarnıcı' : 'Basilica Cistern'}
              district="Fatih" neighborhood="Cankurtaran"
              description={t(
                '336 sütunun taşıdığı, Medusa başlarıyla ünlü 6. yüzyıldan kalma yeraltı sarnıcı.',
                'A 6th-century underground cistern supported by 336 columns, famed for its Medusa heads.'
              )}
              xp={180} rarity="epic" categoryIcon="🏛️" unlocked={false}/>
            <PlaceDetailPill
              name={isTR ? 'Ayasofya' : 'Hagia Sophia'}
              district="Fatih" neighborhood="Sultanahmet"
              description={t(
                "1500 yıllık mimari şaheser — bazilika, cami, müze, tekrar cami. İstanbul'un en ikonik yapısı.",
                "A 1,500-year-old architectural masterpiece — basilica, mosque, museum, then mosque again. Istanbul's most iconic structure."
              )}
              xp={500} rarity="legendary" categoryIcon="🕌" unlocked={false}/>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Rarity });