// ============================================================
// Tribeca Lisboa — FAQ page app (main website, bilingual)
// Hero + search + sticky category nav + accordion. Search filters
// across questions AND answers; category nav scroll-jumps + spies.
// Reuses SiteHeader / RFooter / SiteMenuDrawer.
// ============================================================
const { useState: useStateFQ, useRef: useRefFQ, useEffect: useEffectFQ, useMemo: useMemoFQ } = React;

function FqSearchIcon() {
  return <svg viewBox="0 0 20 20" width="18" height="18" fill="none" aria-hidden="true"><circle cx="9" cy="9" r="6" stroke="currentColor" strokeWidth="1.6" /><path d="M14 14l4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>;
}
function FqCatIcon({ name }) {
  const p = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'star': return <svg viewBox="0 0 24 24"><path {...p} d="M12 3l2.5 5.5L20 9l-4 4 1 6-5-3-5 3 1-6-4-4 5.5-.5z" /></svg>;
    case 'ticket': return <svg viewBox="0 0 24 24"><path {...p} d="M3 8a2 2 0 012-2h14a2 2 0 012 2 2 2 0 000 4 2 2 0 010 4H5a2 2 0 01-2-2 2 2 0 000-4 2 2 0 01-2-2z" /><path {...p} d="M15 6v12" /></svg>;
    case 'grid': return <svg viewBox="0 0 24 24"><rect {...p} x="4" y="4" width="7" height="7" /><rect {...p} x="13" y="4" width="7" height="7" /><rect {...p} x="4" y="13" width="7" height="7" /><rect {...p} x="13" y="13" width="7" height="7" /></svg>;
    case 'pin': return <svg viewBox="0 0 24 24"><path {...p} d="M12 21s7-5.5 7-11a7 7 0 10-14 0c0 5.5 7 11 7 11z" /><circle {...p} cx="12" cy="10" r="2.5" /></svg>;
    case 'access': return <svg viewBox="0 0 24 24"><circle {...p} cx="12" cy="4.5" r="1.8" /><path {...p} d="M5 8h14M12 8v7M12 15l-3 5M12 15l3 5" /></svg>;
    case 'mail': return <svg viewBox="0 0 24 24"><rect {...p} x="3" y="5" width="18" height="14" /><path {...p} d="M3 7l9 6 9-6" /></svg>;
    default: return null;
  }
}

// highlight matched query inside text
function fqHighlight(text, q) {
  if (!q) return text;
  const i = text.toLowerCase().indexOf(q.toLowerCase());
  if (i === -1) return text;
  return [text.slice(0, i), <mark className="fq-hl" key="h">{text.slice(i, i + q.length)}</mark>, text.slice(i + q.length)];
}

function FqItem({ q, a, open, onToggle, query }) {
  const wrapRef = useRefFQ(null);
  const innerRef = useRefFQ(null);
  useEffectFQ(() => {
    const wrap = wrapRef.current; if (!wrap) return;
    if (open) {
      wrap.style.height = innerRef.current.offsetHeight + 'px';
      const t = setTimeout(() => { if (wrap.style.height !== '0px') wrap.style.height = 'auto'; }, 300);
      return () => clearTimeout(t);
    } else {
      wrap.style.height = innerRef.current.offsetHeight + 'px';
      void wrap.offsetHeight;
      wrap.style.height = '0px';
    }
  }, [open]);
  return (
    <div className={`fq-item ${open ? 'is-open' : ''}`}>
      <button className="fq-q" aria-expanded={open} onClick={onToggle}>
        <span>{fqHighlight(q, query)}</span>
        <span className="fq-q-mark" aria-hidden="true"></span>
      </button>
      <div className="fq-a-wrap" ref={wrapRef} style={{ height: 0 }}>
        <div className="fq-a" ref={innerRef}><p>{fqHighlight(a, query)}</p></div>
      </div>
    </div>
  );
}

function FaqInner() {
  const lang = useCtx(LangContext);
  const [menu, setMenu] = useStateFQ(false);
  const [query, setQuery] = useStateFQ('');
  const [openId, setOpenId] = useStateFQ(null);
  const [active, setActive] = useStateFQ(FAQ[0].id);
  const q = query.trim().toLowerCase();

  // filter categories/items by query (matches question OR answer)
  const cats = useMemoFQ(() => {
    if (!q) return FAQ.map((c) => ({ ...c, _items: c.items }));
    return FAQ.map((c) => {
      const _items = c.items.filter((it) =>
        `${it.qEn} ${it.qPt} ${it.aEn} ${it.aPt}`.toLowerCase().includes(q));
      return { ...c, _items };
    }).filter((c) => c._items.length > 0);
  }, [q]);

  const totalResults = cats.reduce((n, c) => n + c._items.length, 0);

  // scroll-spy for active category (only when not searching)
  useEffectFQ(() => {
    if (q) return;
    const onScroll = () => {
      const mark = (window.innerHeight || 0) * 0.3 + 120;
      let cur = FAQ[0].id;
      for (const c of FAQ) {
        const el = document.getElementById('fq-c-' + c.id);
        if (el && el.getBoundingClientRect().top <= mark) cur = c.id;
      }
      setActive(cur);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, [q]);

  const jumpTo = (id) => {
    const el = document.getElementById('fq-c-' + id);
    if (el) {
      const hdr = (parseInt(getComputedStyle(document.documentElement).getPropertyValue('--hdr-h')) || 82) + 70;
      window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - hdr, behavior: 'smooth' });
    }
  };

  const toggle = (id) => setOpenId((cur) => (cur === id ? null : id));

  return (
    <div className="fq-page">
      <SiteHeader onMenu={() => setMenu(true)} />

      <header className="fq-hero">
        <div className="r-wrap">
          <div className="fq-eyebrow">{tt(lang, 'Help Centre', 'Centro de Ajuda')}</div>
          <h1 className="fq-h1">{tt(lang, 'Frequently Asked Questions', 'Perguntas Frequentes')}</h1>
          <p className="fq-intro">{tt(lang,
            'Find answers to the most common questions about Tribeca Festival Lisboa.',
            'Encontra respostas às perguntas mais comuns sobre o Tribeca Festival Lisboa.')}</p>
          <div className="fq-search">
            <FqSearchIcon />
            <input type="search" value={query} onChange={(e) => setQuery(e.target.value)}
              placeholder={tt(lang, 'Search questions and answers', 'Procurar perguntas e respostas')}
              aria-label={tt(lang, 'Search FAQs', 'Procurar nas perguntas frequentes')} />
            {query && <button className="fq-search-clear" onClick={() => setQuery('')} aria-label={tt(lang, 'Clear', 'Limpar')}>✕</button>}
          </div>
        </div>
      </header>

      {/* sticky category nav removed per request */}

      <main className="fq-body">
        <div className="r-wrap">
          <div className="fq-layout">
            <div className="fq-cats">
              {q && totalResults === 0 && (
                <div className="fq-empty">
                  <div className="fq-empty-h">{tt(lang, 'No results', 'Sem resultados')}</div>
                  <p>{tt(lang, 'Try a different word, or browse the categories.', 'Tenta outra palavra, ou explora as categorias.')}</p>
                </div>
              )}
              {q && totalResults > 0 && (
                <p className="fq-intro" style={{ marginTop: 0, marginBottom: 24 }}>
                  {totalResults} {tt(lang, totalResults === 1 ? 'result' : 'results', totalResults === 1 ? 'resultado' : 'resultados')}
                </p>
              )}
              {cats.map((c) => (
                <section className="fq-cat" id={'fq-c-' + c.id} key={c.id}>
                  <div className="fq-cat-head">
                    <span className="fq-cat-icon"><FqCatIcon name={c.icon} /></span>
                    <h2 className="fq-cat-title">{tt(lang, c.titleEn, c.titlePt)}</h2>
                  </div>
                  <div className="fq-list">
                    {c._items.map((it, i) => {
                      const id = c.id + '-' + i;
                      return <FqItem key={id} open={openId === id || (!!q)} onToggle={() => toggle(id)}
                        q={tt(lang, it.qEn, it.qPt)} a={tt(lang, it.aEn, it.aPt)} query={query.trim()} />;
                    })}
                  </div>
                </section>
              ))}
            </div>
          </div>
        </div>
      </main>

      <RFooter />
      <SiteMenuDrawer open={menu} onClose={() => setMenu(false)} />
    </div>
  );
}

function Faq() {
  const [lang] = useLang();
  return (
    <LangContext.Provider value={lang}>
      <FaqInner />
    </LangContext.Provider>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Faq />);