Matrix-Steuerung eingebettet, Tour als Demo-Popup

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/components/Tour.tsx

@@ -1,211 +1,341 @@
 "use client";
 
-// Interaktive Kurz-Tour über die Planansicht (Teil von Roadmap Nr. 10).
+// Die Tour: eine kurze Demo statt eines Spotlights.
 //
-// Spotlight ohne Engine-Bibliothek: Der abgedunkelte Bereich entsteht aus VIER fixed-Flächen
-// um die Bounding-Box des Ziels herum (oben/unten/links/rechts). Das lässt ein «Loch» am Ziel
-// frei und funktioniert -- anders als ein box-shadow-Trick -- unabhängig von z-index (sticky
-// Matrix-Köpfe) und overflow (Matrix-Scrollbereich). Ziele, die es im aktuellen Plan nicht
-// gibt oder die unsichtbar sind, werden übersprungen.
+// Bis 0.35 legte sich die Tour über den ECHTEN Bildschirm und hob Bereiche hervor. Das hatte
+// zwei Nachteile, die sich nicht beheben liessen: Auf einem frisch angelegten, leeren Plan gab
+// es kaum etwas hervorzuheben -- gerade dann, wenn die Tour am nötigsten ist. Und das
+// Ausschneiden der Hervorhebung kämpfte dauernd mit Scroll-Containern und Z-Ebenen.
+//
+// Neu zeigt die Tour einen NACHGEBAUTEN Bildschirm mit erfundenen Zahlen. Er ist bewusst
+// keine echte Ansicht, sondern eine Illustration: gerade so detailliert, dass man den Aufbau
+// erkennt, und so einfach, dass sie sich in einem Popup erklären lässt. Der Preis ist, dass
+// die Attrappe bei UI-Änderungen nachgeführt werden muss -- dafür funktioniert die Tour ab
+// der ersten Sekunde und unabhängig davon, was im Plan schon steht.
 
-import { useEffect, useMemo, useState } from "react";
-import { Lightbulb, X } from "lucide-react";
+import { useState } from "react";
+import { ArrowLeft, ArrowRight, Sparkles, X } from "lucide-react";
 import { Button } from "@/components/ui";
 
 export const TOUR_DONE_KEY = "fpt-tour-done";
 
+type Focus = "none" | "settings" | "figures" | "actions" | "assistant" | "timeline" | "matrix" | "sidebar";
+
 interface TourStep {
-  target: string; // data-tour="…"
   title: string;
   text: string;
+  focus: Focus;
 }
 
 const STEPS: TourStep[] = [
   {
-    target: "profil",
-    title: "Dein Grundprofil",
-    text: "Alter, Pensionsalter und Inflationsannahme – die Basis dieses Szenarios. Über «Bearbeiten» änderst du sie jederzeit.",
+    title: "Willkommen bei FPT",
+    text: "In zwei Minuten siehst du, wie das Tool aufgebaut ist. Alles, was hier steht, sind erfundene Beispielzahlen – dein eigener Plan ist noch leer.",
+    focus: "none",
+  },
+  {
+    title: "Oben stellst du ein, unten siehst du das Ergebnis",
+    text: "Der Bildschirm hat zwei Hälften. Oben die Steuerung: Grundeinstellungen, Kennzahlen, Schnellaktionen und der Assistent. Unten die Matrix mit allen Zahlen.",
+    focus: "none",
+  },
+  {
+    title: "Die Grundeinstellungen",
+    text: "Wer plant, ab wann und wie lange. Alter, Startjahr und Inflation gelten für den ganzen Plan; Planungshorizont und Pensionsalter gehören zum Szenario. Je Person führt ein Knopf in die Pensionsplanung.",
+    focus: "settings",
+  },
+  {
+    title: "Die Kennzahlen",
+    text: "Was unter dem Strich herauskommt: dein Vermögen heute, das Endvermögen nominal und real – und ob das Kapital über die ganze Planung reicht.",
+    focus: "figures",
+  },
+  {
+    title: "Der FPT-Assistent",
+    text: "Dein Wegweiser. Sieben Schritte führen von der Bestandsaufnahme bis zum fertigen Plan. Jeder Schritt erklärt zuerst, worum es geht, und bietet danach das passende Werkzeug an. Wann ein Schritt erledigt ist, entscheidest du.",
+    focus: "assistant",
   },
   {
-    target: "timeline",
     title: "Die Zeitachse",
-    text: "Deine Lebensphasen im Zeitverlauf: Die Breite zeigt die Dauer, die Fähnchen die Pensionierungen – und falls es dazu kommt, den Punkt, an dem das Kapital ausgeht. Die ganze Planung denkt in diesen Phasen.",
+    text: "Deine Planung im Überblick: Lebensphasen, die Zeitpunkte der Pensionierung – und, falls das Geld nicht reicht, das Jahr, in dem es knapp wird.",
+    focus: "timeline",
   },
   {
-    target: "endwealth",
-    title: "Dein Endvermögen",
-    text: "Das Ergebnis auf einen Blick: das Vermögen am Ende der Planung – nominal und real (in heutiger Kaufkraft). Reicht das Kapital nicht bis zum Schluss, steht hier stattdessen das Alter, in dem es ausgeht.",
+    title: "Die Matrix",
+    text: "Das Herz des Tools. Jede Zeile ist ein finanzielles Element, jede Spalte eine Lebensphase. Die schmalen Spalten dazwischen sind die Übergänge – dort entscheidest du, was beim Wechsel geschieht.",
+    focus: "matrix",
   },
   {
-    target: "matrix",
-    title: "Die Matrix – das Herzstück",
-    text: "Zeilen sind deine Finanzen, Spalten deine Lebensphasen. Klick auf eine Zelle: rechts öffnet sich das Bearbeiten-Panel, die Matrix bleibt sichtbar.",
+    title: "Pläne und Szenarien",
+    text: "Links verwaltest du alles. Ein Szenario ist eine Variante deines Plans – etwa mit anderem Pensionsalter. Du kannst beliebig viele anlegen und vergleichen.",
+    focus: "sidebar",
   },
   {
-    target: "transition",
-    title: "Übergänge",
-    text: "Zwischen zwei Phasen triffst du einmalige Entscheide – verkaufen, beziehen, verrenten. Orange heisst: noch offen. Klick auf den Spaltenkopf führt dich durch alle Entscheide.",
-  },
-  {
-    target: "cash",
-    title: "Das Cash-Konto",
-    text: "Dein Ausgleichskonto: Was übrig bleibt, landet hier – was fehlt, macht es rot. Negativ = Liquiditätslücke.",
-  },
-  {
-    target: "toolbar",
-    title: "Aktionen zum Szenario",
-    text: "Hier oben: die Änderungshistorie ansehen, ein neues Szenario aus diesem ableiten, die Rechenwege einsehen, die Matrix als CSV exportieren – und diese Tour jederzeit neu starten.",
-  },
-  {
-    target: "menu",
-    title: "Analysen & Berichte",
-    text: "Links im Menü öffnest du die grossen Werkzeuge: unter «Analysen» die Grafiken, die Live-Simulation, Monte-Carlo und die Einflussfaktoren; unter «Berichte» erzeugst du ein PDF. «Effektive Werte» hält deine echten Zahlen gegen den Plan.",
+    title: "Jetzt bist du dran",
+    text: "Starte mit dem FPT-Assistenten oben rechts. Schritt 1 ist die Bestandsaufnahme: alles, was du heute besitzt. Von dort führt dich der Assistent weiter.",
+    focus: "assistant",
   },
 ];
 
-interface Box {
-  top: number;
-  left: number;
-  width: number;
-  height: number;
-}
-
 export function Tour({ onClose }: { onClose: () => void }) {
-  // Nur Schritte, deren Ziel im DOM existiert UND sichtbar ist (z. B. die Menü-Leiste ist auf
-  // schmalen Screens ausgeblendet -- getClientRects() ist dann leer).
-  const steps = useMemo(
-    () =>
-      STEPS.filter((s) => {
-        const el = document.querySelector(`[data-tour="${s.target}"]`);
-        return el !== null && el.getClientRects().length > 0;
-      }),
-    []
-  );
   const [index, setIndex] = useState(0);
-  const [rect, setRect] = useState<Box | null>(null);
-  const step = steps[index];
-
-  useEffect(() => {
-    if (!step) return;
-    const el = document.querySelector(`[data-tour="${step.target}"]`);
-    if (!el) return;
-    el.scrollIntoView({ block: "center", behavior: "smooth" });
-
-    // Die Bounding-Box jedes Frame nachführen (folgt dem sanften Scrollen und Resize), aber
-    // den State nur bei tatsächlicher Änderung neu setzen.
-    let raf = 0;
-    const update = () => {
-      const r = el.getBoundingClientRect();
-      setRect((prev) =>
-        prev && prev.top === r.top && prev.left === r.left && prev.width === r.width && prev.height === r.height
-          ? prev
-          : { top: r.top, left: r.left, width: r.width, height: r.height }
-      );
-      raf = requestAnimationFrame(update);
-    };
-    update();
-    return () => cancelAnimationFrame(raf);
-  }, [step]);
-
-  if (!step || !rect) return null;
-
-  const pad = 6;
-  const hole: Box = {
-    top: Math.max(0, rect.top - pad),
-    left: Math.max(0, rect.left - pad),
-    width: rect.width + pad * 2,
-    height: rect.height + pad * 2,
-  };
-  const cardAtBottom = rect.top + rect.height / 2 < window.innerHeight * 0.5;
+  const step = STEPS[index];
+  const last = index === STEPS.length - 1;
 
   function finish() {
     try {
       localStorage.setItem(TOUR_DONE_KEY, "1");
     } catch {
-      /* localStorage nicht verfügbar -> Tour erscheint beim nächsten Mal erneut */
+      // Privater Modus o. Ä. -- die Tour lässt sich dann eben erneut öffnen.
     }
     onClose();
   }
 
-  // Vier Abdunkel-Flächen um das Loch. pointer-events-none, damit nichts blockiert wird.
-  const dim = "fixed z-[45] bg-black/60 pointer-events-none";
-  const belowTop = hole.top + hole.height;
-  const rightOfLeft = hole.left + hole.width;
-
   return (
-    <>
-      <div className={dim} style={{ top: 0, left: 0, width: "100vw", height: hole.top }} />
-      <div className={dim} style={{ top: belowTop, left: 0, width: "100vw", height: `calc(100vh - ${belowTop}px)` }} />
-      <div className={dim} style={{ top: hole.top, left: 0, width: hole.left, height: hole.height }} />
-      <div
-        className={dim}
-        style={{ top: hole.top, left: rightOfLeft, width: `calc(100vw - ${rightOfLeft}px)`, height: hole.height }}
-      />
-
-      {/* Pulsierender Rahmen ums Ziel. */}
-      <div
-        className="tour-ring pointer-events-none fixed z-[46] rounded-xl"
-        style={{ top: hole.top, left: hole.left, width: hole.width, height: hole.height }}
-      />
-
-      {/* Karte -- springt auf die dem Ziel gegenüberliegende Bildschirmhälfte. */}
-      <div
-        key={index}
-        className={`ui-pop fixed left-1/2 z-[50] w-[32rem] max-w-[calc(100vw-2rem)] -translate-x-1/2 rounded-2xl border-2 border-accent bg-surface p-5 shadow-2xl ${
-          cardAtBottom ? "bottom-8" : "top-8"
-        }`}
-      >
-        <div className="flex items-start justify-between gap-2">
-          <div className="flex items-center gap-2.5">
-            <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-accent text-accent-fg shadow-sm">
-              <Lightbulb className="h-5 w-5" />
-            </span>
-            <div>
-              <div className="text-base font-semibold text-fg">{step.title}</div>
-              <div className="text-[11px] font-medium uppercase tracking-wide text-accent">
-                Schritt {index + 1} von {steps.length}
-              </div>
-            </div>
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 p-3 sm:p-6">
+      <div className="flex h-full max-h-[900px] w-full max-w-6xl flex-col overflow-hidden rounded-2xl border border-border bg-surface shadow-2xl">
+        <header className="flex items-center gap-3 border-b border-border px-4 py-3">
+          <Sparkles className="h-4 w-4 shrink-0 text-accent" />
+          <div className="min-w-0 flex-1">
+            <h2 className="truncate text-sm font-semibold text-fg">{step.title}</h2>
+            <p className="text-[11px] text-muted">
+              Schritt {index + 1} von {STEPS.length}
+            </p>
           </div>
           <button
             type="button"
             onClick={finish}
-            aria-label="Tour beenden"
-            className="rounded-md p-1 text-faint hover:bg-surface-2 hover:text-fg"
+            aria-label="Tour schliessen"
+            className="rounded-lg p-1.5 text-faint hover:bg-surface-2 hover:text-fg"
           >
             <X className="h-4 w-4" />
           </button>
+        </header>
+
+        {/* Die Attrappe. Rein illustrativ -- nichts darin ist klickbar. */}
+        <div className="min-h-0 flex-1 overflow-auto bg-surface-2/40 p-4">
+          <MockScreen focus={step.focus} />
         </div>
-        <p className="mt-3 text-sm leading-relaxed text-muted">{step.text}</p>
-        <div className="mt-4 flex items-center justify-between gap-2">
-          <button type="button" onClick={finish} className="text-xs font-medium text-faint hover:text-muted">
-            Überspringen
-          </button>
-          <div className="flex items-center gap-3">
-            <div className="flex gap-1">
-              {steps.map((_, i) => (
-                <span key={i} className={`h-1.5 w-1.5 rounded-full ${i === index ? "bg-accent" : "bg-border-strong"}`} />
+
+        <footer className="border-t border-border px-4 py-3">
+          <p className="mb-3 text-sm leading-relaxed text-fg">{step.text}</p>
+          <div className="flex items-center gap-2">
+            <div className="flex flex-1 gap-1">
+              {STEPS.map((_, i) => (
+                <div
+                  key={i}
+                  className={`h-1 flex-1 rounded-full transition-colors ${i <= index ? "bg-accent" : "bg-surface-2"}`}
+                />
               ))}
             </div>
-            <div className="flex gap-2">
-              {index > 0 && (
-                <Button variant="secondary" size="sm" onClick={() => setIndex(index - 1)}>
-                  Zurück
-                </Button>
-              )}
-              {index < steps.length - 1 ? (
-                <Button size="sm" onClick={() => setIndex(index + 1)}>
-                  Weiter
-                </Button>
-              ) : (
-                <Button size="sm" onClick={finish}>
-                  Fertig
-                </Button>
-              )}
+            <Button variant="ghost" size="sm" disabled={index === 0} onClick={() => setIndex((i) => i - 1)}>
+              <ArrowLeft className="h-4 w-4" /> Zurück
+            </Button>
+            {last ? (
+              <Button size="sm" onClick={finish}>
+                <Sparkles className="h-4 w-4" /> Mit dem Assistenten starten
+              </Button>
+            ) : (
+              <Button size="sm" onClick={() => setIndex((i) => i + 1)}>
+                Weiter <ArrowRight className="h-4 w-4" />
+              </Button>
+            )}
+          </div>
+        </footer>
+      </div>
+    </div>
+  );
+}
+
+// --- Die Attrappe ---------------------------------------------------------------------------
+//
+// Feste, erfundene Zahlen. Sie müssen weder stimmen noch zueinander passen -- ihr einziger
+// Zweck ist, den Aufbau greifbar zu machen.
+
+function MockScreen({ focus }: { focus: Focus }) {
+  const dim = (area: Focus) => (focus === "none" || focus === area ? "opacity-100" : "opacity-20");
+  const ring = (area: Focus) => (focus === area ? "ring-2 ring-accent" : "");
+
+  return (
+    <div className="flex gap-3 text-[10px]">
+      {/* Seitenleiste */}
+      <div
+        className={`hidden w-36 shrink-0 flex-col gap-1 rounded-lg border border-border bg-surface p-2 transition-opacity sm:flex ${dim("sidebar")} ${ring("sidebar")}`}
+      >
+        <div className="mb-1 font-semibold uppercase tracking-wide text-faint">Meine Pläne</div>
+        <div className="rounded bg-accent-soft px-1.5 py-1 font-medium text-accent-soft-fg">Familie Muster</div>
+        <div className="pl-2 text-muted">Szenarien</div>
+        <div className="rounded bg-surface-2 px-1.5 py-0.5 pl-3 text-fg">Basis</div>
+        <div className="px-1.5 py-0.5 pl-3 text-muted">Pension mit 62</div>
+        <div className="pl-2 text-muted">Effektive Werte</div>
+        <div className="pl-2 text-muted">Analysen</div>
+        <div className="pl-2 text-muted">Berichte</div>
+      </div>
+
+      <div className="flex min-w-0 flex-1 flex-col gap-3">
+        {/* Oberer Bereich */}
+        <div className="rounded-lg border border-border bg-surface-2/60 p-2">
+          <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
+            <MockTile title="Grundeinstellungen" cls={`${dim("settings")} ${ring("settings")}`}>
+              <div>Anna · 42 J.</div>
+              <div>Beat · 45 J.</div>
+              <div className="text-faint">Start 2026 · Inflation 1,5 %</div>
+              <div className="mt-1 border-t border-border pt-1">Horizont 40 Jahre · bis 2065</div>
+              <div className="flex items-center gap-1">
+                Pension 65 · Ende 82
+                <span className="ml-auto rounded border border-border px-1 text-[9px]">Pensionsplanung</span>
+              </div>
+            </MockTile>
+
+            <MockTile title="Kennzahlen" cls={`${dim("figures")} ${ring("figures")}`}>
+              <MockFigure label="Vermögen heute" value="412'000" />
+              <MockFigure label="Endvermögen nominal" value="1'284'000" />
+              <MockFigure label="Endvermögen real" value="702'000" />
+              <div className="mt-1 rounded bg-success-soft px-1.5 py-0.5 text-success">
+                Kapital reicht über die ganze Planung
+              </div>
+            </MockTile>
+
+            <MockTile title="Schnellaktionen" cls={`${dim("actions")} ${ring("actions")}`}>
+              {["Neues Szenario", "Tour", "Änderungshistorie", "Rechenwege", "CSV-Export"].map((a) => (
+                <div key={a} className="rounded border border-border px-1.5 py-0.5 text-muted">
+                  {a}
+                </div>
+              ))}
+            </MockTile>
+
+            <div
+              className={`flex flex-col gap-1 rounded-lg border border-attention bg-attention-soft px-2 py-1.5 transition-opacity ${dim("assistant")} ${ring("assistant")}`}
+            >
+              <div className="flex items-center gap-1">
+                <Sparkles className="h-3 w-3 text-attention-fg" />
+                <span className="font-semibold uppercase tracking-wide text-fg">FPT-Assistent</span>
+                <span className="ml-auto font-semibold text-muted">2 / 7</span>
+              </div>
+              {[
+                ["3. Lebensphasen", "4 Lebensphasen"],
+                ["4. Erwerbsjahre planen", ""],
+                ["5. Pensionierung planen", ""],
+              ].map(([t, sub]) => (
+                <div key={t} className="flex items-start gap-1">
+                  <span className="mt-0.5 h-2.5 w-2.5 shrink-0 rounded-sm border border-border bg-surface" />
+                  <span className="min-w-0">
+                    <span className="block truncate font-semibold text-fg">{t}</span>
+                    {sub && <span className="block truncate text-muted">{sub}</span>}
+                  </span>
+                </div>
+              ))}
+              {["1. Bestandsaufnahme", "2. Eckdaten"].map((t) => (
+                <div key={t} className="flex items-start gap-1 opacity-50">
+                  <span className="mt-0.5 flex h-2.5 w-2.5 shrink-0 items-center justify-center rounded-sm bg-success text-[7px] text-white">
+                    ✓
+                  </span>
+                  <span className="truncate text-muted line-through">{t}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Zeitachse */}
+          <div
+            className={`mt-2 rounded-lg border border-border bg-surface p-2 transition-opacity ${dim("timeline")} ${ring("timeline")}`}
+          >
+            <div className="mb-1 flex justify-between text-faint">
+              <span>2026</span>
+              <span>2065</span>
+            </div>
+            <div className="flex h-4 overflow-hidden rounded">
+              <div className="flex w-[45%] items-center justify-center bg-accent/70 text-[8px] text-white">
+                Erwerbsjahre
+              </div>
+              <div className="flex w-[15%] items-center justify-center bg-attention/70 text-[8px] text-white">
+                Übergangszeit
+              </div>
+              <div className="flex w-[40%] items-center justify-center bg-success/60 text-[8px] text-white">
+                Ruhestand
+              </div>
+            </div>
+            <div className="mt-1 flex justify-between text-faint">
+              <span>Anna 42 · Beat 45</span>
+              <span>Pension 65</span>
+              <span>Anna 82 · Beat 85</span>
             </div>
           </div>
         </div>
+
+        {/* Matrix */}
+        <div
+          className={`overflow-hidden rounded-lg border border-border bg-surface transition-opacity ${dim("matrix")} ${ring("matrix")}`}
+        >
+          <table className="w-full border-collapse">
+            <thead>
+              <tr className="bg-surface-2">
+                <th className="border-b border-r border-border px-2 py-1.5 text-left align-top">
+                  <div className="font-semibold uppercase tracking-wide text-faint">Matrix</div>
+                  <div className="mt-1 flex gap-1">
+                    <span className="rounded border border-dashed border-border px-1 text-[9px] font-normal text-muted">
+                      + Element
+                    </span>
+                    <span className="rounded border border-dashed border-border px-1 text-[9px] font-normal text-muted">
+                      + Phase
+                    </span>
+                  </div>
+                </th>
+                {["Erwerbsjahre", "Übergang", "Ruhestand I", "Übergang", "Ruhestand II"].map((h, i) => (
+                  <th
+                    key={i}
+                    className={`border-b border-r border-border px-2 py-1.5 text-center font-medium ${
+                      h === "Übergang" ? "bg-attention text-attention-fg" : "text-fg"
+                    }`}
+                  >
+                    {h}
+                    {h === "Übergang" && <div className="text-[8px] font-normal">2 offen</div>}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                ["Lohn Anna", "96'000", "→", "—", "→", "—"],
+                ["Lebenshaltung", "78'000", "→", "72'000", "→", "68'000"],
+                ["Pensionskasse Anna", "310'000", "40 % Kapital", "Rente 18'400", "→", "18'400"],
+                ["Säule 3a Anna", "84'000", "Bezug mit 64", "—", "→", "—"],
+                ["Wertschriften", "120'000", "→", "486'000", "→", "310'000"],
+              ].map((row, i) => (
+                <tr key={i} className={i % 2 ? "bg-surface-2/40" : ""}>
+                  <td className="border-b border-r border-border px-2 py-1 text-fg">{row[0]}</td>
+                  {row.slice(1).map((c, j) => (
+                    <td
+                      key={j}
+                      className={`border-b border-r border-border px-2 py-1 text-center tabular-nums ${
+                        j % 2 === 1 ? "bg-attention-soft text-attention-soft-fg" : "text-muted"
+                      }`}
+                    >
+                      {c}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
       </div>
-    </>
+    </div>
+  );
+}
+
+function MockTile({ title, cls, children }: { title: string; cls: string; children: React.ReactNode }) {
+  return (
+    <div className={`flex flex-col gap-0.5 rounded-lg border border-border bg-surface px-2 py-1.5 transition-opacity ${cls}`}>
+      <div className="mb-0.5 font-semibold uppercase tracking-wide text-faint">{title}</div>
+      {children}
+    </div>
+  );
+}
+
+function MockFigure({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex justify-between gap-1">
+      <span className="truncate text-muted">{label}</span>
+      <span className="shrink-0 font-semibold tabular-nums text-fg">{value}</span>
+    </div>
   );
 }