/* pages-wiki.jsx — Wissensbereich / Wiki (DE default, EN optional) */

function WikiPage({ onNav }) {
  const [lang, setLang] = useStore('rs.wiki.lang', 'de');
  const [openFaq, setOpenFaq] = useState(0);
  const [q, setQ] = useState('');
  const ui = WIKI_UI[lang];

  const cats = WIKI_CATS.map(c => ({
    ...c,
    arts: c.arts.filter(a => !q || a.t[lang].toLowerCase().includes(q.toLowerCase())),
  })).filter(c => !q || c.arts.length || c.name[lang].toLowerCase().includes(q.toLowerCase()));

  return (
    <main>
      <Breadcrumb trail={[{ label: 'Start', id: 'start' }, { label: ui.title }]} onNav={onNav} />
      <div className="page-head">
        <div className="wrap wiki-head">
          <div>
            <span className="eyebrow">{ui.eyebrow}</span>
            <h1>{ui.title}</h1>
            <p className="page-head__lead">{ui.lead}</p>
          </div>
          <div className="lang-switch" role="group" aria-label="Sprache">
            {['de', 'en'].map(l => (
              <button key={l} className={lang === l ? 'is-active' : ''} onClick={() => setLang(l)}>
                {l.toUpperCase()}
              </button>
            ))}
          </div>
        </div>
        <div className="wrap">
          <label className="wiki-search">
            <Icon name="search" size={18} />
            <input value={q} onChange={e => setQ(e.target.value)} placeholder={ui.search} />
          </label>
        </div>
      </div>

      <div className="wrap section" style={{ paddingTop: '2rem' }}>
        <div className="wiki-grid">
          {cats.map(c => (
            <section key={c.id} className="wiki-cat card" data-tint={c.tint || 'oliv'}>
              <header className="wiki-cat__head">
                <span className="wiki-cat__icon"><Icon name={c.icon} size={22} /></span>
                <div>
                  <h2>{c.name[lang]}</h2>
                  <p className="muted">{c.blurb[lang]}</p>
                </div>
              </header>
              <ul className="wiki-arts">
                {c.arts.map((a, i) => (
                  <li key={i}>
                    <button className="wiki-art">
                      <span className="wiki-art__main">
                        <span className="wiki-art__t">{a.t[lang]}</span>
                        {a.tag && <span className="chip">{a.tag[lang]}</span>}
                      </span>
                      <span className="wiki-art__meta mono">
                        <Icon name="clock" size={13} /> {a.min} min
                        <Icon name="chevronRight" size={15} className="wiki-art__arrow" />
                      </span>
                    </button>
                  </li>
                ))}
                {!c.arts.length && <li className="wiki-empty mono">Keine Treffer</li>}
              </ul>
            </section>
          ))}
        </div>

        <section className="wiki-faq">
          <h2 className="wiki-faq__title">{ui.faqTitle}</h2>
          <div className="faq-list">
            {WIKI_FAQ.map((f, i) => (
              <article key={i} className={`faq-item card ${openFaq === i ? 'is-open' : ''}`}>
                <button className="faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)} aria-expanded={openFaq === i}>
                  <span>{f.q[lang]}</span>
                  <Icon name="chevronDown" size={18} className="faq-chev" />
                </button>
                <div className="faq-a"><p>{f.a[lang]}</p></div>
              </article>
            ))}
          </div>
        </section>
      </div>
    </main>
  );
}

Object.assign(window, { WikiPage });