feat(demo): add Demo Guide (8-step guided tour) and scenario overview

Adds a compact "Probeer een demonstratiescenario" page listing the 5 named
scenarios with live readiness from the manifest, plus a Demo Guide side
panel (bottom sheet on mobile) that walks an Operations Manager through
all 8 steps with per-step context, live-resolved routes, sessionStorage
progress, and a "Demo opnieuw voorbereiden" restart. Login's guided-demo
CTA now actually opens the guide. Fixes a real mobile topbar overflow the
new guide trigger introduced.

frontend/src/data/demoGuideSteps.ts

@@ -0,0 +1,91 @@
+import type { DemoManifest } from "../api/types";
+
+export interface DemoGuideStep {
+  id: string;
+  title: string;
+  whatYouWillSee: string;
+  whyItMatters: string;
+  startAction: string;
+  expectedOutcome: string;
+  /** Resolves the route to link to, using live manifest data where a scenario supplies
+   * a concrete record (booking/issue ref) instead of hardcoding one that could drift. */
+  route: (manifest: DemoManifest | null) => string;
+}
+
+export const DEMO_GUIDE_STEPS: DemoGuideStep[] = [
+  {
+    id: "understand-state",
+    title: "1. Begrijp de operationele status",
+    whatYouWillSee: "Het dashboard toont de wagenparkstatus, openstaande aandachtspunten en de bewegingen van vandaag.",
+    whyItMatters: "Een Operations Manager start elke dag met dit overzicht om te bepalen waar ingrijpen nodig is.",
+    startAction: "Open het dashboard en bekijk de aandachtslijst en de tijdlijn van vandaag.",
+    expectedOutcome: "Je ziet welke boekingen, voertuigen of datakwaliteitsproblemen aandacht vragen.",
+    route: () => "/dashboard",
+  },
+  {
+    id: "open-booking",
+    title: "2. Open een boeking die aandacht nodig heeft",
+    whatYouWillSee: "De boeking BK-DEMO-RETURN, actief en klaar voor retour vandaag.",
+    whyItMatters: "Retours zijn het moment waarop foute kilometerstanden of schade voor het eerst zichtbaar worden.",
+    startAction: "Open de boeking vanuit het dashboard of de boekingenlijst.",
+    expectedOutcome: "Je ziet de boekingsdetails en de knop om de retour te verwerken.",
+    route: (manifest) =>
+      manifest?.scenarios.find((s) => s.id === "return-anomaly")?.start_path ?? "/bookings",
+  },
+  {
+    id: "process-return",
+    title: "3. Verwerk een retour met een afwijkende kilometerstand",
+    whatYouWillSee: "Een retourformulier met een vooringevulde, verdachte kilometerstand lager dan de laatst gekende stand.",
+    whyItMatters: "Een dalende kilometerstand wijst op een foutieve invoer of een verwisseld voertuig — dit moet vóór vrijgave worden opgemerkt.",
+    startAction: "Vul de retour in met de voorgestelde waarde en bekijk de serverpreview vóór je bevestigt.",
+    expectedOutcome: "De retour wordt verwerkt, het voertuig krijgt een passende status en er wordt automatisch een datakwaliteitsprobleem aangemaakt.",
+    route: (manifest) =>
+      manifest?.scenarios.find((s) => s.id === "return-anomaly")?.start_path ?? "/bookings",
+  },
+  {
+    id: "handle-quality-issue",
+    title: "4. Bekijk en behandel het gecreëerde datakwaliteitsprobleem",
+    whatYouWillSee: "Een nieuw issue van het type 'kilometerstand-afwijking' bovenaan de werklijst.",
+    whyItMatters: "Elk gedetecteerd probleem heeft één afgebakende oplossingsstap — niets wordt automatisch stilzwijgend gecorrigeerd.",
+    startAction: "Open het datakwaliteitsoverzicht en kies het nieuwste issue.",
+    expectedOutcome: "Je ziet de aanbevolen actie, kiest een oplossing en het issue wordt opgelost met een audit-spoor.",
+    route: () => "/data-quality",
+  },
+  {
+    id: "merge-duplicate",
+    title: "5. Beoordeel en behandel een mogelijke dubbele klant",
+    whatYouWillSee: "Twee klantprofielen met hetzelfde e-mailadres en telefoonnummer, naast elkaar vergeleken.",
+    whyItMatters: "Dubbele klanten leiden tot verspreide boekingsgeschiedenis en verwarrende communicatie.",
+    startAction: "Vergelijk beide profielen en kies welk profiel behouden blijft.",
+    expectedOutcome: "De profielen worden samengevoegd, boekingen worden herverbonden en het verliezende profiel wordt een tombstone.",
+    route: (manifest) =>
+      manifest?.scenarios.find((s) => s.id === "duplicate-customer")?.start_path ?? "/data-quality",
+  },
+  {
+    id: "ask-knowledge",
+    title: "6. Stel een vraag aan de procedureassistent",
+    whatYouWillSee: "Een antwoord met bronvermelding uit de afgebakende demokennisbank.",
+    whyItMatters: "Medewerkers moeten snel een onderbouwd antwoord krijgen over procedures, zonder te gokken.",
+    startAction: 'Stel de voorbeeldvraag "Wat moet ik doen wanneer een voertuig beschadigd terugkomt?".',
+    expectedOutcome: "Je ziet het antwoord, de gebruikte procedure en de brontekst — of een eerlijk 'onvoldoende informatie' als dat niet aanwezig is.",
+    route: () => "/knowledge",
+  },
+  {
+    id: "check-automation-audit",
+    title: "7. Controleer automatisering en audit trail",
+    whatYouWillSee: "De status van de n8n-aflevering voor je retour, en de bijhorende audit-gebeurtenissen.",
+    whyItMatters: "Elke belangrijke actie moet naspeurbaar zijn: wie deed wat, wanneer, en wat was het gevolg.",
+    startAction: "Open Systemen om de afleverstatus te zien, en Audit trail voor het volledige spoor.",
+    expectedOutcome: "Je ziet een geslaagde (of herstelbare) aflevering en een leesbaar audit-overzicht van je acties.",
+    route: () => "/automation",
+  },
+  {
+    id: "review-real-vs-simulated",
+    title: "8. Bekijk wat echt is, gesimuleerd is, of nog niet gekoppeld",
+    whatYouWillSee: "Een overzicht van wat in deze demo functioneel geïmplementeerd is, wat synthetisch is, en welke koppelingen nog niet live zijn.",
+    whyItMatters: "Een demo is pas overtuigend als bezoekers zelf kunnen nagaan wat echt werkt en wat nog toekomstmuziek is.",
+    startAction: "Lees de pagina 'Over deze demo'.",
+    expectedOutcome: "Je kan zelf uitleggen wat MobilityOps wel en niet is, zonder mondelinge toelichting.",
+    route: () => "/about",
+  },
+];