// Dokümanlar sayfası — kategorize kart grid, sadece 'Detay' butonu (Brosis yorumunu
// okumadan indirmesin diye). PDF indir butonu sadece detay sayfasında.
function DokumanlarPage() {
  const C = BROSIS_COLORS;
  const [uyDocs, setUyDocs] = React.useState([]);
  const [yukleniyor, setYukleniyor] = React.useState(true);
  const [aktifKategori, setAktifKategori] = React.useState('hepsi');

  React.useEffect(() => {
    fetch('/data/dokumanlar.json?t=' + Date.now(), { cache: 'no-store' })
      .then(r => r.json())
      .then(d => {
        const liste = (d.dokumanlar || []).filter(x => x.tip === 'uy');
        setUyDocs(liste);
        setYukleniyor(false);
      })
      .catch(() => setYukleniyor(false));
  }, []);

  // Meslek kategorisine göre grupla
  const uyKategorileri = React.useMemo(() => {
    const gruplar = {};
    uyDocs.forEach(d => {
      const k = d.meslekKategori || 'Diğer';
      if (!gruplar[k]) gruplar[k] = [];
      gruplar[k].push(d);
    });
    Object.keys(gruplar).forEach(k =>
      gruplar[k].sort((a, b) => (a.meslek || a.ad).localeCompare(b.meslek || b.ad, 'tr'))
    );
    return gruplar;
  }, [uyDocs]);

  // İkon ve renk eşlemesi
  const kategoriBilgi = {
    'Emlak': { icon: '🏠', renk: '#E0E7FF', accent: '#4F46E5' },
    'İnşaat ve Yapı': { icon: '🏗️', renk: '#FEF3C7', accent: '#D97706' },
    'Metal ve Kaynak': { icon: '⚙️', renk: '#E0E7FF', accent: '#4F46E5' },
    'Otomotiv ve Bakım': { icon: '🚗', renk: '#FEE2E2', accent: '#DC2626' },
    'Taşımacılık ve Lojistik': { icon: '🚚', renk: '#DBEAFE', accent: '#2563EB' },
    'Elektrik ve Tesisat': { icon: '⚡', renk: '#FEF9C3', accent: '#CA8A04' },
    'Hizmet Sektörü': { icon: '💼', renk: '#D1FAE5', accent: '#059669' },
    'Estetik ve Bakım': { icon: '💇', renk: '#FCE7F3', accent: '#DB2777' },
    'Kişisel ve Toplumsal Hizmetler': { icon: '💇', renk: '#FCE7F3', accent: '#DB2777' },
    'Otopark ve Vale': { icon: '🅿️', renk: '#E0F2FE', accent: '#0284C7' },
    'Gıda ve İçecek': { icon: '🍽️', renk: '#FED7AA', accent: '#EA580C' },
    'Gıda ve Hijyen': { icon: '🍽️', renk: '#FED7AA', accent: '#EA580C' },
    'Tekstil ve Konfeksiyon': { icon: '🧵', renk: '#FCE7F3', accent: '#DB2777' },
    'Makine ve Tezgah': { icon: '🔧', renk: '#E0E7FF', accent: '#4F46E5' },
    'Ticaret ve Satış': { icon: '🛒', renk: '#FEE2E2', accent: '#DC2626' },
    'Diğer': { icon: '📄', renk: C.soft, accent: C.accent },
  };

  // Kategori sıralama (en çok dokümana sahip önce)
  const kategoriSiralı = Object.entries(uyKategorileri).sort((a, b) => b[1].length - a[1].length);

  // Filtreli liste
  const goruntulenenler = aktifKategori === 'hepsi'
    ? kategoriSiralı
    : kategoriSiralı.filter(([k]) => k === aktifKategori);

  // Placeholder kategoriler (gerçek PDF gelene kadar)
  const talepKategorileri = [
    { baslik: 'Başvuru Formları', renk: C.soft, icon: '📝', dosyalar: [
      { ad: 'Online Başvuru Formu', boyut: '245 KB', revizyon: 'Rev.03 · 2026' },
      { ad: 'Normal Başvuru Formu (Islak İmzalı)', boyut: '312 KB', revizyon: 'Rev.02 · 2026' },
      { ad: 'Yeniden Başvuru Formu', boyut: '198 KB', revizyon: 'Rev.01 · 2026' },
      { ad: 'İtiraz Başvuru Formu', boyut: '167 KB', revizyon: 'Rev.02 · 2025' },
    ]},
    { baslik: 'Kılavuzlar & Rehberler', renk: '#F0FDF4', icon: '📚', dosyalar: [
      { ad: 'Adaylar İçin Belgelendirme Rehberi', boyut: '1.2 MB', revizyon: '2026 Baskı' },
      { ad: 'Sınav Başvuru Kılavuzu', boyut: '845 KB', revizyon: '2026 Baskı' },
      { ad: 'Sınav Günü Kılavuzu', boyut: '512 KB', revizyon: '2026 Baskı' },
      { ad: 'Belge Yenileme Rehberi', boyut: '380 KB', revizyon: '2025 Baskı' },
    ]},
    { baslik: 'Teknik Şartnameler', renk: '#F5F3FF', icon: '⚙️', dosyalar: [
      { ad: 'Belgelendirme Şartnamesi', boyut: '1.8 MB', revizyon: '2026' },
      { ad: 'İtiraz & Şikayet Prosedürü', boyut: '567 KB', revizyon: '2025' },
      { ad: 'Engellilere Hizmet Prosedürü', boyut: '430 KB', revizyon: '2025' },
      { ad: 'Tarafsızlık Politikası', boyut: '312 KB', revizyon: '2026' },
    ]},
  ];

  return (
    <BrosisPage activePage="Belgelendirme" breadcrumb={[
      { label: 'Belgelendirme', href: '/belgelendirme' },
      { label: 'İlgili Dokümanlar' },
    ]}>
      <BrosisPageHero
        eyebrow="Belgelendirme · İlgili Dokümanlar"
        title="Formlar &"
        titleAccent="Dokümanlar"
        subtitle="MYK Ulusal Yeterlilik dokümanları, başvuru formları ve teknik şartnameler. Her belgenin detay sayfasında Brosis Enstitü editoryal yorumunu okuyup ardından indirebilirsiniz."
      />

      <BrosisSection>
        {/* ─── MYK ULUSAL YETERLİLİK DOKÜMANLARI ─── */}
        <div style={{ marginBottom: 32 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
            <span style={{ fontSize: 28 }}>🏛️</span>
            <h2 style={{ margin: 0, fontSize: 24, color: C.primary, fontWeight: 800 }}>MYK Ulusal Yeterlilik Belgeleri</h2>
            {!yukleniyor && <span style={{ fontSize: 12, fontWeight: 700, color: C.accent, background: C.soft, padding: '4px 12px', borderRadius: 999, marginLeft: 'auto' }}>{uyDocs.length} doküman</span>}
          </div>
          <p style={{ margin: 0, fontSize: 14.5, color: '#475569', maxWidth: 820, lineHeight: 1.65 }}>
            Mesleki Yeterlilik Kurumu (MYK) tarafından yayımlanmış resmi yeterlilik dokümanları. <strong>Detay</strong> sayfasında Brosis Enstitü editoryal yorumunu okuyun, ardından PDF'i indirin.
          </p>
        </div>

        {/* Kategori filtre çubuğu */}
        {!yukleniyor && kategoriSiralı.length > 0 && (
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 28, paddingBottom: 20, borderBottom: '1px solid #E5E9F0' }}>
            <button onClick={() => setAktifKategori('hepsi')} style={{
              padding: '8px 16px',
              background: aktifKategori === 'hepsi' ? C.primary : '#fff',
              color: aktifKategori === 'hepsi' ? '#fff' : C.primary,
              border: `1px solid ${aktifKategori === 'hepsi' ? C.primary : '#E5E9F0'}`,
              borderRadius: 999, fontSize: 13, fontWeight: 600, cursor: 'pointer',
              transition: 'all 0.15s',
            }}>Hepsi · {uyDocs.length}</button>
            {kategoriSiralı.map(([k, docs]) => {
              const info = kategoriBilgi[k] || kategoriBilgi['Diğer'];
              const aktif = aktifKategori === k;
              return (
                <button key={k} onClick={() => setAktifKategori(k)} style={{
                  padding: '8px 16px',
                  background: aktif ? info.accent : '#fff',
                  color: aktif ? '#fff' : C.primary,
                  border: `1px solid ${aktif ? info.accent : '#E5E9F0'}`,
                  borderRadius: 999, fontSize: 13, fontWeight: 600, cursor: 'pointer',
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  transition: 'all 0.15s',
                }}>
                  <span>{info.icon}</span>
                  {k} · {docs.length}
                </button>
              );
            })}
          </div>
        )}

        {yukleniyor && (
          <div style={{ padding: 60, textAlign: 'center', color: '#94A3B8', fontSize: 14 }}>Dokümanlar yükleniyor…</div>
        )}

        {/* Kategori grupları — her biri kart grid */}
        {!yukleniyor && goruntulenenler.map(([katAd, dokumanlar]) => {
          const info = kategoriBilgi[katAd] || kategoriBilgi['Diğer'];
          return (
            <div key={katAd} style={{ marginBottom: 32 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
                <div style={{ width: 44, height: 44, borderRadius: 12, background: info.renk, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22 }}>{info.icon}</div>
                <div style={{ flex: 1 }}>
                  <h3 style={{ margin: 0, fontSize: 17, fontWeight: 800, color: C.primary }}>{katAd}</h3>
                  <div style={{ fontSize: 12.5, color: '#94A3B8', marginTop: 2 }}>{dokumanlar.length} mesleki yeterlilik dokümanı</div>
                </div>
              </div>
              <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
                gap: 14,
              }}>
                {dokumanlar.map((d, i) => (
                  <a key={i} href={'/dokumanlar/' + d.slug} style={{
                    display: 'block',
                    padding: '20px 22px',
                    background: '#fff',
                    border: '1px solid #E5E9F0',
                    borderRadius: 14,
                    textDecoration: 'none',
                    transition: 'all 0.18s',
                    position: 'relative',
                  }}
                  onMouseEnter={e => {
                    e.currentTarget.style.borderColor = info.accent;
                    e.currentTarget.style.transform = 'translateY(-2px)';
                    e.currentTarget.style.boxShadow = '0 10px 24px -10px rgba(15,39,71,0.18)';
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.borderColor = '#E5E9F0';
                    e.currentTarget.style.transform = 'translateY(0)';
                    e.currentTarget.style.boxShadow = 'none';
                  }}>
                    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, marginBottom: 10 }}>
                      <div style={{ width: 38, height: 38, borderRadius: 8, background: '#FEF2F2', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                        <svg width="18" height="18" viewBox="0 0 16 16" fill="none">
                          <path d="M4 2h7l3 3v9H4V2z" stroke="#EF4444" strokeWidth="1.3" strokeLinejoin="round"/>
                          <path d="M11 2v3h3" stroke="#EF4444" strokeWidth="1.3" strokeLinejoin="round"/>
                          <path d="M6 8h4M6 11h3" stroke="#EF4444" strokeWidth="1.3" strokeLinecap="round"/>
                        </svg>
                      </div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 11, fontWeight: 700, color: info.accent, letterSpacing: '0.05em', marginBottom: 4 }}>{d.uyKodu}</div>
                        <div style={{ fontSize: 14, fontWeight: 700, color: C.primary, lineHeight: 1.35 }}>{d.meslek || d.ad}</div>
                      </div>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12, paddingTop: 12, borderTop: '1px solid #F1F5F9' }}>
                      <div style={{ display: 'flex', gap: 14, fontSize: 11.5, color: '#94A3B8' }}>
                        <span>Seviye {d.seviye}</span>
                        <span>{d.boyutKB ? Math.round(d.boyutKB/1024*10)/10 + ' MB' : 'PDF'}</span>
                      </div>
                      <div style={{
                        fontSize: 12, fontWeight: 700, color: info.accent,
                        display: 'inline-flex', alignItems: 'center', gap: 4,
                      }}>
                        Detay
                        <svg width="11" height="11" viewBox="0 0 11 11" fill="none"><path d="M2 5.5h7M9 5.5L6 2.5M9 5.5L6 8.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                      </div>
                    </div>
                  </a>
                ))}
              </div>
            </div>
          );
        })}

        {/* ─── Talep Üzerine ─── */}
        <div style={{ marginTop: 56, marginBottom: 20 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
            <span style={{ fontSize: 28 }}>📋</span>
            <h2 style={{ margin: 0, fontSize: 24, color: C.primary, fontWeight: 800 }}>Başvuru & Kurumsal Dokümanlar</h2>
          </div>
          <p style={{ margin: 0, fontSize: 14.5, color: '#475569', maxWidth: 820, lineHeight: 1.65 }}>
            Brosis Enstitü'ye özel başvuru formları, kılavuzlar ve teknik şartnameler. PDF kopyaları için WhatsApp üzerinden danışmanlarımızdan talep edin.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 18 }}>
          {talepKategorileri.map((kat, ki) => (
            <div key={ki} style={{ background: '#fff', border: '1px solid #E5E9F0', borderRadius: 16, overflow: 'hidden' }}>
              <div style={{ background: kat.renk, padding: '16px 22px', display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ fontSize: 22 }}>{kat.icon}</span>
                <span style={{ fontSize: 14, fontWeight: 800, color: C.primary }}>{kat.baslik}</span>
              </div>
              <div style={{ padding: '4px 0' }}>
                {kat.dosyalar.map((d, di) => (
                  <div key={di} style={{
                    padding: '12px 22px',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    borderBottom: di < kat.dosyalar.length - 1 ? '1px solid #F8FAFC' : 'none',
                    gap: 10,
                  }}>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: 600, color: C.primary, lineHeight: 1.3 }}>{d.ad}</div>
                      <div style={{ fontSize: 11, color: '#94A3B8', marginTop: 2 }}>{d.boyut} · {d.revizyon}</div>
                    </div>
                    <a href={'https://wa.me/905336365678?text=' + encodeURIComponent(d.ad + ' belgesini talep ediyorum.')}
                      target="_blank" rel="noopener"
                      style={{
                        padding: '6px 12px', background: C.soft, color: C.accent,
                        borderRadius: 7, fontSize: 11.5, fontWeight: 600, textDecoration: 'none',
                        whiteSpace: 'nowrap', flexShrink: 0,
                      }}>Talep Et</a>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </BrosisSection>
    </BrosisPage>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<DokumanlarPage />);