const { Button: QB, Card: QC, SectionHeader: QSH, Accordion: QAcc, CTABand: QCTA, Eyebrow: QE } = window.SoftVerxDesignSystem_6fd95b;
const Q = window.SX_DATA;

const FAQ_GROUPS = Q.faqGroups;

function FaqPage({ mobile }) {
  return (
    <main>
      <PageHero mobile={mobile} title="The questions that actually stall deals"
        lead="Answered directly, including the ones where the honest answer is that we do not know yet. If yours is not here, ask it on the call. We would rather argue about scope early than discover it in month four."
        actions={<><QB as="a" href="/about#start">Book a call</QB><QB as="a" href="/work" variant="secondary">See the delivery record</QB></>}
        meta={[{ l: "questions answered", v: FAQ_GROUPS.reduce((n, g) => n + g.items.length, 0) }, { l: "groups", v: FAQ_GROUPS.length }, { l: "programmes behind the answers", v: Q.projects.length }, { l: "since", v: 1999 }]} />
      {FAQ_GROUPS.map((g, i) => (
        <Section key={g.id} mobile={mobile} id={g.id} well={i % 2 === 1}>
          <div style={{ display: "grid", gap: mobile ? 24 : 40, gridTemplateColumns: mobile ? "1fr" : "minmax(0,4fr) minmax(0,8fr)", alignItems: "start" }}>
            <div>
              <h2 className="sx-h2">{g.label}</h2>
            </div>
            <QAcc items={g.items} />
          </div>
        </Section>
      ))}
      <QCTA className="sx-lit-band" mobile={mobile} title="Ask us the one that is not on this page" lead="A short call is usually enough to say whether we are the right fit and what an engagement would involve. No pitch deck." />
    </main>
  );
}

Object.assign(window, { FaqPage });