// Sakarya hizmet bölgesi — local SEO content

const DISTRICTS = [
  'Adapazarı', 'Serdivan', 'Erenler', 'Arifiye',
  'Hendek', 'Akyazı', 'Karasu', 'Sapanca',
  'Geyve', 'Pamukova', 'Söğütlü', 'Karapürçek',
  'Ferizli', 'Taraklı', 'Kaynarca', 'Kocaali',
];

const SEO_SERVICES = [
  'bilgisayar servisi',
  'yazıcı & toner tedariği',
  'CCTV kamera sistemleri',
  'kurumsal siber güvenlik',
  'PDKS personel takibi',
  'network ve WiFi kurulumu',
  'ERP yazılım (Mikro, WOLVOX)',
  'toplu ofis ve teknoloji tedariği',
];

const ServiceAreas = () => (
  <section id="bolgeler" className="section reveal" style={{ background: 'var(--surface)' }}>
    <div className="wrap">
      <div style={{ maxWidth: 720, marginBottom: 56 }}>
        <div className="eyebrow" style={{ marginBottom: 12 }}>Hizmet Bölgemiz</div>
        <h2 className="h-section">
          Sakarya'nın <span style={{ color: 'var(--c-datakor)' }}>her ilçesinde</span> yerinde destek.
        </h2>
        <p className="body-lg" style={{ marginTop: 18, maxWidth: 620 }}>
          Adapazarı merkezli çalışıyoruz. Serdivan'dan Karasu'ya, Hendek'ten Geyve'ye
          Sakarya'nın 16 ilçesine yerinde kurumsal IT, siber güvenlik ve teknik
          servis hizmeti veriyoruz.
        </p>
      </div>

      <div className="areas-grid" style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20,
      }}>
        <div className="card" style={{ padding: 32 }}>
          <div className="eyebrow" style={{ marginBottom: 18, color: 'var(--muted)' }}>
            16 İlçe · Aktif Hizmet
          </div>
          <div className="district-grid" style={{
            display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0,
          }}>
            {DISTRICTS.map(d => (
              <div key={d} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '13px 6px',
                borderBottom: '1px solid var(--line)',
                fontFamily: 'var(--display)', fontWeight: 600, fontSize: 16.5,
                color: 'var(--ink)',
              }}>
                <span aria-hidden style={{
                  width: 6, height: 6, borderRadius: 999, background: 'var(--c-datakor)',
                }} />
                {d}
              </div>
            ))}
          </div>
        </div>

        <div className="card" style={{ padding: 32 }}>
          <div className="eyebrow" style={{ marginBottom: 18, color: 'var(--muted)' }}>
            Bölgede Verilen Hizmetler
          </div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
            {SEO_SERVICES.map(k => (
              <li key={k} style={{
                fontFamily: 'var(--sans)', fontSize: 16, fontWeight: 500,
                color: 'var(--ink-2)', padding: '14px 0',
                borderBottom: '1px solid var(--line)',
                display: 'flex', alignItems: 'baseline', gap: 12,
              }}>
                <span aria-hidden style={{
                  color: 'var(--c-adaplanet)', fontSize: 16, fontWeight: 700,
                  flex: '0 0 16px',
                }}>→</span>
                <span>
                  Sakarya'da <strong style={{ color: 'var(--ink)', fontWeight: 700 }}>{k}</strong>
                </span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>

    <style>{`
      @media (max-width: 900px) {
        .areas-grid { grid-template-columns: 1fr !important; }
      }
      @media (max-width: 500px) {
        .district-grid { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </section>
);

Object.assign(window, { ServiceAreas, DISTRICTS });