feat(demo): add demo manifest, Dutch demo entry, permanent badge and About page

Adds GET /api/v1/demo/manifest as a single source of truth for the demo's
fictional org identity (Northstar Mobility -- surfacing the project's
already-locked tenant name), synthetic-data/reset state, and live scenario
readiness. Rewrites the login screen in Dutch with an honest, no-password
demo entry and a guided-demo entry point, replaces the loud full-width
demo banner with a subtle badge + popover, and adds a compact About page
explaining what's real vs. synthetic vs. not yet connected.

frontend/src/components/DemoBadge.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from "react";
+import { Link } from "react-router-dom";
+import { useDemoManifest } from "../context/DemoManifestContext";
+import { Icon } from "./Icons";
+
+function formatDateTime(value: string | null): string {
+  if (!value) return "onbekend";
+  return new Date(value).toLocaleString("nl-BE", {
+    dateStyle: "medium",
+    timeStyle: "short",
+    timeZone: "Europe/Brussels",
+  });
+}
+
+export function DemoBadge() {
+  const { manifest } = useDemoManifest();
+  const [open, setOpen] = useState(false);
+  const boxRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleOutsideClick(event: MouseEvent) {
+      if (boxRef.current && !boxRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+    function handleEscape(event: KeyboardEvent) {
+      if (event.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", handleOutsideClick);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, []);
+
+  return (
+    <div className="demo-badge" ref={boxRef}>
+      <button
+        type="button"
+        className="demo-badge-trigger"
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        onClick={() => setOpen((v) => !v)}
+      >
+        <Icon name="shield" />
+        <span>Synthetische demo</span>
+      </button>
+      {open && (
+        <div className="demo-badge-popover" role="dialog" aria-label="Over deze demo-omgeving">
+          <button type="button" className="icon-button demo-badge-close" onClick={() => setOpen(false)} aria-label="Sluiten">
+            <Icon name="x" />
+          </button>
+          <p>
+            {manifest ? (
+              <>
+                <strong>{manifest.organization_name}</strong> is een fictieve organisatie. Alle
+                namen, voertuigen en boekingen zijn synthetisch.
+              </>
+            ) : (
+              "Alle namen, voertuigen en boekingen in deze omgeving zijn synthetisch."
+            )}
+          </p>
+          <p>
+            De workflows, controles en automatisering zijn echt geïmplementeerd — enkel de
+            gegevens zijn verzonnen.
+          </p>
+          {manifest && (
+            <p className="demo-badge-reset">
+              Laatste reset: <strong>{formatDateTime(manifest.last_reset_at)}</strong> · deze
+              omgeving is op elk moment herstelbaar.
+            </p>
+          )}
+          <Link to="/about" onClick={() => setOpen(false)}>
+            Over deze demo <Icon name="chevron" />
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/Layout.tsx

@@ -4,6 +4,8 @@ import { api, ApiError } from "../api/client";
 import { useAuth } from "../context/AuthContext";
 import type { Role, SearchResultItem } from "../api/types";
 import { BrandMark, Icon, type IconName } from "./Icons";
+import { DemoBadge } from "./DemoBadge";
+import { useDemoManifest } from "../context/DemoManifestContext";
 
 const SEARCH_ICON: Record<SearchResultItem["type"], IconName> = {
   vehicle: "fleet",
@@ -42,6 +44,7 @@ const NAV_GROUPS: Array<{ label: string; items: NavItem[] }> = [
 
 export function Layout() {
   const { user, logout } = useAuth();
+  const { manifest } = useDemoManifest();
   const navigate = useNavigate();
   const [mobileOpen, setMobileOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
@@ -192,7 +195,7 @@ export function Layout() {
           <span className="environment-dot" />
           <div><strong>Demo environment</strong><span>Synthetic data only</span></div>
         </div>
-        {user?.role === "operations_manager" && (
+        {user?.role === "operations_manager" && manifest?.allow_reset !== false && (
           <div className="sidebar-reset">
             {resetError && <p className="error" role="alert">{resetError}</p>}
             {!resetConfirming ? (
@@ -274,6 +277,7 @@ export function Layout() {
             )}
           </div>
           <div className="topbar-meta">
+            <DemoBadge />
             <span className="timezone"><Icon name="clock" /> Europe/Brussels</span>
             {user && (
               <div className="operator">
@@ -287,7 +291,6 @@ export function Layout() {
           </div>
         </header>
 
-        <p className="demo-banner"><Icon name="shield" /> Synthetic demo data · no real customer or vehicle information</p>
         <main id="main-content" tabIndex={-1}><Outlet /></main>
         <footer className="app-footer"><span>MobilityOps PoC</span><span>Europe/Brussels · Synthetic demo data</span></footer>
       </div>