// SSS sayfası
function SSSPage() {
  const C = BROSIS_COLORS;
  const [acik, setAcik] = React.useState(null);

  const kategoriler = [
    {
      baslik: 'Başvuru Süreci',
      sorular: [
        { s: 'Kimler başvurabilir?', c: 'Emlak sektöründe çalışan veya çalışmak isteyen herkes başvurabilir. Başvuru şartları için ilgili mesleğin ulusal yeterlilik belgesini inceleyiniz.' },
        { s: 'Başvuru nasıl yapılır?', c: 'Online başvuru formu doldurularak ve gerekli belgeler sisteme yüklenerek başvuru tamamlanır. Alternatif olarak ıslak imzalı normal başvuru da yapılabilir.' },
        { s: 'Başvuru ne zaman yapılabilir?', c: 'Başvurular yıl boyunca açıktır. Sınav tarihinden en az 15 gün önce başvurunuzu tamamlamanız önerilir.' },
        { s: 'Eksik evrak gönderirsem ne olur?', c: 'Eksik evrak tespit edilmesi durumunda e-posta ile bilgilendirilirsiniz. Tamamlama süresi 10 iş günüdür. Bu sürede eksiklik giderilmezse başvurunuz iptal edilir.' },
      ],
    },
    {
      baslik: 'Sınav',
      sorular: [
        { s: 'Sınav nasıl yapılır?', c: 'Sınavlar teorik (çoktan seçmeli, 40 soru, 60 dakika) ve uygulamalı bölümlerden oluşur. Her bölümden ayrı ayrı geçer not alınması gerekmektedir.' },
        { s: 'Sınavda başarısız olursam ne yapabilirim?', c: 'Başarısız olan adaylar 3 ay sonrasından itibaren yeniden başvurabilir. Başarısız olunan bölüm için indirimli ücret uygulanır.' },
        { s: 'Sınava giriş belgemi kaybettim, ne yapmalıyım?', c: 'Başvuru portalinizden sınav giriş belgesini yeniden indirebilirsiniz. Sorun yaşarsanız info@brosis.com.tr adresine yazın.' },
        { s: 'Sınav merkezinde ne gibi imkânlar var?', c: 'Engelli adaylar için özel düzenlemeler mevcuttur. Sınav öncesi merkezimizi arayarak gerekli düzenlemeleri talep edebilirsiniz.' },
      ],
    },
    {
      baslik: 'Belge & Sonuç',
      sorular: [
        { s: 'Sınav sonuçları ne zaman açıklanır?', c: 'Sınav sonuçları, sınav tarihinden itibaren 10 iş günü içinde sorgulama sistemine yüklenir. E-posta ile de bilgilendirilirsiniz.' },
        { s: 'Belge geçerlilik süresi nedir?', c: 'MYK belgeleri 5 yıl süreyle geçerlidir. Süre sonunda yenileme başvurusu yapılabilir.' },
        { s: 'Belgeyi kaybedersem yenisi düzenlenebilir mi?', c: 'Evet. Kayıp veya hasar durumunda yenileme ücreti ödenerek yeni belge düzenlenebilir. Belge numarası değişmez.' },
        { s: 'Belgeyi işverenime nasıl kanıtlarım?', c: 'Belge üzerindeki QR kod veya belge numarası ile sorgulama sistemimiz üzerinden doğrulama yapılabilir.' },
      ],
    },
    {
      baslik: 'Ücret & Ödeme',
      sorular: [
        { s: 'Ücretler ne zaman güncellenir?', c: 'Ücretler her yıl Ocak ayı başında güncellenir. Başvuru yapıldıktan sonra ücret değişikliği uygulanmaz.' },
        { s: 'Ödeme iadesi alınabilir mi?', c: 'Sınavdan 15 gün öncesine kadar yapılan iptallerde başvuru ücretinin %80\'i iade edilir. Sınava katılmama durumunda iade yapılmaz.' },
        { s: 'Taksit imkânı var mı?', c: 'Belirli banka kartları ile taksit imkânı sunulmaktadır. Güncel taksit seçenekleri için ödeme sayfamızı inceleyiniz.' },
      ],
    },
  ];

  let globalIdx = 0;

  return (
    <BrosisPage activePage="Destek" breadcrumb={[{ label: 'Destek' }, { label: 'Sık Sorulan Sorular' }]}>
      <BrosisPageHero
        eyebrow="Destek · SSS"
        title="Sık Sorulan"
        titleAccent="Sorular"
        subtitle="Başvuru, sınav ve belgelendirme hakkında en çok merak edilen sorular ve yanıtları."
      />

      <BrosisSection>
        <div style={{ maxWidth: 820, margin: '0 auto' }}>
          {kategoriler.map((kat, ki) => (
            <div key={ki} style={{ marginBottom: 48 }}>
              <h2 style={{ fontSize: 22, fontWeight: 800, color: C.primary, letterSpacing: '-0.02em', marginBottom: 20, paddingBottom: 16, borderBottom: '2px solid #F1F5F9' }}>
                {kat.baslik}
              </h2>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {kat.sorular.map((soru, si) => {
                  const idx = globalIdx++;
                  return (
                    <div key={si} style={{ background: '#fff', border: '1px solid #E5E9F0', borderRadius: 14, overflow: 'hidden', transition: 'border-color 160ms', borderColor: acik === idx ? C.accent : '#E5E9F0' }}>
                      <button onClick={() => setAcik(acik === idx ? null : idx)}
                        style={{
                          width: '100%', padding: '18px 24px',
                          background: 'transparent', border: 'none', cursor: 'pointer',
                          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                          gap: 16, textAlign: 'left',
                        }}
                      >
                        <span style={{ fontSize: 14.5, fontWeight: 600, color: C.primary, lineHeight: 1.4 }}>{soru.s}</span>
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0, transition: 'transform 200ms', transform: acik === idx ? 'rotate(180deg)' : 'none' }}>
                          <path d="M3 6l5 5 5-5" stroke={C.accent} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                        </svg>
                      </button>
                      {acik === idx && (
                        <div style={{ padding: '0 24px 20px', fontSize: 14, color: '#475569', lineHeight: 1.7 }}>{soru.c}</div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          ))}

          {/* Cevap bulamadı CTA */}
          <div style={{ background: C.primary, borderRadius: 20, padding: 40, textAlign: 'center', color: '#fff' }}>
            <h3 style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', marginBottom: 10 }}>Aradığınız cevabı bulamadınız mı?</h3>
            <p style={{ color: 'rgba(255,255,255,0.65)', marginBottom: 24, fontSize: 14 }}>Uzman ekibimiz size yardımcı olmaya hazır.</p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
              <a href="iletisim.html" style={{ padding: '12px 24px', background: '#fff', color: C.primary, borderRadius: 10, fontSize: 13, fontWeight: 700, textDecoration: 'none' }}>İletişime Geç</a>
              <a href="itiraz.html" style={{ padding: '12px 24px', background: `${C.accent}30`, color: '#fff', borderRadius: 10, fontSize: 13, fontWeight: 700, textDecoration: 'none' }}>Şikayet / İtiraz</a>
            </div>
          </div>
        </div>
      </BrosisSection>
    </BrosisPage>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<SSSPage />);