function Districts() {
  const data = [
    { slug: 'fatih',      m: 57, pct: 0 },
    { slug: 'beyoglu',    m: 45, pct: 0 },
    { slug: 'besiktas',   m: 22, pct: 0 },
    { slug: 'sisli',      m: 19, pct: 0 },
    { slug: 'sariyer',    m: 32, pct: 0 },
    { slug: 'kadikoy',    m: 19, pct: 0 },
    { slug: 'uskudar',    m: 26, pct: 1, active: true },
    { slug: 'beykoz',     m: 22, pct: 0 },
    { slug: 'eyupsultan', m: 19, pct: 0 },
    { slug: 'adalar',     m: 5,  pct: 0 },
    { slug: 'bakirkoy',   m: 11, pct: 0 },
    { slug: 'zeytinburnu',m: 6,  pct: 0 },
  ];

  const allDistricts = (typeof window !== 'undefined' && window.ISTANBUL_DISTRICTS) || [];
  const vb = (typeof window !== 'undefined' && window.ISTANBUL_VIEWBOX) || { w: 1000, h: 700 };

  // Merge geometry with metadata by slug, keeping only matching records
  const districts = data
    .map(d => {
      const geo = allDistricts.find(x => x.slug === d.slug);
      if (!geo) return null;
      return { ...d, ...geo };
    })
    .filter(Boolean)
    .sort((a, b) => b.count - a.count);

  const [active, setActive] = React.useState(0);
  const current = districts[active] || {};

  return (
    <section id="ilceler">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t('07 / 12 İLÇE', '07 / 12 DISTRICTS')}</span>
            <h2 className="h-1">{t('Sadece', 'Not just')} <span className="serif">Sultanahmet</span>{t(' değil.', '.')}</h2>
          </div>
          <p className="lede" style={{ textAlign: 'right' }}>
            {t(
              'Her mahallede bir 300 yıllık çeşme, her ilçede unutulmuş bir Bizans kilisesi. 14 kategori, 5 rarity, ~9.700 nokta.',
              'A 300-year-old fountain in every neighborhood, a forgotten Byzantine church in every district. 14 categories, 5 rarities, ~9,700 points.'
            )}
          </p>
        </div>

        <div className="districts-wrap">
          <div className="map-svg map-large">
            <div className="corner tl"/><div className="corner tr"/><div className="corner bl"/><div className="corner br"/>

            <svg viewBox={`0 0 ${vb.w} ${vb.h}`} preserveAspectRatio="xMidYMid meet">
              <defs>
                <pattern id="grid-filigree-lg" width="32" height="32" patternUnits="userSpaceOnUse">
                  <path d="M 32 0 L 0 0 0 32" fill="none"
                        stroke="#8B6914" strokeWidth="0.4" opacity="0.1"/>
                </pattern>
                <filter id="district-glow-lg" x="-20%" y="-20%" width="140%" height="140%">
                  <feGaussianBlur stdDeviation="5"/>
                </filter>
              </defs>

              <rect x="0" y="0" width={vb.w} height={vb.h} fill="rgba(44,95,92,0.14)"/>
              {/* Sea wave lines */}
              <g opacity="0.3" stroke="#2C5F5C" strokeWidth="0.5" fill="none">
                {Array.from({ length: 12 }).map((_, i) => (
                  <path key={'w'+i}
                    d={`M 0 ${50 + i*55} Q ${vb.w*0.3} ${40 + i*55} ${vb.w*0.6} ${50 + i*55} T ${vb.w} ${50 + i*55}`}
                    strokeDasharray="2 6"/>
                ))}
              </g>

              {/* Topographic rings */}
              {Array.from({ length: 8 }).map((_, i) => (
                <ellipse key={i} cx={vb.w*0.52} cy={vb.h*0.55}
                         rx={140 + i*55} ry={80 + i*35}
                         fill="none" stroke="#8B6914" strokeWidth="0.8"
                         opacity={0.14 - i*0.012}
                         strokeDasharray={i % 2 ? '4 8' : '0'}/>
              ))}

              <rect x="0" y="0" width={vb.w} height={vb.h} fill="url(#grid-filigree-lg)"/>

              {/* Out-of-scope districts — dim, non-interactive */}
              {allDistricts
                .filter(g => !districts.some(d => d.slug === g.slug))
                .map(g => (
                  <path key={'oos-'+g.slug} d={g.path} className="district-lg is-outside" />
                ))}

              {/* In-scope district polygons — click to focus */}
              {districts.map((d, i) => {
                const isActive = i === active;
                return (
                  <path
                    key={d.slug}
                    d={d.path}
                    className={`district-lg ${isActive ? 'is-active' : ''}`}
                    onClick={() => setActive(i)}
                    filter={isActive ? 'url(#district-glow-lg)' : ''}
                  />
                );
              })}

              {/* Labels */}
              {districts.map((d, i) => (
                <text key={'l'+d.slug}
                      x={d.cx} y={d.cy}
                      textAnchor="middle"
                      className={`district-label-lg ${i === active ? 'is-active' : ''}`}
                >{d.name.toUpperCase()}</text>
              ))}

              {/* Active ilçe ring */}
              {current && current.cx != null && (
                <g pointerEvents="none">
                  <circle cx={current.cx} cy={current.cy} r="18"
                          fill="none" stroke="#8B6914" strokeWidth="1.2"
                          strokeDasharray="3 4" opacity="0.75">
                    <animateTransform attributeName="transform" type="rotate"
                                      from={`0 ${current.cx} ${current.cy}`}
                                      to={`360 ${current.cx} ${current.cy}`}
                                      dur="22s" repeatCount="indefinite"/>
                  </circle>
                  <circle cx={current.cx} cy={current.cy} r="4" fill="#8B6914"/>
                </g>
              )}
            </svg>
          </div>

          <div>
            <div className="district-info">
              <div className="eyebrow">{String(active + 1).padStart(2, '0')} / {districts.length}</div>
              <div className="name" style={{ marginTop: 10 }}>{current.name}</div>
              <div className="stats">
                <div className="stat">
                  <div className="n">{current.m || '—'}</div>
                  <div className="l">{t('Mahalle', 'Neighborhoods')}</div>
                </div>
                <div className="stat">
                  <div className="n">{(current.count || 0).toLocaleString(window.__locale === 'tr' ? 'tr-TR' : 'en-US')}</div>
                  <div className="l">{t('Mekân', 'Places')}</div>
                </div>
                <div className="stat">
                  <div className="n" style={{ color: 'var(--teal)' }}>{window.__locale === 'tr' ? `%${current.pct || 0}` : `${current.pct || 0}%`}</div>
                  <div className="l">{t('Tamamlama', 'Completion')}</div>
                </div>
              </div>
            </div>

            <div className="district-pills" style={{ marginTop: 20 }}>
              {districts.map((d, i) => (
                <button key={d.slug} onClick={() => setActive(i)}
                        className={`district-pill ${i === active ? 'active' : ''}`}>
                  {d.name} <span className="n">/ {d.count >= 1000 ? (d.count/1000).toFixed(1)+'k' : d.count}</span>
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* ═══════ UYGULAMADAN: Gerçek pasaport pill'leri ═══════ */}
        <div className="pill-showcase">
          <div className="pill-showcase-head">
            <div>
              <span className="eyebrow gold">{t('UYGULAMA İÇİNDEN', 'FROM THE APP')}</span>
              <h3 className="h-3" style={{ marginTop: 8 }}>
                {t('İlçe atlas', 'District atlas')} <span className="serif">{t('mühürleri.', 'stamps.')}</span>
              </h3>
            </div>
            <p className="caption" style={{ maxWidth: 360 }}>
              {t(
                'Her ilçe kendi rengini, ikonunu ve dokusunu taşır. Üzerine gelin —',
                'Each district carries its own color, icon, and texture. Hover —'
              )}
              <span style={{ color: 'var(--gold)' }}> {t('UV ışık', 'UV light')} </span>
              {t('altında pulu okuyun.', 'reveals the stamp.')}
            </p>
          </div>

          <div className="atl-pill-grid">
            {PILL_DATA.map(p => (
              <DistrictPill key={p.slug} {...p}/>
            ))}
          </div>
          <div className="pill-showcase-foot">
            <span className="mrz">P&lt;TUR&lt;ATLAS&lt;DISTRICT&lt;&lt;12&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;</span>
            <span className="mrz">{t('HOVER ▸ UV REVEAL · CLICK ▸ İLÇE DETAY', 'HOVER ▸ UV REVEAL · CLICK ▸ DISTRICT DETAIL')}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// 12 merkez ilçe — renk, ikon, istatistik verileri
const PILL_DATA = [
  { slug:'fatih',       name:'Fatih',       icon:'🕌', color:'#D4A574', placeTotal:3680, placeUnlocked:0,  nbhdTotal:57, nbhdUnlocked:0,  gemTotal:96, gemUnlocked:0, completion:0.00 },
  { slug:'beyoglu',     name:'Beyoğlu',     icon:'🗼', color:'#E74C3C', placeTotal:1557, placeUnlocked:0,  nbhdTotal:45, nbhdUnlocked:0,  gemTotal:1,  gemUnlocked:0, completion:0.00 },
  { slug:'uskudar',     name:'Üsküdar',     icon:'🕍', color:'#F39C12', placeTotal:1006, placeUnlocked:12, nbhdTotal:26, nbhdUnlocked:3,  gemTotal:10, gemUnlocked:1, completion:0.012 },
  { slug:'besiktas',    name:'Beşiktaş',    icon:'⚓', color:'#2C2C2C', placeTotal:568,  placeUnlocked:0,  nbhdTotal:22, nbhdUnlocked:0,  gemTotal:19, gemUnlocked:0, completion:0.00 },
  { slug:'eyupsultan',  name:'Eyüpsultan',  icon:'⛲', color:'#2C5F5C', placeTotal:600,  placeUnlocked:0,  nbhdTotal:19, nbhdUnlocked:0,  gemTotal:3,  gemUnlocked:0, completion:0.00 },
  { slug:'kadikoy',     name:'Kadıköy',     icon:'🐃', color:'#00BCD4', placeTotal:470,  placeUnlocked:0,  nbhdTotal:19, nbhdUnlocked:0,  gemTotal:2,  gemUnlocked:0, completion:0.00 },
  { slug:'adalar',      name:'Adalar',      icon:'⛵', color:'#5D6D7E', placeTotal:439,  placeUnlocked:0,  nbhdTotal:5,  nbhdUnlocked:0,  gemTotal:0,  gemUnlocked:0, completion:0.00 },
  { slug:'sariyer',     name:'Sarıyer',     icon:'🌲', color:'#27AE60', placeTotal:430,  placeUnlocked:0,  nbhdTotal:32, nbhdUnlocked:0,  gemTotal:1,  gemUnlocked:0, completion:0.00 },
  { slug:'beykoz',      name:'Beykoz',      icon:'🌳', color:'#16A085', placeTotal:414,  placeUnlocked:0,  nbhdTotal:22, nbhdUnlocked:0,  gemTotal:0,  gemUnlocked:0, completion:0.00 },
  { slug:'zeytinburnu', name:'Zeytinburnu', icon:'🏺', color:'#A04000', placeTotal:274,  placeUnlocked:0,  nbhdTotal:6,  nbhdUnlocked:0,  gemTotal:0,  gemUnlocked:0, completion:0.00 },
  { slug:'sisli',       name:'Şişli',       icon:'🏛️', color:'#8E44AD', placeTotal:207,  placeUnlocked:0,  nbhdTotal:19, nbhdUnlocked:0,  gemTotal:0,  gemUnlocked:0, completion:0.00 },
  { slug:'bakirkoy',    name:'Bakırköy',    icon:'✈️', color:'#3498DB', placeTotal:81,   placeUnlocked:0,  nbhdTotal:11, nbhdUnlocked:0,  gemTotal:1,  gemUnlocked:0, completion:0.00 },
];
Object.assign(window, { Districts });