function FAQ() {
  const items = [
    { q: "Is Clearmetric a BI tool?", a: "No. Traditional BI is dashboard-first — each report restates its own logic. Clearmetric is definition-first. Canvas is a governed exploration surface on top of approved definitions, not a general dashboard builder." },
    { q: "Is Clearmetric a data catalog?", a: "No. Catalogs document metadata passively for humans to search. Clearmetric makes definitions executable — bound to tables, consumed by Canvas workflows, and exposed to AI agents through MCP." },
    { q: "Is Clearmetric a semantic layer?", a: "It includes one, but it's more than that. Semantic layers define metrics in SQL for BI tools. Clearmetric adds business context — descriptions, ownership, domains — and exposes the same contract to AI agents, not just BI." },
    { q: "Do I need to replace my warehouse or dbt?", a: "No. Clearmetric sits on top of your stack. It reads metadata and maps definitions to your existing tables, columns, measures, and dbt models. No row-level data leaves your warehouse." },
    { q: "What is MCP and why does it matter?", a: "Model Context Protocol is the emerging open standard for how AI agents fetch context — 76% of software providers are adopting it. Clearmetric ships an MCP server so any AI assistant grounds answers in your approved definitions instead of guessing from raw tables." },
    { q: "Who owns a definition?", a: "Every definition has an owner — typically the domain team that sets the policy (Finance, RevOps, Marketing). Changes go through an approval workflow and are versioned." },
    { q: "Where does lineage fit in?", a: "Lineage is the trust infrastructure underneath the platform. It shows where definitions connect to source systems and what depends on them. Teams that need dependency visibility first can start with a narrower lineage package and upgrade to the full Defined Intelligence platform later." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="wrap">
        <SectionHead num="08" kicker="Frequently asked">
          Everything teams want to know before a pilot.
        </SectionHead>
        <div className="faq">
          {items.map((it, i) => (
            <div key={i} className={"faq__item " + (open === i ? "open" : "")}>
              <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                {it.q}
                <span className="faq__plus">+</span>
              </button>
              <div className="faq__a"><div className="faq__a-inner">{it.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;