function Categories() {
  const isTR = window.__locale === 'tr';
  const cats = [
    { g: '🕌', tr: 'Cami',     en: 'Mosque' },
    { g: '⛪', tr: 'Kilise',   en: 'Church' },
    { g: '🕍', tr: 'Sinagog',  en: 'Synagogue' },
    { g: '🏰', tr: 'Saray',    en: 'Palace' },
    { g: '🏯', tr: 'Kale',     en: 'Castle' },
    { g: '🗼', tr: 'Kule',     en: 'Tower' },
    { g: '🗿', tr: 'Anıt',     en: 'Monument' },
    { g: '🏛️', tr: 'Müze',    en: 'Museum' },
    { g: '🏺', tr: 'Sarnıç',   en: 'Cistern' },
    { g: '🌳', tr: 'Park',     en: 'Park' },
    { g: '🏪', tr: 'Çarşı',    en: 'Bazaar' },
    { g: '🌉', tr: 'Köprü',    en: 'Bridge' },
    { g: '🏛', tr: 'Tarihi',   en: 'Historic' },
    { g: '⭐', tr: 'Turistik', en: 'Attraction' },
  ];
  return (
    <section className="tight">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t('08 / KATEGORİLER', '08 / CATEGORIES')}</span>
            <h2 className="h-1">{t('14 tip.', '14 types.')} <span className="serif">{t('Sonsuz hikaye.', 'Endless stories.')}</span></h2>
          </div>
          <p className="lede" style={{ textAlign: 'right' }}>
            {t(
              'Her kategorinin kendi rengi, glyph\'i ve rozet seti var. "Cami Uzmanı" için 20 cami keşfedeceksin.',
              "Each category has its own color, glyph, and badge set. 20 mosques unlock the \"Mosque Expert\" title."
            )}
          </p>
        </div>
        <div className="cat-grid">
          {cats.map((c, i) => (
            <div key={i} className="cat-card">
              <div className="glyph">{c.g}</div>
              <div>
                <div className="name">{isTR ? c.tr : c.en}</div>
                <div className="en">{isTR ? c.en : c.tr}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Categories });