/* global React, NereusIcons */
const I_lr = NereusIcons;

const MODULES = [
{ title: 'Felismerd a phishinget', cat: 'Phishing alapok', dur: '12 min', progress: 100, status: 'done', Icon: I_lr.Mail },
{ title: 'Jelszókezelés a gyakorlatban', cat: 'Hitelesítés', dur: '14 min', progress: 65, status: 'inprogress', Icon: I_lr.KeyRound },
{ title: 'Otthoni iroda — biztonságosan', cat: 'WFH', dur: '10 min', progress: 30, status: 'inprogress', Icon: I_lr.Globe },
{ title: 'Social engineering — hangos verzió', cat: 'Manipuláció', dur: '15 min', progress: 0, status: 'todo', Icon: I_lr.Spy },
{ title: 'Adatszivárgás — első 24 óra', cat: 'Incident', dur: '13 min', progress: 0, status: 'todo', Icon: I_lr.AlertTri },
{ title: 'GDPR a hétköznapokban', cat: 'Compliance', dur: '11 min', progress: 0, status: 'todo', Icon: I_lr.FileText }];


const TOPICS = [
{ t: 'Phishing & smishing felismerése', m: '3 modul · 38 perc', Icon: I_lr.Mail },
{ t: 'Jelszó- és MFA-hygiene', m: '4 modul · 52 perc', Icon: I_lr.KeyRound },
{ t: 'Otthoni iroda & utazás', m: '3 modul · 32 perc', Icon: I_lr.Globe },
{ t: 'Social engineering & vishing', m: '3 modul · 40 perc', Icon: I_lr.Spy },
{ t: 'Adatvédelem & GDPR', m: '4 modul · 48 perc', Icon: I_lr.FileText },
{ t: 'Incidens — első 24 óra', m: '2 modul · 25 perc', Icon: I_lr.AlertTri }];


function NereusLearningSection() {
  return (
    <section id="nereus-learning" className="nl-section nl-learning">
      <div className="nl-container">
        <div className="nl-learning-head">
          <div>
            <div className="nl-learning-pill">
              <span className="nl-learning-pill-dot"><I_lr.Layers size={12} /></span>
              Saját platform — Nereus Learning
            </div>
            <h2 className="nl-section-title">
              Tudatosság, <em>10–15 perces</em> adagokban.
            </h2>
            <p className="nl-lead">
              A Nereus Learning a saját e-learning platformunk. Rövid, magyar nyelvű modulok —
              minden hétre egy téma. Beépített tesztek, követhető haladás, vezetői dashboard.
              Nincs videómaratonon ülő csapat, csak releváns tudás abban a formátumban,
              amit tényleg végignéznek.
            </p>
          </div>
          <div className="nl-learning-stats" style={{ textAlign: "left", height: "100px" }}>
            <div className="nl-learning-stat" style={{ height: "100px" }}>
              <div className="nl-learning-stat-n">42</div>
              <div className="nl-learning-stat-l">Magyar nyelvű modul</div>
            </div>
            <div className="nl-learning-stat" style={{ height: "100px" }}>
              <div className="nl-learning-stat-n">12 min</div>
              <div className="nl-learning-stat-l">Átlagos hossz</div>
            </div>
            <div className="nl-learning-stat" style={{ height: "100px" }}>
              <div className="nl-learning-stat-n">87%</div>
              <div className="nl-learning-stat-l">Befejezési arány</div>
            </div>
          </div>
        </div>

        {/* Module dashboard preview */}
        <div className="nl-learning-preview">
          <div className="nl-learning-prev-head">
            <img src="assets/logo_full.png" alt="" />
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', opacity: 0.55, marginLeft: 8 }}>LEARNING</span>
            <div className="nl-learning-prev-tabs">
              <span className="nl-learning-prev-tab is-active">Modulok</span>
              <span className="nl-learning-prev-tab">Haladás</span>
              <span className="nl-learning-prev-tab">Csapatom</span>
            </div>
          </div>
          <div className="nl-learning-prev-body">
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', color: 'var(--fg-3)', textTransform: 'uppercase' }}>Folyamatban — Q2 2026</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'var(--navy-700)', marginTop: 4 }}>Hat aktív modul · 2 befejezve</div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 120, height: 6, borderRadius: 999, background: 'var(--bg-3)', overflow: 'hidden' }}>
                  <div style={{ width: '33%', height: '100%', background: 'linear-gradient(90deg,var(--teal-400),var(--teal-600))' }}></div>
                </div>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600, color: 'var(--teal-600)' }}>33%</span>
              </div>
            </div>
            <div className="nl-learning-prev-grid">
              {MODULES.map((m, i) =>
              <div key={i} className="nl-module">
                  <div className="nl-module-head">
                    <div className="nl-module-icon"><m.Icon size={18} /></div>
                    <div className="nl-module-meta">
                      <div className="nl-module-title">{m.title}</div>
                      <div className="nl-module-info">
                        <span>{m.cat}</span><span>· {m.dur}</span>
                      </div>
                    </div>
                  </div>
                  <div className="nl-module-progress">
                    <div className="nl-module-progress-bar" style={{ width: `${m.progress}%` }}></div>
                  </div>
                  <div className="nl-module-status">
                    <span>{m.progress}% kész</span>
                    {m.status === 'done' ?
                  <span className="nl-module-status-done"><I_lr.Check size={12} /> BEFEJEZVE</span> :
                  m.status === 'inprogress' ?
                  <span>Folytatás →</span> :
                  <span>Megkezdés →</span>}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Topic catalog */}
        <div style={{ marginTop: 56 }}>
          <div className="nl-eyebrow">Modul-katalógus</div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 24, margin: '4px 0 0', color: 'var(--navy-700)', letterSpacing: '-0.01em' }}>
            6 témakör — 42 magyar nyelvű modul
          </h3>
          <div className="nl-topics-grid">
            {TOPICS.map((t, i) =>
            <div key={i} className="nl-topic">
                <div className="nl-topic-icon"><t.Icon size={18} /></div>
                <div className="nl-topic-body">
                  <div className="nl-topic-title">{t.t}</div>
                  <div className="nl-topic-meta">{t.m}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

window.NereusLearningSection = NereusLearningSection;