// mom.jsx — Master of Marketing landing page (Knowhub sub-page)
// Struktura podle masterofmarketing.cz, redesign v JSM brandu
const { useState: useStateMom, useEffect: useEffectMom, useRef: useRefMom } = React;

// ---- DATA ----
const MOM_PROGRAM = [
  { tag:'Modul 0', date:'10. 3.',  title:'KICKOFF — společné vykopnutí kurzu',
    desc:'Seznámení, lehký start, sladění očekávání a nastavení celého kurzu.' },
  { tag:'Modul 1', date:'11. 3.',  title:'K čemu vám marketing doopravdy bude a jak ho zapojit do růstu firmy',
    desc:'Marketing je dnes jedno z nejčastěji skloňovaných slov ve firmách. Zároveň ale patří mezi nejčastější zdroje frustrace, zklamání a špatných očekávání.' },
  { tag:'Modul 2', date:'25. 3.',  title:'Zákazník, produkty, trh a konkurence',
    desc:'„Všichni jsou naši zákazníci" je nejdražší marketingová strategie světa.' },
  { tag:'Modul 3', date:'8. 4.',   title:'Značka, která vydělává — jak ji uchopit, řídit a monetizovat',
    desc:'Strategie značky a maximalizace její hodnoty.' },
  { tag:'Modul 4', date:'22. 4.',  title:'Vizuální identita — jak designem podpořit růst firmy',
    desc:'Design není umění. Design je obchodní nástroj.' },
  { tag:'Setkání', date:'29. 4.',  title:'OFFLINE Meet & Greet',
    desc:'Společné neformální osobní setkání účastníků a lektorů.', kind:'offline' },
  { tag:'Modul 5', date:'6. 5.',   title:'Web jako největší obchodník',
    desc:'Kampaně přivádí lidi. Web prodává.' },
  { tag:'Modul 6', date:'20. 5.',  title:'Výkonnostní kampaně (PPC), data, měření a LinkedIn',
    desc:'Bez dat je marketing jen pocit. A bez výkonu jen obsah, který nikdo nesleduje.' },
  { tag:'Modul 7', date:'3. 6.',   title:'Sociální sítě a PR jako strategický nástroj',
    desc:'Být vidět dnes není problém. Problém je být vidět správně, konzistentně a tak, aby to dlouhodobě budovalo důvěru.' },
  { tag:'Modul 8', date:'17. 6.',  title:'Jak postavit úspěšnou kampaň',
    desc:'Tady se z jednotlivých disciplín stává ucelená marketingová kampaň, která plní váš cíl.' },
  { tag:'Setkání', date:'9. 9.',   title:'Prezentace a oponentura závěrečných projektů',
    desc:'Všechny znalosti z kurzu se promítají do marketingové a komunikační strategie a konkrétního akčního plánu.', kind:'offline' },
];

const MOM_BENEFITS = [
  { num:'01', title:'Marketingový kompas od A do Z',
    desc:'Komplexní přehled o marketingu — od strategie přes značku až po výkon a obsah. Každý modul zapadá do většího celku.' },
  { num:'02', title:'Online formát a flexibilita bez kompromisů',
    desc:'Vše online, jednou za 14 dní. Skloubíš studium s podnikáním nebo prací — a máš čas látku zpracovat.' },
  { num:'03', title:'Doživotní přístup k záznamům',
    desc:'Z každého modulu zpracovaný záznam. Můžeš se vracet ke každému tématu, které potřebuješ osvěžit.' },
  { num:'04', title:'Lektorský tým z TOP lidí v oboru',
    desc:'Špičky, které marketing denně dělají — Tomáš Pohl, Pavel Cahlík, Karolína Kabelka, Rastislav Kiavčin, Tomáš David.' },
  { num:'05', title:'Vlastní projekt, ne akademická práce',
    desc:'Po dobu kurzu buduješ vlastní marketingovou strategii. Praktickou, použitelnou, měřitelnou.' },
  { num:'06', title:'Závěrečný projekt s panelem odborníků',
    desc:'Vše zhmotníš do projektu, na který dostaneš komplexní zpětnou vazbu. Výstup jde rovnou do praxe.' },
];

const MOM_LECTORS = [
  { id:'tomas',     name:'Tomáš Pohl',                role:'CEO Justmighty', tag:'garant programu',
    photo:'./assets/team-misa.png' /* placeholder až přijdou portréty */ },
  { id:'rasta',     name:'Rastislav Kiavčin',         role:'Digitálci',       tag:'social media' },
  { id:'karolina',  name:'Karolína Kabelka Wernerová',role:'KW Creative Idea',tag:'PR marketing' },
  { id:'pavel',     name:'Pavel Cahlík',              role:'Jsem na značky',  tag:'brandový stratég' },
  { id:'david',     name:'Tomáš David',               role:'CEO Datanimals',  tag:'PPC marketing' },
];

const MOM_FOR = [
  { k:'majitelům', v:'firem' },
  { k:'marketing', v:'manažerům' },
  { k:'HR',        v:'manažerům' },
  { k:'specia-',   v:'listům' },
  { k:'startupům', v:'a projektům' },
];

const MOM_TESTIMONIALS = [
  { name:'Tomáš Vít',           role:'ADMASYS, Chief Creative',
    text:'Sambassadoři se podívali pořádně za oponu LinkedInu, Instagramu, PR i PPC. Všichni byli skvělí — svému oboru rozumí, mají co říct a neváhají ostatním pomoci. Zkušenost to byla oči otevírající, představy bořící a plány zasévající.' },
  { name:'Zdeněk Martínek',     role:'První pozice, majitel',
    text:'Tomáš Pohl rychle ukázal, že na LinkedInu není místo pro zombíky. Během pár hodin nás rozbil, pak nabil a odcházeli jsme plní energie. Příprava channel strategy může být zábavná a účinná zároveň.' },
  { name:'Taťána M. Tomášková', role:'TLC, majitelka',
    text:'Naštěstí je spousta nadšenců, kteří se neobávají prezentovat všechny moderní trendy a nástroje i mé generaci. Skvělý závěr dvoudenní nalévány.' },
  { name:'Tomáš David',         role:'CEO Datanimals',
    text:'Měli jsme velkou radost být součástí — naše druhá přednáška o PPC kampaních. Dotazy lítaly v průběhu i na konci a u slajdu „mentálně se připravte na neomezené rozpočty" jsme se hezky zdrželi.' },
];

const MOM_FOR_DETAIL = [
  'majitelům firem',
  'marketingovým manažerům',
  'HR manažerům',
  'marketingovým specialistům',
  'start-upům a dalším projektům',
];

// ---- HERO ----
function MomHero({ onScrollToReg }) {
  return (
    <section className="mom-hero" data-screen-label="MOM Hero">
      <div className="mom-hero__bg" aria-hidden="true">
        <span className="mom-hero__sparkle mom-hero__sparkle--a" />
        <span className="mom-hero__sparkle mom-hero__sparkle--b" />
        <span className="mom-hero__sparkle mom-hero__sparkle--c" />
      </div>

      <div className="mom-hero__inner">
        <div className="mom-hero__top" data-reveal>
          <span className="mom-hero__eyebrow">
            <span className="mom-hero__dot" />
            knowhub · master of marketing
          </span>
          <span className="mom-hero__co">
            <span className="mono">spolupořádá</span>
            <strong>SAMBA</strong>
          </span>
        </div>

        <h1 className="mom-hero__title" data-reveal style={{"--reveal-delay":"120ms"}}>
          <span className="mom-hero__line">marketingové</span>
          <span className="mom-hero__line">vzdělání,</span>
          <span className="mom-hero__line"><em>které potřebuje</em></span>
          <span className="mom-hero__line mom-hero__line--coral">opravdu každý.</span>
        </h1>

        <p className="mom-hero__lede" data-reveal style={{"--reveal-delay":"260ms"}}>
          Ovládni moderní marketing v jeho komplexní šíři — tak, jak skutečně funguje v praxi.
          Od strategie přes značku, web, sociální sítě a obsah až po naplnění byznysových cílů
          a měřitelné výsledky. Vše online, se záznamem.
        </p>

        <div className="mom-hero__cta-row" data-reveal style={{"--reveal-delay":"380ms"}}>
          <div className="mom-hero__start">
            <span className="mono mom-hero__start-eyebrow">▸ startujeme</span>
            <span className="mom-hero__start-date">10. 3. 2026</span>
          </div>
          <button className="btn btn--coral mom-hero__cta" onClick={onScrollToReg}>
            Chci se přihlásit
            <span className="arrow">↗</span>
          </button>
        </div>

        <div className="mom-hero__stats" data-reveal style={{"--reveal-delay":"500ms"}}>
          <div className="mom-hero__stat">
            <span className="mom-hero__stat-num">9</span>
            <span className="mom-hero__stat-lbl">vzdělávacích modulů</span>
          </div>
          <div className="mom-hero__stat">
            <span className="mom-hero__stat-num">11</span>
            <span className="mom-hero__stat-lbl">setkání</span>
          </div>
          <div className="mom-hero__stat">
            <span className="mom-hero__stat-num">6</span>
            <span className="mom-hero__stat-lbl">měsíců</span>
          </div>
          <div className="mom-hero__stat">
            <span className="mom-hero__stat-num">5</span>
            <span className="mom-hero__stat-lbl">TOP lektorů</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- MANIFEST ----
function MomManifest() {
  return (
    <section className="mom-mani" data-screen-label="MOM Manifest">
      <div className="mom-mani__inner">
        <div className="mom-mani__head" data-reveal>
          <span className="mom-mani__eyebrow mono">● manifest</span>
          <h2 className="mom-mani__title">
            nauč marketing<br/>
            <em>pracovat pro tvé cíle.</em>
          </h2>
        </div>
        <div className="mom-mani__body">
          <p data-reveal>
            Marketing se v posledních letech zásadně proměnil. Zákazníci nakupují i rozhodují jinak
            a firmy, které chtějí uspět, musí svůj přístup změnit. Cítíš, že je čas posunout
            marketing své firmy dál?
          </p>
          <p data-reveal style={{"--reveal-delay":"160ms"}}>
            Nestačí zlepšovat kampaně. Dnešní marketing vyžaduje strategické řízení, propojování
            s obchodem, daty i vedením týmu. Právě tady se rozhoduje o růstu a budoucnosti firem.
          </p>
          <p data-reveal style={{"--reveal-delay":"280ms"}}>
            Proto jsme společně s odborníky na marketing a manažerské vzdělávání vytvořili
            <strong> Master of Marketing</strong> — komplexní program, který pomůže nastavit marketing
            správně, efektivně a s dlouhodobým výsledkem.
          </p>
        </div>
      </div>
    </section>
  );
}

// ---- BENEFITS ----
function MomBenefits() {
  return (
    <section className="mom-ben" data-screen-label="MOM Benefits">
      <div className="mom-ben__head" data-reveal>
        <span className="mono mom-ben__eyebrow">● co se naučíš</span>
        <h2 className="mom-ben__title">
          co si&nbsp;<em>odneseš</em>?
        </h2>
      </div>
      <div className="mom-ben__grid">
        {MOM_BENEFITS.map((b, i) => (
          <article
            key={b.num}
            className={"mom-ben__card " + (i===0?'mom-ben__card--hero':'')}
            data-reveal
            style={{"--reveal-delay":`${i*60}ms`}}
          >
            <span className="mom-ben__num">{b.num}</span>
            <h3 className="mom-ben__name">{b.title}</h3>
            <p className="mom-ben__desc">{b.desc}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

// ---- PROGRAM TIMELINE ----
function MomProgram() {
  const [open, setOpen] = useStateMom(null);
  return (
    <section className="mom-prog" data-screen-label="MOM Program">
      <div className="mom-prog__head" data-reveal>
        <span className="mono mom-prog__eyebrow">● program</span>
        <h2 className="mom-prog__title">
          <em>11 setkání,</em> 6 měsíců,<br/>
          jeden komplexní výstup.
        </h2>
        <p className="mom-prog__sub">
          Každé 14 dní online, plus 2 osobní setkání. Záznamy zůstávají napořád.
        </p>
      </div>
      <ol className="mom-prog__list">
        {MOM_PROGRAM.map((m, i) => {
          const isOpen = open === i;
          const offline = m.kind === 'offline';
          return (
            <li
              key={i}
              className={"mom-prog__row " + (isOpen?'is-open ':'') + (offline?'mom-prog__row--offline':'')}
              data-reveal
              style={{"--reveal-delay":`${i*40}ms`}}
            >
              <button
                className="mom-prog__btn"
                onClick={()=>setOpen(isOpen?null:i)}
                aria-expanded={isOpen}
              >
                <span className="mom-prog__tag">{m.tag}</span>
                <span className="mom-prog__date">{m.date}</span>
                <span className="mom-prog__name">{m.title}</span>
                <span className="mom-prog__plus">{isOpen?'−':'+'}</span>
              </button>
              <div className="mom-prog__detail" hidden={!isOpen}>
                <p>{m.desc}</p>
              </div>
            </li>
          );
        })}
      </ol>
    </section>
  );
}

// ---- LECTORS ----
function MomLectors() {
  return (
    <section className="mom-lec" data-screen-label="MOM Lectors">
      <div className="mom-lec__head" data-reveal>
        <span className="mono mom-lec__eyebrow">● lektoři</span>
        <h2 className="mom-lec__title">
          lidé, kteří marketing<br/>
          <em>denně dělají,</em> ne jen učí.
        </h2>
      </div>

      {/* GUARANTOR + SAMBA */}
      <div className="mom-lec__guarant" data-reveal>
        <article className="mom-lec__big mom-lec__big--tomas">
          <div className="mom-lec__photo mom-lec__photo--placeholder">
            <span className="mono">portrét tomáš pohl</span>
          </div>
          <div className="mom-lec__bio">
            <span className="mono mom-lec__role">garant programu · lektor</span>
            <h3 className="mom-lec__name">Tomáš Pohl</h3>
            <p>
              Začínal jako kuchař a student, co si přivydělával návrhem vizitek.
              Dnes stojí v čele <strong>Justmighty</strong> — jedné z významných marketingových
              agentur v Česku. Jeho „no bullshit" přístup odmítá dělat marketing jen „pro hezké oko".
              Místo toho firmám nastavuje strategie, které jim vydělávají peníze.
            </p>
            <p>
              Má vlastní podcast <em>69 dní po splatnosti</em> a podcast <em>Talk for Walk</em>.
            </p>
          </div>
        </article>

        <article className="mom-lec__big mom-lec__big--samba">
          <div className="mom-lec__photo mom-lec__photo--samba">
            <span className="mom-lec__samba-mark">SAMBA</span>
          </div>
          <div className="mom-lec__bio">
            <span className="mono mom-lec__role">metodické a organizační zajištění</span>
            <h3 className="mom-lec__name">SAMBA</h3>
            <p>
              Jedinečná komunita více než <strong>1 000 majitelů, manažerů a specialistů</strong>,
              která pořádá přes <strong>120 akcí ročně</strong> už více než 15 let.
              Špičkové vzdělávací programy a přátelská setkání, která zvyšují odbornost,
              budují důvěru a obohacují životy účastníků.
            </p>
          </div>
        </article>
      </div>

      {/* OTHER LECTORS GRID */}
      <div className="mom-lec__grid">
        {MOM_LECTORS.slice(1).map(l => (
          <article key={l.id} className="mom-lec__card" data-reveal>
            <div className="mom-lec__cardphoto">
              <span className="mono">portrét</span>
            </div>
            <div className="mom-lec__cardbio">
              <span className="mom-lec__cardtag">{l.tag}</span>
              <h4 className="mom-lec__cardname">{l.name}</h4>
              <p className="mom-lec__cardrole">{l.role}</p>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ---- PRICING ----
function MomPricing({ onScrollToReg }) {
  return (
    <section className="mom-price" data-screen-label="MOM Pricing">
      <div className="mom-price__inner">
        <div className="mom-price__head" data-reveal>
          <span className="mono mom-price__eyebrow">● cena kurzu</span>
          <h2 className="mom-price__title">
            jedna investice.<br/>
            <em>vrací se napořád.</em>
          </h2>
        </div>
        <div className="mom-price__card" data-reveal>
          <div className="mom-price__main">
            <span className="mom-price__strike">45 000 Kč</span>
            <span className="mom-price__big">35 000 Kč</span>
            <span className="mom-price__vat">bez DPH</span>
          </div>
          <ul className="mom-price__feats">
            <li><span className="mono">·</span> 9 modulů + 2 osobní setkání</li>
            <li><span className="mono">·</span> Záznamy zůstávají napořád</li>
            <li><span className="mono">·</span> Závěrečný projekt + zpětná vazba odborníků</li>
            <li><span className="mono">·</span> Možnost rozložit na 3 splátky</li>
          </ul>
          <p className="mom-price__alt">
            Nebo <strong>5 000 Kč bez DPH</strong> za jeden samostatný modul.
          </p>
          <button className="btn btn--coral mom-price__cta" onClick={onScrollToReg}>
            Chci se přihlásit <span className="arrow">↗</span>
          </button>
        </div>
      </div>
    </section>
  );
}

// ---- FOR WHOM ----
function MomFor() {
  return (
    <section className="mom-for" data-screen-label="MOM For Whom">
      <div className="mom-for__head" data-reveal>
        <span className="mono mom-for__eyebrow">● komu mění život</span>
        <h2 className="mom-for__title">
          <em>master</em> je pro tebe, jestli&nbsp;jsi…
        </h2>
      </div>
      <ul className="mom-for__list">
        {MOM_FOR_DETAIL.map((t, i) => (
          <li key={i} className="mom-for__item" data-reveal style={{"--reveal-delay":`${i*80}ms`}}>
            <span className="mom-for__num">{String(i+1).padStart(2,'0')}</span>
            <span className="mom-for__t">{t}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}

// ---- TESTIMONIALS ----
function MomTestimonials() {
  const [i, setI] = useStateMom(0);
  const t = MOM_TESTIMONIALS[i];
  return (
    <section className="mom-test" data-screen-label="MOM Testimonials">
      <div className="mom-test__inner">
        <div className="mom-test__head" data-reveal>
          <span className="mono mom-test__eyebrow">● říkají účastníci</span>
          <h2 className="mom-test__title">
            co o&nbsp;kurzu<br/>
            <em>říkají ti,</em> kteří už ho prošli?
          </h2>
        </div>
        <article className="mom-test__quote" data-reveal>
          <span className="mom-test__mark">"</span>
          <p>{t.text}</p>
          <footer>
            <strong>{t.name}</strong>
            <span>· {t.role}</span>
          </footer>
        </article>
        <div className="mom-test__nav">
          {MOM_TESTIMONIALS.map((_, idx) => (
            <button
              key={idx}
              className={"mom-test__dot " + (idx===i?'is-on':'')}
              onClick={()=>setI(idx)}
              aria-label={`Citát ${idx+1}`}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- REGISTRATION FORM ----
function MomRegistration() {
  const [sent, setSent] = useStateMom(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <section className="mom-reg" id="mom-registration" data-screen-label="MOM Registration">
      <div className="mom-reg__inner">
        <div className="mom-reg__head" data-reveal>
          <span className="mono mom-reg__eyebrow">● přihláška</span>
          <h2 className="mom-reg__title">
            přidej se<br/>
            <em>k 10. 3. 2026.</em>
          </h2>
          <p className="mom-reg__sub">
            Vyplň formulář. Do 2 dnů ti pošleme fakturu — po jejím uhrazení dorazí pozvánky
            na všechny moduly a setkání.
          </p>
        </div>
        {sent ? (
          <div className="mom-reg__ok" data-reveal>
            <span className="mom-reg__ok-mark">✓</span>
            <h3>díky! ozveme se do 2 dnů.</h3>
            <p>Faktura ti dorazí na e-mail. Po jejím uhrazení obratem posíláme pozvánky.</p>
          </div>
        ) : (
          <form className="mom-reg__form" data-reveal onSubmit={submit}>
            <label className="mom-reg__field">
              <span>Jméno a příjmení *</span>
              <input type="text" required />
            </label>
            <label className="mom-reg__field">
              <span>E-mail *</span>
              <input type="email" required />
            </label>
            <label className="mom-reg__field">
              <span>Telefon *</span>
              <input type="tel" required />
            </label>
            <label className="mom-reg__field">
              <span>IČO</span>
              <input type="text" />
            </label>
            <label className="mom-reg__field mom-reg__field--full">
              <span>Máš dotaz?</span>
              <textarea rows="3" />
            </label>
            <label className="mom-reg__check mom-reg__field--full">
              <input type="checkbox" required />
              <span>
                Souhlasím se zpracováním osobních údajů a&nbsp;<a href="#">obchodními podmínkami</a>.
              </span>
            </label>
            <button className="btn btn--coral mom-reg__submit" type="submit">
              Odeslat přihlášku <span className="arrow">↗</span>
            </button>
          </form>
        )}
      </div>
    </section>
  );
}

// ---- CONTACT FOOTER ----
function MomQuestions() {
  return (
    <section className="mom-q" data-screen-label="MOM Questions">
      <div className="mom-q__inner">
        <span className="mono mom-q__eyebrow">● otázky zodpoví</span>
        <h2 className="mom-q__title">máš dotaz? napiš.</h2>
        <div className="mom-q__people">
          <a href="mailto:tomas@justmighty.cz" className="mom-q__person">
            <span>Tomáš Pohl</span>
            <strong>tomas@justmighty.cz</strong>
            <em>Justmighty</em>
          </a>
          <a href="mailto:jirka@smba.cz" className="mom-q__person">
            <span>Jiří Slezák</span>
            <strong>jirka@smba.cz</strong>
            <em>SAMBA</em>
          </a>
        </div>
      </div>
    </section>
  );
}

// ---- MAIN PAGE ----
function MomPage({ onNav }) {
  useReveal();
  const regRef = useRefMom(null);
  const scrollToReg = () => {
    const el = document.getElementById('mom-registration');
    if (el) el.scrollIntoView({ behavior:'smooth', block:'start' });
  };
  return (
    <>
      <MomHero onScrollToReg={scrollToReg} />
      <MomManifest />
      <MomBenefits />
      <MomProgram />
      <MomLectors />
      <MomPricing onScrollToReg={scrollToReg} />
      <MomFor />
      <MomTestimonials />
      <MomRegistration />
      <MomQuestions />
      <Footer />
    </>
  );
}

window.MomPage = MomPage;