canvas-frontend/src/scenes/Explainer.tsx

import { useApp } from "../state/store";
import { Branch, Layers, Pulse, Bot } from "../components/icons";

const SECTIONS = [
  {
    title: "What is FlowMaster?",
    eyebrow: "PHILOSOPHY",
    body:
      "FlowMaster treats business processes the same way engineers treat software: write it once as code, version-control every change, deploy it like an app, execute it at runtime, and never delete anything. We call this Business-as-Code. A process is no longer a Visio diagram that gathers dust — it's a running program your whole company can read, change, and ship.",
  },
  {
    title: "Why this matters for your team",
    eyebrow: "THE BUSINESS CASE",
    body:
      "Because the process is code, you get the things software has had for thirty years: audit trails, rollbacks, A/B testing, code review, fast iteration. A store manager can request a new laptop, the request flows through approval, procurement, and 3-way match — and every step is the same composable element. Nobody has to rebuild the same form five times.",
  },
  {
    title: "Five element types",
    eyebrow: "EA2 ARCHITECTURE",
    body:
      "Every process is composed of five element types. Each answers one question.\n\n• Flow — what happens, and in what order\n• Data — what information is collected and produced\n• View — how a person sees and interacts with a step\n• Rule — what decisions are made automatically\n• Version — what changed, when, and who signed off\n\nEach element is one document in the database. The relationships between them — \"this Flow uses that Data\", \"this View shows these Rules\" — are edges in a graph. The graph IS the data model.",
  },
  {
    title: "Process lifecycle",
    eyebrow: "FROM PEN TO PROD",
    body:
      "Every process travels the same four stops:\n\n1. DEFINE — author it in the Process Creation Wizard (drag, drop, describe, upload a doc, ask the assistant)\n2. VERSION — freeze a release, get sign-off, immortalise the diff\n3. DEPLOY — roll it out to the tenant\n4. EXECUTE — the Execution Engine runs every instance, step-by-step, persisting state to EA2 at every write\n\nAuthoring tools and the runtime are separate concerns by design. They never bleed into each other.",
  },
  {
    title: "What's a 'hub'?",
    eyebrow: "HOW WORK IS GROUPED",
    body:
      "A hub is a curated view onto your work for a specific function — Procurement, People, IT, Finance, and so on. Each hub shows the published processes that matter to that function, plus a queue of work items waiting on it. The Procurement Hub is for the people who buy things; the People Hub is for HR; the IT Hub is for service desk and access requests.",
  },
  {
    title: "What's a 'work item'?",
    eyebrow: "RUNTIME UNIT",
    body:
      "When a process gets executed for a real subject — \"Store 204 needs a laptop\" — that running instance becomes a work item. It has a transaction_id, an active step, a current human or agent assignee, and an audit trail of every decision so far. Work items live in queues, and people pull from queues like a Trello board with a brain.",
  },
  {
    title: "Where does the data live?",
    eyebrow: "ONE GRAPH, ONE TRUTH",
    body:
      "Everything is stored in EA2, the FlowMaster graph database, organised into five document collections (flow, data, view, rule, version) and four edge collections (instantiates, defines, relates, governs). When the Wizard creates a step, when an agent applies a decision, when an SAP record gets transformed into a native shape — all of it lands in the same graph. There is exactly one source of truth.",
  },
  {
    title: "Why a command assistant?",
    eyebrow: "AN INTERFACE FOR EVERYONE",
    body:
      "Most people don't want to learn nineteen tabs. The FlowMaster Command Assistant lets you type the action: navigate the cockpit, start a process, message your team, list what's published, build a new flow. It's the same EA2 API the UI uses — the assistant just maps short phrases onto it. If a regional store manager types 'start a laptop request for store 204', the assistant finds the right published flow and starts it.",
  },
] as const;

export default function Explainer() {
  const setScene = useApp((s) => s.setScene);
  return (
    <div className="explainer-scene">
      <header className="explainer-head">
        <div className="mc-hero-eyebrow"><Layers size={12} /> The FlowMaster Explainer</div>
        <h2 className="mc-hero-title">Business-as-Code, in plain English</h2>
        <p className="explainer-intro">
          Eight pages, eight minutes — everything a new operator needs to understand before they touch the cockpit. Distilled from the FlowMaster Element Architecture (v2.1) and the EA2 contracts.
        </p>
        <div className="explainer-jump-row">
          <button className="hub-chip" onClick={() => setScene("agent")}><Bot size={11} /> Ask the assistant instead</button>
          <button className="hub-chip" onClick={() => setScene("studio")}><Branch size={11} /> Open the Wizard</button>
          <button className="hub-chip" onClick={() => setScene("mission")}><Pulse size={11} /> Go to Mission Control</button>
        </div>
      </header>

      <div className="explainer-grid">
        {SECTIONS.map((s, i) => (
          <article key={s.title} className="explainer-card">
            <div className="explainer-card-num">{String(i + 1).padStart(2, "0")}</div>
            <div className="explainer-card-eyebrow">{s.eyebrow}</div>
            <h3 className="explainer-card-title">{s.title}</h3>
            <p className="explainer-card-body">{s.body}</p>
          </article>
        ))}
      </div>

      <footer className="explainer-foot">
        <div className="explainer-foot-label">SOURCE OF TRUTH</div>
        <p>FlowMaster Element Architecture v2.1 · EA2 contracts (apply-batch, edges/defines, work-items) · seeded into Hindsight 2026-05-21.</p>
      </footer>
    </div>
  );
}