// FAQ — light theme, keyword rich

const { useState: useFAQ } = React;

const FAQ_ITEMS = [
  {
    q: 'Sakarya\'da kurumsal bilgisayar servisi için nereye başvurabilirim?',
    a: 'Bilgim Bilgisayar olarak Adapazarı merkezli, Sakarya genelinde 15+ yıldır kurumsal müşterilere bilgisayar satışı, yerinde teknik servis ve yazıcı/toner desteği veriyoruz. Tek aramayla teknisyenimiz işyerinize ulaşır: 0264 777 11 88.',
  },
  {
    q: 'Adapazarı\'nda CCTV kamera sistemi ve alarm kurulumu yapıyor musunuz?',
    a: 'Datakor, Sakarya genelinde IP kamera sistemleri, hırsızlık alarmı, yangın alarmı ve PDKS (personel devam kontrol) sistemlerinin kurulum ve bakımını yapar. Mevcut sisteminizi de yönetiriz; uzaktan izleme ve aylık bakım sözleşmesi sunarız.',
  },
  {
    q: 'Sakarya\'da Bitdefender veya WatchGuard yetkili iş ortağı var mı?',
    a: 'Datakor, hem Bitdefender (endpoint güvenliği) hem WatchGuard (firewall, VPN) için yetkili iş ortağıdır. Lisans satışı, kurulum, yapılandırma ve 7/24 yönetilen destek hizmetini Sakarya genelinde tek noktadan sağlıyoruz.',
  },
  {
    q: 'Şirketimiz için Mikro veya Akınsoft WOLVOX ERP yazılımı kurulabilir mi?',
    a: 'Bilgim Bilgisayar, Mikro ve Akınsoft WOLVOX yetkili satıcı ve teknik destek sağlayıcısıdır. Kurulum, veri taşıma, personel eğitimi, güncelleme ve yıllık destek paketi sunuyoruz. Mevcut ERP\'nizi de tamamlayıcı modüllerle genişletebiliriz.',
  },
  {
    q: 'Toplu ofis ekipmanı veya teknoloji ürünü tedariği için çerçeve sözleşme yapıyor musunuz?',
    a: 'Adaplanet Kurumsal Tedarik, kurumsal müşterilere yıllık çerçeve sözleşmeler kapsamında teknoloji ürünleri, yazıcı sarfı, ofis mobilyası ve sarf malzemesi tedariği yapar. Tek faturada toplu alım, hızlı bölgesel teslimat ve avantajlı kurumsal fiyatlandırma sağlarız.',
  },
  {
    q: 'PDKS personel devam kontrol sistemi kurulumu yapıyor musunuz?',
    a: 'Evet. Datakor olarak kart okuyucu, parmak izi ve yüz tanıma tabanlı PDKS sistemlerini kuruyor, mevcut bordro/insan kaynakları yazılımınızla entegre ediyoruz. Sakarya genelinde anahtar teslimi kurulum ve bakım hizmeti veriyoruz.',
  },
  {
    q: 'Sakarya\'nın hangi ilçelerine yerinde hizmet veriyorsunuz?',
    a: 'Adapazarı, Serdivan, Erenler, Arifiye, Hendek, Akyazı, Karasu, Sapanca, Geyve, Pamukova, Söğütlü, Karapürçek, Ferizli, Taraklı, Kaynarca ve Kocaali — Sakarya\'nın tüm ilçelerine yerinde kurumsal IT, siber güvenlik ve teknik servis hizmeti veriyoruz.',
  },
];

const FAQItem = ({ item, isOpen, onToggle }) => (
  <div style={{
    background: isOpen ? 'var(--surface)' : 'transparent',
    border: '1px solid ' + (isOpen ? 'var(--line-strong)' : 'var(--line)'),
    borderRadius: 'var(--r-md)',
    overflow: 'hidden',
    transition: 'all 200ms var(--ease)',
    boxShadow: isOpen ? 'var(--shadow-1)' : 'none',
  }}>
    <button onClick={onToggle} style={{
      width: '100%', textAlign: 'left',
      padding: '22px 26px', cursor: 'pointer',
      background: 'transparent', border: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 18,
      fontFamily: 'inherit', color: 'inherit',
    }}>
      <span className="h-card" style={{
        fontSize: 'clamp(17px, 1.5vw, 20px)', fontWeight: 700, lineHeight: 1.35,
      }}>{item.q}</span>
      <span aria-hidden style={{
        flex: '0 0 32px', width: 32, height: 32, borderRadius: 999,
        background: isOpen ? 'var(--navy)' : 'var(--bg)',
        color: isOpen ? '#fff' : 'var(--ink)',
        border: '1px solid ' + (isOpen ? 'var(--navy)' : 'var(--line-strong)'),
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 18, fontWeight: 700,
        transition: 'all 200ms var(--ease)',
      }}>{isOpen ? '−' : '+'}</span>
    </button>
    {isOpen && (
      <div style={{
        padding: '0 26px 24px', borderTop: '1px solid var(--line)',
      }}>
        <p className="body" style={{
          fontSize: 16, lineHeight: 1.7, margin: '18px 0 0',
        }}>
          {item.a}
        </p>
      </div>
    )}
  </div>
);

const FAQ = () => {
  const [open, setOpen] = useFAQ(0);
  return (
    <section id="sss" className="section reveal">
      <div className="wrap">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Sıkça Sorulan Sorular</div>
          <h2 className="h-section">Müşterilerimizin <span style={{ color: 'var(--muted)' }}>en çok sorduğu</span> sorular.</h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, maxWidth: 980 }}>
          {FAQ_ITEMS.map((item, i) => (
            <FAQItem key={i} item={item} isOpen={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { FAQ, FAQ_ITEMS });