/* ============================================================
   managed.jsx - NetAdClick Hírlevélküldő · MANAGED SERVICE landing
   Prémium, vermillion accent, több sötét sáv. CTA narancs.
   ============================================================ */
const { useRef: useRefM } = React;

const M_PACK = [
  { n: "01", ic: "mail", t: "Havi 1 új levélsablon - tervezés + fejlesztés" },
  { n: "02", ic: "form", t: "Akár havi 1 új űrlap vagy kérdőív készítése" },
  { n: "03", ic: "bolt", t: "Új trigger-automatizmus vagy bővítés" },
  { n: "04", ic: "list", t: "Lista folyamatos tisztítása és optimalizálása" },
  { n: "05", ic: "chart", t: "Havi elemzés és aktualizált kommunikációs terv" },
  { n: "06", ic: "chat", t: "SMS-kampány beállítása és koordinálása" },
  { n: "07", ic: "support", t: "Folyamatos technikai és szakmai támogatás" },
  { n: "08", ic: "screen", t: "Képernyőmegosztásos konzultáció" }
];
const PK_ICONS = {
  mail: <path d="M3 6h18v12H3z M3 7l9 6 9-6"/>,
  form: <path d="M7 3h10a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z M9 8h6 M9 12h6 M9 16h3"/>,
  bolt: <path d="M13 2L4 14h7l-1 8 9-12h-7z"/>,
  list: <path d="M8 6h13 M8 12h13 M8 18h13 M3 6l1.5 1.5L7 5 M3 12l1.5 1.5L7 11 M3 18l1.5 1.5L7 17"/>,
  chart: <path d="M4 20V10 M10 20V4 M16 20v-7 M22 20H2"/>,
  chat: <path d="M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>,
  support: <path d="M4 13a8 8 0 0 1 16 0 M4 13v3a2 2 0 0 0 2 2h1v-6H6a2 2 0 0 0-2 2z M20 13v3a2 2 0 0 1-2 2h-1v-6h1a2 2 0 0 1 2 2z"/>,
  screen: <path d="M3 4h18v12H3z M8 20h8 M12 16v4"/>
};

const M_TGT_ICONS = {
  users: <g><circle cx="9" cy="8" r="3.4"/><path d="M3.5 20c0-3.3 2.6-5.3 5.5-5.3s5.5 2 5.5 5.3"/><path d="M16 5.2a3 3 0 0 1 0 5.8M17.5 20c0-2.6-1-4.3-2.7-5.3"/></g>,
  target: <g><circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="4.2"/></g>,
  retry: <path d="M20 12a8 8 0 1 1-2.3-5.6 M20 4v4h-4"/>,
  store: <path d="M4 9h16l-1 11H5z M8.5 9V7a3.5 3.5 0 0 1 7 0v2"/>
};
const M_TARGET = [
  { t: "Nincs dedikált email-marketing csapata", d: "A feladat szét van osztva, senki nem viszi napi szinten.", i: "users" },
  { t: "A stratégiára fókuszál", d: "Az üzletre és a kampányokra akar koncentrálni, nem a technikai beállításokra.", i: "target" },
  { t: "Már próbálkozott máshol", d: "De a széttöredezett eszközök és a belső munka miatt nem jutott eredményre.", i: "retry" },
  { t: "Webáruház vagy szolgáltató", d: "Akinek folyamatos, friss tartalomra és automatizmusokra van szüksége.", i: "store" }
];

const M_WHY = [
  { n: "01", t: "Egyetlen rendszer", d: "Hírlevél, kérdőív, form, analitika, SMS, automatizmus - egy felületen." },
  { n: "02", t: "Magyar szakértők", d: "Közvetlenül elérhető magyar szakértő, nem chatbot." },
  { n: "03", t: "Folyamatos fejlődés", d: "Havi rendszerességgel bővülő funkciók, az előfizetés részeként." },
  { n: "04", t: "GDPR-konform", d: "Leiratkozás, hozzájárulás-rögzítés, adatkezelési naplózás a rendszer része." },
  { n: "05", t: "Átlátható árazás", d: "Amit itt lát, az a tényleges ár. Nincs utólagos felár, nincs kényszer-upsell." }
];

const M_TIMELINE = [
  { t: "Kapcsolatfelvétel", d: "Jelezze e-mailben vagy telefonon - néhány mondat is elég, semmire nem kötelezi." },
  { t: "Személyre szabott stratégia", d: "45 perces online konzultáció: célok, listák, brand, első kampány." },
  { t: "Szerződés", d: "Egyszerűsített megállapodás, hozzáférés 24 órán belül." },
  { t: "Implementáció", d: "Első sablon, lista és automatizmus 3–5 nap alatt éles." },
  { t: "Élesítés", d: "Az első kampány kimegy - innentől havonta hozzuk az újat." }
];

const M_QUOTES = [
  { 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", initials: "IT", logo: "assets/partners/itaka.png" },
  { text: "„A közös munka zökkenőmentesen zajlott, melyet a számok tekintetében is elégedetten zártunk. A jövőben is biztosan felkeressük őket.”", name: "NOORDIA", initials: "NO", logo: "assets/partners/noordia.webp" }
];

const M_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: "6", u: "szakember", cap: "egy díjért dolgozik Önért" }
];

const M_FAQ = [
  { q: "Mit tartalmaz pontosan a havidíjas csomag?", a: "Havonta 1 új levélsablont, 1 új formot vagy kérdőívet, új trigger-automatizmust, folyamatos listakarbantartást és -tisztítást, havi elemzést és kommunikációs tervet, SMS-kampány kezelést, folyamatos technikai és szakmai támogatást, valamint képernyőmegosztásos konzultációt. A stratégiát, a szövegeket, a designt és az elemzést is mi visszük." },
  { q: "Mi a különbség az egyszeri beállítás és a havidíjas csomag között?", a: "Az egyszeri beállítás során felépítjük a rendszert, és Ön önállóan viszi tovább. A havidíjas csomagban hónapról hónapra mi végezzük a teljes munkát - új sablonok, automatizmusok, elemzés - kézérintés nélkül. Bármikor válthat a kettő között." },
  { q: "Válthatok később a két konstrukció között?", a: "Bármikor. Kezdheti egyszeri beállítással, és bármikor válthat havidíjasra - az addig elkészült sablonok, automatizmusok és listák változatlanul működnek tovább." },
  { 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 beállítjuk, a feliratkozó formokat újra befűzzük. Ön a már működő rendszerrel találkozik." },
  { q: "Hosszú távra szól a szerződés?", a: "Nincs hosszú távú elköteleződés. A csomag bármikor lemondható - a bemutató pedig semmire nem kötelezi." },
  { q: "A 97 000 Ft tartalmazza a kiküldési díjat?", a: "A 97 000 Ft + Áfa a teljes körű szolgáltatás havidíja. A platform-hozzáférés (15 000 Ft + Áfa / hó, a hírlevélküldő + webanalitika + adatbázis-építő + landing modulra) és a kiküldés (0,3 Ft + Áfa / levél) ehhez tartozik - a kickoffon pontosítjuk a kalkulációt az Ön listájához igazítva." }
];

// ---- sections ----
const MHero = ({ onBook }) =>
  <section className="hero" style={{ borderTop: "none" }}>
    <div className="wrap">
      <div className="hero-grid">
        <div>
          <span className="eyebrow"><span className="dot"></span>TELJES KÖRŰ KISZOLGÁLÁS · ÉRTHETŐEN</span>
          <h1 className="h1">Koncentráljon a vállalkozására, <span className="hl">a hírleveleket bízza ránk!</span></h1>
          <p className="hero-sub">Stratégia, szövegírás, dizájn, automatizmusok, kiküldés és folyamatos optimalizálás - minden egy kézben. A NetAdClick csapata gondoskodik róla, hogy a hírlevélmarketingje folyamatosan eredményeket hozzon. <strong>Önnek csak a végső jóváhagyásra kell időt szánnia.</strong></p>
          <div className="hero-ctas">
            <button className="btn btn-primary btn-xl btn-arrow" onClick={onBook}>Foglaljon ingyenes bemutatót</button>
            <a href="#tartalom" className="btn btn-ghost btn-xl">Mit tartalmaz?</a>
          </div>
        </div>
        <HeroPreview />
      </div>
      <div className="hero-trust">
        <span><span className="tdot"></span><b style={{ textDecoration: "line-through", color: "#8a94a0", fontWeight: 500 }}>180 000 Ft</b>&nbsp;most <b>97 000 Ft</b> + Áfa / hó</span>
        <span><span className="tdot"></span>Nincs hosszú távú elköteleződés</span>
        <span><span className="tdot"></span>Ingyenes ügyfélszolgálat</span>
      </div>
    </div>
  </section>;

const MValueAnchor = ({ onBook }) =>
  <section className="offer glow-band">
    <div className="wrap">
      <div className="center-head">
        <div className="section-label">MINDEN EGY KÉZBEN</div>
        <h2 className="h2">Egy havidíjért <span className="hl-mark">egy teljes marketingcsapat.</span></h2>
        <p className="lead">Ne töltsön időt fejlesztő, grafikus, szövegíró vagy marketinges keresésével. A NetAdClick szakértői csapata a stratégiától a kivitelezésen át az elemzésig <strong>minden feladatot elvégez.</strong></p>
      </div>
      <div className="vcompare reveal">
        <div className="vc-head"><span className="l">Amit általában külön kell fizetnie</span><span className="s"></span><span className="r">Amit nálunk kap - egy díjért</span></div>
        <div className="vc-rows">
          {[
            ["Fejlesztő", "Automatizált e-mail folyamatok"],
            ["Grafikus", "Professzionális e-mail design"],
            ["Szövegíró", "Konverzióra optimalizált szövegek"],
            ["Marketinges", "Stratégia + kampánymenedzsment"],
            ["Adatelemző", "Eredménymérés és riportok"],
          ].map(([bad, good]) =>
            <div className="vc-row" key={bad}>
              <div className="vc-cell bad"><span className="ic"></span>{bad}</div>
              <div className="vc-arrow">→</div>
              <div className="vc-cell good"><span className="ic"></span>{good}</div>
            </div>)}
        </div>
        <div className="vc-foot">Mindez egy csapatban, egy felületen, <b>97 000 Ft + Áfa / hó-tól</b></div>
      </div>
      <div style={{ textAlign: "center", marginTop: 36 }}>
        <button className="btn btn-primary btn-xl btn-arrow" onClick={onBook}>Megnézem egy ingyenes bemutatón</button>
      </div>
    </div>
  </section>;

const MProblem = () =>
  <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">A hírlevél nem ér rá holnapig. <span className="hl">Minden kihagyott kampány elveszett bevétel.</span></h2>
          </div>
          <div className="pas-list">
            {[
              "Nincs dedikált email-marketing szakértő",
              "A feladatok több ember között oszlanak meg, ezért a kampányok háttérbe szorulnak.",
              "Az automatizmusok nem készülnek el vagy nem működnek megfelelően.",
              "Az adatbázis és a kommunikáció elavul, miközben értékes lead-ek vesznek el."
            ].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/problem-postits.jpg" alt="Elmaradt hírlevél-kampányok" loading="lazy" />
        </div>
      </div>
      <div className="pas-bridge pas-bridge-center">A teljes körű csomagban a tervezést, a sablonokat, az automatizmusokat, az elemzést és a listakarbantartást is mi végezzük. <strong>Ön időt nyer, ügyfelei pedig rendszeres és hatékony kommunikációt kapnak.</strong></div>
    </div>
  </section>;

const MPackage = () =>
  <section id="tartalom" className="dark">
    <div className="wrap">
      <div className="center-head">
        <div className="section-label">Mit tartalmaz a havidíj</div>
        <h2 className="h2">Nem csak elkészítjük, hanem <span className="hl">folyamatosan fejlesztjük.</span></h2>
        <p className="lead">Hónapról hónapra új sablonokkal, automatizmusokkal, kampányokkal és elemzésekkel növeljük az eredményeket.</p>
      </div>
      <div className="pack-grid">
        {M_PACK.map(p =>
          <div className="pack-card reveal" key={p.n}><div className="pk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">{PK_ICONS[p.ic]}</svg></div><h4>{p.t}</h4></div>)}
      </div>
      <div className="pack-foot">Nincs hosszú távú elköteleződés, <b>bármikor lemondható.</b></div>
    </div>
  </section>;

const MTarget = () =>
  <section id="kinek">
    <div className="wrap">
      <div className="center-head">
        <div className="section-label">Kinek ajánljuk</div>
        <h2 className="h2"><span className="hl">Önnek szól,</span> ha…</h2>
      </div>
      <div className="target-grid">
        {M_TARGET.map((c, i) =>
          <div className="target-card reveal" key={i}>
            <span className="target-ico"><svg viewBox="0 0 24 24" fill="none" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">{M_TGT_ICONS[c.i]}</svg></span>
            <h4>{c.t}</h4><p>{c.d}</p>
          </div>)}
      </div>
    </div>
  </section>;

const M_ROLES = [
  { t: "Stratéga", d: "Kommunikációs és kampányterv, ügyfélút." },
  { t: "Adatelemző", d: "Webanalitika, videó-elemzés, konverzió." },
  { t: "Designer", d: "Sablonok, arculat, reszponzív levelek." },
  { t: "Automatizmus-szakértő", d: "Trigger sorozatok, eseményvezérlés." },
  { t: "Szövegíró", d: "Levélszövegek, tárgysorok, ajánlatok." },
  { t: "Kampánymenedzser", d: "Lista, kiküldés, optimalizálás, kapcsolat." }
];
const MSupport = () => {
  const [i, setI] = React.useState(0);
  // Slides visible per view must match the CSS flex-basis breakpoints
  // (3 desktop / 2 tablet / 1 phone) so the track transform advances by exactly
  // one slide; otherwise on mobile it moved only a third of a slide.
  const [perView, setPerView] = React.useState(3);
  React.useEffect(() => {
    const calc = () => setPerView(window.innerWidth <= 640 ? 1 : window.innerWidth <= 980 ? 2 : 3);
    calc();
    window.addEventListener("resize", calc);
    return () => window.removeEventListener("resize", calc);
  }, []);
  const maxStep = Math.max(0, M_ROLES.length - perView);
  const step = Math.min(i, maxStep);
  React.useEffect(() => {
    const id = setInterval(() => setI(x => (x >= maxStep ? 0 : x + 1)), 3400);
    return () => clearInterval(id);
  }, [maxStep]);
  return (
  <section className="dark">
    <div className="wrap">
      <div className="support-head">
        <div className="section-label">Hogyan dolgozunk</div>
        <h2 className="h2">Ön csak <span className="hl">az eredményt</span> nézi.</h2>
        <p className="lead">A legtöbb rendszer egy bejelentkező képernyővel fogad és magára hagyja a felhasználót. A tervezés, a design, az automatizmusok és az elemzés is a mi dolgunk, így <strong>Önnek elég a tartalmi irányt és a jóváhagyást megadnia.</strong></p>
      </div>
      <div className="support-carousel">
        <div className="support-track" style={{ transform: `translateX(calc(${step} * (-100% - 18px) / ${perView}))` }}>
          {M_ROLES.map((s, idx) =>
            <div className="support-slide" key={idx}>
              <img src={`assets/roles/role-${idx}.webp`} alt={s.t} loading="lazy" />
              <div className="support-slide-scrim"></div>
              <div className="support-slide-cap">
                <h4>{s.t}</h4><p>{s.d}</p>
              </div>
            </div>)}
        </div>
      </div>
      <div className="support-dots">
        {Array.from({ length: maxStep + 1 }).map((_, d) =>
          <button key={d} className={"support-dot" + (d === step ? " active" : "")} onClick={() => setI(d)} aria-label={`${d + 1}. nézet`}></button>)}
      </div>
      <div className="contact-box support-contact">
        <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>
  </section>);
};

const MProof = () =>
  <section className="proof-compact">
    <div className="wrap">
      <div className="center-head">
        <div className="section-label">Rólunk mondták</div>
        <h2 className="h2">Partnereink <span className="hl">eredményei</span> önmagukért beszélnek.</h2>
      </div>
      <Testimonials quotes={M_QUOTES} />
      <div className="stats-grid on-light">
        {M_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>
  </section>;

const MPricing = ({ onBook }) =>
  <section id="ar" className="pricing glow-band">
    <div className="wrap">
      <div className="center-head">
        <div className="section-label">Az ajánlat</div>
        <h2 className="h2">Egy <span className="hl">átlátható havidíj.</span> Nincs rejtett felár, nincs kényszer-upsell.</h2>
      </div>
      <div className="price-wrap single">
        <div className="price-card featured">
          <span className="badge star">Ajánlott</span>
          <div className="price-card-title">Teljes körű havidíjas csomag</div>
          <div className="price-card-sub">Kézérintés-mentes kiszolgálás - hónapról hónapra friss munka</div>
          <div className="price-lines">
            <div className="price-line">
              <div className="pl-label">Teljes körű szolgáltatás<span className="pl-note">stratégia + kivitelezés + elemzés</span></div>
              <div className="pl-val"><span className="old">180 000 Ft</span>97 000 Ft<span className="u">+ Áfa / hó</span></div>
            </div>
            <div className="price-line">
              <div className="pl-label">Modulhasználati díj<span className="pl-note">hírlevél + webanalitika + adatbázis + landing</span></div>
              <div className="pl-val">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>
          <div className="price-bundle-note">A három tétel egy csomagot alkot - együtt adja a teljes, működő rendszert.</div>
          <ul className="price-incl">
            <li>Havi új sablon</li>
            <li>Havi új form / kérdőív</li>
            <li>Új automatizmus</li>
            <li>Listakarbantartás</li>
            <li>Havi elemzés + komm. terv</li>
            <li>SMS-kezelés</li>
            <li>Folyamatos támogatás</li>
            <li>Képernyőmegosztásos konzultáció</li>
          </ul>
          <button className="btn btn-primary btn-xl btn-arrow" onClick={onBook} style={{ width: "100%" }}>Foglaljon ingyenes bemutatót</button>
          <div className="price-foot">Nincs hosszú távú elköteleződés. Bármikor lemondható. A bemutató semmire nem kötelezi.</div>
        </div>
      </div>

      <div className="pas-bridge" style={{ marginTop: 36, textAlign: "center", maxWidth: 760, marginLeft: "auto", marginRight: "auto" }}>
        <strong>Bármikor válthat.</strong> Kezdheti egyszeri beállítással, és bármikor válthat havidíjasra - az addig elkészült sablonok, automatizmusok és listák változatlanul működnek tovább.
      </div>
    </div>
  </section>;

const MCompare = () =>
  <section id="osszehasonlitas" className="compare-sec dark">
    <div className="wrap">
      <div className="center-head">
        <div className="section-label">Csomag-összehasonlítás</div>
        <h2 className="h2">Ön kezeli, vagy <span className="hl">mi végezzük?</span></h2>
      </div>

      <div className="pc-grid">
        <div className="pc-card">
          <div className="pc-name">Self-service csomag</div>
          <div className="pc-sub">önmaga kezeli</div>
          {[
            ["Rendszer felépítése", "self"],
            ["Új hírlevél sablon és automatizmus", "off"],
            ["Folyamatos elemzés + komm. terv", "off"],
            ["Listakarbantartás, optimalizálás", "off"],
            ["Dedikált szakértő csapat", "off"]
          ].map(([t, s], i) =>
            <div className={"pc-li" + (s === "off" ? " off" : "")} key={i}>
              <span className={"pc-ic" + (s === "off" ? " no" : "")}></span>
              <span className="pc-ln">{t}</span>
              <span className="pc-lbl">{s === "off" ? "-" : "Ön kezeli"}</span>
            </div>)}
          <a className="btn pc-cta" href="/"><span>Nézze meg a self-service csomagot</span><span className="pc-cta-arrow">→</span></a>
        </div>
        <div className="pc-card mgd">
          <div className="pc-name">Managed service csomag</div>
          <div className="pc-sub">kézérintés nélkül</div>
          {["Rendszer felépítése", "Új hírlevél sablon és automatizmus", "Folyamatos elemzés + komm. terv", "Listakarbantartás, optimalizálás", "Dedikált szakértő csapat"].map((t, i) =>
            <div className="pc-li" key={i}>
              <span className="pc-ic"></span>
              <span className="pc-ln">{t}</span>
              <span className="pc-lbl">Mi végezzük</span>
            </div>)}
          <a className="btn pc-cta" href="#foglalas"><span>Foglaljon ingyenes bemutatót</span><span className="pc-cta-arrow">→</span></a>
        </div>
      </div>
    </div>
  </section>;

const WHY_ICONS = [
  <svg viewBox="0 0 24 24"><path d="M6 5H10 A2 2 0 0 0 14 5 H18 A1 1 0 0 1 19 6 V10 A2 2 0 0 0 19 14 V18 A1 1 0 0 1 18 19 H14 A2 2 0 0 1 10 19 H6 A1 1 0 0 1 5 18 V14 A2 2 0 0 1 5 10 V6 A1 1 0 0 1 6 5 Z"/></svg>,
  <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>,
  <svg viewBox="0 0 24 24"><path d="M3 17l5-5 4 4 8-8"/><path d="M15 8h6v6"/></svg>,
  <svg viewBox="0 0 24 24"><path d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M9 12l2 2 4-4"/></svg>,
  <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/><path d="M8 11a3 3 0 0 1 3-3"/></svg>
];

const MWhy = () =>
  <section className="why2-sec">
    <div className="why2-glow"></div>
    <div className="wrap">
      <div className="why2-inner">
        <div className="why2-left">
          <div className="section-label">Miért a NetAdClick.com?</div>
          <h2 className="h2"><span className="hl">24 év</span> tapasztalat, egyetlen rendszerben.</h2>
          <div className="why2-metric">
            <div className="m"><div className="v"><CountUpNum value="14 367" />+</div><div className="l">kampány</div></div>
          </div>
        </div>
        <div className="why2-list">
          {M_WHY.map((w, i) =>
            <div className="why2-row reveal" key={w.n}><div className="why2-ico">{WHY_ICONS[i]}</div><div><h4>{w.t}</h4><p>{w.d}</p></div></div>)}
        </div>
      </div>
    </div>
  </section>;

const RM_STOPS = [
  { left: "9%", top: "63%", dir: "up", c: "var(--accent)" },
  { left: "30%", top: "41.7%", dir: "down", c: "var(--amber)" },
  { left: "50%", top: "65%", dir: "up", c: "var(--vermillion)" },
  { left: "70%", top: "41.7%", dir: "down", c: "var(--accent)" },
  { left: "91%", top: "63%", dir: "up", c: "var(--ok)" }
];
const RM_ROAD = "M -30 195 L 60 195 C 190 195 190 125 300 125 C 410 125 400 195 500 195 C 600 195 590 125 700 125 C 810 125 820 195 940 195 L 1030 195";

const MTimeline = () =>
  <section>
    <div className="wrap">
      <div className="center-head">
        <div className="section-label">Hogyan tovább</div>
        <h2 className="h2"><span className="hl">Öt lépés</span> az első éles hírlevélig.</h2>
      </div>
      <div className="roadmap reveal">
        <svg viewBox="0 0 1000 300" preserveAspectRatio="none">
          <path d={RM_ROAD} fill="none" stroke="var(--ink-2)" strokeWidth="40" strokeLinecap="round"/>
          <path d={RM_ROAD} fill="none" stroke="#fff" strokeWidth="2.5" strokeDasharray="14 12" strokeLinecap="round"/>
        </svg>
        {M_TIMELINE.map((s, i) => {
          const st = RM_STOPS[i], num = String(i + 1).padStart(2, "0");
          const leg = <div className="leg" style={{ background: st.c }}></div>;
          const scribble = i === 0 ? <div className="here-scribble"><span className="here-label">Ön most itt áll</span><svg className="here-svg" viewBox="0 0 220 150" preserveAspectRatio="none"><path d="M112 14 C176 11 210 44 208 76 C206 112 158 132 110 132 C58 132 16 112 16 78 C16 44 74 18 112 14 C168 11 204 40 206 72 C209 106 160 128 118 129"/></svg></div> : null;
          const card = <div className={"rm-card " + st.dir}>{st.dir === "down" && leg}<span className="num" style={{ color: st.c }}>{num}</span><h4>{s.t}</h4><p>{s.d}</p>{scribble}{st.dir === "up" && leg}</div>;
          const marker = <div className="marker" style={{ background: st.c }}>{num}</div>;
          return <div className={"stop" + (i === 0 ? " has-here" : "")} key={i} style={{ left: st.left, top: st.top }}>{st.dir === "up" ? <>{card}{marker}</> : <>{marker}{card}</>}</div>;
        })}
      </div>
      <div className="timeline-note">Az ajánlat elfogadásától az első éles hírlevélig jellemzően <b>3–5 munkanap.</b></div>
    </div>
  </section>;

// ---- App ----
const MApp = () => {
  const scrollToBook = useScrollToBook();
  const sticky = useStickyVisible();
  const bookRef = useRefM(null);
  useReveal();
  const navLinks = [
    { href: "#tartalom", label: "Mit tartalmaz" },
    { href: "#kinek", label: "Kinek ajánljuk" },
    { href: "#ar", label: "Árazás" },
    { href: "#gyik", label: "GYIK" }
  ];
  return (
    <>
      <Nav links={navLinks} onBook={scrollToBook} ctaLabel="Foglaljon ingyenes bemutatót →" tier="Teljeskörű" managed={true} />
      <MHero onBook={scrollToBook} />
      <MValueAnchor onBook={scrollToBook} />
      <MProblem />
      <MPackage />
      <MTarget />
      <MSupport />
      <MProof />
      <MPricing onBook={scrollToBook} />
      <MTimeline />
      <MCompare />
      <MWhy />
      <Booking bookRef={bookRef}
        title="Beszéljünk 30 percet és meglátja, mennyit veszünk le a válláról."
        lead="A bemutató nem értékesítő előadás, hanem egy konkrét, Önre szabott munkamenet. Átnézzük a meglévő listát és kampányokat, és világos tervet kap akkor is, ha azt nem nálunk valósítja meg." />
      <FAQList faq={M_FAQ} title="A teljes körű csomagról." />
      <CrossLink
        text="<b>Saját marketingcsapata van, és csak a rendszerre van szüksége?</b> Nézze meg az önállóan használható, 15 000 Ft / hó-tól induló csomagunkat."
        href="/" label="Nézze meg a self-service csomagot" />
      <Footer onBook={scrollToBook} otherHref="/" otherLabel="Self-service csomag →" />
      <StickyBook onBook={scrollToBook} visible={sticky} label="Ingyenes bemutató foglalása" />
      <CookieNotice />
    </>);
};

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