/* ============================================================
   Digital Odyssey, FAQ page (all questions, by category)
   ============================================================ */

function FaqApp() {
  useReveal();
  const [active, setActive] = React.useState(FAQ_CATEGORIES[0].id);

  React.useEffect(() => {
    const ids = FAQ_CATEGORIES.map((c) => c.id);
    const onScroll = () => {
      let cur = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top <= 140) cur = id;
      }
      setActive(cur);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <>
      <TopNav active="" />
      <main>
        <PageHero eyebrow="FAQ" title="Everything you might ask, in one place."
          body="The questions we hear most from businesses weighing up a growth partner, budget, results, how we work, and whether we are the right fit. Still unsure? Just ask." align="center" />

        <section className="section">
          <Container>
            <div className="split" style={{ gridTemplateColumns: '240px 1fr', gap: 56, alignItems: 'flex-start' }}>
              {/* Category nav */}
              <nav className="reveal legal-toc" style={{ position: 'sticky', top: 100 }}>
                <div className="eyebrow" style={{ marginBottom: 16 }}>Categories</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 4 }}>
                  {FAQ_CATEGORIES.map((c) => {
                    const on = active === c.id;
                    return (
                      <li key={c.id}>
                        <a href={`#${c.id}`} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '10px 12px', borderRadius: 'var(--radius-md)',
                          background: on ? 'var(--chip-bg)' : 'transparent', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14.5,
                          color: on ? 'var(--text)' : 'var(--text-2)', transition: 'all .15s ease' }}>
                          <Icon name={c.icon} size={18} color={on ? 'var(--cyan-deep)' : 'var(--text-3)'} />{c.title}
                        </a>
                      </li>
                    );
                  })}
                </ul>
                <div className="do-card" style={{ marginTop: 24, padding: 20 }}>
                  <div className="do-title-sm" style={{ marginBottom: 6 }}>Still have a question?</div>
                  <p className="do-body-sm" style={{ margin: '0 0 14px' }}>We will give you a straight answer.</p>
                  <Button href="contact.html" variant="primary" size="sm" full icon="arrow-right">Ask us</Button>
                </div>
              </nav>

              {/* Categories */}
              <div style={{ minWidth: 0 }}>
                {FAQ_CATEGORIES.map((c, ci) => (
                  <section key={c.id} id={c.id} style={{ scrollMarginTop: 96, marginTop: ci === 0 ? 0 : 56 }}>
                    <div className="reveal" style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
                      <div style={{ width: 46, height: 46, borderRadius: 12, background: 'var(--chip-bg)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                        <Icon name={c.icon} size={21} color="var(--cyan-deep)" />
                      </div>
                      <h2 className="do-display-sm" style={{ margin: 0 }}>{c.title}</h2>
                    </div>
                    <FaqAccordion items={c.items} defaultOpen={ci === 0 ? 0 : -1} />
                  </section>
                ))}
              </div>
            </div>
          </Container>
        </section>

        <CtaBand title="Didn't find your answer?" body="Tell us what you are weighing up. A real strategist will give you a straight, no-pressure answer, usually within a business day." primary="Ask us anything" secondary="See the work" />
      </main>
      <Footer />
    </>
  );
}

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