/* global React, NereusIcons */
const I_home = NereusIcons;
const { useState: useStateHome } = React;

/* Hero */
function HomeHero({ variant }) {
  return (
    <section className={`nl-hero ${variant === 'light' ? 'is-light' : ''}`}>
      <WaveHero variant={variant === 'light' ? 'depth' : variant === 'lab' ? 'lab' : 'tide'} />

      <div className="nl-container nl-hero-inner">
        <div>
          <div className="nl-hero-eyebrow">
            <span className="nl-pulse"></span>
            NEREUS LAB — KIBERBIZTONSÁGI MŰHELY
          </div>
          <h1 className="nl-hero-title">
            Védd a csapatod a <em>valós </em> támadásoktól.
          </h1>
          <p className="nl-hero-lead">
            Phishing szimulációk, kibertudatosság tréning, pentest és red teaming —
            egy magyar csapattól, akik már látták a támadásokat. Mérhető eredményekkel,
            ítélkezés nélkül.
          </p>
          <div className="nl-hero-ctas">
            <a href="kapcsolat" className="nl-btn nl-btn-primary nl-btn-lg">
              Ingyenes konzultáció <I_home.ArrowR size={16} />
            </a>
            <a href="#szolgaltatasok" className="nl-btn nl-btn-ghost-light nl-btn-lg">
              Szolgáltatások
            </a>
          </div>

          <div className="nl-hero-meta">
            <div className="nl-hero-meta-item">
              <div className="nl-hero-meta-n">120+</div>
              <div className="nl-hero-meta-l">lefolytatott<br />szimuláció</div>
            </div>
            <div className="nl-hero-meta-item">
              <div className="nl-hero-meta-n">8.500+</div>
              <div className="nl-hero-meta-l">képzett<br />munkatárs</div>
            </div>
            <div className="nl-hero-meta-item">
              <div className="nl-hero-meta-n">~60%</div>
              <div className="nl-hero-meta-l">incidens emberi<br />hibára vezethető</div>
            </div>
          </div>
        </div>

        <HeroOrb />
      </div>
    </section>);

}

/* Service bento grid */
const SERVICES = [
{
  href: 'red-teaming',
  tag: 'OFFENZÍV', tagClass: 'nl-svc-tag-off',
  Icon: I_home.Crosshair,
  title: 'Red Teaming',
  copy: 'Valósághű, APT-szintű támadásszimuláció — hatókör nélkül, a teljes szervezetre fókuszálva.',
  duration: '6–12 hét',
  featured: true
},
{
  href: 'penetration-testing',
  tag: 'OFFENZÍV', tagClass: 'nl-svc-tag-off',
  Icon: I_home.Bug,
  title: 'Penetration Testing',
  copy: 'Sérülékenység-feltárás definiált hatókörben, részletes riporttal és priorizálással.',
  duration: '4-8 hét'
},
{
  href: 'phishing-szimulacio',
  tag: 'OFFENZÍV', tagClass: 'nl-svc-tag-off',
  Icon: I_home.Mail,
  title: 'Phishing szimuláció',
  copy: 'Testreszabott, valósághű kampányok — saját domain, OSINT-alapú sablonok, valós-idejű mérés.',
  duration: '1-12 hónap'
},
{
  href: 'kibertudatossag-trening',
  tag: 'DEFENZÍV', tagClass: 'nl-svc-tag-def',
  Icon: I_home.BookOpen,
  title: 'Kibertudatosság tréning',
  copy: 'E-learning modulok + élő workshopok a Nereus Learning platformon — 10–15 perc / modul.',
  duration: 'Folyamatos'
}];


function ServicesGrid() {
  return (
    <section id="szolgaltatasok" className="nl-section">
      <div className="nl-container">
        <SectionHead
          eyebrow="Szolgáltatások"
          title="Négy szolgáltatás, egy közös cél "
          em="cél"
          lead="Az offenzív szimulációktól a defenzív képzésig — kiberbiztonsági szolgáltatások egy magyar csapattól, magyarul, magyar piacra szabva." />
        
        <div className="nl-services">
          {SERVICES.map((s, i) =>
          <a key={i} href={s.href} className={`nl-svc ${s.featured ? 'nl-svc-featured' : ''}`}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
                <span className={`nl-svc-tag ${s.tagClass}`}>{s.tag}</span>
                <span className="nl-svc-duration">{s.duration}</span>
              </div>
              <div className="nl-svc-icon"><s.Icon size={22} /></div>
              <h3 className="nl-svc-title">{s.title}</h3>
              <p className="nl-svc-copy">{s.copy}</p>
              <div className="nl-svc-meta">
                <span className="nl-svc-link">Részletek <I_home.ArrowR size={14} /></span>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

/* Big stat */
function BigStat() {
  return (
    <section className="nl-bigstat" style={{ padding: "20px 0px", height: "360px" }}>
      <div className="nl-container nl-bigstat-inner" style={{ textAlign: "center" }}>
        <div className="nl-bigstat-lead">Tudtad, hogy</div>
        <div className="nl-bigstat-n" style={{ fontSize: "100px" }}>
          3,4<span className="nl-bigstat-unit">milliárd</span>
        </div>
        <div className="nl-bigstat-tail">
          phishing emailt küldenek <em>naponta</em> — és az incidensek 60%-a emberi hibára vezethető vissza.
        </div>
        <div className="nl-bigstat-source">Forrás: Verizon DBIR 2024 · IBM Cost of a Data Breach 2024</div>
      </div>
    </section>);

}

/* Why phishing — 4-up */
const WHY = [
{ n: '01', t: 'Az emberi tűzfal a leggyengébb láncszem', c: 'A támadások többsége nem a rendszerek, hanem a felhasználók ellen irányul. Egy jól időzített email többet ér, mint egy zero-day.' },
{ n: '02', t: 'Mérhető, akcióképes adat', c: 'Megnyitás, kattintás, bejelentés. Tudni fogod, kik kockáztatnak, és hol érdemes először képezni.' },
{ n: '03', t: 'Megszokásból tudatos viselkedés', c: 'Egyszer ha látnak egy szimulációt, máskor lassítanak. A valódi tudatosság ismétlésből születik.' },
{ n: '04', t: 'Vezetői láthatóság', c: 'Riport, ami az igazgatóságnak is érthető — számokban, nem hackerszlengben. Igazolt felkészültség.' }];


function WhyPhishing() {
  return (
    <section className="nl-section nl-section-alt">
      <div className="nl-container">
        <SectionHead
          eyebrow="Miért érdemes phishing szimulációt futtatni?"
          title="Nem a szigor, hanem a felkészültség véd."
          em="felkészültség"
          lead="A tudatosság nem egy oktatás — egy állapot. Itt négy ok, ami miatt érdemes mérni, nem hinni." />
        
        <div className="nl-why-grid">
          {WHY.map((w) =>
          <div key={w.n} className="nl-why-card nl-reveal">
              <span className="nl-why-num">{w.n}</span>
              <h3 className="nl-why-title">{w.t}</h3>
              <p className="nl-why-copy">{w.c}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* Phishing email quiz — full Gmail-style inbox simulator
   Markup mirrors the WordPress shortcode `[phishing_quiz]`; the JS
   in phishing-quiz.js handles state, rendering and feedback.        */
function PhishingQuiz() {
  React.useEffect(() => {
    // Dynamically load the widget JS *after* React has mounted the markup,
    // so the IIFE inside finds the DOM and can wire itself up.
    if (document.getElementById('nrl-phishing-quiz-script')) return;
    const s = document.createElement('script');
    s.id = 'nrl-phishing-quiz-script';
    s.src = 'phishing-quiz.js';
    s.charset = 'utf-8';
    s.defer = true;
    document.body.appendChild(s);
  }, []);

  return (
    <section className="nl-section">
      <div className="nl-container">
        <div className="nl-section-head is-center" style={{ margin: '0 auto 48px' }}>
          <div className="nl-eyebrow">Próbáld ki — 10 email</div>
          <h2 className="nl-section-title">Felismered a <em>phishinget</em>?</h2>
          <p className="nl-lead" style={{ marginInline: 'auto' }}>
            Egy szimulált inbox 10 emaillel. Mindegyikről döntsd el: valódi vagy phishing? Minden válasz után megmutatjuk a tipikus árulkodó jeleket.
          </p>
        </div>

        {/* WordPress widget markup — handled by phishing-quiz.js */}
        <div id="nrl-phishing-quiz" role="region" aria-label="Phishing felismerési kvíz">
          <div className="pq-wrap">

            {/* Sidebar */}
            <div className="pq-sidebar">
              <div className="pq-sidebar-top">
                <div className="pq-score-label">Eredmény</div>
                <div className="pq-score-val" id="nrl-pq-score-val">0 / 0</div>
                <div className="pq-score-sub" id="nrl-pq-score-sub">Még nem válaszoltál</div>
              </div>
              <div className="pq-folders">
                <div className="pq-folder active" id="nrl-pq-inbox-btn">
                  Beérkező <span className="pq-folder-badge" id="nrl-pq-inbox-badge">10</span>
                </div>
                <div className="pq-folder">Csillagozott</div>
                <div className="pq-divider"></div>
                <div className="pq-folder">Piszkozatok <span className="pq-folder-badge gray">3</span></div>
                <div className="pq-folder">Elküldött</div>
                <div className="pq-divider"></div>
                <div className="pq-folder">Spam</div>
                <div className="pq-folder">Törölt</div>
              </div>
              <div className="pq-progress-wrap">
                <div className="pq-prog-label">Haladás</div>
                <div className="pq-prog-bar">
                  <div className="pq-prog-fill" id="nrl-pq-prog-fill" style={{ width: '0%' }}></div>
                </div>
              </div>
            </div>

            {/* Main */}
            <div className="pq-main">
              {/* Email list */}
              <div className="pq-email-list active" id="nrl-pq-list"></div>

              {/* Email viewer */}
              <div className="pq-viewer" id="nrl-pq-viewer">
                <div className="pq-view-subject" id="nrl-pq-view-subject"></div>
                <div className="pq-view-sender-row">
                  <div className="pq-view-avatar" id="nrl-pq-view-avatar"></div>
                  <div>
                    <div className="pq-view-from" id="nrl-pq-view-from"></div>
                    <div className="pq-view-addr" id="nrl-pq-view-addr"></div>
                    <div className="pq-view-to">Címzett: te@mycorp.hu</div>
                  </div>
                </div>
                <div className="pq-view-body" id="nrl-pq-view-body"></div>
                <div className="pq-verdict-bar">
                  <div className="pq-verdict-q">Ez az email valódi vagy phishing?</div>
                  <div className="pq-verdict-btns">
                    <button className="pq-verdict-btn legit" id="nrl-pq-btn-legit" type="button">Valódi</button>
                    <button className="pq-verdict-btn phish" id="nrl-pq-btn-phish" type="button">Phishing</button>
                  </div>
                  <div className="pq-feedback" id="nrl-pq-feedback">
                    <div className="pq-feedback-title" id="nrl-pq-fb-title"></div>
                    <div id="nrl-pq-fb-text"></div>
                  </div>
                  <button className="pq-next-btn" id="nrl-pq-next-btn" type="button">Következő email →</button>
                </div>
              </div>

              {/* Results screen */}
              <div className="pq-results" id="nrl-pq-results">
                <div className="pq-result-score" id="nrl-pq-res-score"></div>
                <div className="pq-result-label">helyes válasz / 10</div>
                <div className="pq-result-msg" id="nrl-pq-res-msg"></div>
                <div className="pq-result-bars">
                  <div className="pq-result-row">
                    <span className="pq-result-row-label">Helyes</span>
                    <div className="pq-result-bar-wrap">
                      <div className="pq-result-bar-fill green" id="nrl-pq-bar-correct" style={{ width: '0%' }}></div>
                    </div>
                    <span className="pq-result-num" id="nrl-pq-num-correct">0</span>
                  </div>
                  <div className="pq-result-row">
                    <span className="pq-result-row-label">Téves</span>
                    <div className="pq-result-bar-wrap">
                      <div className="pq-result-bar-fill red" id="nrl-pq-bar-wrong" style={{ width: '0%' }}></div>
                    </div>
                    <span className="pq-result-num" id="nrl-pq-num-wrong">0</span>
                  </div>
                </div>
                <button className="pq-restart-btn" id="nrl-pq-restart" type="button">Újrakezdem</button>
              </div>

            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ROI calculator */
function RoiCalculator() {
  const [employees, setEmployees] = useStateHome(150);
  const [breachRisk, setBreachRisk] = useStateHome(28); // %
  const [avgCost, setAvgCost] = useStateHome(12); // MFt per incident

  // Industry benchmarks for the cool-down after training
  const trainedRiskFactor = 0.40; // training reduces phishing-click rate by ~60%
  const newRisk = breachRisk * trainedRiskFactor;

  const expectedLossNow = employees * breachRisk / 100 * (avgCost * 0.05); // crude factor
  const expectedLossTrained = employees * newRisk / 100 * (avgCost * 0.05);
  const annualSavings = expectedLossNow - expectedLossTrained;
  const programCost = Math.round(employees * 8); // eFt / év (~8 eFt / fő / év)
  // annualSavings is in M Ft, programCost in eFt — bring both to eFt for the ratio
  const savingsKFt = annualSavings * 1000;
  const roi = programCost > 0 ? Math.round((savingsKFt - programCost) / programCost * 100) : 0;

  const fmtMFt = (v) => `${v.toFixed(1)} M Ft`;
  const fmtKFt = (v) => `${v.toLocaleString('hu-HU')} eFt`;

  return (
    <section className="nl-section nl-roi">
      <div className="nl-container nl-roi-grid">
        <div>
          <SectionHead
            eyebrow="Mit ér ez számokban? — ROI kalkulátor"
            title="Számold ki a saját csapatodra."
            em="csapatodra"
            onDark
            lead="Húzd a csúszkákat. Az alapadatok hazai KKV-átlagok; a végeredmény indikatív — de a nagyságrend reális." />
          

          <div className="nl-roi-controls">
            <div className="nl-roi-field">
              <div className="nl-roi-field-head">
                <span className="nl-roi-field-label">Munkatársak száma</span>
                <span className="nl-roi-field-val">{employees} fő</span>
              </div>
              <input className="nl-roi-slider" type="range" min="20" max="2000" step="10"
              value={employees} onChange={(e) => setEmployees(+e.target.value)} />
            </div>
            <div className="nl-roi-field">
              <div className="nl-roi-field-head">
                <span className="nl-roi-field-label">Phishing kattintási arány (kezdeti)</span>
                <span className="nl-roi-field-val">{breachRisk}%</span>
              </div>
              <input className="nl-roi-slider" type="range" min="5" max="60" step="1"
              value={breachRisk} onChange={(e) => setBreachRisk(+e.target.value)} />
            </div>
            <div className="nl-roi-field">
              <div className="nl-roi-field-head">
                <span className="nl-roi-field-label">Átlagos incidens költség</span>
                <span className="nl-roi-field-val">{avgCost} M Ft</span>
              </div>
              <input className="nl-roi-slider" type="range" min="2" max="80" step="1"
              value={avgCost} onChange={(e) => setAvgCost(+e.target.value)} />
            </div>
          </div>
        </div>

        <div className="nl-roi-result">
          <div className="nl-roi-result-card is-hero">
            <h4>Becsült éves megtakarítás</h4>
            <div className="nl-roi-result-n">
              {fmtMFt(annualSavings)}
            </div>
            <p className="nl-roi-result-sub">
              Tréning + szimuláció esetén a kattintási arány tipikusan 60%-kal csökken az első év végére.
              A különbözet a várható éves káreloszlásból jön ki.
            </p>
          </div>
          <div className="nl-roi-result-row">
            <div className="nl-roi-result-mini">
              <h5>Program költség / év</h5>
              <div className="nl-roi-result-mini-n">{fmtKFt(programCost)}</div>
            </div>
            <div className="nl-roi-result-mini">
              <h5>Becsült ROI</h5>
              <div className="nl-roi-result-mini-n">{roi > 0 ? `+${roi}%` : `${roi}%`}</div>
            </div>
          </div>
          <div className="nl-roi-foot">
            * Az ipari átlagokon alapul (Ponemon, Verizon DBIR). Konkrét ajánlatért foglalj konzultációt.
          </div>
        </div>
      </div>
    </section>);

}

/* Arguments grid */
const ARGS = [
{ n: 'PÉNZÜGYILEG', t: 'Olcsóbb, mint egyetlen incidens', c: 'Egy átlagos adatszivárgás Magyarországon 30-80 millió Ft. Egy éves képzési program ennek töredéke.' },
{ n: 'TUDATOSSÁG', t: 'A papíros oktatást elfelejtik', c: 'Élmény-alapú szimuláció és 10-15 perces modulok — abban a formátumban, amit a kollégák tényleg végignéznek.' },
{ n: 'FELKÉSZÜLTSÉG', t: 'Tudni fogod, ki kockáztat', c: 'Nem általában — konkrét adatokkal. Osztály, szerepkör és kampány-típus szerint bontva.' },
{ n: 'KULTÚRA', t: 'A bejelentés természetes lesz', c: 'Nem büntetjük, hanem dicsérjük azt, aki bejelenti a gyanús emailt. Ettől válik a security közös ügyé.' }];


function ArgumentsGrid() {
  return (
    <section className="nl-section nl-section-alt">
      <div className="nl-container">
        <SectionHead
          eyebrow="Négy érv"
          title="Miért érdemes most belekezdeni?"
          em="most" />
        
        <div className="nl-args-grid">
          {ARGS.map((a, i) =>
          <div key={i} className="nl-arg-card">
              <span className="nl-arg-num">{a.n}</span>
              <h3 className="nl-arg-title">{a.t}</h3>
              <p className="nl-arg-copy">{a.c}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, {
  HomeHero, ServicesGrid, BigStat, WhyPhishing, PhishingQuiz, RoiCalculator, ArgumentsGrid
});