// knowhub-category.jsx — podstránka kategorie (např. Školení)
function KhCategoryPage({ onNav }) {
  useReveal();
  const [tag, setTag] = useStateKH('vše');
  const [format, setFormat] = useStateKH('vše');
  const [level, setLevel] = useStateKH('vše');

  // Mock list — školení (rozšířený)
  const items = [
    { id:'holky-14', title:'Holky z marketingu #14 — onpage SEO', date:'28. 5. 2026', place:'Brno · Anybody', price:'490 Kč', duration:'2 h', tags:['placené','pokročilý','offline','Brno'], level:'pokročilý', format:'offline' },
    { id:'holky-15', title:'Holky z marketingu #15 — analytika bez panických reakcí', date:'25. 6. 2026', place:'Brno · Anybody', price:'490 Kč', duration:'2 h', tags:['placené','začátek','offline','Brno'], level:'začátek', format:'offline' },
    { id:'positioning', title:'Otevřené školení — Positioning značky', date:'12. 6. 2026', place:'Praha · Pop Up', price:'4 900 Kč', duration:'1 den', tags:['placené','pokročilý','offline','Praha'], level:'pokročilý', format:'offline' },
    { id:'b2b-online', title:'Otevřené školení — B2B marketing v praxi', date:'18. 9. 2026', place:'online', price:'3 900 Kč', duration:'1 den', tags:['placené','pokročilý','online'], level:'pokročilý', format:'online' },
    { id:'firemni-workshop', title:'Firemní workshop — strategie & priority', date:'na míru', place:'u vás · Brno · Praha', price:'od 89 000 Kč', duration:'1–2 dny', tags:['placené','pokročilý','firemní'], level:'pokročilý', format:'offline' },
    { id:'web-pripravena', title:'Otevřené školení — Web připravený k růstu', date:'15. 10. 2026', place:'Brno · Anybody', price:'4 900 Kč', duration:'1 den', tags:['placené','začátek','offline','Brno'], level:'začátek', format:'offline' },
  ];

  const filtered = items.filter(it =>
    (tag==='vše' || it.tags.includes(tag)) &&
    (format==='vše' || it.format===format) &&
    (level==='vše' || it.level===level)
  );

  return (
    <>
      <section className="page-hero" data-screen-label="K2 Kategorie Hero">
        <img className="stone-deco" src="./assets/stone-render-2.png" alt="" style={{
          right:-100, top:-60, width:340, opacity:.4, transform:'rotate(-15deg)'
        }} />
        <div className="shell" style={{padding:0, position:'relative'}}>
          <h1 data-reveal>školení &amp; workshopy<span style={{color:'var(--coral)'}}>.</span></h1>
          <p data-reveal style={{"--reveal-delay":"160ms",maxWidth:'56ch',color:'#bdbdbd',marginTop:24,fontSize:17}}>
            Otevřená školení, firemní workshopy, Holky z marketingu. Praktické, neformální, s minimálním množstvím slidů.
            Nejčastěji vede Tomáš Pohl.
          </p>
        </div>
      </section>

      <section data-screen-label="K2 Kategorie Filter" style={{padding:'0 36px',maxWidth:1440,margin:'0 auto',width:'100%'}}>
        <div className="filterbar" data-reveal>
          <div className="filterbar__group">
            <span className="filterbar__lbl">Úroveň</span>
            {['vše','začátek','pokročilý'].map(s=>(
              <button key={s} className={"chip " + (level===s?'is-on':'')} onClick={()=>setLevel(s)}>{s}</button>
            ))}
          </div>
          <div className="filterbar__group">
            <span className="filterbar__lbl">Formát</span>
            {['vše','online','offline'].map(s=>(
              <button key={s} className={"chip " + (format===s?'is-on':'')} onClick={()=>setFormat(s)}>{s}</button>
            ))}
          </div>
          <div className="filterbar__group">
            <span className="filterbar__lbl">Tag</span>
            {['vše','placené','zdarma','Brno','Praha','firemní'].map(s=>(
              <button key={s} className={"chip " + (tag===s?'is-on':'')} onClick={()=>setTag(s)}>{s}</button>
            ))}
          </div>
          <span className="filterbar__count">{String(filtered.length).padStart(2,'0')} / {items.length}</span>
        </div>
      </section>

      <section className="kh-cat-list" data-screen-label="K2 Kategorie List">
        <div className="shell" style={{padding:0}}>
          {filtered.map((it,i)=>(
            <a key={it.id} className="kh-cat-row" href="#" onClick={(e)=>{e.preventDefault();onNav('knowhub-event')}}
               data-reveal style={{"--reveal-delay": `${i*60}ms`}}>
              <span className="kh-cat-row__num">{String(i+1).padStart(2,'0')}</span>
              <div className="kh-cat-row__date">
                <strong>{it.date}</strong>
                <span className="mono">{it.duration}</span>
              </div>
              <div className="kh-cat-row__body">
                <h3>{it.title}</h3>
                <div className="kh-cat-row__tags">
                  {it.tags.map((t,j)=>(<span key={j}>{t}</span>))}
                </div>
              </div>
              <div className="kh-cat-row__place mono">{it.place}</div>
              <div className="kh-cat-row__price">{it.price}</div>
              <span className="kh-cat-row__cta">přihlásit ↗</span>
            </a>
          ))}
          {filtered.length===0 && (
            <div style={{padding:'80px 24px',textAlign:'center',color:'var(--muted-2)',fontSize:18}}>
              Pro tuto kombinaci nic nemáme. Zkus jiný filtr — nebo nám napiš.
            </div>
          )}
        </div>
      </section>

      <KhFunnel onNav={onNav} />
      <Footer />
    </>
  );
}

window.KhCategoryPage = KhCategoryPage;