/* global React, NereusIcons */
const { useState, useEffect, useRef } = React;
const I = NereusIcons;

/* ── Web3Forms ───────────────────────────────────────────
   Beküldés a Web3Forms endpointjára. A kinézet 100% sajat;
   ez csak a háttér-küldés. Access key cseréje: 1 hely.       */
const WEB3FORMS_KEY = 'f3b39fe4-c1eb-4315-89fa-8395c97fcf51';

async function submitToWeb3Forms(fields, subject) {
  const payload = {
    access_key: WEB3FORMS_KEY,
    subject: subject || 'Új kapcsolatfelvétel — nereuslab.hu',
    from_name: 'Nereus Lab weboldal',
    ...fields,
  };
  const res = await fetch('https://api.web3forms.com/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
    body: JSON.stringify(payload),
  });
  const data = await res.json();
  if (!data.success) throw new Error(data.message || 'A küldés nem sikerült.');
  return data;
}
window.submitToWeb3Forms = submitToWeb3Forms;

/* Top notification strip */
function TopStrip() {
  return (
    <div className="nl-topstrip">
      <div className="nl-topstrip-inner">
        <div className="nl-topstrip-left">
          <span className="nl-topstrip-tag">Új</span>
          <span className="nl-topstrip-text">
            <strong>Cyber Hygiene Quiz</strong> — mérd fel a cyber tudatosságodat 3 perc alatt.
          </span>
        </div>
        <a href="cyber-hygiene-quiz" className="nl-topstrip-cta">
          Kipróbálom <I.ArrowR size={14} />
        </a>
      </div>
    </div>);

}

/* Main site header w/ Services mega menu */
function NereusHeader({ current }) {
  const [open, setOpen] = useState(null); // 'svc' | 'kb' | null
  const [menu, setMenu] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const onDoc = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpen(null);
    };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);

  const isCurrent = (k) => current === k;

  return (
    <header className="nl-header" ref={ref}>
      <div className="nl-container nl-header-inner">
        <a href="/" className="nl-brand" aria-label="Nereus Lab">
          <img src="assets/logo_full.png" alt="Nereus Lab" style={{ height: "59px", width: "108px" }} />
        </a>

        <nav className="nl-nav" aria-label="Fő menü">
          <div className="nl-nav-item">
            <button
              className={`nl-nav-link ${open === 'svc' || ['rt', 'pt', 'ph', 'ka', 'nl'].includes(current) ? 'is-open' : ''}`}
              onClick={() => setOpen(open === 'svc' ? null : 'svc')}>
              Szolgáltatások <I.ArrowDown size={14} />
            </button>
            {open === 'svc' &&
            <div className="nl-mega">
                <div className="nl-mega-col nl-mega-col-off">
                  <div className="nl-mega-head">
                    <span className="nl-mega-pill nl-mega-pill-off">OFFENZÍV</span>
                    <span className="nl-mega-head-sub">TÁMADÁSSZIMULÁCIÓK</span>
                  </div>
                  <a href="red-teaming" className="nl-mega-link nl-mega-link-off">
                    <span className="nl-mega-link-icon"><I.Crosshair size={18} /></span>
                    <span>
                      <strong>Red Teaming</strong>
                      <span>Valósághű, APT-szintű támadásszimuláció — hatókör nélkül, teljes szervezetre.</span>
                    </span>
                  </a>
                  <a href="penetration-testing" className="nl-mega-link nl-mega-link-off">
                    <span className="nl-mega-link-icon"><I.Bug size={18} /></span>
                    <span>
                      <strong>Penetration Testing</strong>
                      <span>Sérülékenység-feltárás definiált hatókörben, részletes riporttal.</span>
                    </span>
                  </a>
                  <a href="phishing-szimulacio" className="nl-mega-link nl-mega-link-off">
                    <span className="nl-mega-link-icon"><I.Mail size={18} /></span>
                    <span>
                      <strong>Phishing szimuláció</strong>
                      <span>Testreszabott, valósághű phishing kampányok a munkatársak felkészültségének méréséhez.</span>
                    </span>
                  </a>
                </div>
                <div className="nl-mega-col nl-mega-col-def">
                  <div className="nl-mega-head">
                    <span className="nl-mega-pill nl-mega-pill-def">DEFENZÍV</span>
                    <span className="nl-mega-head-sub">TUDATOSSÁG &amp; KÉPZÉS</span>
                  </div>
                  <a href="kibertudatossag-trening" className="nl-mega-link nl-mega-link-def">
                    <span className="nl-mega-link-icon"><I.BookOpen size={18} /></span>
                    <span>
                      <strong>Kibertudatosság tréning</strong>
                      <span>Interaktív e-learning modulok és élő tréningek a biztonságkultúra fejlesztéséhez.</span>
                    </span>
                  </a>
                  <a href="nereus-learning" className="nl-mega-link nl-mega-link-def">
                    <span className="nl-mega-link-icon"><I.Layers size={18} /></span>
                    <span>
                      <strong>Nereus Learning</strong>
                      <span>Saját e-learning platformunk — 10–15 perces magyar nyelvű modulok, vezetői dashboarddal.</span>
                    </span>
                  </a>
                  <a href="kapcsolat" className="nl-mega-cta">
                    <div className="nl-mega-cta-h">NEM TUDOD MELYIK ILLIK HOZZÁD?</div>
                    <p className="nl-mega-cta-p">Rövid konzultáción segítünk megtalálni a legmegfelelőbb megoldást a szervezeted számára.</p>
                    <span className="nl-mega-cta-link">Ingyenes konzultáció →</span>
                  </a>
                </div>
              </div>
            }
          </div>

          <div className="nl-nav-item">
            <button
              className={`nl-nav-link ${open === 'kb' ? 'is-open' : ''}`}
              onClick={() => setOpen(open === 'kb' ? null : 'kb')}>
              Tudásbázis <I.ArrowDown size={14} />
            </button>
            {open === 'kb' &&
            <div className="nl-mega">
                <div className="nl-mega-col nl-mega-col-def">
                  <div className="nl-mega-head">
                    <span className="nl-mega-pill nl-mega-pill-kb">KÉPZÉSEK</span>
                    <span className="nl-mega-head-sub">TANULÁSI ANYAGOK</span>
                  </div>
                  <a href="#" className="nl-mega-link nl-mega-link-def">
                    <span className="nl-mega-link-icon"><I.BookOpen size={18} /></span>
                    <span>
                      <strong>Top 12 webes képzés</strong>
                      <span>A legjobb online kiberbiztonsági kurzusok válogatva, értékelve.</span>
                    </span>
                  </a>
                  <a href="kepzesi-konyvtar" className="nl-mega-link nl-mega-link-def">
                    <span className="nl-mega-link-icon"><I.Layers size={18} /></span>
                    <span>
                      <strong>Képzési témakörök</strong>
                      <span>Böngészd a teljes képzési könyvtárat témakörök szerint rendezve.</span>
                    </span>
                  </a>
                </div>
                <div className="nl-mega-col nl-mega-col-def">
                  <div className="nl-mega-head">
                    <span className="nl-mega-pill nl-mega-pill-kb">PHISHING</span>
                    <span className="nl-mega-head-sub">FENYEGETÉSEK</span>
                  </div>
                  <a href="cyber-hygiene-quiz" className="nl-mega-link nl-mega-link-def">
                    <span className="nl-mega-link-icon"><I.Mail size={18} /></span>
                    <span>
                      <strong>Leggyakoribb phishing emailek</strong>
                      <span>Valós példák és elemzések a legveszélyesebb phishing technikákról.</span>
                    </span>
                  </a>
                  <a href="cyber-hygiene-quiz" className="nl-mega-cta">
                    <div className="nl-mega-cta-h">CYBER HYGIENE QUIZ</div>
                    <p className="nl-mega-cta-p">Mérd fel a céged kiberbiztonsági felkészültségét 3 perc alatt — azonnali eredménnyel.</p>
                    <span className="nl-mega-cta-link">Kitöltöm a tesztet →</span>
                  </a>
                </div>
              </div>
            }
          </div>

          <a href="kapcsolat"
          className={`nl-nav-link ${isCurrent('kapcsolat') ? 'is-current' : ''}`}>
            Kapcsolat
          </a>
        </nav>

        <div className="nl-header-cta">
          <a href="kapcsolat" className="nl-btn nl-btn-primary nl-btn-sm">
            Ingyenes konzultáció
          </a>
          <button className="nl-menu-btn" onClick={() => setMenu(!menu)} aria-label="Menü">
            {menu ? <I.X size={20} /> : <I.Menu size={20} />}
          </button>
        </div>
      </div>

      {menu &&
      <div className="nl-mobile-menu">
          <div className="nl-mobile-h">Szolgáltatások</div>
          <a href="red-teaming">Red Teaming</a>
          <a href="penetration-testing">Penetration Testing</a>
          <a href="phishing-szimulacio">Phishing szimuláció</a>
          <a href="kibertudatossag-trening">Kibertudatosság tréning</a>
          <a href="nereus-learning">Nereus Learning</a>
          <div className="nl-mobile-h">Egyéb</div>
          <a href="kepzesi-konyvtar">Képzési könyvtár</a>
          <a href="cyber-hygiene-quiz">Cyber Hygiene Quiz</a>
          <a href="kapcsolat">Kapcsolat</a>
          <a href="kapcsolat" className="nl-btn nl-btn-primary" style={{ marginTop: 12, justifyContent: 'center' }}>
            Ingyenes konzultáció
          </a>
        </div>
      }
    </header>);

}

/* Footer */
function NereusFooter() {
  const year = new Date().getFullYear();
  return (
    <footer className="nl-footer">
      <div className="nl-container">
        <div className="nl-footer-inner">
          <div className="nl-footer-brand">
            <img src="assets/logo_full.png" alt="Nereus Lab" style={{ width: "105px", height: "57px" }} />
            <p className="nl-footer-copy">Kiberbiztonsági szolgáltatások — phishing szimulációk, kibertudatosság tréning, pentest és red teaming egy kézből.


            </p>
            <div className="nl-footer-contact-info">
              <a href="mailto:info@nereuslab.hu">
                <I.Mail size={16} /> info@nereuslab.hu
              </a>
              <a href="tel:+36306357451">
                <I.Phone size={16} /> +36 30 000 0000
              </a>
            </div>
          </div>

          <div className="nl-footer-cols">
            <div>
              <div className="nl-footer-h">Offenzív</div>
              <ul>
                <li><a href="red-teaming">Red Teaming</a></li>
                <li><a href="penetration-testing">Penetration Testing</a></li>
                <li><a href="phishing-szimulacio">Phishing szimuláció</a></li>
              </ul>
            </div>
            <div>
              <div className="nl-footer-h">Defenzív</div>
              <ul>
                <li><a href="kibertudatossag-trening">Kibertudatosság tréning</a></li>
                <li><a href="nereus-learning">Nereus Learning</a></li>
                <li><a href="#">Élő workshopok</a></li>
              </ul>
            </div>
            <div>
              <div className="nl-footer-h">Cég</div>
              <ul>
                <li><a href="#">Rólunk</a></li>
                <li><a href="#">Tudásbázis</a></li>
                <li><a href="kapcsolat">Kapcsolat</a></li>
                <li><a href="#">Adatvédelem</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div className="nl-footer-bottom">
          <span>© {year} Nereus IT Solutions Kft. — minden jog fenntartva.</span>
        </div>
      </div>
    </footer>);

}

/* Section head */
function SectionHead({ eyebrow, title, lead, center, onDark, em }) {
  const renderTitle = () => {
    if (!em) return title;
    const parts = title.split(em);
    return (
      <>
        {parts[0]}
        <em>{em}</em>
        {parts[1]}
      </>);

  };
  return (
    <div className={`nl-section-head${center ? ' is-center' : ''}`}>
      {eyebrow && <div className={`nl-eyebrow${onDark ? ' nl-eyebrow-on-dark' : ''}`}>{eyebrow}</div>}
      <h2 className={`nl-section-title${onDark ? ' nl-on-dark' : ''}`}>{renderTitle()}</h2>
      {lead && <p className="nl-lead" style={{ color: "rgb(55, 55, 55)" }}>{lead}</p>}
    </div>);

}

/* Reveal-on-scroll wrapper (lightweight IntersectionObserver) */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.nl-reveal');
    if (!('IntersectionObserver' in window)) {
      els.forEach((el) => el.classList.add('is-in'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) {e.target.classList.add('is-in');io.unobserve(e.target);}});
    }, { threshold: 0.12, rootMargin: '0px 0px -10% 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* Animated water hero background — SVG wave layers + radial caustics */
function WaveHero({ variant = 'tide' }) {
  return (
    <div className={`nl-hero-bg nl-hero-bg-${variant}`}>
      {variant === 'tide' &&
      <>
          <svg
          viewBox="0 0 1440 800"
          preserveAspectRatio="xMidYMid slice"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
            <defs>
              <radialGradient id="caust-1" cx="20%" cy="30%" r="40%">
                <stop offset="0%" stopColor="#37beb0" stopOpacity="0.18" />
                <stop offset="100%" stopColor="#37beb0" stopOpacity="0" />
              </radialGradient>
              <radialGradient id="caust-2" cx="80%" cy="60%" r="50%">
                <stop offset="0%" stopColor="#5e99b3" stopOpacity="0.14" />
                <stop offset="100%" stopColor="#5e99b3" stopOpacity="0" />
              </radialGradient>
            </defs>
            <rect width="1440" height="800" fill="url(#caust-1)" />
            <rect width="1440" height="800" fill="url(#caust-2)" />
          </svg>

          <div className="nl-hero-waves">
            <svg className="nl-wave-3" viewBox="0 0 2880 200" preserveAspectRatio="none">
              <path d="M0,120 C360,60 720,180 1080,120 C1440,60 1800,180 2160,120 C2520,60 2880,180 2880,120 L2880,200 L0,200 Z"
            fill="rgba(94,153,179,0.20)" />
            </svg>
            <svg className="nl-wave-2" viewBox="0 0 2880 200" preserveAspectRatio="none">
              <path d="M0,140 C360,90 720,190 1080,140 C1440,90 1800,190 2160,140 C2520,90 2880,190 2880,140 L2880,200 L0,200 Z"
            fill="rgba(55,190,176,0.18)" />
            </svg>
            <svg className="nl-wave-1" viewBox="0 0 2880 200" preserveAspectRatio="none">
              <path d="M0,160 C360,120 720,200 1080,160 C1440,120 1800,200 2160,160 C2520,120 2880,200 2880,160 L2880,200 L0,200 Z"
            fill="rgba(22,56,77,0.6)" />
            </svg>
          </div>
        </>
      }

      {variant === 'depth' &&
      <svg
        viewBox="0 0 1440 800"
        preserveAspectRatio="xMidYMid slice"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          <defs>
            <radialGradient id="d1" cx="30%" cy="40%" r="35%">
              <stop offset="0%" stopColor="#37beb0" stopOpacity="0.35" />
              <stop offset="100%" stopColor="#37beb0" stopOpacity="0" />
            </radialGradient>
            <radialGradient id="d2" cx="80%" cy="20%" r="40%">
              <stop offset="0%" stopColor="#5e99b3" stopOpacity="0.30" />
              <stop offset="100%" stopColor="#5e99b3" stopOpacity="0" />
            </radialGradient>
            <radialGradient id="d3" cx="65%" cy="85%" r="45%">
              <stop offset="0%" stopColor="#0c6170" stopOpacity="0.50" />
              <stop offset="100%" stopColor="#0c6170" stopOpacity="0" />
            </radialGradient>
          </defs>
          <rect width="1440" height="800" fill="url(#d1)" />
          <rect width="1440" height="800" fill="url(#d2)" />
          <rect width="1440" height="800" fill="url(#d3)" />
        </svg>
      }

      {variant === 'lab' &&
      <svg
        viewBox="0 0 1440 800"
        preserveAspectRatio="xMidYMid slice"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          <defs>
            <pattern id="grid" x="0" y="0" width="64" height="64" patternUnits="userSpaceOnUse">
              <path d="M64 0 L0 0 0 64" fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="1" />
            </pattern>
            <radialGradient id="labglow" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="#37beb0" stopOpacity="0.20" />
              <stop offset="100%" stopColor="#37beb0" stopOpacity="0" />
            </radialGradient>
          </defs>
          <rect width="1440" height="800" fill="url(#grid)" />
          <rect width="1440" height="800" fill="url(#labglow)" />
          <g stroke="rgba(55,190,176,0.4)" strokeWidth="1" fill="none">
            <circle cx="720" cy="400" r="120" opacity="0.6" />
            <circle cx="720" cy="400" r="200" opacity="0.4" />
            <circle cx="720" cy="400" r="280" opacity="0.25" />
          </g>
        </svg>
      }
    </div>);

}

/* Hero animated shield + rings */
function HeroOrb() {
  return (
    <div className="nl-hero-orb">
      <div className="nl-hero-ring nl-hero-ring-3"></div>
      <div className="nl-hero-ring nl-hero-ring-2"></div>
      <div className="nl-hero-ring nl-hero-ring-1"></div>
      <div className="nl-hero-shield">
        <img src="assets/logo_icon.png" alt="" />
      </div>
    </div>);

}

/* Cross-promo banner — links the two defenzív services together */
function CrossPromo({ eyebrow, title, copy, href, ctaText, Icon }) {
  return (
    <section className="nl-section-tight">
      <div className="nl-container">
        <a href={href} className="nl-crosspromo">
          <div className="nl-crosspromo-icon">{Icon ? <Icon size={26} /> : null}</div>
          <div className="nl-crosspromo-body">
            <div className="nl-crosspromo-eyebrow">{eyebrow}</div>
            <h3 className="nl-crosspromo-title">{title}</h3>
            <p className="nl-crosspromo-copy">{copy}</p>
          </div>
          <span className="nl-crosspromo-cta">{ctaText} <span aria-hidden="true">→</span></span>
        </a>
      </div>
    </section>);

}

Object.assign(window, {
  TopStrip, NereusHeader, NereusFooter, SectionHead, useReveal, WaveHero, HeroOrb, CrossPromo
});