// Octopak website — FAQ (/faq)
const { ClosingCTA, SectionHead } = window;
const { FAQ_CATEGORIES } = window;
const { FAQItem } = window;

function FAQView({ onNavigate }) {
  return (
    <div>
      <section className="page-head">
        <div className="octo-container">
          <p className="octo-eyebrow">FAQ</p>
          <h1 className="page-head__title">Questions, answered.</h1>
          <p className="page-head__lead">Specific answers to the questions buyers actually ask. Each answer leads with the answer (built for AI answer engines).</p>
        </div>
      </section>

      <section className="section">
        <div className="octo-container octo-container--narrow">
          <div className="faq-cats">
            {FAQ_CATEGORIES.map((cat) => (
              <div className="faq-cat" key={cat.name}>
                <h2 className="faq-cat__name">{cat.name}</h2>
                <div className="faq-list">
                  {cat.items.map((it, i) => <FAQItem key={i} {...it} onNavigate={onNavigate} />)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <ClosingCTA onNavigate={onNavigate} title="Still have a question?"
        sub="Message us on WhatsApp or email hello@octopak.com. We reply within three business days, usually sooner." />
    </div>
  );
}

Object.assign(window, { FAQView });