// knowhub-event.jsx — landing page jedné konkrétní akce (Master of Marketing podzim 2026)
function KhEventPage({ onNav }) {
  useReveal();
  const event = KH_EVENTS.find(e=>e.featured);
  const kind = KH_KIND[event.kind];

  return (
    <>
      <section className="khe-hero" data-screen-label="K3 Event Hero">
        <img className="stone-deco" src="./assets/stone-render-1.png" alt="" style={{
          right:-100, top:-80, width:520, opacity:.45, transform:'rotate(20deg)'
        }} />
        <div className="shell" style={{padding:0, position:'relative'}}>
          <div className="khe-hero__grid">
            <div className="khe-hero__left">
              <span className="eyebrow" style={{color:'var(--coral)'}}>vlajkový vzdělávací program · L3</span>
              <h1 className="khe-hero__title" data-reveal>
                Master of<br/>
                <em>Marketing</em>
              </h1>
              <p className="khe-hero__lead" data-reveal style={{"--reveal-delay":"160ms"}}>
                Čtyři měsíce. Deset modulů. Jedna malá skupina CMO a majitelů firem,
                kteří chtějí marketing dělat pořádně. Vede Tomáš Pohl, autor metodiky Justask 10 times®.
              </p>
              <div className="khe-hero__meta" data-reveal style={{"--reveal-delay":"240ms"}}>
                <div className="khe-hero__meta-item">
                  <span className="mono">začátek</span>
                  <strong>8. září 2026</strong>
                </div>
                <div className="khe-hero__meta-item">
                  <span className="mono">délka</span>
                  <strong>10 modulů · 4 měsíce</strong>
                </div>
                <div className="khe-hero__meta-item">
                  <span className="mono">místo</span>
                  <strong>Brno + online</strong>
                </div>
                <div className="khe-hero__meta-item">
                  <span className="mono">cena</span>
                  <strong>89 900 Kč</strong>
                  <span className="khe-hero__early">do 30. 6. — 79 900 Kč</span>
                </div>
              </div>
              <div className="khe-hero__cta" data-reveal style={{"--reveal-delay":"320ms"}}>
                <a className="btn btn--coral" href="#khe-form" onClick={(e)=>{
                  e.preventDefault();
                  document.getElementById('khe-form')?.scrollIntoView({behavior:'smooth',block:'start'});
                }}>
                  přihlásit se <span className="arrow">↗</span>
                </a>
                <span className="khe-hero__seats">
                  <span className="khe-hero__seats-dot" />
                  zbývají <strong>{event.seatsTotal - event.seats}</strong> z {event.seatsTotal} míst
                </span>
              </div>
            </div>

            <aside className="khe-hero__side">
              <div className="khe-hero__side-head">
                <span className="mono">tomáš pohl</span>
                <span className="khe-hero__side-tag">vede program</span>
              </div>
              <div className="khe-hero__side-photo">
                <span className="khe-hero__side-init">TP</span>
              </div>
              <p className="khe-hero__side-bio">
                Majitel justmighty. 12+ let v marketingu. Pracoval s 500+ značkami.
                Vystudoval ekonomii, ale dělá to z lásky.
              </p>
              <div className="khe-hero__side-stats">
                <div><strong>147</strong><span>absolventů</span></div>
                <div><strong>4.9</strong><span>z 5 hodnocení</span></div>
                <div><strong>92 %</strong><span>doporučí</span></div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* Pro koho */}
      <section className="khe-for" data-screen-label="K3 Event For">
        <div className="shell" style={{padding:0}}>
          <div className="khe-for__head">
            <span className="mono" style={{color:'var(--coral)'}}>pro koho</span>
            <h2 className="khe-for__title" data-reveal>
              <em>není</em> to pro každého.
            </h2>
            <p className="khe-for__sub" data-reveal style={{"--reveal-delay":"160ms"}}>
              Záměrně. Bereme 14 lidí, abychom se stihli každému věnovat.
            </p>
          </div>

          <div className="khe-for__grid">
            <div className="khe-for__col khe-for__col--yes">
              <span className="mono">přihlaste se, pokud —</span>
              <ul>
                <li>jste CMO nebo majitel/ka firmy s marketingovým rozpočtem 1M+ ročně</li>
                <li>marketing děláte sami nebo ho řídíte interně</li>
                <li>chcete přemýšlet nad značkou jako nad byznysem, ne jako nad estetikou</li>
                <li>nebojíte se přiznat, že něco nevíte</li>
              </ul>
            </div>
            <div className="khe-for__col khe-for__col--no">
              <span className="mono">nepřihlašujte se, pokud —</span>
              <ul>
                <li>chcete certifikát do životopisu, ne změnu</li>
                <li>marketing je pro vás jen reklama</li>
                <li>očekáváte šablony a hotové návody</li>
                <li>nemáte čas věnovat se domácím úkolům mezi moduly</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Moduly */}
      <section className="khe-modules" data-screen-label="K3 Event Modules">
        <div className="shell" style={{padding:0}}>
          <div className="khe-modules__head">
            <span className="mono" style={{color:'var(--coral)'}}>program</span>
            <h2 className="khe-modules__title" data-reveal>
              deset <em>modulů</em>.
            </h2>
          </div>

          <ol className="khe-modules__list">
            {[
              { n:'01', t:'Pozicionování & strategická analýza', d:'4P, segmentace, value proposition. Co je vaše značka — opravdu.' },
              { n:'02', t:'Justask 10 times®', d:'Deset otázek, na které musí mít odpověď každý projekt.' },
              { n:'03', t:'Komunikační strategie', d:'Tonalita, vzkaz, obsahové vrstvy. Pro kterou cílovku co.' },
              { n:'04', t:'Vizuální identita', d:'Co je rebrand, kdy ho dělat, co stojí. Když si ho děláte sami — jak.' },
              { n:'05', t:'Web jako produkt', d:'Architektura, content strategy, konverzní cesta. Web, který prodává.' },
              { n:'06', t:'Performance marketing', d:'PPC, programmatic, attribution. Jak nepálit peníze.' },
              { n:'07', t:'Brand marketing', d:'Mediální strategie, PR, sponzoring. Když chcete, aby si vás pamatovali.' },
              { n:'08', t:'Content & podcast', d:'Vlastní obsah jako kanál. Tom + Ivo o tom, co dělá Talk for Walk.' },
              { n:'09', t:'Tým a procesy', d:'Brief, schvalování, KPI. Marketing, který funguje, i když jste na dovolené.' },
              { n:'10', t:'Závěrečný projekt', d:'Vlastní projekt na vlastní firmě. Tomáš dělá oponentem.' },
            ].map((m,i)=>(
              <li key={m.n} className="khe-mod" data-reveal style={{"--reveal-delay": `${i*60}ms`}}>
                <span className="khe-mod__num">{m.n}</span>
                <div className="khe-mod__body">
                  <h3>{m.t}</h3>
                  <p>{m.d}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* Reference */}
      <section className="khe-ref" data-screen-label="K3 Event References">
        <div className="shell" style={{padding:0}}>
          <div className="khe-ref__head">
            <span className="mono" style={{color:'var(--coral)'}}>reference</span>
            <h2 className="khe-ref__title" data-reveal>
              co říkají <em>absolventi</em>.
            </h2>
          </div>
          <div className="khe-ref__grid">
            <blockquote className="khe-ref__quote" data-reveal>
              <p>„Po Master of Marketing jsem konečně přestal dělat věci jen proto, že je dělají všichni. Začal jsem se ptát proč. Hodnota: vyčíslitelná, vrátilo se to do roka."</p>
              <footer><strong>Magdaléna Švarcová</strong><span>CMO · Donut</span></footer>
            </blockquote>
            <blockquote className="khe-ref__quote" data-reveal style={{"--reveal-delay":"120ms"}}>
              <p>„Tomáš mě vypeskoval na úvodním modulu. Bylo mi to nepříjemné. Bylo to potřeba. Dnes vedu marketing jinak."</p>
              <footer><strong>Radovan Vaculík</strong><span>majitel · Velocita</span></footer>
            </blockquote>
            <blockquote className="khe-ref__quote" data-reveal style={{"--reveal-delay":"240ms"}}>
              <p>„Hodnota za peníze: nemá konkurenci. Mentorská skupina po programu pokračuje 2 roky."</p>
              <footer><strong>Filip Tylex</strong><span>jednatel · Tylex Letovice</span></footer>
            </blockquote>
          </div>
        </div>
      </section>

      {/* FAQ + cena */}
      <section className="khe-price" data-screen-label="K3 Event Price">
        <div className="shell" style={{padding:0}}>
          <div className="khe-price__grid">
            <div className="khe-price__main">
              <span className="mono" style={{color:'var(--coral)'}}>cena</span>
              <h2 className="khe-price__big" data-reveal>89 900 Kč</h2>
              <p className="khe-price__early" data-reveal>
                <strong>79 900 Kč</strong> při registraci do 30. 6. 2026
              </p>
              <ul className="khe-price__incl">
                <li><span>+</span> 10 celodenních modulů (5× Brno · 5× online)</li>
                <li><span>+</span> Materiály, šablony, Justask 10× framework</li>
                <li><span>+</span> Mentoring 1:1 s Tomášem mezi moduly</li>
                <li><span>+</span> Privátní Slack absolventů (forever)</li>
                <li><span>+</span> Občerstvení a oběd na offline modulech</li>
              </ul>
              <p className="khe-price__small mono">
                cena bez DPH · možnost úhrady ve 3 splátkách · firemní fakturace samozřejmostí
              </p>
            </div>
            <div className="khe-price__faq">
              <span className="mono">časté otázky</span>
              {[
                { q:'Zvládnu to s plnou prací?', a:'Ano. Moduly jsou 1× za 14 dní. Domácí úkoly cca 3 hodiny týdně.' },
                { q:'Co když vynechám modul?', a:'Záznam dostanete. Ale chodit doporučujeme — atmosféra ve skupině je půlka programu.' },
                { q:'Mohu se přihlásit jako junior?', a:'Spíš ne. Program je pro lidi, kteří už něco zkusili. Pro juniory máme Holky z marketingu.' },
                { q:'Vrátíte mi peníze, když to nebude sedět?', a:'Po prvním modulu, pokud nesedne — vrátíme 100 %. Bez otázek.' },
              ].map((f,i)=>(
                <details key={i} className="khe-price__faq-item">
                  <summary>{f.q} <span>+</span></summary>
                  <p>{f.a}</p>
                </details>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* PŘIHLÁŠKA */}
      <section className="khe-form" id="khe-form" data-screen-label="K3 Event Form">
        <div className="shell" style={{padding:0}}>
          <div className="khe-form__grid">
            <div className="khe-form__intro">
              <span className="mono" style={{color:'var(--coral)'}}>přihláška</span>
              <h2 data-reveal>
                přihlaste se na<br/>
                <em>podzim 2026</em>.
              </h2>
              <p>
                Po odeslání vás kontaktujeme do 2 pracovních dnů. Máme krátkou online schůzku
                (15 min), abychom se ujistili, že to dává smysl pro obě strany.
              </p>
              <div className="khe-form__contacts">
                <div>
                  <span className="mono">otázky?</span>
                  <a href="mailto:tomas@justmighty.cz">tomas@justmighty.cz</a>
                </div>
                <div>
                  <span className="mono">telefon</span>
                  <a href="tel:+420775000000">+420 775 000 000</a>
                </div>
              </div>
            </div>

            <form className="khe-form__form" onSubmit={(e)=>{e.preventDefault();alert('Děkujeme. Ozveme se do 2 pracovních dnů.')}}>
              <div className="khe-form__row">
                <label>
                  <span className="mono">jméno *</span>
                  <input type="text" required />
                </label>
                <label>
                  <span className="mono">příjmení *</span>
                  <input type="text" required />
                </label>
              </div>
              <div className="khe-form__row">
                <label>
                  <span className="mono">e-mail *</span>
                  <input type="email" required />
                </label>
                <label>
                  <span className="mono">telefon *</span>
                  <input type="tel" required />
                </label>
              </div>
              <div className="khe-form__row">
                <label>
                  <span className="mono">firma *</span>
                  <input type="text" required />
                </label>
                <label>
                  <span className="mono">pozice</span>
                  <input type="text" placeholder="CMO, majitel, marketing manager…" />
                </label>
              </div>
              <label>
                <span className="mono">web vaší firmy</span>
                <input type="url" placeholder="vasefirma.cz" />
              </label>
              <label>
                <span className="mono">proč se hlásíte? *</span>
                <textarea rows="4" required placeholder="Co od programu očekáváte. Jaký konkrétní problém chcete vyřešit." />
              </label>
              <fieldset className="khe-form__early">
                <legend className="mono">platba</legend>
                <label>
                  <input type="radio" name="pay" defaultChecked />
                  <span><strong>jednorázově</strong> — 79 900 Kč (při registraci do 30. 6.)</span>
                </label>
                <label>
                  <input type="radio" name="pay" />
                  <span><strong>3 splátky</strong> — 3× 27 500 Kč</span>
                </label>
              </fieldset>
              <label className="khe-form__check">
                <input type="checkbox" required />
                <span>souhlasím s <a href="#" onClick={(e)=>e.preventDefault()}>podmínkami</a> a se zpracováním osobních údajů</span>
              </label>
              <button type="submit" className="btn btn--coral khe-form__submit">
                odeslat přihlášku
                <span className="arrow">↗</span>
              </button>
              <p className="khe-form__note mono">
                * povinné pole · po odeslání vás čeká krátká online schůzka, než vás definitivně přijmeme
              </p>
            </form>
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

window.KhEventPage = KhEventPage;