/* global React, NereusIcons */
const I_lib = NereusIcons;
const { useState: useStateLib } = React;

const LIB_CATS = [
  { id: 'alapok',  label: 'Alapok' },
  { id: 'tamadas', label: 'Támadási formák' },
  { id: 'eszkoz',  label: 'Eszközök & hozzáférés' },
  { id: 'iparagi', label: 'Iparági' },
  { id: 'halado',  label: 'Haladó' },
];

const LIB_MODULES = [
  // Alapok
  { cat: 'alapok',  t: 'Kiberbiztonság',        c: 'Az általános kiberbiztonsági tudás mindig kifizetődő — nem csak technikai felhasználóknak!', Icon: I_lib.ShieldChk },
  { cat: 'alapok',  t: 'Phishing',              c: 'Tudod mi a phishing és hogyan lehet védekezni ellene? Az egyik legalapvetőbb kiberbiztonsági ismeret.', Icon: I_lib.Mail },
  { cat: 'alapok',  t: 'Helyzetfelismerés',     c: 'Gyanús viselkedés, esemény vagy digitális aktivitás gyors észlelése és jelentése.', Icon: I_lib.Eye },
  { cat: 'alapok',  t: 'Adatvédelem',           c: 'Személyes és érzékeny adatok tudatos kezelése és védelme a mindennapi munkában.', Icon: I_lib.Lock },
  // Támadási formák
  { cat: 'tamadas', t: 'Zsarolóvírus',          c: 'A zsarolóvírus az egyik legsúlyosabb kimenetel lehet egy támadás esetén. Ismerd fel és előzd meg!', Icon: I_lib.AlertTri },
  { cat: 'tamadas', t: 'Közösségi média csalások', c: 'Ismerd meg, hogyan próbálnak a csalók a közösségi médián keresztül átverni!', Icon: I_lib.Spy },
  { cat: 'tamadas', t: 'Smishing',              c: 'Gyanús SMS-ek azonnali felismerése, linkek megnyitásának elkerülése.', Icon: I_lib.Phone },
  { cat: 'tamadas', t: 'Vishing',               c: 'Telefonos csalások azonosítása — ne ossz meg érzékeny információt ismeretlen hívóval.', Icon: I_lib.Phone },
  { cat: 'tamadas', t: 'Belső fenyegetések',    c: 'Munkavállalók tevékenységeiből eredő biztonsági kockázatok felismerése és kezelése.', Icon: I_lib.Users },
  // Eszközök & hozzáférés
  { cat: 'eszkoz',  t: 'Többlépcsős azonosítás', c: 'Plusz védelem jelszó mellé, kóddal vagy biometrikával — az MFA bevezetésének fontossága.', Icon: I_lib.KeyRound },
  { cat: 'eszkoz',  t: 'Eszközbiztonság',       c: 'Manapság már nem csak a postafiókunkat kell védenünk — eszközök, frissítések, képernyőzár.', Icon: I_lib.Shield },
  { cat: 'eszkoz',  t: 'Biztonságos böngészés', c: 'Óvatos kattintás, nem megbízható weboldalak felismerése és biztonságos internethasználat.', Icon: I_lib.Globe },
  { cat: 'eszkoz',  t: 'Távoli munkavégzés',    c: 'Biztonságos hálózatok, VPN és védett eszközhasználat otthoni és mobil munkavégzés esetén.', Icon: I_lib.Network },
  { cat: 'eszkoz',  t: 'Fizikai biztonság',     c: 'Eszközök, helyiségek és adatok védelme illetéktelen hozzáféréstől — clean desk policy.', Icon: I_lib.Lock },
  { cat: 'eszkoz',  t: 'Magas jogosultságú felhasználók', c: 'Adminisztrátori hozzáférések szigorú felügyelete, naplózása és korlátozása.', Icon: I_lib.KeyRound },
  { cat: 'eszkoz',  t: 'Többrétegű védelem',    c: 'Tűzfal, antivírus, hozzáférés-kezelés és monitoring együttesen ad erős védelmet.', Icon: I_lib.Layers },
  { cat: 'eszkoz',  t: 'Biztonságos bankkártya kezelés', c: 'Kártyaadatokat soha ne oszd meg — mindig megbízható fizetési felületet használj.', Icon: I_lib.ShieldChk },
  // Iparági
  { cat: 'iparagi', t: 'Kisvállalkozás bevált gyakorlatok', c: 'Alapvető védelem: frissítések, hozzáférés-kezelés, biztonsági mentések és tudatosítás.', Icon: I_lib.Compass },
  { cat: 'iparagi', t: 'Oktatási szolgáltatók', c: 'Diákadatok védelme, hozzáférések felügyelete és biztonságos digitális tanulási platformok.', Icon: I_lib.BookOpen },
  { cat: 'iparagi', t: 'Pénzügyi bevált gyakorlatok', c: 'Csalásmegelőzés, pontos adminisztráció és jogosultságok szigorú kontrollja pénzügyi területen.', Icon: I_lib.ChartBar },
  { cat: 'iparagi', t: 'Egészségügyi bevált gyakorlatok', c: 'Betegadatok kiemelt védelme, hozzáférés-korlátozás és biztonságos digitális egészségügyi rendszerek.', Icon: I_lib.ShieldChk },
  { cat: 'iparagi', t: 'Kritikus infrastruktúra', c: 'Kritikus szolgáltatások védelme erős ellenálló képességgel és folyamatos monitorozással.', Icon: I_lib.Network },
  // Haladó
  { cat: 'halado',  t: 'Biztonságos szoftverfejlesztés', c: 'Kód auditálása, sebezhetőségek megelőzése és biztonsági tesztelések végrehajtása fejlesztőknek.', Icon: I_lib.FileText },
  { cat: 'halado',  t: 'Web3 és Blockchain biztonság', c: 'Privát kulcsok védelme, okosszerződések auditja és kripto-átverések megelőzése.', Icon: I_lib.Cube },
  { cat: 'halado',  t: 'SOC 2 alapok',          c: 'Biztonsági, adatvédelmi és rendelkezésre állási kontrollok auditált, hitelesített keretrendszere.', Icon: I_lib.ListChk },
  { cat: 'halado',  t: 'AI biztonságos használata', c: 'Ne ossz meg érzékeny adatot AI eszközökkel; ellenőrizd a kimenetet megbízható forrásokkal.', Icon: I_lib.Brain },
];

const LIB_CAT_LABEL = LIB_CATS.reduce((a, c) => { a[c.id] = c.label; return a; }, {});

function LibraryGrid() {
  const [active, setActive] = useStateLib('all');
  const shown = active === 'all' ? LIB_MODULES : LIB_MODULES.filter(m => m.cat === active);

  return (
    <section className="nl-section">
      <div className="nl-container">
        {/* Filter bar */}
        <div className="lib-filter">
          <span className="lib-filter-label">Szűrés</span>
          <div className="lib-filter-chips">
            <button className={`lib-chip ${active === 'all' ? 'is-active' : ''}`} onClick={() => setActive('all')}>
              Összes <span className="lib-chip-n">{LIB_MODULES.length}</span>
            </button>
            {LIB_CATS.map((cat) => {
              const n = LIB_MODULES.filter(m => m.cat === cat.id).length;
              return (
                <button key={cat.id} className={`lib-chip lib-cat-${cat.id} ${active === cat.id ? 'is-active' : ''}`} onClick={() => setActive(cat.id)}>
                  {cat.label} <span className="lib-chip-n">{n}</span>
                </button>
              );
            })}
          </div>
        </div>

        <div className="lib-count">{shown.length} képzés</div>

        <div className="lib-grid">
          {shown.map((m, i) => (
            <div key={i} className={`lib-card lib-cat-${m.cat}`}>
              <div className="lib-card-top">
                <div className="lib-card-icon"><m.Icon size={20} /></div>
                <span className="lib-card-cat">{LIB_CAT_LABEL[m.cat]}</span>
              </div>
              <h3 className="lib-card-title">{m.t}</h3>
              <p className="lib-card-copy">{m.c}</p>
              <div className="lib-card-foot">
                <span className="lib-card-dur"><I_lib.Clock size={13} /> 10–15 perc</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.LibraryGrid = LibraryGrid;