/* global React, NereusIcons */
const I_svc = NereusIcons;
const { useState: useStateSvc } = React;

/* Service hero */
function ServiceHero({ kicker, title, em, lead, ctaText = 'Ingyenes konzultáció', ctaSec = 'Folyamat megtekintése', tags = [], stats = [] }) {
  const renderTitle = () => {
    if (!em) return title;
    const parts = title.split(em);
    return <>{parts[0]}<em>{em}</em>{parts[1]}</>;
  };
  return (
    <section className="nl-svc-hero">
      <WaveHero variant="tide" />
      <div className="nl-container nl-svc-hero-inner">
        <div>
          <div className="nl-svc-kicker">
            <I_svc.Compass size={14} /> {kicker}
          </div>
          <h1 className="nl-svc-hero-title" style={{ maxWidth: "670px" }}>{renderTitle()}</h1>
          <p className="nl-svc-hero-lead">{lead}</p>
          <div className="nl-svc-hero-ctas">
            <a href="kapcsolat" className="nl-btn nl-btn-primary nl-btn-lg">{ctaText} <I_svc.ArrowR size={14} /></a>
            <a href="#folyamat" className="nl-btn nl-btn-ghost-light nl-btn-lg">{ctaSec}</a>
          </div>
          <div className="nl-svc-hero-tags">
            {tags.map((t, i) => <span key={i} className="nl-chip nl-chip-dark">{t}</span>)}
          </div>
        </div>
        {stats.length > 0 &&
        <div className="nl-svc-aside">
            {stats.map((s, i) =>
          <div key={i} className="nl-svc-aside-card">
                <div className="nl-svc-aside-n">{s.n}</div>
                <div className="nl-svc-aside-l">{s.l}</div>
              </div>
          )}
          </div>
        }
      </div>
    </section>);

}

/* About + side compare */
function AboutService({ eyebrow, title, em, lead, bullets = [], compareTitle, compareA, compareB }) {
  const renderTitle = () => {
    if (!em) return title;
    const parts = title.split(em);
    return <>{parts[0]}<em>{em}</em>{parts[1]}</>;
  };
  return (
    <section className="nl-section">
      <div className="nl-container nl-split">
        <div>
          <div className="nl-eyebrow">{eyebrow}</div>
          <h2 className="nl-section-title">{renderTitle()}</h2>
          <p className="nl-lead">{lead}</p>
          {bullets.length > 0 &&
          <ul className="nl-bullets" style={{ marginTop: 24 }}>
              {bullets.map((b, i) =>
            <li key={i}>
                  <span className="nl-bullets-icon"><I_svc.Check size={12} /></span>
                  <span>{b}</span>
                </li>
            )}
            </ul>
          }
        </div>
        {compareA && compareB &&
        <div className="nl-compare-card">
            <div className="nl-compare-title">{compareTitle}</div>
            <div className="nl-compare-side nl-compare-side-a">
              <div className="nl-compare-h">{compareA.h}</div>
              <div className="nl-compare-p">{compareA.p}</div>
            </div>
            <div className="nl-compare-vs">— VS —</div>
            <div className="nl-compare-side nl-compare-side-b">
              <div className="nl-compare-h">{compareB.h}</div>
              <div className="nl-compare-p">{compareB.p}</div>
            </div>
          </div>
        }
      </div>
    </section>);

}

/* When it fits (6 cards) */
function WhenItFits({ eyebrow = 'Mikor érdemes', title, em, lead, items = [] }) {
  const renderTitle = () => {
    if (!em) return title;
    const parts = title.split(em);
    return <>{parts[0]}<em>{em}</em>{parts[1]}</>;
  };
  return (
    <section className="nl-section nl-section-alt">
      <div className="nl-container">
        <div className="nl-section-head">
          <div className="nl-eyebrow">{eyebrow}</div>
          <h2 className="nl-section-title" style={{ width: "760px" }}>{renderTitle()}</h2>
          {lead && <p className="nl-lead">{lead}</p>}
        </div>
        <div className="nl-fits-grid">
          {items.map((it, i) =>
          <div key={i} className="nl-fit-card">
              <div className="nl-fit-n">0{i + 1}</div>
              <h3 className="nl-fit-title">{it.t}</h3>
              <p className="nl-fit-copy">{it.c}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* Process timeline (numbered steps with phase + duration) */
function ProcessTimeline({ eyebrow = 'Folyamat', title, em, lead, steps = [] }) {
  const renderTitle = () => {
    if (!em) return title;
    const parts = title.split(em);
    return <>{parts[0]}<em>{em}</em>{parts[1]}</>;
  };
  return (
    <section id="folyamat" className="nl-section">
      <div className="nl-container">
        <div className="nl-section-head">
          <div className="nl-eyebrow">{eyebrow}</div>
          <h2 className="nl-section-title">{renderTitle()}</h2>
          {lead && <p className="nl-lead">{lead}</p>}
        </div>
        <div className="nl-process">
          {steps.map((s, i) =>
          <div key={i} className="nl-process-step">
              <div className="nl-process-dot">{i + 1}</div>
              <div className="nl-process-side">
                <div className="nl-process-phase">{s.phase}</div>
                <div className="nl-process-duration">{s.duration}</div>
              </div>
              <div className="nl-process-body">
                <h3 className="nl-process-title">{s.title}</h3>
                <p className="nl-process-copy">{s.copy}</p>
                {s.tags &&
              <div className="nl-process-tags">
                    {s.tags.map((t, j) => <span key={j} className="nl-chip nl-chip-mono">{t}</span>)}
                  </div>
              }
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* Deliverables — 4-up on dark */
function Deliverables({ eyebrow = 'Deliverables', title, em, lead, items = [] }) {
  const renderTitle = () => {
    if (!em) return title;
    const parts = title.split(em);
    return <>{parts[0]}<em>{em}</em>{parts[1]}</>;
  };
  return (
    <section className="nl-section nl-section-deep">
      <div className="nl-container">
        <div className="nl-section-head">
          <div className="nl-eyebrow nl-eyebrow-on-dark">{eyebrow}</div>
          <h2 className="nl-section-title nl-on-dark">{renderTitle()}</h2>
          {lead && <p className="nl-lead">{lead}</p>}
        </div>
        <div className="nl-deliv-grid">
          {items.map((d, i) =>
          <div key={i} className="nl-deliv-card">
              {d.badge && <span className="nl-deliv-badge">{d.badge}</span>}
              <div className="nl-deliv-icon"><d.Icon size={20} /></div>
              <h3 className="nl-deliv-title">{d.t}</h3>
              <p className="nl-deliv-copy">{d.c}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* Comparison table (Red Team vs Pentest) */
function ComparisonTable({ eyebrow, title, em, lead, columns = [], rows = [] }) {
  const renderTitle = () => {
    if (!em) return title;
    const parts = title.split(em);
    return <>{parts[0]}<em>{em}</em>{parts[1]}</>;
  };
  return (
    <section className="nl-section nl-section-alt">
      <div className="nl-container">
        <div className="nl-section-head">
          <div className="nl-eyebrow">{eyebrow}</div>
          <h2 className="nl-section-title">{renderTitle()}</h2>
          {lead && <p className="nl-lead">{lead}</p>}
        </div>
        <div className="nl-compare-table">
          <div className="nl-ct-head">
            <div className="nl-ct-aspect">Szempont</div>
            {columns.map((c, i) =>
            <div key={i} className="nl-ct-col">
                <div className="nl-ct-col-h">{c.h}</div>
                <div className="nl-ct-col-s">{c.s}</div>
              </div>
            )}
          </div>
          {rows.map((r, i) =>
          <div key={i} className="nl-ct-row">
              <div className="nl-ct-aspect">{r.aspect}</div>
              {r.cells.map((c, j) =>
            <div key={j} className="nl-ct-cell">
                  {columns[j] && <span className="nl-ct-cell-label">{columns[j].h}</span>}
                  <span className="nl-ct-cell-val">{c}</span>
                </div>
            )}
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* Decision lists */
function DecisionLists({ eyebrow = 'Döntéssegítő', title, em, lead, colA, colB }) {
  const renderTitle = () => {
    if (!em) return title;
    const parts = title.split(em);
    return <>{parts[0]}<em>{em}</em>{parts[1]}</>;
  };
  return (
    <section className="nl-section">
      <div className="nl-container">
        <div className="nl-section-head">
          <div className="nl-eyebrow">{eyebrow}</div>
          <h2 className="nl-section-title">{renderTitle()}</h2>
          {lead && <p className="nl-lead">{lead}</p>}
        </div>
        <div className="nl-decision-grid">
          <div className="nl-decision-col">
            <h3 className="nl-decision-h">{colA.h}</h3>
            <ul className="nl-decision-list">
              {colA.items.map((it, i) =>
              <li key={i}>
                  <span className="nl-decision-list-icon"><I_svc.Check size={12} /></span>
                  <span>{it}</span>
                </li>
              )}
            </ul>
          </div>
          <div className="nl-decision-col nl-decision-col-b">
            <h3 className="nl-decision-h">{colB.h}</h3>
            <ul className="nl-decision-list">
              {colB.items.map((it, i) =>
              <li key={i}>
                  <span className="nl-decision-list-icon"><I_svc.Check size={12} /></span>
                  <span>{it}</span>
                </li>
              )}
            </ul>
          </div>
        </div>
      </div>
    </section>);

}

/* Contact block */
function ContactBlock({ title = 'Vedd fel velünk a', em = 'kapcsolatot', lead, service }) {
  const [sent, setSent] = useStateSvc(false);
  const [sending, setSending] = useStateSvc(false);
  const [error, setError] = useStateSvc(null);
  const [form, setForm] = useStateSvc({ name: '', email: '', phone: '', company: '', size: '21-50', service: service || 'Phishing szimuláció', msg: '', consent: false, botcheck: '' });
  const submit = async (e) => {
    e.preventDefault();
    if (form.botcheck) return; // honeypot
    setSending(true);setError(null);
    try {
      await submitToWeb3Forms({
        name: form.name, email: form.email, phone: form.phone, company: form.company,
        'Cég mérete': form.size, 'Érdeklődés': form.service, message: form.msg
      }, `Kapcsolatfelvétel: ${form.service} — ${form.company || form.name}`);
      setSent(true);
    } catch (err) {
      setError(err.message || 'Hiba történt. Próbáld újra, vagy írj az info@nereuslab.hu címre.');
    } finally {
      setSending(false);
    }
  };
  const update = (k, v) => setForm({ ...form, [k]: v });

  return (
    <section className="nl-section nl-contact">
      <div className="nl-container nl-contact-grid">
        <div>
          <div className="nl-eyebrow nl-eyebrow-on-dark">Kapcsolat</div>
          <h2 className="nl-section-title nl-on-dark">{title} <em>{em}</em>.</h2>
          <p className="nl-lead" style={{ color: "rgb(209, 209, 209)" }}>{lead || 'Egy 30 perces, kötetlen beszélgetésen átnézzük a helyzeteteket és a célokat — utána mi szólunk, hogy szerintünk hol érdemes elindulni.'}</p>

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

          <div className="nl-contact-trust">
            <div className="nl-contact-trust-h">Hitelesítés</div>
            <div className="nl-contact-trust-row">
              <span><I_svc.ShieldChk size={14} /> CEH</span>
              <span><I_svc.ShieldChk size={14} /> OSCP</span>
              <span><I_svc.ShieldChk size={14} /> CISSP</span>
              <span><I_svc.ShieldChk size={14} /> ISO 27001</span>
            </div>
          </div>
        </div>

        {sent ?
        <div className="nl-contact-page-form">
            <div className="nl-contact-sent" style={{ padding: '48px 12px' }}>
              <div className="nl-contact-sent-icon" style={{ background: 'var(--teal-50)', color: 'var(--teal-600)', borderColor: 'var(--teal-300)' }}>
                <I_svc.Check size={28} />
              </div>
              <h3 style={{ color: 'var(--navy-700)' }}>Köszönjük — megkaptuk!</h3>
              <p style={{ color: 'var(--fg-2)' }}>24 órán belül visszajelzünk emailben, javaslunk pár szabad időpontot a beszélgetésre.</p>
            </div>
          </div> :

        <form className="nl-contact-page-form" onSubmit={submit}>
            <div className="nl-form-row">
              <label><span>Név</span><input required value={form.name} onChange={(e) => update('name', e.target.value)} placeholder="Vezeték- és keresztnév" /></label>
              <label><span>Cég</span><input required value={form.company} onChange={(e) => update('company', e.target.value)} placeholder="Cégnév Kft." /></label>
            </div>
            <div className="nl-form-row">
              <label><span>Email</span><input required type="email" value={form.email} onChange={(e) => update('email', e.target.value)} placeholder="te@ceged.hu" /></label>
              <label><span>Telefon (opcionális)</span><input value={form.phone} onChange={(e) => update('phone', e.target.value)} placeholder="+36 30 ..." /></label>
            </div>
            <div className="nl-form-row">
              <label><span>Cég mérete</span>
                <select value={form.size} onChange={(e) => update('size', e.target.value)}>
                  <option>1-20</option><option>21-50</option><option>51-200</option><option>201-1000</option><option>1000+</option>
                </select>
              </label>
              <label><span>Mire kérnél ajánlatot?</span>
                <select value={form.service} onChange={(e) => update('service', e.target.value)}>
                  <option>Phishing szimuláció</option>
                  <option>Kibertudatosság tréning</option>
                  <option>Penetration Testing</option>
                  <option>Red Teaming</option>
                  <option>Még nem tudom — szeretnék konzultálni</option>
                </select>
              </label>
            </div>
            <label><span>Üzenet</span><textarea rows="4" value={form.msg} onChange={(e) => update('msg', e.target.value)} placeholder="Pár sor a helyzetetekről, célokról vagy a határidőkről." /></label>
            <label className="nl-check">
              <input type="checkbox" required checked={form.consent} onChange={(e) => update('consent', e.target.checked)} />
              <span>Elfogadom az <a href="#" style={{ color: 'var(--teal-600)', textDecoration: 'underline' }}>adatvédelmi tájékoztatót</a> és az adataim kapcsolatfelvétel céljából való kezelését.</span>
            </label>
            <input type="checkbox" name="botcheck" tabIndex="-1" autoComplete="off" checked={!!form.botcheck} onChange={(e) => update('botcheck', e.target.checked ? '1' : '')} style={{ display: 'none' }} aria-hidden="true" />
            {error && <div className="nl-form-error">{error}</div>}
            <button type="submit" className="nl-btn nl-btn-primary nl-btn-lg nl-form-submit" style={{ marginTop: 8 }} disabled={sending}>
              <I_svc.Send size={14} /> {sending ? 'Küldés…' : 'Üzenet küldése'}
            </button>
          </form>
        }
      </div>
    </section>);

}

Object.assign(window, {
  ServiceHero, AboutService, WhenItFits, ProcessTimeline, Deliverables, ComparisonTable, DecisionLists, ContactBlock
});