function Passport() {
  const stamps = [
    { name: 'Çengelköy', rarity: 'uncommon', glyph: '⛪', n: '14', done: true },
    { name: 'Beylerbeyi', rarity: 'rare', glyph: '🏰', n: '04', done: true },
    { name: 'Kuzguncuk', rarity: 'epic', glyph: '🕍', n: '04', done: true },
    { name: 'Salacak', rarity: 'legendary', glyph: '🗼', n: '—', done: false },
    { name: 'Acıbadem', rarity: 'empty', glyph: '◇', n: '—', done: false },
    { name: 'Ahmediye', rarity: 'empty', glyph: '◇', n: '—', done: false },
  ];
  const rows = window.__locale === 'tr' ? [
    { k: 'Sezon Anahtarı', v: 'Başvuru bir gün içinde onaylanır', color: 'var(--teal)' },
    { k: 'UV Motifleri', v: 'Topografi, elmas, yıldız ve Boğaz dalgası — ince filigran', color: 'var(--gold)' },
    { k: 'Altın Mühür', v: 'İlçe %100 tamamlandığında — TAMAMLANDI', color: 'var(--gold)' },
    { k: 'MRZ Etiketi', v: 'Seri no, şehir kodu, vatandaşlık kodu', color: 'var(--navy)' },
  ] : [
    { k: 'Season Key', v: 'Applications approved within a day', color: 'var(--teal)' },
    { k: 'UV Motifs', v: 'Topography, diamond, star, and Bosphorus wave — fine filigree', color: 'var(--gold)' },
    { k: 'Golden Seal', v: 'When a district reaches 100% — COMPLETED', color: 'var(--gold)' },
    { k: 'MRZ Label', v: 'Serial number, city code, citizenship code', color: 'var(--navy)' },
  ];
  return (
    <section id="pasaport">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow cyan">{t('02 / ATLAS', '02 / ATLAS')}</span>
            <h2 className="h-1">{t('Her ilçe bir sayfa.', 'Every district a page.')}<br/><span className="serif">{t('Her mahalle bir damga.', 'Every neighborhood a stamp.')}</span></h2>
          </div>
          <p className="lede" style={{ textAlign: 'right' }}>
            {t(
              'Her keşif pasaportuna damga olur. Damgaları istediğin gibi yerleştir. İlçeyi bitirince sayfayı altın bir mühür kapatır.',
              'Every discovery becomes a stamp in your passport. Arrange them however you like. Finish a district and a gold seal closes the page.'
            )}
          </p>
        </div>

        <div className="passport-wrap">
          <div className="passport-page">
            <div className="passport-head">
              <span>IST · ATLAS / XII DISTRICT</span>
              <span>{t('BÖLÜM 08 / 12', 'CHAPTER 08 / 12')}</span>
            </div>
            <div className="passport-title">Üsküdar</div>
            <div className="passport-subtitle">{t('Anadolu Yakası · 26 Mahalle · 1.006 Mekân', 'Asian Side · 26 Neighborhoods · 1,006 Places')}</div>

            <div className="stamp-grid">
              {stamps.map((s, i) => (
                <div key={i}
                     className={`stamp ${s.rarity} ${s.rarity === 'empty' ? 'empty' : ''} ${i % 2 ? 'tilt-2' : 'tilt-1'}`}>
                  <div>{s.glyph}</div>
                  <div>
                    <div className="n">{s.n}</div>
                    <div style={{ opacity: 0.7 }}>{s.name.toUpperCase().slice(0, 10)}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 20, position: 'relative', zIndex: 2 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', letterSpacing: '0.14em', marginBottom: 8 }}>
                <span>{t('12 / 1.006 MEKÂN', '12 / 1,006 PLACES')}</span>
                <span style={{ color: 'var(--gold)' }}>{t('%2 TAMAMLANDI', '2% COMPLETED')}</span>
              </div>
              <div style={{ height: 3, background: 'rgba(10,22,40,0.08)', borderRadius: 2, overflow: 'hidden' }}>
                <div style={{ width: '2%', height: '100%', background: 'var(--gold)' }}/>
              </div>
            </div>

            <div className="passport-mrz">
              <div className="line">P&lt;TURGEZGIN&lt;&lt;ATLAS&lt;ORNEK&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;</div>
              <div className="line">UV9726035IST2026M&lt;&lt;&lt;&lt;&lt;26DISC&lt;&lt;10BADGE&lt;&lt;15SEZON</div>
            </div>
          </div>

          <div>
            <h3 className="h-2" style={{ marginBottom: 18, fontFamily: 'var(--font-serif)', fontWeight: 400 }}>
              {t('12 ilçe.', '12 districts.')} <span className="serif" style={{ color: 'var(--gold)' }}>{t('12 farklı sayfa.', '12 distinct pages.')}</span>
            </h3>
            <p style={{ marginBottom: 24, maxWidth: 480, fontSize: 16 }}>
              {t(
                'Her ilçenin kendi damga seti, kendi rengi, kendi karakteri var. Üsküdar Beyoğlu gibi koleksiyon olmaz.',
                'Each district has its own stamp set, color, and character. Üsküdar collects nothing like Beyoğlu.'
              )}
            </p>

            <div className="nbhd-showcase">
              <div className="nbhd-showcase-head">
                <span className="eyebrow cyan">{t('UYGULAMA İÇİNDEN · ÜSKÜDAR / 26', 'FROM THE APP · ÜSKÜDAR / 26')}</span>
              </div>
              <div className="atl-nbhd-grid">
                {NBHD_DATA.map(n => (
                  <NeighborhoodPill key={n.name} {...n}/>
                ))}
              </div>
            </div>

            <div style={{ display: 'grid', gap: 10, marginTop: 24 }}>
              {rows.map((r, i) => (
                <div key={i} className="card" style={{ padding: '14px 20px', display: 'flex', alignItems: 'center', gap: 18 }}>
                  <div style={{ width: 4, height: 28, background: r.color, borderRadius: 2, flexShrink: 0 }}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em', color: 'var(--text-mute)', textTransform: 'uppercase' }}>{r.k}</div>
                    <div style={{ marginTop: 3, fontSize: 14, color: 'var(--text)' }}>{r.v}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Passport });

const NBHD_DATA = [
  { name: 'Çengelköy',  icon: '⛪', color: '#F39C12', placeTotal: 14, placeUnlocked: 14, gemTotal: 2, gemUnlocked: 1, completion: 1.00, topRarity: { key: 'rare',      color: '#3B82F6' } },
  { name: 'Beylerbeyi', icon: '🏰', color: '#F39C12', placeTotal: 11, placeUnlocked: 4,  gemTotal: 2, gemUnlocked: 0, completion: 0.36, topRarity: { key: 'epic',      color: '#A855F7' } },
  { name: 'Kuzguncuk',  icon: '🕍', color: '#F39C12', placeTotal: 10, placeUnlocked: 4,  gemTotal: 1, gemUnlocked: 1, completion: 0.40, spotlight: true, topRarity: { key: 'epic', color: '#A855F7' } },
  { name: 'Salacak',    icon: '🗼', color: '#F39C12', placeTotal: 8,  placeUnlocked: 1,  gemTotal: 1, gemUnlocked: 0, completion: 0.125, topRarity: { key: 'legendary', color: '#F5B301' } },
  { name: 'Acıbadem',   icon: '◇', color: '#F39C12', placeTotal: 9,  placeUnlocked: 0,  gemTotal: 1, gemUnlocked: 0, completion: 0.00, locked: true },
  { name: 'Ahmediye',   icon: '◇', color: '#F39C12', placeTotal: 12, placeUnlocked: 0,  gemTotal: 0, gemUnlocked: 0, completion: 0.00, locked: true },
];