// Expertise / Hizmetler grid — light tiles, 7 capabilities

const ICONS = {
  hardware: (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="6" width="20" height="13" rx="1.5"/><path d="M4 16h20M11 22h6M9 22h10"/>
    </svg>
  ),
  supply: (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 9l9-4 9 4-9 4-9-4z"/><path d="M5 9v8l9 4 9-4V9"/><path d="M14 13v8"/>
    </svg>
  ),
  security: (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 4l8 3v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V7l8-3z"/><path d="M11 14l2 2 4-4"/>
    </svg>
  ),
  erp: (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="5" width="20" height="18" rx="1.5"/><path d="M4 10h20M9 14h4M9 18h7M17 14h2"/>
    </svg>
  ),
  network: (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="14" cy="14" r="3"/><circle cx="5" cy="6" r="1.5"/><circle cx="23" cy="6" r="1.5"/>
      <circle cx="5" cy="22" r="1.5"/><circle cx="23" cy="22" r="1.5"/>
      <path d="M6 7l5.5 5.5M22 7l-5.5 5.5M6 21l5.5-5M22 21l-5.5-5"/>
    </svg>
  ),
  cctv: (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="8" width="18" height="9" rx="1.5"/><path d="M21 11l4-2v8l-4-2z"/>
      <circle cx="9" cy="12.5" r="2"/><path d="M12 21h-3"/>
    </svg>
  ),
  pdks: (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="14" cy="10" r="3"/><path d="M7 22c0-3.3 3.1-6 7-6s7 2.7 7 6"/>
      <circle cx="22" cy="6" r="2.2"/><path d="M22 4.5v1.5l1 1"/>
    </svg>
  ),
  backup: (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 4l10 5-10 5L4 9z"/>
      <path d="M4 14l10 5 10-5"/>
      <path d="M4 19l10 5 10-5"/>
    </svg>
  ),
  supply2: (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 8l8-3 8 3v12l-8 3-8-3z"/>
      <path d="M14 5v18"/>
      <path d="M6 8l8 3 8-3"/>
    </svg>
  ),
  stationery: (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 22V8l5-4 5 4v14"/>
      <path d="M5 22h10"/>
      <path d="M10 4v18"/>
      <rect x="17" y="6" width="6" height="14" rx="1"/>
      <path d="M20 6v14"/>
    </svg>
  ),
  esign: (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 19c2-3 6-9 9-9 2 0 2 3 0 5s-5 4-3 5c1 .6 4-1 6-3"/>
      <path d="M4 24h20"/>
      <path d="M19 7l2-2 2 2-2 2z"/>
    </svg>
  ),
  copier: (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="5" y="11" width="18" height="10" rx="1.5"/>
      <path d="M8 11V5h12v6"/>
      <path d="M9 16h6"/>
      <path d="M18 16h2"/>
      <path d="M8 21v2h12v-2"/>
    </svg>
  ),
  mail: (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="6" width="22" height="16" rx="2"/>
      <path d="M3 8l11 8 11-8"/>
    </svg>
  ),
  contract: (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M7 4h10l4 4v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/>
      <path d="M17 4v4h4"/>
      <path d="M9 13h10M9 17h10M9 21h6"/>
    </svg>
  ),
};

const EXPERTISE = [
  { icon: 'hardware', t: 'Mağaza · Satış & Tamir',  d: 'Adapazarı mağazamızda kurumsal ve bireysel müşteriye bilgisayar, laptop, yazıcı satışı; donanım tamiri.', tag: 'Bilgim Bilgisayar', color: 'var(--c-bilgim)', soft: 'var(--c-bilgim-soft)' },
  { icon: 'copier',   t: 'Yazıcı & Fotokopi Tamiri', d: 'Endüstriyel fotokopi makineleri ve tüm marka yazıcı tamiri, periyodik bakım ve parça temini.',           tag: 'Bilgim Bilgisayar', color: 'var(--c-bilgim)', soft: 'var(--c-bilgim-soft)' },
  { icon: 'backup',   t: 'Yedekleme & Veri Koruma', d: 'NAS depolama, Narbulut bulut yedekleme ve 3-2-1 stratejisiyle ileri seviye veri koruma.', tag: 'Bilgim · Datakor', color: 'var(--c-datakor)', soft: 'var(--c-datakor-soft)' },
  { icon: 'erp',      t: 'ERP & Yazılım Danışmanlığı', d: 'Mikro ve Akınsoft WOLVOX yetkili satıcı. Kurulum, eğitim, güncelleme, e-fatura geçiş süreçleri ve süreç danışmanlığı.', tag: 'Bilgim Bilgisayar', color: 'var(--c-bilgim)', soft: 'var(--c-bilgim-soft)' },
  { icon: 'esign',    t: 'E-İmza · 15 dk Aktivasyon', d: 'Arksigner yetkili bayisi. 15 dakikada e-imza aktivasyonu, kullanıma hazır teslim.',   tag: 'Bilgim Bilgisayar', color: 'var(--c-bilgim)', soft: 'var(--c-bilgim-soft)' },
  { icon: 'mail',     t: 'Hosting & Kurumsal Mail',    d: 'Kurumsal hosting ve mail kurulumları. %100 karşıya ulaşma garantili kurumsal mail hizmeti.', tag: 'Bilgim Bilgisayar', color: 'var(--c-bilgim)', soft: 'var(--c-bilgim-soft)' },
  { icon: 'contract', t: 'Bakım Anlaşmaları & Yönetilen IT', d: 'Kurumsal bilgi işlem bakım anlaşmaları. Sunucu, firewall ve ağ altyapısında SLA\'lı destek.', tag: 'Bilgim · Datakor', color: 'var(--c-datakor)', soft: 'var(--c-datakor-soft)' },
  { icon: 'supply',   t: 'Kurumsal Tedarik',        d: 'Toplu satın alma, çerçeve sözleşmeler, ofis ve teknoloji ürünleri tek faturada.',         tag: 'Adaplanet', color: 'var(--c-adaplanet)', soft: 'var(--c-adaplanet-soft)' },
  { icon: 'supply2',  t: 'Muadil Toner & Sarf',     d: 'Geniş stok, hızlı teslimat. Tüm yazıcı modelleri için ekonomik muadil toner ve ofis sarf malzemesi.', tag: 'Adaplanet', color: 'var(--c-adaplanet)', soft: 'var(--c-adaplanet-soft)' },
  { icon: 'stationery', t: 'Kurumsal Kırtasiye',     d: 'Kalem, defter, dosyalama, ofis sarfı — kurumsal kırtasiye ürünleri toplu olarak tek faturada.',     tag: 'Adaplanet', color: 'var(--c-adaplanet)', soft: 'var(--c-adaplanet-soft)' },
  { icon: 'security', t: 'Siber Güvenlik',          d: 'Bitdefender endpoint koruması, WatchGuard firewall yönetimi, sızma testleri.',           tag: 'Datakor',   color: 'var(--c-datakor)',   soft: 'var(--c-datakor-soft)' },
  { icon: 'network',  t: 'Network & Altyapı',       d: 'Switch, router, WiFi tasarımı, VPN ve firewall altyapı kurulumu.',                       tag: 'Bilgim · Datakor', color: 'var(--c-datakor)', soft: 'var(--c-datakor-soft)' },
  { icon: 'cctv',     t: 'CCTV & Alarm',            d: 'IP kamera sistemleri, hırsızlık ve yangın alarmı, uzaktan izleme.',                       tag: 'Datakor',   color: 'var(--c-datakor)',   soft: 'var(--c-datakor-soft)' },
  { icon: 'pdks',     t: 'PDKS · Personel Takip',   d: 'Kart, parmak izi ve yüz tanıma ile personel devam kontrol sistemleri.',                  tag: 'Datakor',   color: 'var(--c-datakor)',   soft: 'var(--c-datakor-soft)' },
];

const Expertise = () => (
  <section id="hizmetler" className="section reveal">
    <div className="wrap">
      <div style={{ maxWidth: 720, marginBottom: 56 }}>
        <div className="eyebrow" style={{ marginBottom: 12 }}>Hizmetler</div>
        <h2 className="h-section">
          Bir telefon, <span style={{ color: 'var(--muted)' }}>yedi hizmet kategorisi.</span>
        </h2>
        <p className="body-lg" style={{ marginTop: 18, maxWidth: 620 }}>
          Donanımdan siber güvenliğe, ERP'den fiziksel güvenliğe — kurumsal teknoloji
          ihtiyacınızı tek noktadan, sözleşmeli ve sürdürülebilir hizmet modeliyle çözüyoruz.
        </p>
      </div>

      <div className="exp-grid" style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
      }}>
        {EXPERTISE.map(item => (
          <article key={item.t} className="card" style={{
            padding: 28, display: 'flex', flexDirection: 'column', gap: 14,
            minHeight: 220,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{
                width: 54, height: 54, borderRadius: 14,
                background: item.soft, color: item.color,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                {ICONS[item.icon]}
              </div>
              <span style={{
                fontFamily: 'var(--sans)', fontWeight: 700, fontSize: 11,
                letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'var(--faint)',
              }}>{item.tag}</span>
            </div>
            <h3 className="h-card" style={{ fontSize: 22, marginTop: 4 }}>{item.t}</h3>
            <p className="body" style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink-2)', margin: 0 }}>
              {item.d}
            </p>
          </article>
        ))}
      </div>
    </div>

    <style>{`
      @media (max-width: 1000px) {
        .exp-grid { grid-template-columns: repeat(2, 1fr) !important; }
      }
      @media (max-width: 640px) {
        .exp-grid { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </section>
);

Object.assign(window, { Expertise, EXPERTISE });