/* eslint-disable */
// FAQs, content brief v4 §7. Eight questions in the brief's deliberate order,
// answers verbatim. Accordion, FAQPage structured data, linkable anchor per question.

const SITE_FAQS = [
  {
    id: "get-started",
    q: "How do we get started with AI in our business?",
    a: "Start with three things in balance: work out where AI genuinely adds value for you, put simple controls in place so it's used safely, and give your people hands-on time with the tools so confidence grows. Most organisations that struggle with AI skipped one of the three. You don't need a big program to begin; you need a deliberate first step, and knowing which step that is depends on where your organisation is today.",
  },
  {
    id: "what-consultancy-does",
    q: "What does an AI consultancy actually do?",
    a: "A good one helps you answer three questions: where AI adds value in your organisation, how to use it safely, and how to bring your people along. In practice that means workshops and planning, governance documents your board and staff can actually use, hands-on training, and sometimes building AI tools and agents for you. The point isn't the technology itself; it's getting your organisation to the place where AI is quietly doing useful work.",
  },
  {
    id: "policy-first",
    q: "Do we need an AI policy before our staff use AI tools?",
    a: "If your staff have access to AI tools, they're almost certainly already using them, so the real question is whether they're doing it safely. A simple, clear policy protects your organisation and your people: which tools are approved, what information can and can't go into them, and who to ask when something's unclear. It doesn't need to be long, but it needs to exist, and your leadership needs to stand behind it.",
  },
  {
    id: "data-safe",
    q: "Is our data safe if staff use AI?",
    a: "It can be, but it depends on which tools you use and how they're set up. Business-grade AI tools can be configured so your data isn't used to train the models and stays within your organisation's environment, while free consumer tools often offer no such protection. The biggest risk in most organisations isn't the technology; it's staff pasting sensitive information into unapproved tools because nobody has given them a safe, approved alternative. The fix is choosing the right tools, setting them up properly, and making the safe path the easy path.",
  },
  {
    id: "which-tool",
    q: "Which AI tool should our business use: Copilot, Claude, ChatGPT or Gemini?",
    a: "It depends on your organisation more than on the tools. The platforms are genuinely close in capability, so the deciding factors are usually where your data lives, which ecosystem your team already works in, your security and compliance needs, and what you want AI to actually do for you. For many Microsoft 365 organisations Copilot is the natural fit; for others, Claude or another platform serves better. Choosing deliberately, rather than by default, is the part that matters. Our AI Toolbox covers the tools we've evaluated, if you'd like to explore.",
    link: { label: "See the AI Toolbox", to: "toolbox" },
  },
  {
    id: "how-long",
    q: "How long does AI adoption take?",
    a: "Useful results come quickly; lasting change takes longer. A team can be getting real value from an AI tool within weeks of proper training, and the groundwork of choosing tools, setting controls and building early confidence typically takes a couple of months. But adoption isn't an event, it's a capability your organisation grows, and the organisations that do best treat the first engagement as the start of a habit rather than a project with an end date.",
  },
  {
    id: "our-size",
    q: "Do you work with organisations our size?",
    a: "Almost certainly. We work with organisations from small professional practices to multi-state groups, and our engagements are shaped to fit: the essentials are the same at every size, but the depth changes. A ten-person firm doesn't need what a two-hundred-person organisation needs, and we'd never suggest otherwise.",
  },
  {
    id: "our-industry",
    q: "Do you work in our industry?",
    a: "Very likely. We've delivered across hospitality, allied health, architecture, water, logistics, construction and more, and the approach travels because it starts with how your organisation actually works rather than with an industry template. What changes by industry is the detail: your regulatory environment, your data sensitivities, and the tools that fit your world. We learn those with you.",
  },
];

function FaqsScreen({ go, t }) {
  // Deep link: #faqs opens nothing; a question anchor opens that question.
  const initial = SITE_FAQS.findIndex((f) => window.location.hash.includes(f.id));
  const [open, setOpen] = React.useState(initial > -1 ? initial : 0);

  React.useEffect(() => {
    const el = document.createElement("script");
    el.type = "application/ld+json";
    el.dataset.faq = "site";
    el.textContent = JSON.stringify({
      "@context": "https://schema.org", "@type": "FAQPage",
      mainEntity: SITE_FAQS.map((f) => ({
        "@type": "Question", name: f.q,
        acceptedAnswer: { "@type": "Answer", text: f.a },
      })),
    });
    document.head.appendChild(el);
    return () => el.remove();
  }, []);

  return (
    <div data-screen-label="07 FAQs">
      <section className="hero dot-grid acc-hero">
        <div className="container">
          <Crumbs items={[{ label: "Home", to: "home" }, "FAQs"]} go={go} />
          <h1 className="h-display" style={{ maxWidth: "16ch" }}>Questions we're <em>often asked</em></h1>
          <p className="lede" style={{ maxWidth: "56ch" }}>
            Straight answers, in plain language. If your question isn't here, it's probably a good
            conversation starter.
          </p>
        </div>
      </section>

      <section className="section section--white" style={{ paddingTop: 40 }}>
        <div className="container">
          <div className="qa-list">
            {SITE_FAQS.map((f, i) => (
              <div key={f.id} id={`faq-${f.id}`} className={`qa-item${open === i ? " is-open" : ""}`}>
                <button className="qa-q" onClick={() => setOpen(open === i ? null : i)} aria-expanded={open === i}>
                  <span className="qa-n">{String(i + 1).padStart(2, "0")}</span>
                  <span className="qa-t">{f.q}</span>
                  <Icon name={open === i ? "minus" : "plus"} size={19} color="var(--ia-blue)" />
                </button>
                {open === i && (
                  <div className="qa-a">
                    <p>{f.a}</p>
                    {f.link && <LinkOut onClick={() => go(f.link.to)}>{f.link.label}</LinkOut>}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section section--paper" style={{ paddingTop: 32, paddingBottom: 88 }}>
        <div className="container">
          <div className="hww-closer">
            <p className="hww-closer-t">
              Have a question we haven't answered? <em>That's a good conversation to start.</em>
            </p>
            <Button variant="primary" size="lg" onClick={() => go("contact")}>
              Talk to us <Icon name="arrow-right" size={16} className="arrow" />
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
}

window.FaqsScreen = FaqsScreen;
window.SITE_FAQS = SITE_FAQS;
