// knowhub.jsx — nový Knowhub: klidný, event-first, hub pro celý funnel
const { useState: useStateKH, useEffect: useEffectKH, useMemo: useMemoKH } = React;

// === Helpery ===
function khFmtDate(d) {
  const months = ['ledna', 'února', 'března', 'dubna', 'května', 'června', 'července', 'srpna', 'září', 'října', 'listopadu', 'prosince'];
  return `${d.getDate()}. ${months[d.getMonth()]}`;
}
function khFmtTime(d) {
  return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
}
function khRelDay(d) {
  const diff = Math.round((d - new Date()) / (1000 * 60 * 60 * 24));
  if (diff < 0) return 'proběhlo';
  if (diff === 0) return 'dnes';
  if (diff === 1) return 'zítra';
  if (diff < 7) return `za ${diff} dní`;
  if (diff < 30) return `za ${Math.round(diff / 7)} týdny`;
  return `za ${Math.round(diff / 30)} měsíce`;
}
function khMonth(d) {
  return ['LED', 'ÚNO', 'BŘE', 'DUB', 'KVĚ', 'ČER', 'ČVC', 'SRP', 'ZÁŘ', 'ŘÍJ', 'LIS', 'PRO'][d.getMonth()];
}

// Subnav definice — 8 podsekcí
const KH_SUBNAV = [
{ id: 'all', label: 'Vše' },
{ id: 'mom', label: 'Master of Marketing' },
{ id: 'skoleni', label: 'Školení' },
{ id: 'webinare', label: 'Webináře' },
{ id: 'justask', label: 'Justask' },
{ id: 'podcast', label: 'Podcast' },
{ id: 'blog', label: 'Blog' },
{ id: 'konference', label: 'Konference' }];


// Mapování filtru na typy eventů
const KH_FILTER_MAP = {
  all: null,
  mom: ['mom'],
  skoleni: ['skoleni'],
  webinare: ['webinar'],
  justask: ['justask'],
  podcast: ['podcast'],
  blog: ['blog'],
  konference: ['konference', 'speaking']
};

// ─────────────────────────────────────────────
//  HERO — klidný, jasné poslání + příští 2 akce
// ─────────────────────────────────────────────
// Drobné SVG ikony pro každou kategorii — linework, currentColor
const KH_CAT_ICONS = {
  mom: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2 10 12 5l10 5-10 5z" />
      <path d="M6 12v4c0 1.5 3 3 6 3s6-1.5 6-3v-4" />
      <path d="M22 10v5" />
    </svg>
  ),
  justask: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 5h16v11H10l-5 4v-4H4z" />
      <path d="M12 8.5a1.5 1.5 0 1 1 1.7 1.5c-.5.1-.7.5-.7 1v.5" />
      <circle cx="12" cy="13.5" r=".6" fill="currentColor" stroke="none" />
    </svg>
  ),
  skoleni: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="12" rx="1.5" />
      <path d="M7 12l3-3 3 3 4-4" />
      <path d="M12 16v4" /><path d="M9 20h6" />
    </svg>
  ),
  webinare: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="5" width="20" height="13" rx="1.5" />
      <path d="M10 10v4l4-2z" fill="currentColor" stroke="none" />
      <path d="M8 21h8" />
    </svg>
  ),
  podcast: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="9" y="3" width="6" height="11" rx="3" />
      <path d="M5 11a7 7 0 0 0 14 0" />
      <path d="M12 18v3" /><path d="M9 21h6" />
    </svg>
  ),
  konference: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3v8" />
      <circle cx="12" cy="5" r="2" />
      <path d="M5 21l3-7h8l3 7" />
      <path d="M9 17h6" />
    </svg>
  ),
};

// ─────────────────────────────────────────────
//  HERO — sjednoceno se stránkou Služby (svcp-hero).
//  Vlevo eyebrow + obří titulek; vpravo „pulled" odstavec s velkou uvozovkou.
//  Dole: pills s 6 kategoriemi knowhubu (fungují jako rychlý filtr).
// ─────────────────────────────────────────────
function KhHero({ onNav, onFilter }) {
  const cats = [
    { id: 'mom',        label: 'Master of Marketing' },
    { id: 'justask',    label: 'Justask' },
    { id: 'skoleni',    label: 'Školení' },
    { id: 'webinare',   label: 'Webináře' },
    { id: 'podcast',    label: 'Podcast' },
    { id: 'konference', label: 'Konference' },
  ];

  const onPill = (id) => {
    if (onFilter) onFilter(id);
    setTimeout(() => {
      document.querySelector('[data-screen-label="K2 Knowhub Subnav"]')
        ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 60);
  };

  return (
    <section className="svcp-hero kh-hero" data-screen-label="K1 Knowhub Hero">
      {/* spodní kámen jako na služby */}
      <img className="svcp-hero__mountain" src="./assets/stone-3-mountain.png" alt="" />

      <div className="shell" style={{ padding: 0, position: 'relative', zIndex: 2 }}>
        <div className="svcp-hero__top">
          <div className="svcp-hero__top-left">
            <span className="eyebrow svcp-hero__eyebrow" data-reveal>knowhub · vzdělávací centrum</span>
            <h1
              className="svcp-hero__title svcp-hero__title--full"
              data-reveal
              style={{ '--reveal-delay': '100ms', fontSize: '120px' }}>
              marketing,<br />
              který <em style={{ fontWeight: '400' }}>SE&nbsp;DÁ</em><br />
              naučit<span style={{ color: 'var(--coral)' }}>.</span>
            </h1>
          </div>

          <div
            className="svcp-hero__pulled"
            data-reveal
            style={{ '--reveal-delay': '220ms', padding: '0 0 0 44px' }}>
            <span className="svcp-hero__quote-mark" aria-hidden="true">„</span>
            <p className="svcp-hero__pulled-text" style={{ textAlign: 'left' }}>
              Marketing je <em>základní</em> manažerská dovednost. Pokud řídíš firmu, oddělení nebo aspoň sebe, není to něco, co outsourcuješ na agenturu.
              <strong> Tady ti ho předáme</strong> — od hodinové konzultace po šestiměsíční vlajkový kurz.
            </p>
          </div>
        </div>

        {/* 6 kategorií jako malé dlaždice (klikatelné = filtr) */}
        <div className="kh-hero__cats" data-reveal style={{ '--reveal-delay': '320ms' }}>
          <span className="kh-hero__cats-lbl mono">přejít na →</span>
          <div className="kh-hero__cats-grid">
            {cats.map((c, i) => (
              <button key={c.id} className="kh-cat-tile" onClick={() => onPill(c.id)}>
                <span className="kh-cat-tile__ico">{KH_CAT_ICONS[c.id]}</span>
                <span className="kh-cat-tile__num mono">{String(i + 1).padStart(2, '0')}</span>
                <span className="kh-cat-tile__label">{c.label}</span>
                <span className="kh-cat-tile__arrow" aria-hidden="true">↗</span>
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────
//  SUBNAV — sticky filtr 8 kategorií
//  Stylově sjednocený s fbar z Projektů: chips s počty,
//  sliding pill za aktivním chipem, mono label.
// ─────────────────────────────────────────────
function KhSubnav({ active, onChange, events }) {
  const rootRef = React.useRef(null);
  const [pill, setPill] = React.useState(null);

  // počet eventů per kategorie (žije i podle KH_FILTER_MAP)
  const countFor = (id) => {
    if (!events) return 0;
    const allowed = KH_FILTER_MAP[id];
    return allowed ? events.filter((e) => allowed.includes(e.kind)).length : events.length;
  };

  const measure = React.useCallback(() => {
    const root = rootRef.current;
    if (!root) return;
    const el = root.querySelector(`[data-val="${active}"]`);
    if (!el) { setPill(null); return; }
    const r1 = root.getBoundingClientRect();
    const r2 = el.getBoundingClientRect();
    setPill({ left: r2.left - r1.left, top: r2.top - r1.top, width: r2.width, height: r2.height });
  }, [active]);

  React.useLayoutEffect(() => { measure(); }, [measure]);
  React.useEffect(() => {
    if (document.fonts && document.fonts.ready) document.fonts.ready.then(measure);
    const t1 = setTimeout(measure, 60);
    const t2 = setTimeout(measure, 240);
    window.addEventListener('resize', measure);
    return () => { clearTimeout(t1); clearTimeout(t2); window.removeEventListener('resize', measure); };
  }, [measure]);

  return (
    <div className="kh2-subnav" data-screen-label="K2 Knowhub Subnav">
      <div className="shell" style={{ padding: 0 }}>
        <div className="fbar fbar--single">
          <div className="fbar__row">
            <span className="fbar__lbl">filtr</span>
            <div className="fbar__chips" ref={rootRef}>
              {pill && (
                <span
                  className="fbar__pill"
                  style={{
                    transform: `translate(${pill.left}px, ${pill.top}px)`,
                    width: pill.width,
                    height: pill.height,
                  }}
                />
              )}
              {KH_SUBNAV.map((item) => {
                const n = countFor(item.id);
                const dim = n === 0 && item.id !== 'all';
                return (
                  <button
                    key={item.id}
                    data-val={item.id}
                    className={'fchip ' + (active === item.id ? 'is-on ' : '') + (dim ? 'is-dim' : '')}
                    onClick={() => !dim && onChange(item.id)}
                    disabled={dim}
                  >
                    <span className="fchip__txt">{item.label}</span>
                    <span className="fchip__n">{n}</span>
                  </button>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>);

}

// ─────────────────────────────────────────────
//  KALENDÁŘ — časová osa, klidné karty
// ─────────────────────────────────────────────
function KhCalendar({ events, filter, setFilter, onNav }) {
  const filtered = useMemoKH(() => {
    const allowed = KH_FILTER_MAP[filter];
    const sorted = [...events].sort((a, b) => a.when - b.when);
    return allowed ? sorted.filter((e) => allowed.includes(e.kind)) : sorted;
  }, [events, filter]);

  // Group by month
  const grouped = useMemoKH(() => {
    const out = {};
    filtered.forEach((e) => {
      const k = `${e.when.getFullYear()}-${e.when.getMonth()}`;
      if (!out[k]) out[k] = { label: `${['Leden', 'Únor', 'Březen', 'Duben', 'Květen', 'Červen', 'Červenec', 'Srpen', 'Září', 'Říjen', 'Listopad', 'Prosinec'][e.when.getMonth()]} ${e.when.getFullYear()}`, items: [] };
      out[k].items.push(e);
    });
    return Object.values(out);
  }, [filtered]);

  return (
    <section className="kh2-cal" id="kh2-calendar" data-screen-label="K3 Knowhub Calendar">
      <div className="shell" style={{ padding: 0 }}>
        <header className="kh-cal__head">
          <span className="kh-cal__lbl mono">kalendář</span>
          <h2 className="kh-cal__h">co nás <em>čeká</em></h2>
          <span className="kh-cal__count mono">
            {String(filtered.length).padStart(2,'0')} {filtered.length === 1 ? 'událost' : filtered.length < 5 ? 'události' : 'událostí'}
          </span>
        </header>

        <KhSubnav active={filter} onChange={setFilter} events={events} />

        {grouped.length === 0 &&
        <div className="kh2-empty">
            <span className="mono">žádné akce v této kategorii</span>
            <p>Zkus jiný filtr — nebo si zarezervuj <a href="#" onClick={(e) => {e.preventDefault();onNav('justask');}}>hodinu s Tomášem zdarma</a>.</p>
          </div>
        }

        {grouped.map((g, gi) =>
        <div key={gi} className="kh2-month">
            <h3 className="kh2-month__h mono">{g.label}</h3>
            <ul className="kh2-month__list">
              {g.items.map((e, i) =>
            <li key={e.id}>
                  <KhRow event={e} onNav={onNav} delay={i * 40} />
                </li>
            )}
            </ul>
          </div>
        )}
      </div>
    </section>);

}

// Jeden řádek v kalendáři
function KhRow({ event, onNav, delay }) {
  const kind = KH_KIND[event.kind];
  const seatsPct = event.seatsTotal ? (1 - event.seats / event.seatsTotal) * 100 : null;
  return (
    <a className="kh2-row" href="#"
    onClick={(e) => {e.preventDefault();onNav('knowhub-event');}}
    data-reveal style={{ "--reveal-delay": `${delay}ms` }}>
      <div className="kh2-row__date">
        <span className="kh2-row__day">{event.when.getDate()}</span>
        <span className="kh2-row__mon mono">{khMonth(event.when)}</span>
        <span className="kh2-row__time mono">{khFmtTime(event.when)}</span>
      </div>

      <div className="kh2-row__main">
        <div className="kh2-row__top">
          <span className="kh2-row__kind mono" style={{ color: kind.color }}>● {kind.label}</span>
          <span className="kh2-row__rel mono">{khRelDay(event.when)}</span>
        </div>
        <h4 className="kh2-row__title">
          {event.title}<span className="kh2-row__sub"> — {event.subtitle}</span>
        </h4>
        <p className="kh2-row__short">{event.short}</p>
        <div className="kh2-row__meta mono">
          <span>{event.duration}</span>
          <span>·</span>
          <span>{event.place}</span>
          <span>·</span>
          <span>{event.speaker}</span>
        </div>
      </div>

      <div className="kh2-row__side">
        <div className="kh2-row__price">
          <span className="kh2-row__price-val">{event.price}</span>
          {event.early && <span className="kh2-row__price-early mono">{event.early}</span>}
        </div>
        {seatsPct !== null &&
        <div className="kh2-row__seats">
            <div className="kh2-row__seats-bar"><span style={{ width: `${seatsPct}%` }}></span></div>
            <span className="kh2-row__seats-txt mono">{event.seats}/{event.seatsTotal} obsazeno</span>
          </div>
        }
        <span className="kh2-row__cta">{event.cta} <span className="kh2-row__arrow">↗</span></span>
      </div>
    </a>);

}

// ─────────────────────────────────────────────
//  VLAJKOVÉ PROGRAMY — 3 velké karty
// ─────────────────────────────────────────────
function KhFlagship({ onNav }) {
  const cats = [
  {
    id: 'mom', tag: 'vlajkový kurz',
    title: 'Master of Marketing',
    lead: 'Šestiměsíční program pro CMO a majitele firem, kteří chtějí v marketingu opravdu rozumět tomu, co dělají. Vede Tomáš, otevíráme 1× ročně.',
    meta: '6 měsíců · 12 účastníků · 1× ročně',
    image: './assets/mom-rasto.jpeg',
    cta: 'Detail programu'
  },
  {
    id: 'justask', tag: 'zdarma',
    title: 'Justask konzultace',
    lead: 'Hodina s Tomášem nad tvým konkrétním marketingovým problémem. Filtrovaná, zdarma. Otevíráme každý měsíc.',
    meta: '60 min · 1× měsíčně · zdarma',
    image: './assets/tom-bg.jpg',
    cta: 'Rezervovat hodinu',
    action: () => onNav('justask')
  },
  {
    id: 'skoleni', tag: 'B2B',
    title: 'Školení pro firmy',
    lead: 'Workshopy a školení na míru pro tvůj tým — od půldne po vícedenní programy.',
    meta: 'in-house · od půldne',
    image: './assets/julie.png',
    cta: 'Domluvit školení'
  },
  {
    id: 'webinare', tag: 'online',
    title: 'Online webináře',
    lead: 'Hodinová online sezení s Tomášem k aktuálním marketingovým tématům. Většinou zdarma.',
    meta: '12 ročně · většinou zdarma',
    image: './assets/stone-render-1.png',
    cta: 'Termíny'
  },
  {
    id: 'podcast', tag: 'podcast',
    title: 'Talk for Walk',
    lead: 'Rozhovory s lidmi, kteří v marketingu něco postavili. Bez ezo keců — jen co funguje a co ne.',
    meta: '22 epizod · Spotify · Apple',
    image: './assets/kh-flagship-podcast.jpg',
    cta: 'Poslechnout'
  },
  {
    id: 'prednasky', tag: 'keynote',
    title: 'Přednášky & konference',
    lead: 'Tomáš jako řečník na konferencích, firemních akcích a meetupech. Témata na míru.',
    meta: 'něco placené · něco zdarma',
    image: './assets/prednaska.jpg',
    cta: 'Vyžádat řečníka'
  }];

  return (
    <section className="kh2-flag" data-screen-label="K4 Knowhub Flagship">
      <div className="shell" style={{ padding: 0 }}>
        <header className="khf-head">
          <div className="khf-head__l" data-reveal>
            <span className="khf-eyebrow mono">06 / formáty knowhubu</span>
            <h2 className="khf-h">šest cest, <em>jak se učit</em> marketing</h2>
          </div>
          <p className="khf-sub" data-reveal style={{ '--reveal-delay':'120ms' }}>
            Od hodinové konzultace po šestiměsíční vlajkový kurz. Vyber si formát, který sedí tvojí situaci — nebo nám napiš a poradíme.
          </p>
        </header>

        <div className="khf-grid">
          {cats.map((f, i) => (
            <a
              key={f.id}
              className="khf-tile"
              href="#"
              onClick={(e) => { e.preventDefault(); f.action ? f.action() : onNav('knowhub-event'); }}
              data-reveal
              style={{ '--reveal-delay': `${i * 80}ms` }}
            >
              <div className="khf-tile__media">
                <img src={f.image} alt="" />
                <div className="khf-tile__shade" />
              </div>

              <span className="khf-tile__num mono">{String(i + 1).padStart(2, '0')}</span>
              <span className="khf-tile__tag mono">{f.tag}</span>

              <div className="khf-tile__body">
                <h3 className="khf-tile__title">{f.title}</h3>
                <p className="khf-tile__lead">{f.lead}</p>
                <div className="khf-tile__foot">
                  <span className="khf-tile__meta mono">{f.meta}</span>
                  <span className="khf-tile__cta">
                    {f.cta}
                    <span className="khf-tile__arrow">↗</span>
                  </span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────
//  PODCAST — kompaktní redakční blok
// ─────────────────────────────────────────────
function KhPodcastBlock({ onNav }) {
  return (
    <section className="kh2-pod" data-screen-label="K5 Knowhub Podcast">
      <div className="shell" style={{ padding: 0 }}>
        <header className="kh2-sec-head">
          <span className="kh2-eyebrow mono">talk for walk · podcast</span>
          <h2 className="kh2-sec-h">Tom &amp; Ivo<br /><em>do uší.</em></h2>
          <p className="kh2-sec-sub">Nový díl každé dva týdny. {KH_PODCAST_LATEST.num}+ epizod. Spotify, YouTube, Apple Podcasts.</p>
        </header>

        <article className="kh2-pod__feat" data-reveal>
          <div className="kh2-pod__feat-cover">
            <img src={KH_PODCAST_LATEST.cover} alt="" />
            <button className="kh2-pod__play" aria-label="Přehrát"><span>▶</span></button>
          </div>
          <div className="kh2-pod__feat-body">
            <span className="mono kh2-pod__feat-num">epizoda #{KH_PODCAST_LATEST.num} · {KH_PODCAST_LATEST.date} · {KH_PODCAST_LATEST.duration}</span>
            <h3 className="kh2-pod__feat-title">{KH_PODCAST_LATEST.title}</h3>
            <p className="kh2-pod__feat-guest">host · <strong>{KH_PODCAST_LATEST.guest}</strong></p>
            <p className="kh2-pod__feat-desc">{KH_PODCAST_LATEST.description}</p>
            <div className="kh2-pod__plats">
              <a className="kh2-pod__plat" href="#" onClick={(e) => e.preventDefault()}>Spotify ↗</a>
              <a className="kh2-pod__plat" href="#" onClick={(e) => e.preventDefault()}>YouTube ↗</a>
              <a className="kh2-pod__plat" href="#" onClick={(e) => e.preventDefault()}>Apple ↗</a>
            </div>
          </div>
        </article>

        <ul className="kh2-pod__list">
          {KH_PODCAST_EPISODES.map((ep, i) =>
          <li key={ep.num}>
              <a className="kh2-pod__item" href="#" onClick={(e) => e.preventDefault()}
            data-reveal style={{ "--reveal-delay": `${i * 60}ms` }}>
                <span className="kh2-pod__item-num mono">#{ep.num}</span>
                <div className="kh2-pod__item-body">
                  <h4 className="kh2-pod__item-title">{ep.title}</h4>
                  <span className="kh2-pod__item-meta mono">{ep.guest} · {ep.date} · {ep.duration}</span>
                </div>
                <span className="kh2-pod__item-play">▶</span>
              </a>
            </li>
          )}
        </ul>

        <div className="kh2-pod__foot">
          <a className="btn btn--ghost" href="#" onClick={(e) => {e.preventDefault();onNav('knowhub-category');}}>
            Všechny epizody <span className="arrow">↗</span>
          </a>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────
//  NEWSLETTER — klidná závěrečná konverze
// ─────────────────────────────────────────────
function KhNewsletter({ onNav }) {
  return (
    <section className="kh2-news" data-screen-label="K6 Knowhub Newsletter">
      <div className="shell" style={{ padding: 0 }}>
        <div className="kh2-news__inner">
          <div className="kh2-news__copy">
            <span className="kh2-eyebrow mono">newsletter</span>
            <h2 className="kh2-news__h">
              Jeden mail za 14 dní.<br /><em>Newsletter, který tě posouvá.</em>
            </h2>
            <p className="kh2-news__lead">
              Co jsme viděli na projektech, čemu jsme se naučili, na co se chystáme.
              Pokud na chvíli zmizíš, nezavoláme. Odhlásit se dá kdykoli.
            </p>
            <form className="kh2-news__form" onSubmit={(e) => e.preventDefault()}>
              <input type="email" placeholder="vase@firma.cz" required />
              <button type="submit" className="btn btn--coral">Odebírat <span className="arrow">↗</span></button>
            </form>
            <p className="kh2-news__pp mono">odesláním souhlasíš se zpracováním e-mailu jen pro účely zasílání newsletteru.</p>
          </div>

          <aside className="kh2-news__or kh-justcta">
            <span className="kh-justcta__lbl mono">— nebo rovnou —</span>
            <h3 className="kh-justcta__h">hodina s&nbsp;<em>Tomášem</em><br />zdarma.</h3>
            <p className="kh-justcta__lede">
              Nejrychlejší cesta zjistit, jestli si máme co říct. Žádná prezentace, žádný sales pitch — tvůj konkrétní problém, můj konkrétní názor.
            </p>

            <div className="kh-justcta__person">
              <div className="kh-justcta__avatar">
                <img src="./assets/tom-2.jpg" alt="Tomáš Pohl" />
              </div>
              <div>
                <div className="kh-justcta__name">Tomáš Pohl</div>
                <div className="kh-justcta__role mono">CEO &amp; founder · Justmighty</div>
              </div>
            </div>

            <div className="kh-justcta__cta">
              <button className="btn btn--coral" onClick={() => onNav('justask')}>
                Rezervovat hodinu <span className="arrow">↗</span>
              </button>
              <span className="kh-justcta__next mono">další volný termín · 23. 5.</span>
            </div>
          </aside>
        </div>
      </div>
    </section>);

}

// === HLAVNÍ PORTÁL ===
function KnowhubPage({ onNav }) {
  useReveal();
  const [filter, setFilter] = useStateKH('all');
  return (
    <>
      <KhHero onNav={onNav} onFilter={setFilter} />
      <KhCalendar events={KH_EVENTS} filter={filter} setFilter={setFilter} onNav={onNav} />
      <KhFlagship onNav={onNav} />
      <KhPodcastBlock onNav={onNav} />
      <KhNewsletter onNav={onNav} />
      <Footer />
    </>);

}

window.KnowhubPage = KnowhubPage;
window.khFmtDate = khFmtDate;
window.khFmtTime = khFmtTime;
window.khRelDay = khRelDay;