const QA = [
  {
    q: "Is this AI theory, or something I can actually run?",
    a: "Something you run. Every workflow shows the real tool output, lists the real steps, and ends in a ~15-minute Try-it on non-confidential sample data. If you can't run it, it doesn't ship.",
    open: true,
  },
  {
    q: "How is this different from a course?",
    a: "A course teaches concepts. This is a field guide of tested recipes you apply to your job this week. The recipes get rewritten as the tools change, not left sitting until next year.",
  },
  {
    q: "What does \"responsible by design\" actually mean?",
    a: "Every recipe includes data-handling rules, human-oversight steps, failure modes, and escalation paths. They sit in the template above Method, not in a footnote.",
  },
  {
    q: "Can I contribute a workflow after backing?",
    a: "Yes. Open contribution starts once the founding library is live. How contributors get paid is still being finalized before launch.",
  },
  {
    q: "Why subscribe instead of buy once?",
    a: "A one-time AI book goes stale in weeks. The $47/yr subscription funds ongoing updates as models and products move, often weekly or monthly.",
  },
  {
    q: "Why frame this around the American Dream?",
    a: "For most of the people writing and reading this guide, fluency with these tools is a practical ladder. Nobody in this book inherited their edge. They built it, one real skill at a time. We think this is the next one worth building.",
  },
];

export default function FAQ() {
  return (
    <section className="section faq" id="faq">
      <div className="wrap" style={{ maxWidth: "760px" }}>
        <h2 className="reveal">Frequently asked.</h2>
        <div className="qa reveal">
          {QA.map((x, i) => (
            <details key={i} open={x.open || undefined}>
              <summary>
                {x.q}
                <span className="pl" aria-hidden="true">+</span>
              </summary>
              <div className="ans">{x.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}