// FAQ page
const FAQ_SECTIONS = [
  {
    title: "Getting started",
    items: [
      ["How do I actually start working with you?",
        "Book a free discovery call about a bespoke build. We'll dig into what you need and come back with a fixed-price proposal you can take or leave — no sales pipeline, no chase emails. If you'd rather build it yourself, you can also join the platform waitlist and we'll email when a slot opens (typical wait 4–8 weeks)."],
      ["Why is there a waitlist for the platform?",
        "Because we'd rather have happy customers than busy customers. We onboard about a dozen new tenants per quarter so everyone gets real human time during setup. Existing customers can refer you to the front of the queue."],
      ["Do I have to use the platform if I want a bespoke build?",
        "No — but the people who do get a faster, cheaper, more maintainable result. The platform handles 80% of what every business app needs (auth, payments, multi-tenancy, audit, comms) so we can spend our time on the 20% that's actually unique to you."],
      ["What if I just want a one-off prototype?",
        "Pilot engagements are designed exactly for that — 2–4 weeks, one core flow, working software at the end. If you decide to take it further, the prototype rolls into the production build. If you don't, you've still got something to show."],
    ],
  },
  {
    title: "Pricing & contracts",
    items: [
      ["How much does a bespoke build cost?",
        "Cost scales with scope. We don't publish a fixed price list because every project is shaped differently — the discovery call is where we figure out which engagement type fits."],
      ["What's the platform subscription?",
        "Pricing is set per tenant once you're onboarded — it depends on user count, data volume and the integrations you need. Existing customers tell us we're priced well below the equivalent custom build, with the upside of inheriting platform updates automatically."],
      ["Do I own what you build for me?",
        "Yes. The application is yours — source, schema, data, configuration. The platform underneath is licensed, the same way every SaaS works. There's no exit fee and no lock-in beyond the platform itself."],
      ["Can my own developers work on it after handover?",
        "Absolutely. The visual builder gives non-developers most of what they need; for the rest, we provide source access and SDK docs. Several of our customers run their own roadmap with us as a back-stop."],
    ],
  },
  {
    title: "Security & compliance",
    items: [
      ["Where is my data hosted?",
        "UK data centres by default, with EU and US regions on request. We're an approved supplier on Crown Commercial frameworks and have hosted NHS clinical workloads for over a decade — the security posture is built for that bar."],
      ["Are you GDPR compliant?",
        "Yes. The platform ships with audit trails, consent management, configurable retention, right-to-erasure tooling and data export — all the things that make a Data Protection Officer's life easier. See the security page for the full list."],
      ["Can you sign our supplier security questionnaire?",
        "We do them constantly. We have a standing answer pack covering ISO 27001 controls, OWASP, BS 10012, NHS DSPT and most large-enterprise security questionnaires. Send it over and we'll usually turn it round in a few days."],
      ["What about pen-testing?",
        "CREST-certified pen tests are run annually plus on every major release. Reports are available under NDA for customers and prospects."],
    ],
  },
  {
    title: "How we work",
    items: [
      ["Where are you based?",
        "England, with engineers across the UK. All work is done in UK working hours by people you can actually meet."],
      ["Do you outsource anything?",
        "No. Every line of code, every customer call, every support ticket is handled in-house. That's a deliberate choice — it's how we keep quality up and overhead down."],
      ["What does support look like?",
        "Support is built into every app we ship. Our own ITSM is integrated directly into your software, so you can log a change request, feature idea or bug report without ever leaving the app you're using — it lands straight with the engineers who built it. No separate portal, no tier-1 queue, no offshore call centre."],
    ],
  },
  {
    title: "Technical",
    items: [
      ["What's the tech stack?",
        "A PHP runtime on AWS, Aurora MySQL with Redis caching, S3 for storage. The visual builder generates code, schemas and infrastructure so you rarely need to touch the underlying layers."],
      ["Can I integrate with my existing systems?",
        "Yes — REST and webhook integrations are built in, plus pre-built connectors for Stripe, SendGrid, Microsoft 365, Active Directory, Google Workspace and the major cloud SDKs. Custom integrations are part of every bespoke engagement."],
      ["What's the uptime SLA?",
        "99.9% on standard plans, with higher tiers available for clinical and government workloads. Status page is live and historical."],
      ["Do you have an API?",
        "Every datastore is automatically a REST API with auth, pagination, filtering and audit. There's also an SDK if you'd rather write integration logic in code than the visual builder."],
    ],
  },
];

function FAQPage({ onNavigate }) {
  const [open, setOpen] = React.useState(null);
  const [filter, setFilter] = React.useState("");

  const filtered = FAQ_SECTIONS.map(s => ({
    ...s,
    items: s.items.filter(([q, a]) =>
      !filter || q.toLowerCase().includes(filter.toLowerCase()) || a.toLowerCase().includes(filter.toLowerCase())
    ),
  })).filter(s => s.items.length);

  return (
    <div className="page">
      <section className="hero" style={{ paddingTop: 100, paddingBottom: 40 }}>
        <div className="aurora"><div className="blob"></div></div>
        <div className="aurora-grid"></div>
        <div className="container">
          <span className="eyebrow rise" data-d="1">FAQ</span>
          <h1 className="h-display rise" data-d="2" style={{ marginTop: 24, maxWidth: 1000 }}>
            Questions, <em style={{ fontFamily: "Instrument Serif, serif", fontWeight: 400 }}>answered.</em>
          </h1>
          <p className="lead rise" data-d="3" style={{ marginTop: 28, maxWidth: 600 }}>
            The things prospective customers ask us most often. Don't see yours? <button className="btn-link" onClick={() => onNavigate("contact")}>Get in touch</button> — we reply to every email.
          </p>
        </div>
      </section>

      <section style={{ paddingTop: 0, paddingBottom: 0 }}>
        <div className="container" style={{ maxWidth: 900 }}>
          <div style={{ position: "sticky", top: 80, zIndex: 5, background: "var(--bg)", paddingBlock: 16, marginBottom: 16 }}>
            <div style={{ position: "relative" }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ position: "absolute", left: 16, top: "50%", transform: "translateY(-50%)", color: "var(--fg-faint)" }}>
                <circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/>
              </svg>
              <input
                placeholder="Search the FAQ…"
                value={filter}
                onChange={(e) => setFilter(e.target.value)}
                style={{
                  width: "100%",
                  padding: "14px 14px 14px 44px",
                  border: "1px solid var(--line)",
                  borderRadius: 12,
                  background: "var(--bg-elev)",
                  color: "var(--fg)",
                  fontSize: 15,
                  fontFamily: "inherit",
                  outline: "none",
                }}
              />
            </div>
          </div>
        </div>
      </section>

      <section style={{ paddingTop: 16 }}>
        <div className="container" style={{ maxWidth: 900 }}>
          {filtered.map((section, si) => (
            <div key={section.title} style={{ marginBottom: 64 }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 24, paddingBottom: 16, borderBottom: "1px solid var(--line)" }}>
                <span className="mono" style={{ color: "var(--fg-faint)" }}>{String(si + 1).padStart(2, "0")}</span>
                <h2 className="h-medium" style={{ fontSize: 28 }}>{section.title}</h2>
              </div>
              {section.items.map(([q, a], i) => {
                const id = `${si}-${i}`;
                const isOpen = open === id;
                return (
                  <div key={id} style={{ borderBottom: "1px solid var(--line)" }}>
                    <button
                      onClick={() => setOpen(isOpen ? null : id)}
                      style={{
                        width: "100%",
                        padding: "20px 0",
                        background: "transparent",
                        border: "none",
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "center",
                        gap: 24,
                        textAlign: "left",
                        cursor: "pointer",
                        color: "var(--fg)",
                        fontFamily: "inherit",
                      }}
                    >
                      <span style={{ fontSize: 17, fontWeight: 500, letterSpacing: "-0.01em" }}>{q}</span>
                      <span style={{ flexShrink: 0, width: 28, height: 28, borderRadius: "50%", border: "1px solid var(--line)", display: "grid", placeItems: "center", transition: "all 0.2s", transform: isOpen ? "rotate(45deg)" : "none", background: isOpen ? "var(--fg)" : "transparent", color: isOpen ? "var(--bg)" : "var(--fg)" }}>
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14"/></svg>
                      </span>
                    </button>
                    {isOpen && (
                      <div style={{ paddingBottom: 24, paddingRight: 52, color: "var(--fg-muted)", fontSize: 15, lineHeight: 1.6 }}>
                        {a}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          ))}
          {!filtered.length && (
            <div style={{ padding: 48, textAlign: "center", border: "1px dashed var(--line)", borderRadius: 12, color: "var(--fg-muted)" }}>
              No matches. Try a different term, or <button className="btn-link" onClick={() => onNavigate("contact")}>ask us directly</button>.
            </div>
          )}
        </div>
      </section>

      {/* Still stuck */}
      <section className="section-dark">
        <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 48, flexWrap: "wrap" }}>
          <div>
            <h2 className="h-large" style={{ maxWidth: 600, marginBottom: 16 }}>Still got questions?</h2>
            <p style={{ color: "rgba(255,255,255,0.7)", fontSize: 17, maxWidth: 500 }}>
              We'd rather have a 20-minute conversation than write a five-page brochure. Pick a slot and we'll talk.
            </p>
          </div>
          <button className="btn btn-accent" onClick={() => onNavigate("contact")}>Book a call →</button>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { FAQPage });
