/* ============================================================
   selfservice.jsx - NetAdClick Hírlevélküldő · SELF-SERVICE landing
   ============================================================ */
const { useState: useStateSS, useEffect: useEffectSS, useRef: useRefSS } = React;

const SS_FEATURES = [
  { iconKey: "editor", title: "Drag & drop szerkesztő", desc: "Programozói tudás nélkül készíthet professzionális hírlevelet percek alatt, előre készült blokkokból." },
  { iconKey: "stats", title: "Valós idejű statisztika", desc: "Megnyitások, kattintások, leiratkozások azonnal, linkenkénti bontásban, exportálható nézetekkel." },
  { iconKey: "segment", title: "Mikro-szegmentáció", desc: "Korlátlan lista-import és célzás érdeklődés, viselkedés és demográfia alapján, minden feliratkozónak relevánsan." },
  { iconKey: "trigger", title: "Trigger Mail", desc: "Eseményvezérelt automatikus levelek feliratkozásra, kérdőívre, inaktivitásra vagy kosárelhagyásra. Ön egyszer beállítja, a rendszer dolgozik." },
  { iconKey: "form", title: "Form & kérdőívkészítő", desc: "Beépített adatgyűjtő, az új feliratkozó azonnal a megfelelő listába kerül, a megfelelő automatizmussal." },
  { iconKey: "retarget", title: "Újracélzás", desc: "Aki megnyitott, de nem kattintott, automatikusan emlékeztetőt kap személyre szabott tárggyal és tartalommal." },
  { iconKey: "analytics", title: "Webanalitika", desc: "Kampánytámogató mélységi analitika, kampányokra és időszakokra bontva. Nincs külön rendszer, nincs külön adat." },
  { iconKey: "sms", title: "SMS marketing", desc: "Az e-mail mellé integrált SMS-csatorna időérzékeny ajánlatoknak, emlékeztetőknek, eseményvezérelt üzeneteknek." },
  { iconKey: "integrate", title: "Kódbefűzés + integráció", desc: "Mi fűzzük be a feliratkozó űrlapot, eseménykövetést és webshop-integrációt, Önnek nem kell fejlesztőt keresnie." }
];

const SS_SUPPORT = [
  { t: "Kódbefűzés az oldalába", d: "Feliratkozó form, nyomkövető pixel, eseménykövetés. Mi helyezzük ki, mi teszteljük.", img: "assets/support/kodbefuzes.jpg" },
  { t: "Lista beállítás és import", d: "Paraméterek, szegmensek, oszlop-megfeleltetés. Az első listákat mi állítjuk be Ön helyett.", img: "assets/support/lista-import.jpg" },
  { t: "Levél készítés, design, tartalom", d: "Ha kell, teljes hírlevél-koncepciót írunk és tervezünk a márkájához illesztett sablonokkal.", img: "assets/support/level-design.jpg" },
  { t: "E-mail automatizmusok", d: "Üdvözlő sorozat, kosárelhagyás, inaktivitás, újracélzás teljes forgatókönyvvel, mérhető kimenetekkel.", img: "assets/support/automatizmus.jpg" },
  { t: "Feliratkozó form összekapcsolás", d: "Űrlap → lista → automatizmus. Weboldal, landing, Facebook lead, mindegyik egy helyre fut be.", img: "assets/support/form-osszekapcsolas-v2.jpg" },
  { t: "Eseményvezérelt üzenetek", d: "Születésnap, évforduló, hűségmérföldkő, webinárium-emlékeztető, SMS-sel is kombinálva.", img: "assets/support/esemenyvezerelt.jpg" },
  { t: "Magyar nyelvű ingyenes ügyfélszolgálat", d: "Valódi ember, budapesti időzónában, munkanapokon 9-17 óra között. E-mailben, telefonon, képernyőmegosztással.", img: "assets/support/ugyfelszolgalat.jpg" }
];

const SS_FAQ = [
  { q: "Mit tartalmaz a 30 perces személyes bemutató?", a: "Konkrétan az Önök helyzetére szabott demót: meglévő lista (ha van), kampányigények, automatizmusok áttekintése. A végén egy világos lépéstervet kap arra, hogyan érdemes elindulni, akkor is, ha nem nálunk. A bemutató teljesen ingyenes, kötelezettség nélküli." },
  { q: "Mennyi munka ez nekünk?", a: "A beállítást, a listát, a designt és az automatizmusokat mi végezzük. Önnek a jóváhagyás és a tartalmi irány marad. Az első kampányig, és azután is, minden kérdésében segítünk." },
  { q: "Mi történik a meglévő listáinkkal, integrációinkkal?", a: "Az átállás a mi dolgunk. Meglévő Excel, CSV, MailChimp-export, mindent importálunk, a paramétereket (név, cégnév stb.) beállítjuk, a feliratkozó formokat újra befűzzük. Ön a már működő rendszerrel találkozik az első napon." },
  { q: "Milyen technikai támogatást kapunk?", a: "Teljeskörűt. A kódbefűzést, DKIM/SPF beállítást, integrációkat és az automatizmusok felépítését mi végezzük. Egy dedikált magyar nyelvű kapcsolattartóval dolgozik, képernyőmegosztással, nem ticket-számmal." },
  { q: "Mi a különbség a magyar és a nemzetközi rendszerekhez képest?", a: "ÁSZF, GDPR-minta szövegek, magyar nyelvű sablonok, magyar nyelvű support, és itthoni kampánytapasztalatból született funkciók. Minden, ami magyar kkv-nak kell, alapból benne van. Nem egy fordított felület, hanem egy itthon fejlesztett rendszer." },
  { q: "Az SMS-kampányok és automatizmusok hogyan kapcsolódnak be?", a: "Az SMS ugyanahhoz a listához és eseményvezérelt logikához kapcsolódik, mint az e-mail. Pl. kosárelhagyáskor először e-mail megy, 24 óra múlva, ha nincs kattintás, SMS emlékeztető. Az automatizmust egyszer építjük fel, utána magától fut." }
];

const SS_QUOTES = [
  { text: "„Köszönöm a NetAdClick-nek az együttműködést, nagyon profi csapat. Az együttműködés könnyű, gyors és zökkenőmentes.”", name: "FOCUS MEDICAL", role: "Partner", initials: "FM", logo: "assets/partners/focus-medical.jpg" },
  { text: "„A NetAdClick csapata nagyon segítőkész és rugalmas volt a kampánytervezés és a mérések beállítása során is. Az ügyfél- és kampánymenedzsment kiemelkedő, elégedettek vagyunk az eredményekkel.”", name: "ITAKA", role: "Partner", initials: "IT", logo: "assets/partners/itaka.png" }
];

const SS_STATS = [
  { num: "24", u: "+ év", cap: "magyar piaci tapasztalat" },
  { num: "14 367", u: "+", cap: "lefuttatott kampány" },
  { num: "9-17h", u: "", cap: "magyar ügyfélszolgálat" },
  { num: "30", u: "perc", cap: "ingyenes személyes bemutató" }
];

const SS_NEWSLETTERS = [
  { src: "assets/newsletters/01-blackfriday.png", label: "B2B · Akció" },
  { src: "assets/newsletters/02-tefal.png", label: "Webshop · Nyereményjáték" },
  { src: "assets/newsletters/03-egyszazalek.png", label: "NGO · Adó 1%" },
  { src: "assets/newsletters/04-3honap.png", label: "B2B · Szolgáltatás" },
  { src: "assets/newsletters/05-egeszseg.png", label: "Egészségügy · Kutatás" },
  { src: "assets/newsletters/06-eskuvo.png", label: "Esküvő · Partnerprogram" },
  { src: "assets/newsletters/07-eskuvo-bf.png", label: "Esküvő · Black Friday" }
];

// ---- sections ----
const SSHero = ({ onBook }) =>
  <section className="hero" style={{ borderTop: "none" }}>
    <div className="wrap">
      <div className="hero-grid">
        <div>
          <span className="eyebrow"><span className="dot"></span>Magyar kkv-knak, magyarul</span>
          <h1 className="h1">Hírlevél, automatizmus, statisztika és kérdőív <span className="hl">egy rendszerben</span>, magyarul.</h1>
          <p className="hero-sub"><strong>A teljes kontroll az Öné.</strong> Könnyen használható, intuitív rendszer.</p>
          <div className="hero-ctas">
            <button className="btn btn-primary btn-xl btn-arrow" onClick={onBook}>Foglaljon ingyenes bemutatót</button>
            <a href="#funkciok" className="btn btn-ghost btn-xl">Funkciók</a>
          </div>
        </div>
        <HeroPreview />
      </div>
      <div className="hero-trust">
        <span><span className="tdot"></span><b style={{ textDecoration: "line-through", color: "var(--ink-muted)", fontWeight: 500 }}>30 000 Ft</b>&nbsp;most csak <b>15 000 Ft</b> + Áfa / hó</span>
        <span><span className="tdot"></span>Nincs szerződés</span>
        <span><span className="tdot"></span>Magyar ügyfélszolgálat</span>
      </div>
    </div>
  </section>;

const SSOffer = ({ onBook }) => {
  const cards = [
    { iconKey: "editor", title: "Hírlevélküldő + Trigger Mail", free: false, desc: "Drag & drop szerkesztő, automatizmusok, mikro-szegmentáció." },
    { iconKey: "analytics", title: "Webanalitika", free: true, desc: "Valós idejű és historikus adatok, UTM- és konverziókövetés." },
    { iconKey: "form", title: "Form & kérdőív / adatbázisépítő", free: true, desc: "Beágyazható űrlapok, azonnali listázás, piackutatás." }
  ];
  return (
    <section className="offer glow-band">
      <div className="wrap">
        <div className="center-head">
          <div className="section-label">A komplett csomag</div>
          <h2 className="h2">Három modul <span className="hl-mark">egy rendszerben.</span></h2>
          <p className="lead">A hírlevélküldő mellé díjmentesen jár a valós idejű + historikus webanalitika, a form-builder és az adatbázisépítő kérdőív-modul. Külön szoftver, külön integráció, külön számla nélkül.</p>
        </div>
        <div className="offer-cards">
          {cards.map((c, i) =>
            <div className="offer-card reveal" key={i}>
              <span className="offer-ico"><FeatureIcon iconKey={c.iconKey} /></span>
              <h3>{c.title}{c.free && <span className="free">díjmentesen</span>}</h3>
              <p>{c.desc}</p>
            </div>)}
        </div>
        <div className="anchor-row">
          <div className="anchor"><span className="old">30 000 Ft</span><span className="new">15 000 Ft<span className="u">+ Áfa / hó · bevezető ár</span></span></div>
          <span className="anchor sep">·</span>
          <div className="anchor"><span className="new" style={{ fontSize: 28 }}>0,3 Ft<span className="u">+ Áfa / kiküldött levél</span></span></div>
        </div>
        <div style={{ textAlign: "center" }}>
          <button className="btn btn-primary btn-xl btn-arrow" onClick={onBook}>Kérek egy ingyenes bemutatót</button>
        </div>
      </div>
    </section>);
};

const SSProblem = ({ onBook }) =>
  <section>
    <div className="wrap">
      <div className="pas-top">
        <div className="pas-col">
          <div className="pas-head">
            <div className="section-label">A valódi probléma</div>
            <h2 className="h2">Hiába jó a tartalom, ha az eszközök <span className="hl">széttöredezettek.</span></h2>
          </div>
          <div className="pas-list">
            {[
              "Külön rendszerben küld hírlevelet…",
              "…külön méri az eredményt…",
              "…külön gyűjt adatot…",
              "…a triggereket megint máshol állítaná be.",
              "Közben az adatok nem találkoznak, az automatizmusok nem indulnak időben, a csapat energiája elvész az eszközök között."
            ].map((t, i) => <div className="pas-line" key={i}><span className="x">×</span><span>{t}</span></div>)}
          </div>
        </div>
        <div className="pas-frame">
          <img src="assets/ss-problem-postits.jpg" alt="Széttöredezett marketingeszközök" loading="lazy" />
        </div>
      </div>
      <div className="pas-bridge pas-bridge-center">A NetAdClick mindezt egyetlen rendszerbe vonja. A kérdőíves válaszból azonnal automatizált levélfolyam indul, a hírlevélből érkező látogatás konverziója pedig <strong>visszamérhető a kampányra</strong>.</div>
      <div style={{ display: "flex", justifyContent: "center", marginTop: 44 }}>
        <button className="btn btn-primary btn-xl btn-arrow" onClick={onBook}>Kérek egy ingyenes bemutatót</button>
      </div>
    </div>
  </section>;

const SSFeatures = ({ onBook }) =>
  <section id="funkciok">
    <div className="wrap">
      <div className="center-head">
        <div className="section-label">A hírlevélküldő modul</div>
        <h2 className="h2">9 funkció, <span className="hl-mark">egyetlen rendszer.</span></h2>
        <p className="lead">Minden funkció az alapelőfizetés része, nincs külön integráció, nincs külön szoftverlicenc. A szegmenstől az újracélzásig minden <strong>egy adatbázisra, egy logikára</strong> épül.</p>
      </div>
      <div className="features">
        {SS_FEATURES.map((f, i) =>
          <div className="feat" key={i}>
            <span className="num">{String(i + 1).padStart(2, "0")}</span>
            <div className="feat-icon"><FeatureIcon iconKey={f.iconKey} /></div>
            <h3>{f.title}</h3>
            <p>{f.desc}</p>
          </div>)}
      </div>
      <div style={{ display: "flex", justifyContent: "center", marginTop: 44 }}>
        <button className="btn btn-primary btn-xl btn-arrow" onClick={onBook}>Foglaljon ingyenes bemutatót</button>
      </div>
    </div>
  </section>;

const SSSupport = ({ onBook }) => {
  const tile = (s, i) =>
    <div className="sup-tile" key={i}>
      <img src={s.img} alt={s.t} loading="lazy" />
      <div className="sup-scrim"></div>
      <div className="sup-body">
        <div className="sup-n">{String(i + 1).padStart(2, "0")}</div>
        <h4>{s.t}</h4>
        <p>{s.d}</p>
      </div>
    </div>;
  return (
    <section id="tamogatas" className="dark">
      <div className="wrap">
        <div className="support-head">
          <div className="section-label">Teljeskörű támogatás</div>
          <h2 className="h2">A teljes rendszer az Ön kezében, <span className="hl-mark">ingyenes támogatással.</span></h2>
          <p className="lead">A rendszert Ön kezeli, a saját tempójában. Ha elakad vagy kérdése van, <strong>magyar nyelvű szakértő csapat</strong> segít telefonon, e-mailben vagy képernyőmegosztással, ingyenesen.</p>
        </div>
        <div className="support-tiles">{SS_SUPPORT.slice(0, 4).map(tile)}</div>
        <div className="support-tiles-bottom">{SS_SUPPORT.slice(4).map((s, i) => tile(s, i + 4))}</div>
        <div className="contact-box contact-box-wide">
          <div className="l">Egy dedikált kapcsolattartó</div>
          <div className="t">Nem ticket-számot kap, hanem egy nevet és egy telefonszámot. <b>Aki felveszi, amikor hívja.</b></div>
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 40 }}>
          <button className="btn btn-primary btn-xl btn-arrow" onClick={onBook}>Kérek egy ingyenes bemutatót</button>
        </div>
      </div>
    </section>);
};

const SSProof = ({ onBook }) =>
  <section className="proof-compact">
    <div className="wrap">
      <div className="center-head">
        <div className="section-label">Rólunk mondták</div>
        <h2 className="h2">Profi csapat, <span className="hl-mark">mérhető eredmények.</span></h2>
      </div>
      <Testimonials quotes={SS_QUOTES} />
      <div className="stats-grid on-light">
        {SS_STATS.map((s, i) =>
          <div className="stat-card reveal" key={i}><div className="num"><CountUpNum value={s.num} />{s.u && <span className="u">{s.u}</span>}</div><div className="cap">{s.cap}</div></div>)}
      </div>
      <PartnerStrip />
      <div style={{ display: "flex", justifyContent: "center", marginTop: 44 }}>
        <button className="btn btn-primary btn-xl btn-arrow" onClick={onBook}>Foglaljon ingyenes bemutatót</button>
      </div>
    </div>
  </section>;

const SSNewsletterStack = () => {
  const doubled = [...SS_NEWSLETTERS, ...SS_NEWSLETTERS];
  return (
    <div className="nl-stack" aria-hidden="true">
      <div className="nl-track">
        {doubled.map((d, i) =>
          <div className="nl-card" key={i}>
            <div className="nl-head"><div className="nl-dots"><i></i><i></i><i></i></div><div className="nl-tag">{d.label}</div></div>
            <div className="nl-img-wrap"><img src={d.src} alt="" loading="lazy" /></div>
          </div>)}
      </div>
    </div>);
};

const SSPricing = ({ onBook }) =>
  <section id="ar" className="pricing glow-band">
    <div className="wrap">
      <div className="section-label">Bevezető ár</div>
      <h2 className="h2">Átlátható, havi elszámolású. <span className="hl-mark">Nincs kötelező éves szerződés.</span></h2>
      <p className="lead">Havi platformdíj a teljes csomagra (hírlevélküldő + kérdőív + webanalitika), és egy egyszerű, kiküldött levélre vetített díj. Semmi belépési díj, semmi rejtett költség.</p>
      <div className="price-wrap">
        <div className="price-card featured">
          <span className="badge star">Bevezető ajánlat</span>
          <div className="price-card-title">Komplett hírlevélküldő csomag</div>
          <div className="price-card-sub">Hírlevélküldő modul + kérdőív-készítő + webanalitika</div>
          <div className="price-lines">
            <div className="price-line">
              <div className="pl-label">Havi platformdíj<span className="pl-note">a teljes csomagra</span></div>
              <div className="pl-val"><span className="old">30 000 Ft</span>15 000 Ft<span className="u">+ Áfa / hó</span></div>
            </div>
            <div className="price-line">
              <div className="pl-label">Levélküldési díj<span className="pl-note">kiküldött levelenként</span></div>
              <div className="pl-val">0,3 Ft<span className="u">+ Áfa</span></div>
            </div>
          </div>
          <ul className="price-incl">
            <li>Korlátlan lista-import</li>
            <li>Korlátlan kampány / hó</li>
            <li>Mikro-szegmentáció</li>
            <li>Trigger Mail automatizmus</li>
            <li>Kérdőív + feliratkozó form</li>
            <li>Valós idejű statisztika</li>
            <li>Webanalitika</li>
            <li>Magyar nyelvű ügyfélszolgálat</li>
          </ul>
          <div className="price-example">
            <div className="pe-l">Számpélda</div>
            <div className="pe-t"><b>10 000 címzett, havi 2 levél</b> → 15 000 Ft platform + 6 000 Ft kiküldés = <b>21 000 Ft + Áfa / hó</b>.</div>
          </div>
          <button className="btn btn-primary btn-xl btn-arrow" onClick={onBook} style={{ width: "100%" }}>Kérek ingyenes személyes bemutatót</button>
          <div className="price-foot">Nincs beléptetési díj. Havi elszámolás. Bármikor lezárható. A bemutató semmire nem kötelezi.</div>
        </div>
        <SSNewsletterStack />
      </div>
    </div>
  </section>;

// ---- App ----
const SSApp = () => {
  const scrollToBook = useScrollToBook();
  const sticky = useStickyVisible();
  const bookRef = useRefSS(null);
  useReveal();
  const navLinks = [
    { href: "#funkciok", label: "Funkciók" },
    { href: "#ar", label: "Árazás" },
    { href: "#gyik", label: "GYIK" }
  ];
  return (
    <>
      <Nav links={navLinks} onBook={scrollToBook} ctaLabel="Foglaljon ingyenes bemutatót →" />
      <SSHero onBook={scrollToBook} />
      <SSOffer onBook={scrollToBook} />
      <SSProblem onBook={scrollToBook} />
      <SSFeatures onBook={scrollToBook} />
      <SSSupport onBook={scrollToBook} />
      <SSProof onBook={scrollToBook} />
      <SSPricing onBook={scrollToBook} />
      <Booking bookRef={bookRef}
        title="Beszéljünk 30 percet és tudni fogja, megéri-e."
        lead="A bemutató nem értékesítő előadás, hanem egy konkrét, Önre szabott munkamenet. A végén világos terve lesz akkor is, ha nem nálunk valósítja meg." />
      <FAQList faq={SS_FAQ} title="Kérdése van? Segítünk!" />
      <CrossLink
        text="<b>Nincs ideje hírleveleket készíteni? Megoldjuk!</b> Teljes körű, „kézérintés-mentes” kiszolgálásunkban havonta új sablont, új automatizmust és kommunikációs tervet kap."
        href="/teljes-koru" label="Nézze meg a teljes körű csomagot" />
      <Footer onBook={scrollToBook} otherHref="/teljes-koru" otherLabel="Teljes körű csomag →" />
      <StickyBook onBook={scrollToBook} visible={sticky} />
      <CookieNotice />
    </>);
};

ReactDOM.createRoot(document.getElementById("root")).render(<SSApp />);