/* SSS — kategorili + aranabilir */

const FAQ_CATS = [
  {
    id: "genel",
    h: "Genel",
    icon: "💡",
    color: "#1e3a8a",
    items: [
      { q: "OfisimNet tam olarak ne yapıyor?", a: "Mali müşavir ofisleri için dijital asistan: GİB e-Beyanname'den beyannameleri her gece otomatik çekiyor, DVD'den vergi borcu ve e-tebligat sorgularını yapıyor, SGK Vizite Web Servisi ile rapor yönetimi sağlıyor, ve AL · Yapay Zekâ ile WhatsApp'tan gelen faturayı 3 saniyede e-Arşiv'e dönüştürüyor." },
      { q: "Hangi mali müşavirlere uygun?", a: "20–500 mükellefli SMMM ofisleri, YMM'ler, denetim büroları. Özellikle KDV1, MUHSGK, GGECICI gibi düzenli tekrarlayan beyanname iş yükü olan ofisler büyük zaman kazanır." },
      { q: "Kurulum süresi nedir?", a: "Mükellef listesini Zirve veya Luca'dan içe aktarıp şifreleri tanımlamak ortalama 15 dakika sürer. İlk gece sistem otomatik çalışmaya başlar, sabah panelinizde sonuçları görürsünüz." },
      { q: "Türkiye'de mi geliştiriliyor?", a: "Evet. OfisimNet Ankara Mamak'ta geliştiriliyor, ekibi Türk mali müşavirlerden oluşuyor. Tüm veriler Türkiye'de hosted (Türkiye + veritabanımız EU). KVKK uyumlu." },
      { q: "Mevcut muhasebe programımı bırakmam gerekiyor mu?", a: "Hayır. OfisimNet, mevcut Zirve/Luca/Mikro/Eta kurulumunuzun üzerinde çalışan bir 'yardımcı katman'. Veriyi onlardan alır, GİB tarafıyla otomatik bağ kurar — eskisini bırakmaya gerek yok." },
    ],
  },
  {
    id: "fiyat",
    h: "Fiyatlandırma",
    icon: "💰",
    color: "#22c55e",
    items: [
      { q: "Plan ne kadar?", a: "Standart plan ₺1.500/ay (KDV hariç), 150 mükellefe kadar tüm modüller dahil. 150+ mükellef için kurumsal teklif." },
      { q: "Yıllık ödemede indirim var mı?", a: "Evet — yıllık ödemede 2 ay hediye. 12 ay yerine 10 ay tutarı (₺15.000/yıl)." },
      { q: "14 gün ücretsiz denemede kredi kartı vermek zorunda mıyım?", a: "Hayır. Sadece e-posta ve telefon yeterli. 14 gün sonunda otomatik ücretlendirme YOK — siz onaylamadan ödeme alınmaz." },
      { q: "Mükellef sayım 150'yi geçerse?", a: "Mükellef sayınıza ve kullanım sıklığına göre özel teklif hazırlıyoruz. İletişime geçin." },
      { q: "AL · AI fatura sayısı dolarsa?", a: "Standart pakette 50 AL faturası/ay dahil. Üzerine fatura başına ~₺2 ek ücret. Kurumsal pakette sınırsız." },
      { q: "Faturayı şahıs veya şirket adına alabilir miyim?", a: "İkisi de mümkün. Kayıt sırasında belirtin." },
      { q: "İptal etmek istersem ne olur?", a: "İstediğiniz an iptal edebilirsiniz. 90 gün boyunca tüm verilerinizi PDF + CSV indirebilirsiniz. Kilit-içi sözleşme yok." },
    ],
  },
  {
    id: "entegrasyon",
    h: "Entegrasyon & Aktarım",
    icon: "🔗",
    color: "#0ba5ec",
    items: [
      { q: "Zirve verilerimi nasıl içe aktarırım?", a: "Zirve veritabanı tarayıcımız (içe aktarım aracımız) Zirve kurulu PC'nizde çalışır, tüm mükellef kayıtlarını otomatik bulur. VKN bazlı eşleştirme ile 2 dakikada panele yükler." },
      { q: "Luca için XML aktarımı var mı?", a: "Evet. Luca'dan export edilen XML dosyasını yüklersiniz, mükellef + sözleşme bilgileri otomatik gelir." },
      { q: "Mikro veya Eta uyumlu mu?", a: "Mükellef bilgileri açısından evet. Mikro için ePortal API entegrasyonumuz da var — fatura kesim Mikro tarafından da yapılabilir. Eta için XML/CSV içe aktarım destekleniyor." },
      { q: "GİB e-Beyanname için ayrı bir kurulum gerekiyor mu?", a: "Hayır. GİB kullanıcı adı/şifresi panelden eklenir, sistem otomatik çalışır. Şifreler güçlü şifreleme ile encrypt edilir, sadece servis tarafı decrypt edebilir." },
      { q: "CAPTCHA'yı nasıl geçiyorsunuz?", a: "yapay zekâ (yapay zekâ) CAPTCHA görüntüsünü saniyeler içinde çözüyor. Ortalama %99 doğruluk." },
    ],
  },
  {
    id: "modul",
    h: "Modüller & Özellikler",
    icon: "⚙️",
    color: "#3558d4",
    items: [
      { q: "Beyanname kontrol sıklığı nedir?", a: "Her gece kez otomatik — Türkiye saati 08:00, 12:00, 16:00, 20:00. İstediğiniz an manuel tetikleme de mümkün." },
      { q: "Hangi beyanname türleri destekleniyor?", a: "KDV1, KDV2, MUHSGK, GGECICI, GVK_94, BDR, MGYO_GVK_94 — başlıca tüm tahakkuk eden beyanname türleri. Yeni türler talebe göre eklenir." },
      { q: "DVD sorguları neden Her gün?", a: "GİB rate limit ve risk yönetimi için. Toplu sorguların GİB tarafından anormal görülmemesi adına gece (02:00–06:00) çalışır. Manuel istediğiniz an tetikleyebilirsiniz." },
      { q: "AL hangi formatları okuyor?", a: "WhatsApp mesajı (metin), JPEG/PNG fotoğraf, PDF (taranmış veya dijital), kasa fişi fotoğrafı. Türkçe destek + KDV/ÖTV oranları otomatik tanıma." },
      { q: "Karşıt inceleme tarayıcısı ne yapıyor?", a: "DVD bildirim kutusunu saatlik tarıyor. Mükellef adına Vergi Denetim Kurulu (VDK) talebi düşerse anında WhatsApp + SMS uyarısı geliyor. Tutanak DOLDURMUYORUZ — sadece talep tespiti yapıyoruz." },
    ],
  },
  {
    id: "guvenlik",
    h: "Güvenlik & Veri",
    icon: "🔐",
    color: "#ed7c3a",
    items: [
      { q: "Verilerim nerede tutuluyor?", a: "Veritabanı veritabanımız (veritabanı, erişim kontrolü aktif), PDF dosyaları güvenli bulut depolama, özel Türkiye DC'de. Tüm veriler Türkiye coğrafyasında." },
      { q: "Şifreler nasıl korunuyor?", a: "GİB ve SGK şifreleri güçlü şifreleme ile şifreli olarak veritabanında tutulur. güvenlik anahtarı backend'de — frontend hiç görmez." },
      { q: "KVKK uyumlu musunuz?", a: "Evet. Veriler Türkiye'de tutulur, mükellef sözleşmeleri ile veri sağlama anlaşması yapılır, mükellef-müşavir ilişkisi KVKK kapsamında düzenlenmiş şekilde işlenir. VERBİS kaydımız mevcut." },
      { q: "Rol bazlı yetki nasıl çalışıyor?", a: "Super admin / admin / uzman / personel — her rolün ayrı izinleri var. Personel sadece kendisine atanan mükellefleri görür. Silme işlemleri admin onayına bağlı." },
      { q: "Yedekleme var mı?", a: "Evet. Günlük otomatik yedek + sürüm geçmişi. 7 yıl geriye dönük veri saklama, yasal gereksinime uygun." },
    ],
  },
  {
    id: "destek",
    h: "Destek",
    icon: "🤝",
    color: "#6d59ff",
    items: [
      { q: "Nasıl destek alırım?", a: "E-posta (iletisim@ofisimnet.com), telefon (0532 560 03 46) ve panel içi mesajlaşma. Kurumsal pakette öncelikli WhatsApp destek + atanmış müşteri yöneticisi." },
      { q: "Yanıt süreniz nedir?", a: "Standart pakette mesai içi 1 iş günü, mesai dışı ertesi iş günü. Kurumsal pakette SLA bazlı (4 saat içinde acil yanıt)." },
      { q: "Eğitim veriyor musunuz?", a: "Kayıt sonrası 30 dk online eğitim seansı dahil. Kurumsal pakette ekibinize özel detaylı eğitim oturumları organize ediliyor." },
      { q: "Demo görmek için ne yapmalıyım?", a: "İletişim sayfasından demo talep edebilirsiniz. 30 dk online demo + sorularınız + ofisinize özel kurulum planı." },
    ],
  },
];

function Faq({ items, search }) {
  const [open, setOpen] = React.useState(null);
  const filtered = search.trim()
    ? items.filter((it) => it.q.toLowerCase().includes(search.toLowerCase()) || it.a.toLowerCase().includes(search.toLowerCase()))
    : items;
  if (!filtered.length) return <div style={{ padding: 24, color: "var(--text-muted)", fontSize: 14, textAlign: "center" }}>Bu kategoride arama eşleşmesi yok.</div>;
  return (
    <>
      {filtered.map((it, i) => (
        <div key={i} style={{ borderTop: i ? "1px solid var(--border-light)" : "none" }}>
          <button
            onClick={() => setOpen(open === i ? null : i)}
            style={{ width: "100%", textAlign: "left", padding: "18px 0", border: 0, background: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, font: "inherit" }}
          >
            <span style={{ fontSize: 15, fontWeight: 700, color: "var(--brand-700)" }}>{it.q}</span>
            <span style={{ fontSize: 22, color: "var(--text-muted)", transform: open === i ? "rotate(45deg)" : "none", transition: "transform .2s", lineHeight: 1 }}>+</span>
          </button>
          {open === i && (
            <div style={{ paddingBottom: 18, fontSize: 14, lineHeight: 1.6, color: "var(--text-body)" }}>{it.a}</div>
          )}
        </div>
      ))}
    </>
  );
}

function FaqPage() {
  const [active, setActive] = React.useState("genel");
  const [search, setSearch] = React.useState("");
  const cat = FAQ_CATS.find((c) => c.id === active);
  const totalMatches = search.trim()
    ? FAQ_CATS.reduce((sum, c) => sum + c.items.filter((it) => it.q.toLowerCase().includes(search.toLowerCase()) || it.a.toLowerCase().includes(search.toLowerCase())).length, 0)
    : 0;

  return (
    <>
      {/* Hero */}
      <section style={{ background: "linear-gradient(180deg, color-mix(in oklch, var(--brand-500) 6%, white), white 70%)" }}>
        <div className="container-kolaybi" style={{ paddingTop: 56, paddingBottom: 32 }}>
          <div style={{ fontSize: 12, color: "var(--text-muted)", marginBottom: 14 }}>
            <a href="/" style={{ color: "var(--text-muted)" }}>Anasayfa</a> / <span style={{ color: "var(--brand-700)", fontWeight: 700 }}>SSS</span>
          </div>
          <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
            <span className="section-eyebrow">Sıkça Sorulan Sorular</span>
            <h1 className="h-section" style={{ marginTop: 12, fontSize: 56, lineHeight: 1.05, letterSpacing: "-2px" }}>
              Aradığınız <span className="ink-bar"><span style={{ color: "var(--brand-500)" }}>yanıt</span></span> burada
            </h1>
            <p className="body-lg" style={{ marginTop: 14, color: "var(--text-muted)" }}>
              Genel sorular, fiyatlandırma, entegrasyon, modüller, güvenlik ve destek başlıkları.
            </p>
          </div>
        </div>
      </section>

      {/* Search */}
      <section style={{ padding: "0 0 16px", background: "linear-gradient(180deg, white 0%, var(--bg-muted) 100%)" }}>
        <div className="container-kolaybi" style={{ maxWidth: 720, margin: "0 auto" }}>
          <div style={{ position: "relative" }}>
            <span style={{ position: "absolute", left: 18, top: "50%", transform: "translateY(-50%)", fontSize: 16, color: "var(--text-muted)" }}>🔍</span>
            <input
              type="text"
              className="form-input"
              placeholder="Soruyu aratın — örn. fiyat, Zirve aktarım, CAPTCHA"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              style={{ paddingLeft: 48, height: 54, fontSize: 15 }}
            />
          </div>
          {search.trim() && (
            <p style={{ marginTop: 10, fontSize: 12, color: "var(--text-muted)", textAlign: "center" }}>
              <strong style={{ color: "var(--brand-700)" }}>{totalMatches}</strong> sonuç bulundu — kategori tablarına geç.
            </p>
          )}
        </div>
      </section>

      {/* Categories + FAQ */}
      <section style={{ background: "var(--bg-muted)", padding: "32px 0 64px" }}>
        <div className="container-kolaybi">
          <div className="faq-layout" style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 32 }}>
          {/* Sidebar nav */}
          <aside style={{ position: "sticky", top: 96, alignSelf: "flex-start", display: "flex", flexDirection: "column", gap: 6 }} className="faq-sidebar">
            {FAQ_CATS.map((c) => {
              const matches = search.trim() ? c.items.filter((it) => it.q.toLowerCase().includes(search.toLowerCase()) || it.a.toLowerCase().includes(search.toLowerCase())).length : c.items.length;
              return (
                <button
                  key={c.id}
                  onClick={() => setActive(c.id)}
                  style={{
                    display: "flex", alignItems: "center", gap: 12,
                    padding: "12px 14px",
                    borderRadius: 10,
                    border: 0,
                    background: active === c.id ? "#fff" : "transparent",
                    boxShadow: active === c.id ? "0 4px 12px -4px rgba(11,23,39,.1)" : "none",
                    color: active === c.id ? c.color : "var(--text-muted)",
                    fontWeight: active === c.id ? 700 : 500,
                    fontSize: 14,
                    cursor: "pointer",
                    textAlign: "left",
                    font: "inherit",
                  }}
                >
                  <span style={{ fontSize: 18 }}>{c.icon}</span>
                  <span style={{ flex: 1 }}>{c.h}</span>
                  <span style={{ fontSize: 11, opacity: .7, fontWeight: 700 }}>{matches}</span>
                </button>
              );
            })}
          </aside>

          {/* FAQ list */}
          <div className="card-pop" style={{ padding: "8px 28px 28px" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, padding: "20px 0", borderBottom: "1px solid var(--border-light)", marginBottom: 6 }}>
              <span style={{ fontSize: 26 }}>{cat.icon}</span>
              <h2 style={{ fontSize: 22, fontWeight: 800, color: cat.color }}>{cat.h}</h2>
            </div>
            <Faq items={cat.items} search={search} />
          </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) {
            .faq-layout { grid-template-columns: 1fr !important; }
            .faq-sidebar { position: static !important; flex-direction: row !important; flex-wrap: wrap !important; }
          }
        `}</style>
      </section>

      {/* Still have questions */}
      <section style={{ background: "#fff", padding: "64px 0" }}>
        <div className="container-kolaybi">
          <div style={{ background: "linear-gradient(135deg, var(--brand-500), var(--ai-purple))", color: "#fff", padding: "48px 32px", borderRadius: 18, textAlign: "center" }}>
            <h2 style={{ color: "#fff", fontSize: 30, fontWeight: 800, letterSpacing: "-0.8px" }}>Yanıtını bulamadığınız soru var mı?</h2>
            <p style={{ marginTop: 12, opacity: .9, fontSize: 15, maxWidth: 540, margin: "12px auto 0" }}>
              Bize yazın, 1 iş günü içinde yanıtlayalım.
            </p>
            <div style={{ marginTop: 24, display: "inline-flex", gap: 12, flexWrap: "wrap", justifyContent: "center" }}>
              <a href="Iletisim.html" style={{ padding: "14px 24px", borderRadius: 10, background: "#fff", color: "var(--brand-500)", fontWeight: 700, fontSize: 15 }}>İletişim formuna git →</a>
              <a href="tel:+905325600346" style={{ padding: "14px 24px", borderRadius: 10, background: "rgba(255,255,255,.12)", color: "#fff", border: "1px solid rgba(255,255,255,.25)", fontWeight: 600, fontSize: 15 }}>☎ 0532 560 03 46</a>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function App() {
  return (
    <>
      <PromoBar />
      <Navbar active="sss" />
      <main><FaqPage /></main>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);