/* ============================================================
   kalkulator.jsx - NetAdClick Hírlevélküldő · LEAD MAGNET landing
   Top-of-funnel: Hírlevél-bevétel Kalkulátor.
   Világos / kék "eszköz" hangulat. A közös landing-core.jsx komponenseit
   és a landing.css rendszert használja. Átköt a self + managed oldalra.
   ============================================================ */
const { useState: useStateK, useEffect: useEffectK, useRef: useRefK } = React;

const SELF_HREF = "/";
const MANAGED_HREF = "/teljes-koru";

/* ---- scroll helper ---- */
const scrollToId = (id) => {
  const el = document.getElementById(id);
  // getBoundingClientRect (visual coords), not offsetTop (unzoomed layout
  // coords), so the target is correct under the desktop html{zoom}.
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 30, behavior: "smooth" });
};

/* ---- adatok ---- */
const K_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", logo: "/assets/logos/focus-medical.png", initials: "FM" },
{ 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", logo: "/assets/logos/itaka.png", initials: "IT" }];


const K_STATS = [
{ num: "24", u: "+ év", cap: "magyar piaci tapasztalat" },
{ num: "14 523", u: "+", cap: "lefuttatott kampány" },
{ num: "9-17h", u: "", cap: "magyar nyelvű ügyfélszolgálat" },
{ num: "60", u: "mp", cap: "alatt megkapja az eredményt" }];


const K_FAQ = [
{ q: "Honnan jönnek a benchmark-számok?", a: "A NetAdClick 24 évnyi tapasztalatából és 14 523+ lefuttatott kampány valós átlagából, iparágra bontva. A megnyitási, kattintási és konverziós sávokat magyar piaci kampányadatok alapján állítottuk össze." },
{ q: "Mennyire pontos a becslés?", a: "Tájékoztató jellegű becslés. Az iparág, a célzás, az ajánlat és a lista minősége is befolyásolja, ezért nem garantált eredményt, hanem reális nagyságrendet mutatunk. A jelenlegi állapotot az iparági átlagsávval vagy az Ön által megadott nyitási aránnyal, az optimalizált potenciált pedig a „jó” benchmark-sáv konzervatív, alsó értékeivel számoljuk." },
{ q: "Mi történik az adataimmal?", a: "Az adatokat kizárólag az elemzés elküldéséhez és a kapcsolódó tájékoztatáshoz használjuk, csak a szükséges információkat kérjük. Bármikor leiratkozhat. Magyar adatkezelő (AD Solutions Kft.), magyar GDPR-megfelelés." },
{ q: "Kötelez valamire a kitöltés?", a: "Nem. Az eredményt azonnal látja a képernyőn, a bemutató foglalása teljesen opcionális. A kalkulátor önmagában is értéket ad: konkrét forintösszeget kap a saját adataira." },
{ q: "Mi az a bemutató pontosan?", a: "Egy 30 perces, személyre szabott munkamenet, ahol átnézzük a meglévő listáját és kampányait, majd a végén kész, írásos tervet kap arról, hogyan zárható be a bevételi rés. Akkor is hasznos, ha végül nem velünk valósítja meg." },
{ q: "Melyik csomagot érdemes választanom?", a: "A két csomag mögött ugyanaz a rendszer áll - a különbség, hogy ki végzi el a munkát. A self-service csomagnál (15 000 Ft + Áfa / hó) mi beállítjuk, utána Ön kezeli tovább; a teljes körű csomagnál (97 000 Ft + Áfa / hó) csapatunk viszi A-tól Z-ig. Ha bizonytalan, az ingyenes bemutatón együtt kiválasztjuk." }];


/* =====================================================================
   HERO - minta eredmény-kártyával
   ===================================================================== */
const KHero = () =>
<section className="hero" style={{ borderTop: "none" }}>
    <div className="wrap">
      <div className="hero-grid">
        <div>
          <span className="eyebrow"><span className="dot"></span>DÍJMENTES KALKULÁTOR · EREDMÉNY 1 PERC ALATT</span>
          <h1 className="h1"><span className="underline">Tudja, mennyi bevételt hagy jelenleg kihasználatlanul a hírlevél-listájában?</span></h1>
          <p className="hero-sub">Néhány adat megadásával azonnal kiszámoljuk, <b>mekkora plusz éves bevétel hozható ki</b> a meglévő feliratkozóiból.</p>
          <div className="hero-ctas">
            <button className="btn btn-primary btn-xl btn-arrow" onClick={() => scrollToId("kalkulator")}>Kiszámolom most</button>
            <button className="btn btn-ghost btn-xl" onClick={() => scrollToId("modszertan")}>Megnézem a módszertant</button>
          </div>
          <div className="hero-trust">
            <span><span className="tdot"></span>A NetAdClick <b>24 év tapasztalata</b> és <b>14&nbsp;523+ kampány</b> benchmarkjai alapján</span>
            <span><span className="tdot"></span>Ingyenes</span>
            <span><span className="tdot"></span>Regisztráció nélkül</span>
          </div>
        </div>
        <KHeroPreview />
      </div>
    </div>
  </section>;

const KHeroPreview = () =>
<div className="hero-card">
    <span className="sample-flag">minta adat</span>
    <div className="hero-card-top">
      <div className="dots"><i></i><i></i><i></i></div>
      <span>hírlevél-bevétel kalkulátor / eredmény</span>
    </div>
    <div className="hero-card-body" style={{ padding: 22 }}>
      <div className="kl-pre-eyebrow">Az Ön becsült eredménye</div>
      <div className="kl-gap">
        <div className="l">Évente kihasználatlanul hagyott bevétel</div>
        <div className="big">5 248 800 Ft</div>
        <div className="sub">ennyivel hozhatna többet a listája egy optimalizált rendszerrel</div>
      </div>
      <div className="kl-cmp">
        <div className="c"><div className="t">Jelenlegi éves bevétel</div><div className="v">1 555 200 Ft</div></div>
        <div className="c opt"><div className="t">Optimalizált éves bevételi potenciál</div><div className="v">6 804 000 Ft</div></div>
      </div>
      <div className="kl-bars">
        <div className="b cur" style={{ height: "23%" }}><span>jelenlegi</span></div>
        <div className="b opt" style={{ height: "100%" }}><span>optimalizált</span></div>
      </div>
    </div>
  </div>;

/* =====================================================================
   KALKULÁTOR - beágyazva (a "mogyoró")
   ===================================================================== */
const KCalculator = () => {
  const frameRef = useRefK(null);
  useEffectK(() => {
    const onMsg = (e) => {
      const d = e.data;
      if (!d || typeof d !== "object") return;
      if (d.type === "calc-height" && frameRef.current && d.height > 0) {
        frameRef.current.style.height = d.height + "px";
      }
      if (d.type === "calc-step") {
        const top = document.getElementById("kalkulator");
        if (top) window.scrollTo({ top: top.getBoundingClientRect().top + window.scrollY - 20, behavior: "smooth" });
      }
    };
    window.addEventListener("message", onMsg);
    return () => window.removeEventListener("message", onMsg);
  }, []);
  return (
    <section id="kalkulator" className="offer">
      <div className="wrap">
        <div className="center-head">
          <div className="section-label">A kalkulátor</div>
          <h2 className="h2">Számolja ki 60 másodperc alatt, mennyi bevétel marad most kihasználatlanul.</h2>
          <p className="lead">A számítás a NetAdClick valós kampánybenchmarkjaira épül. Az eredményt <strong>azonnal látja a képernyőn</strong>. A kalkulátor használata nem jár kötelezettséggel.</p>
        </div>
        <div className="kl-calc-wrap">
          {/* Az attribúciót átadjuk az iframe-nek is, hogy a kalkulátor
              lead-webhookja tudja, melyik kampányból jött a kitöltő.
              (A webhook maga még placeholder - lásd WEBHOOK_URL.) */}
          <iframe
            ref={frameRef}
            className="kl-calc-frame"
            src={window.nacAttribution
              ? window.nacAttribution.decorate("/hirlevel-bevetel-kalkulator")
              : "/hirlevel-bevetel-kalkulator"}
            title="Hírlevél-bevétel Kalkulátor"
            scrolling="no"></iframe>
        </div>
      </div>
    </section>);
};

/* =====================================================================
   KÉP-PLACEHOLDEREK - élesítés előtt valós képekre cserélendők!
   Háttérkép: a bgImage propba kerül majd az URL; addig csíkozott
   jelölő-háttér + címke mutatja a helyét.
   ===================================================================== */
const StripeBg = () =>
<div style={{ position: "absolute", inset: 0, background: "repeating-linear-gradient(135deg, rgba(6,142,231,0.045) 0 22px, rgba(6,142,231,0.02) 22px 44px)", pointerEvents: "none" }}></div>;

const ImgPlaceholder = ({ label, ratio = "4 / 5" }) =>
<div style={{ position: "relative", width: "100%", aspectRatio: ratio, border: "2px dashed var(--line-strong)", borderRadius: 16, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 10, color: "var(--ink-muted)", background: "repeating-linear-gradient(135deg, #fafafa 0 18px, #f2f2ef 18px 36px)" }}>
    <svg width="44" height="44" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="4" y="6" width="24" height="20" rx="2"/><circle cx="11" cy="13" r="2.4"/><path d="M4 23 L12 16 L18 21 L23 17 L28 21"/></svg>
    <span style={{ fontFamily: "Geist, sans-serif", fontSize: 12.5, letterSpacing: "0.06em", textTransform: "uppercase", textAlign: "center", padding: "0 18px" }}>{label}</span>
  </div>;

/* =====================================================================
   HOGYAN MŰKÖDIK - 3 lépés
   ===================================================================== */
const K_STEPS = [
{ n: "01", img: "/assets/illustrations/lepes-adatok.png", t: "Adja meg a lista adatokat", d: "Listaméret, küldési gyakoriság, átlagos vásárlási érték és iparág: néhány adat, nagyjából egy perc." },
{ n: "02", img: "/assets/illustrations/lepes-benchmark.png", t: "Mi a benchmarkokkal számolunk", d: "24 év és 14 523+ kampány megnyitási, kattintási és konverziós tapasztalatai alapján, iparágra szabva." },
{ n: "03", img: "/assets/illustrations/lepes-eredmeny.png", t: "Megkapja a ki nem használt bevételt.", d: "Azonnal láthatja a jelenlegi és az optimalizált éves bevétel különbségét." }];

const KHowItWorks = () =>
<section id="hogyan" style={{ position: "relative" }}>
    <StripeBg />
    <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
      <div className="section-label">Hogyan működik</div>
      <h2 className="h2">Három adatból egy tiszta bevételi képet adunk.</h2>
      <p className="lead">A kalkulátor az Ön adataiból és valós kampánybenchmarkjainkból számol.</p>
      <div className="kl-steps">
        {K_STEPS.map((s) =>
      <div className="kl-step reveal" key={s.n}>
            <div className="n">{s.n}</div>
            <img src={s.img} alt={s.t + " - illusztráció"} loading="lazy" style={{ width: "100%", aspectRatio: "3 / 2", objectFit: "cover", borderRadius: 10, border: "1px solid var(--line)", margin: "6px 0 14px", display: "block" }} />
            <h4>{s.t}</h4>
            <p>{s.d}</p>
          </div>)}
      </div>
      <div style={{ display: "flex", justifyContent: "center", marginTop: 28 }}>
        <button className="btn btn-primary btn-xl btn-arrow" onClick={() => scrollToId("kalkulator")}>Kiszámolom most</button>
      </div>
    </div>
  </section>;

/* =====================================================================
   PAS - a rés értelmezése
   ===================================================================== */
const KProblem = () =>
<section className="dark">
    <div className="wrap">
      <div className="pas-grid">
        <div>
          <div className="section-label">Mit jelent a rés</div>
          <h2 className="h2">A valódi különbséget az optimalizálás jelenti.</h2>
          <p className="lead">Ugyanaz a lista lényegesen több bevételt hozhat, ha a <strong>megnyitás, az átkattintás és a konverzió</strong> csak kis mértékben is javul, mert ezek a számok egymást erősítik.</p>
          <div className="pas-bridge" style={{ background: "rgba(255,255,255,0.04)", borderColor: "rgba(255,255,255,0.12)", color: "#c6ccd3" }}>Pontosan ezt a három területet optimalizálja a NetAdClick csapata egyetlen rendszerben, magyar nyelvű támogatással. A kalkulátor megmutatja a bevételi rést; a bemutatón pedig azt is megmutatjuk, <strong style={{ color: "#fff" }}>hogyan zárható be az Ön esetében.</strong></div>
        </div>
        <div className="pas-list">
          {[
        "A legtöbb hírlevél azért veszít bevételt, mert elmarad a szegmentálás…",
        "…az automatizmusok nem a megfelelő pillanatban indulnak…",
        "…a lista nincs karbantartva, az inaktív címzettek rontják a mutatókat…",
        "…miközben a megnyitás, a kattintás és a konverzió külön-külön akár még elfogadhatónak is tűnhet.",
        "Ez a három mutató összeszorzódik, ezért a kisebb javulások együtt már látványos bevételnövekedést hozhatnak."].
        map((t, i) => <div className="pas-line" key={i} style={{ color: "#c6ccd3" }}><span className="x">×</span><span>{t}</span></div>)}
        </div>
      </div>
      <div style={{ display: "flex", justifyContent: "center", marginTop: 28 }}>
        <button className="btn btn-primary btn-xl btn-arrow" onClick={() => scrollToId("kalkulator")}>Kiszámolom a bevételi potenciált</button>
      </div>
    </div>
  </section>;

/* =====================================================================
   MÓDSZERTAN - "Nem varázslat - benchmark"
   ===================================================================== */
const K_METHOD = [
{ b: "A jelenlegi teljesítményt", t: " az iparági átlagsávval, vagy az Ön által megadott nyitási aránnyal számoljuk." },
{ b: "Az optimalizált potenciált", t: " a „jó” benchmark-sáv konzervatív, alsó értékeivel becsüljük, reális plafonnal." },
{ b: "Minden használt százalékot", t: " megmutatunk az eredményképernyőn: megnyitás, kattintás, konverzió és bevétel/kiküldés bontásban." }];

const KMethodology = () =>
<section id="modszertan">
    <div className="wrap">
      <div className="section-label">Átláthatóság</div>
      <h2 className="h2">Ígéretek helyett benchmarkokra épülő becslés.</h2>
      <p className="lead">A NetAdClick alapelve a <strong>teljes átláthatóság.</strong> A számítás módszertanát nyíltan megmutatjuk.</p>
      <div className="kl-method">
        <div>
          <div className="kl-method-list">
            {K_METHOD.map((m, i) =>
          <div className="li" key={i}><span className="ck"></span><span><b>{m.b}</b>{m.t}</span></div>)}
          </div>
        </div>
        <div>
          <div className="h3">Reális nagyságrend üres ígéret helyett.</div>
          <p>Az eredmény segít gyorsan eldönteni, megéri-e komolyabban foglalkozni a hírlevéllel. A pontos terv a bemutatón, majd azt követően készül el, az Ön valós listájára és kampányaira szabva.</p>
          <div className="kl-method-note">A becslés tájékoztató jellegű, az iparág, a célzás és a lista minősége befolyásolhatja a tényleges eredményt. Nem minősül garantált eredménynek.</div>
        </div>
      </div>
      <div style={{ display: "flex", justifyContent: "center", marginTop: 28 }}>
        <button className="btn btn-primary btn-xl btn-arrow" onClick={() => scrollToId("kalkulator")}>Kipróbálom a kalkulátort</button>
      </div>
    </div>
  </section>;

/* =====================================================================
   SOCIAL PROOF
   ===================================================================== */
const KProof = () =>
<section>
    <div className="wrap">
      <div className="center-head">
        <div className="section-label">Rólunk mondták</div>
        <h2 className="h2">Szakértő csapat, kézzelfogható eredmények.</h2>
      </div>
      <Testimonials quotes={K_QUOTES} />
      <div className="stats-grid on-light">
        {K_STATS.map((s, i) =>
      <div className="stat-card reveal" key={i}><div className="num">{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: 28 }}>
        <button className="btn btn-primary btn-xl btn-arrow" onClick={() => scrollToId("kalkulator")}>Kiszámolom most</button>
      </div>
    </div>
  </section>;

/* =====================================================================
   MUNKÁINK - valós hírlevél-minták (assets/newsletters, létező anyagok)
   ===================================================================== */
const K_SAMPLES = [
{ 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" }];

const KSampleCard = ({ data }) =>
<div className="nl-card">
    <div className="nl-head">
      <div className="nl-dots"><i></i><i></i><i></i></div>
      <div className="nl-tag">{data.label}</div>
    </div>
    <div className="nl-img-wrap">
      <img src={data.src} alt={data.label + " – hírlevél minta, NetAdClick"} loading="lazy" />
    </div>
  </div>;

const KSamples = () => {
  const doubled = [...K_SAMPLES, ...K_SAMPLES];
  return (
    <section id="munkaink">
      <div className="wrap">
        <div className="rgrid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "center" }}>
          <div>
            <div className="section-label">Munkáink</div>
            <h2 className="h2">Ilyen hírleveleket készítünk partnereinknek.</h2>
            <p className="lead">Valós, partnereknek készült levelek - B2B akciótól a webshop-nyereményjátékon át az adó 1%-os kampányig. A bevételi rés bezárása nem elmélet: a megnyitást, a kattintást és a konverziót ilyen leveleken keresztül optimalizáljuk.</p>
            <div style={{ marginTop: 28 }}>
              <button className="btn btn-primary btn-xl btn-arrow" onClick={() => scrollToId("kalkulator")}>Kiszámolom a bevételi potenciált</button>
            </div>
          </div>
          <NewsletterMarquee items={doubled} />
        </div>
      </div>
    </section>);
};

const NewsletterMarquee = ({ items }) =>
<div className="nl-stack" aria-hidden="true">
    <div className="nl-track">
      {items.map((d, i) => <KSampleCard key={i} data={d} />)}
    </div>
  </div>;

/* =====================================================================
   A KÉT ÚT - átkötés self + managed oldalra
   ===================================================================== */
const KTwoPaths = () =>
<section id="ket-ut" className="pricing">
    <div className="wrap">
      <div className="center-head">
        <div className="section-label">A két út</div>
        <h2 className="h2">Látta a számokat? Két úton is bezárhatja ezt a bevételi rést.</h2>
        <p className="lead">Ugyanaz a professzionális rendszer és ugyanaz az ingyenes bemutató áll mögötte, a két csomag között az a különbség, hogy ki végzi el a munkát.</p>
      </div>
      <div className="kl-paths">
        <div className="kl-path self reveal">
          <div className="tag">Inkább saját kézben tartaná</div>
          <h3>A rendszer az Ön kezében marad.</h3>
          <p className="d">Hírlevélküldő, webanalitika, űrlapok és kérdőívek egy felületen. Mi beállítjuk Ön helyett, utána pedig Ön kezeli tovább.</p>
          <div className="price"><span className="old">30 000 Ft</span><span className="new">15 000 Ft<span className="u">+ Áfa / hó</span></span></div>
          <div className="meta">+ 0,3 Ft + Áfa / kiküldött levél</div>
          <a className="btn btn-blue-outline btn-arrow cta-self" href={SELF_HREF}>Megnézem a self-service csomagot</a>
        </div>
        <div className="kl-path managed reveal">
          <div className="tag">Csapatunk kezeli A-tól Z-ig</div>
          <h3>Ön az eredményekre fókuszálhat.</h3>
          <p className="d">Megújuló levelek, új automatizmusok, mélységi elemzések és folyamatos optimalizálás: egy teljes csapat munkája, kiszámítható havidíjért.</p>
          <div className="price"><span className="old">180 000 Ft</span><span className="new">97 000 Ft<span className="u">+ Áfa / hó</span></span></div>
          <div className="meta">munkadíj · a platform + kiküldés</div>
          <a className="btn btn-vermillion btn-arrow cta-managed" href={MANAGED_HREF}>Megnézem a teljes körű csomagot</a>
        </div>
      </div>
      <div className="kl-paths-note">Nem biztos benne, melyik illik legjobban Önhöz? <b>Az ingyenes bemutatón együtt kiválasztjuk.</b></div>
    </div>
  </section>;

/* =====================================================================
   ÜGYVEZETŐI ÜZENET - VÁZLAT!
   A [KITÖLTENDŐ] részeket Gáboréknak kell megírniuk, élesítés előtt
   a "VÁZLAT" jelölést el kell távolítani. Minden kész mondat meglévő,
   az oldalon már szereplő tényekből áll.
   ===================================================================== */
const KFounder = () =>
<section id="uzenet">
    <div className="wrap">
      <div className="section-label">Személyesen</div>
      <h2 className="h2">Miért adjuk ingyen ezt a kalkulátort?</h2>
      <div className="rgrid" style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: 32, alignItems: "start", marginTop: 24 }}>
        <div style={{ textAlign: "center" }}>
          <img src="/assets/gabor.jpg" alt="Tóth Gábor" style={{ width: 180, height: 180, borderRadius: "50%", objectFit: "cover", border: "1px solid var(--line)" }} />
          <div style={{ marginTop: 14, fontWeight: 600 }}>Tóth Gábor</div>
          <div style={{ fontSize: 14, color: "var(--ink-muted)" }}>Ügyvezető · AD Solutions Kft.</div>
        </div>
        <div style={{ position: "relative", background: "#fff", border: "1px solid var(--line)", borderRadius: 16, padding: "26px 30px", fontSize: "16.5px", lineHeight: 1.65, color: "var(--ink-2)" }}>
          <p style={{ margin: "0 0 16px" }}>Üdvözlöm! Tóth Gábor vagyok, a NetAdClick (AD Solutions Kft.) ügyvezetője. 24 éve foglalkozom e-mail marketinggel, csapatunk több mint 14 523 kampányt futtatott le a magyar piacon - a kalkulátor benchmarkjai ebből a tapasztalatból származnak.</p>
          <p style={{ margin: "0 0 16px" }}>A kalkulátort azért készítettük el, mert a bemutatóink jelentős része ugyanazzal a kérdéssel kezdődik: mennyit hozhatna a listánk? Erre most bemutató nélkül, 60 másodperc alatt kap egy reális nagyságrendet - a mögötte lévő benchmarkok pedig nem elméletek, hanem a saját kampányaink mért adatai. Meggyőződésünk, hogy előbb tudást kell adnunk, és csak utána beszélni az anyagiakról.</p>
          <p style={{ margin: "0 0 16px" }}>Az alapelvünk az átláthatóság: minden számot, amivel dolgozunk, megmutatunk az eredményképernyőn - ígéretek helyett reális nagyságrendet adunk.</p>
          <p style={{ margin: "0 0 16px" }}>Egy dolgot őszintén hozzáteszek: a kalkulátor becslést ad, nem ígéretet. Az iparág, az ajánlat és a lista minősége nagyban befolyásolja a tényleges eredményt - ezért nem garantált számot mutatunk, hanem konzervatív értékekkel számolt, reális sávot. Ha a saját számait látva úgy dönt, hogy érdemes mélyebbre menni, a bemutatón a valós listájára szabjuk a képet.</p>
          <p style={{ margin: 0 }}>Ha kérdése van, engem közvetlenül elér: <b>+36 30 308 2358</b> · <b>t.gabor@netadclick.com</b></p>
        </div>
      </div>
    </div>
  </section>;

/* =====================================================================
   KOCKÁZAT-ÁTVÁLLALÁS - garancia szerepű blokk
   (csak az oldalon máshol is szereplő állításokból építkezik)
   ===================================================================== */
const K_RISK = [
{ b: "A kalkulátor ingyenes és regisztráció nélkül használható", t: " - az eredményt azonnal a képernyőn látja, adatai megadása nélkül is." },
{ b: "A 30 perces bemutató szintén ingyenes és semmire nem kötelezi", t: " - a végén írásos tervet kap, ami akkor is hasznos, ha végül nem velünk valósítja meg." },
{ b: "Adatait kizárólag az elemzés elküldéséhez használjuk", t: " - bármikor leiratkozhat; magyar adatkezelő (AD Solutions Kft.), magyar GDPR-megfelelés." }];

const KGuarantee = () =>
<section id="kockazat">
    <div className="wrap">
      <div className="section-label">Az Ön kockázata</div>
      <h2 className="h2">Nem kérünk elköteleződést ahhoz, hogy megtudja, mit hagy az asztalon.</h2>
      <p className="lead">Az Ön kockázata ebben a folyamatban: <strong>nulla forint, és összesen nagyjából fél óra.</strong></p>
      <div className="kl-method" style={{ marginTop: 24 }}>
        <div>
          <div className="kl-method-list">
            {K_RISK.map((m, i) =>
          <div className="li" key={i}><span className="ck"></span><span><b>{m.b}</b>{m.t}</span></div>)}
          </div>
        </div>
        <div>
          <div className="h3">24 év és 14 523+ kampány.</div>
          <p>Nem papírra írt ígéretekkel dolgozunk, hanem nyílt módszertannal és két évtizedes magyar piaci tapasztalattal. Minden lépésnél Ön dönt - mi csak a számokat tesszük az asztalra.</p>
        </div>
      </div>
      <div style={{ display: "flex", justifyContent: "center", marginTop: 28 }}>
        <button className="btn btn-primary btn-xl btn-arrow" onClick={() => scrollToId("kalkulator")}>Kipróbálom a díjmentes kalkulátort</button>
      </div>
    </div>
  </section>;

/* =====================================================================
   ÖSSZEFOGLALÓ + lágy FOMO - mit veszít, ha nem néz utána
   (csak az oldalon máshol is szereplő állításokból építkezik)
   ===================================================================== */
const K_SUMMARY_LINES = [
"Továbbra is kimennek a hírlevelek - szegmentálás nélkül, mindenkinek ugyanúgy.",
"Továbbra is rossz pillanatban indulnak az automatizmusok, vagy el sem indulnak.",
"Továbbra is rontják a mutatókat a karbantartatlan lista inaktív címzettjei.",
"És a bevételi rés minden hónapban újratermelődik - anélkül, hogy látná, mekkora."];

const KSummary = () =>
<section id="osszegzes">
    <div className="wrap">
      <div className="rgrid" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 40, alignItems: "center" }}>
        <div>
          <div className="section-label">Összegzés</div>
          <h2 className="h2">Ha most nem néz utána, minden marad a régiben - és pontosan ez a probléma.</h2>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, maxWidth: 720, margin: "28px 0 0" }}>
            {K_SUMMARY_LINES.map((t, i) =>
          <div key={i} style={{ display: "flex", gap: 13, alignItems: "flex-start", fontSize: "16.5px", lineHeight: 1.55, color: "var(--ink-2)" }}>
              <span style={{ flexShrink: 0, fontWeight: 700, color: "var(--vermillion)" }}>×</span><span>{t}</span>
            </div>)}
          </div>
          <p className="lead" style={{ marginTop: 22 }}>Ne arról döntsön most, hogy rendszert vált vagy csomagot választ. Csak arról, hogy megnézi-e <strong>60 másodperc alatt, ingyen és regisztráció nélkül</strong>, mekkora ez a rés az Ön listájánál. A döntés többi része ráér azután.</p>
          <div style={{ display: "flex", justifyContent: "flex-start", marginTop: 28 }}>
            <button className="btn btn-primary btn-xl btn-arrow" onClick={() => scrollToId("kalkulator")}>Kiszámolom most</button>
          </div>
        </div>
        <img src="/assets/photos/osszegzes-postit.jpg" alt="Cetlikkel teleragasztott laptop - a rendszertelen hírlevél-munka illusztrációja" loading="lazy" style={{ width: "100%", aspectRatio: "4 / 5", objectFit: "cover", borderRadius: 16, display: "block" }} />
      </div>
    </div>
  </section>;

/* =====================================================================
   APP
   ===================================================================== */
const KApp = () => {
  const sticky = useStickyVisible();
  const bookRef = useRefK(null);
  useReveal();
  const navLinks = [
  { href: "#hogyan", label: "Hogyan működik" },
  { href: "#ket-ut", label: "Csomagok" },
  { href: "#gyik", label: "GYIK" }];

  return (
    <>
      <Nav links={navLinks} onBook={() => scrollToId("kalkulator")} ctaLabel="Kiszámolom a bevételi potenciált →" tier="Kalkulátor" />
      <KHero />
      <KProblem />
      <KCalculator />
      <KHowItWorks />
      <KMethodology />
      <KFounder />
      <KProof />
      <KSamples />
      <KTwoPaths />
      <KGuarantee />
      <KSummary />
      <Booking bookRef={bookRef}
      title="Megmutatjuk, hogyan lehet valódi eredményt elérni."
      lead={<span>A bemutató nem egy értékesítési prezentáció, hanem egy konkrét, Önre szabott munkamenet. Átnézzük a meglévő listát és kampányokat, és világos, gyakorlatban is használható tervet kap <strong>akkor is, ha végül nem velünk valósítja meg.</strong></span>} />
      <FAQList faq={K_FAQ} label="Gyakori kérdések" title="Amit az eredményekről és az adatairól tudni érdemes." />
      <Footer onBook={() => scrollToId("kalkulator")}
        otherHref={SELF_HREF} otherLabel="Self-service csomag →"
        extraLinks={[{ href: MANAGED_HREF, label: "Teljes körű csomag →" }]}
        moduleTitle="Az oldalon"
        moduleLinks={[
          { href: "#kalkulator", label: "Kalkulátor" },
          { href: "#hogyan", label: "Hogyan működik" },
          { href: "#ket-ut", label: "Csomagok" },
          { href: "#gyik", label: "GYIK" }
        ]} />
      <StickyBook onBook={() => scrollToId("kalkulator")} visible={sticky} label="Kiszámolom a bevételi potenciált" />
      <CookieNotice />
    </>);
};

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