// scenes-4.jsx — Live Demo, broken into 5 sub-parts that match the screenshots

// Sub-timing within scene 4 (88→172 = 84s)
// 4.1 Übersicht           88 → 104  (16s)
// 4.2 Standardfragen-Bot  104 → 128 (24s)
// 4.3 Mail-Triage Liste   128 → 144 (16s)
// 4.4 Mail-Triage Detail  144 → 158 (14s)
// 4.5 Belegerfassung      158 → 172 (14s)

function Scene4Demo() {
  const { start, end } = SCENE.s4;
  const time = useTime();
  if (time < start - 0.5 || time > end + 0.5) return null;
  const fadeIn = Math.min(1, (time - start) / 0.6);
  const fadeOut = Math.min(1, (end - time) / 0.6);
  const op = Math.min(fadeIn, fadeOut);

  // 4.1: 88-104, 4.2: 104-128, 4.3: 128-144, 4.4: 144-158, 4.5: 158-172
  const part = time < 104 ? 1 : time < 128 ? 2 : time < 144 ? 3 : time < 158 ? 4 : 5;

  return (
    <div style={{ position: 'absolute', inset: 0, background: C.n50, opacity: op }}>
      <SceneEyebrow start={start} end={end} num="04" label="Live-Demo" />

      {part === 1 && <Demo41Uebersicht />}
      {part === 2 && <Demo42Standard />}
      {part === 3 && <Demo43TriageList />}
      {part === 4 && <Demo44TriageDetail />}
      {part === 5 && <Demo45Belege />}
    </div>
  );
}

// Common app shell wrapper
function AppShell({ activeNav, children, scale = 0.95 }) {
  return (
    <div style={{
      position: 'absolute',
      left: '50%', top: '50%',
      width: 1820, height: 950,
      transform: `translate(-50%, -50%) scale(${scale})`,
      transformOrigin: 'center',
      background: C.n0,
      border: `1px solid ${C.n200}`,
      borderRadius: 12,
      overflow: 'hidden',
      display: 'flex',
      boxShadow: '0 8px 40px rgba(31,29,26,0.08)',
    }}>
      <AppSidebar active={activeNav} />
      <main style={{ flex: 1, background: C.n50, position: 'relative', overflow: 'hidden' }}>
        {children}
      </main>
    </div>
  );
}

// ── 4.1 Übersicht ─────────────────────────────────────────────────────
function Demo41Uebersicht() {
  const time = useTime();
  const localT = time - 88;
  return (
    <>
      <AppShell activeNav="uebersicht">
        <PageHeader crumbs={['Steuerkanzlei Mustermann', 'Übersicht']}
          title="Übersicht" subtitle="Drei Module · eine Anwendung" />
        <div style={{ padding: '32px 32px 0' }}>
          <div style={{ display: 'flex', gap: 16 }}>
            <KPICard label="Offene Anfragen (Modul 1)" value="3" sub="Standardfragen-Bot"
              highlight={localT > 5 && localT < 10}/>
            <KPICard label="Mails in Triage (Modul 2)" value="6" sub="Klassifikation + Routing"
              highlight={localT > 5 && localT < 10}/>
            <KPICard label="Belege offen (Modul 3)" value="1" sub="OCR + DATEV-Export"
              highlight={localT > 5 && localT < 10}/>
            <KPICard label="Heute freigegeben" value="27" sub="Über alle Module"/>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 24 }}>
            {[
              { t: 'Modul 1 · Standardfragen-Bot', s: 'FAQ-Pool · 30 Standardfragen · Mensch-im-Loop-Freigabe',
                d: 'Eingehende Standardanfragen werden gegen den FAQ-Pool gematcht. Vorschlagsantwort wird vorbereitet, der Sachbearbeiter gibt frei.' },
              { t: 'Modul 2 · Mail-Triage', s: 'Klassifikation · Pre-Filter · Routing in 7 Kategorien',
                d: 'Pre-Filter erkennt Eskalationen vor der KI. Klassifikation in 7 Kategorien, Routing an Berufsträger / Sachbearbeiter / Modul 1+3.' },
              { t: 'Modul 3 · Belegerfassung', s: 'OCR + LLM-Extraktion · DATEV-CSV-Export',
                d: '4-Stufen-Pipeline: invoice2data → pdftotext → Tesseract → LLM. Pseudonymisierung vor jedem KI-Aufruf nach DSGVO Art. 32.' },
            ].map((m, i) => (
              <div key={i} style={{
                background: C.n0, border: `1px solid ${C.n200}`, borderRadius: 8,
                padding: '16px 18px',
              }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: C.n800 }}>{m.t}</div>
                <div style={{ fontSize: 12, color: C.n500, marginTop: 4 }}>{m.s}</div>
                <div style={{ fontSize: 12, color: C.n700, marginTop: 10, lineHeight: 1.55 }}>{m.d}</div>
              </div>
            ))}
          </div>
        </div>
      </AppShell>

      <Caption start={91} end={97}  text="Drei Entlastungsbereiche — in einer Oberfläche." />
      <Caption start={98} end={103} text="Standardfragen, Mail-Triage und Belegerfassung laufen getrennt, aber in einem System." />
    </>
  );
}

// ── 4.2 Standardfragen-Bot ────────────────────────────────────────────
function Demo42Standard() {
  const time = useTime();
  const localT = time - 104;
  // Switch to detail view at localT >= 10
  const showDetail = localT >= 10;

  return (
    <>
      <AppShell activeNav="standardfragen">
        <PageHeader crumbs={['Steuerkanzlei Mustermann', 'Modul 1 · Standardfragen-Bot']}
          title="Standardfragen-Bot" subtitle="Mensch-im-Loop-Freigabe vor Versand" />
        <div style={{ padding: '32px 32px 0' }}>
          <div style={{ display: 'flex', gap: 16 }}>
            <KPICard label="Offene Anfragen" value="3" sub="−2 vs. gestern"/>
            <KPICard label="Heute freigegeben" value="27" sub="Ø 14 Sek/Freigabe"/>
            <KPICard label="Ø Konfidenz" value="0,92" sub="Schwelle: 0,75"/>
            <KPICard label="Zeitersparnis (KW 18)" value="6,2 h" sub="+0,8 h vs. KW 17"/>
          </div>

          {!showDetail && (
            <div style={{ marginTop: 24, background: C.n0, border: `1px solid ${C.n200}`,
              borderRadius: 10, overflow: 'hidden' }}>
              <div style={{ display: 'flex', borderBottom: `1px solid ${C.n200}` }}>
                {['Offen (3)', 'Heute freigegeben (27)', 'Abgelehnt (2)', 'Alle FAQ-Vorlagen (14)'].map((t, i) => (
                  <div key={i} style={{
                    padding: '12px 18px', fontSize: 13,
                    fontWeight: i === 0 ? 600 : 400,
                    color: i === 0 ? C.n0 : C.n500,
                    background: i === 0 ? C.blue600 : 'transparent',
                  }}>{t}</div>
                ))}
              </div>
              <div style={{ padding: '14px 24px', fontSize: 12, color: C.n500 }}>
                3 Anfragen offen — alle gegen FAQ-Pool gematcht.
              </div>
              <div style={{
                display: 'grid',
                gridTemplateColumns: '60px 1fr 200px 120px 140px 110px',
                padding: '10px 24px', fontSize: 10, color: C.n500,
                fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase',
                borderTop: `1px solid ${C.n100}`,
              }}>
                <div>NR.</div><div>Anfrage</div><div>FAQ-Vorlage</div>
                <div>Konfidenz</div><div>Eingang</div><div></div>
              </div>
              {[
                { n: '#01', s: 'USt-VA März', f: 'info@jschmidt-design.de', tag: 'FAQ_USTVA_STAND', k: '0,92', t: 'vor wenigen Min', highlight: true },
                { n: '#02', s: 'Tankquittung — USt nicht ausgewiesen', f: 'info@cafe-altona.de', tag: 'FAQ_BELEG_OHNE_UST', k: '0,92', t: 'vor wenigen Min' },
                { n: '#03', s: 'Kassenbon verloren', f: 'buero@autoteile-meyer.de', tag: 'FAQ_BELEG_VERLOREN', k: '0,92', t: 'vor wenigen Min' },
              ].map((r, i) => (
                <div key={i} style={{
                  display: 'grid',
                  gridTemplateColumns: '60px 1fr 200px 120px 140px 110px',
                  padding: '20px 24px', alignItems: 'center',
                  borderTop: `1px solid ${C.n100}`,
                  fontSize: 13,
                  background: r.highlight && localT > 3 && localT < 7 ? C.blue50 : C.n0,
                  transition: 'background 320ms',
                }}>
                  <div style={{ color: C.n500 }}>{r.n}</div>
                  <div>
                    <div style={{ fontWeight: 600, color: C.n800 }}>{r.s}</div>
                    <div style={{ fontSize: 11, color: C.n500, marginTop: 2 }}>{r.f}</div>
                  </div>
                  <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                    padding: '4px 8px', background: C.n50, borderRadius: 4, color: C.n700,
                    width: 'fit-content' }}>{r.tag}</div>
                  <div style={{ color: C.green500, fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{r.k}</div>
                  <div style={{ color: C.n500, fontSize: 12 }}>{r.t}</div>
                  <SecondaryButton style={{ padding: '6px 14px', fontSize: 12 }}>Prüfen</SecondaryButton>
                </div>
              ))}
            </div>
          )}

          {showDetail && (
            <div style={{ marginTop: 24, background: C.n0, border: `1px solid ${C.n200}`,
              borderRadius: 10, padding: '24px 28px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div>
                  <div style={{ fontSize: 22, fontWeight: 600, color: C.n800 }}>
                    Anfrage prüfen <span style={{ color: C.n400, fontWeight: 400 }}>·</span>
                    <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 14,
                      color: C.n500, marginLeft: 8 }}>mail_003</span>
                  </div>
                </div>
                <SecondaryButton style={{ padding: '6px 14px', fontSize: 12 }}>← Zurück zur Liste</SecondaryButton>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 24 }}>
                <div>
                  <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.08em',
                    color: C.n500, textTransform: 'uppercase', marginBottom: 10 }}>Original-Mail · Auszug</div>
                  <div style={{ fontSize: 12, color: C.n500, marginBottom: 4 }}>
                    <strong style={{ color: C.n800 }}>Von</strong> info@jschmidt-design.de
                  </div>
                  <div style={{ fontSize: 12, color: C.n500, marginBottom: 12 }}>
                    <strong style={{ color: C.n800 }}>Betreff</strong> USt-VA März
                  </div>
                  <div style={{ padding: '14px 16px', background: C.n50,
                    borderRadius: 6, fontSize: 13, color: C.n700, lineHeight: 1.55,
                    fontStyle: 'italic' }}>
                    Sehr geehrtes Team,<br/>
                    können Sie mir den aktuellen Stand meiner Umsatzsteuer-Voranmeldung
                    für März mitteilen? Ich brauche die Zahlen für unsere interne
                    Liquiditätsplanung.<br/><br/>Viele Grüße<br/>A. Schmidt
                  </div>
                </div>

                <div>
                  <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.08em',
                    color: C.n500, textTransform: 'uppercase', marginBottom: 10 }}>Vorschlagsantwort · editierbar</div>
                  <div style={{
                    padding: '14px 16px',
                    background: C.n0, border: `1.5px solid ${localT > 11 && localT < 15 ? C.blue600 : C.n200}`,
                    borderRadius: 6, fontSize: 13, color: C.n800, lineHeight: 1.6,
                    minHeight: 220, transition: 'border-color 320ms',
                    boxShadow: localT > 11 && localT < 15 ? `0 0 0 4px ${C.blue600}1A` : 'none',
                  }}>
                    Sehr geehrte/r Frau Schmidt,<br/><br/>
                    Ihre USt-Voranmeldung für [Monat März] wurde am [Übermittlungsdatum]
                    über ELSTER an das Finanzamt übermittelt. Zahllast: [Betrag] €
                    (bzw. Erstattung). Fälligkeit: [Datum]. Die Übermittlungsbestätigung
                    legen wir Ihrer Akte bei.<br/><br/>
                    Mit freundlichen Grüßen<br/>[Sachbearbeiter]
                  </div>
                  <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginTop: 10 }}>
                    <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                      padding: '4px 8px', background: C.blue50, color: C.blue700,
                      borderRadius: 4 }}>FAQ_USTVA_STAND</span>
                    <span style={{ fontSize: 12, color: C.n500 }}>Konfidenz <strong style={{ color: C.green500 }}>0,92</strong></span>
                  </div>
                </div>
              </div>

              <div style={{ marginTop: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ fontSize: 11, color: C.n500 }}>
                  Erstellt von KI-Modell <span style={{ fontFamily: 'JetBrains Mono, monospace' }}>haiku-4-5</span>
                  <span style={{ marginLeft: 10 }}>· Tokens 412/186</span>
                </div>
                <div style={{ display: 'flex', gap: 10 }}>
                  <PrimaryButton style={{
                    boxShadow: localT > 15 ? `0 0 0 4px ${C.green500}33` : 'none',
                    transition: 'box-shadow 320ms',
                  }}>✓ Freigeben + Senden</PrimaryButton>
                  <SecondaryButton>Speichern</SecondaryButton>
                  <SecondaryButton style={{ borderColor: C.n300, color: C.n600 }}>Ablehnen</SecondaryButton>
                </div>
              </div>
            </div>
          )}
        </div>
      </AppShell>

      <Caption start={106} end={113} text="Standardfragen werden gegen einen FAQ-Pool geprüft." accent="FAQ-Pool" />
      <Caption start={114} end={120} text="Das System erstellt eine editierbare Antwortvorlage." />
      <Caption start={121} end={127} text="Der Sachbearbeiter prüft, passt an und gibt erst dann frei." accent="gibt erst dann frei" />
    </>
  );
}

// ── 4.3 Mail-Triage Liste ─────────────────────────────────────────────
function Demo43TriageList() {
  const time = useTime();
  const localT = time - 128;

  return (
    <>
      <AppShell activeNav="mailtriage">
        <PageHeader crumbs={['Steuerkanzlei Mustermann', 'Modul 2 · Mail-Triage']}
          title="Mandanten-Mail-Triage" subtitle="Klassifikation · Routing · Vorschlagsantworten" />
        <div style={{ padding: '32px 32px 0' }}>
          <div style={{ display: 'flex', gap: 16 }}>
            <KPICard label="Offene Mails" value="6" sub="1 kritisch · 2 hoch · 3 normal"/>
            <KPICard label="Heute klassifiziert" value="134" sub="Auto-Routing 71 %"/>
            <KPICard label="Ø Reaktionszeit" value="23 Min" sub="Ziel: ≤ 30 Min"/>
            <KPICard label="Zeitersparnis (KW 18)" value="11,4 h" sub="vs. manuelle Triage"/>
          </div>

          <div style={{ marginTop: 24, background: C.n0, border: `1px solid ${C.n200}`,
            borderRadius: 10, overflow: 'hidden' }}>
            <div style={{ display: 'flex', borderBottom: `1px solid ${C.n200}` }}>
              {['Offen (6)', 'Bearbeitet (134)', 'Auto-routed (95)', 'Kategorien (7)'].map((t, i) => (
                <div key={i} style={{
                  padding: '12px 18px', fontSize: 13,
                  fontWeight: i === 0 ? 600 : 400,
                  color: i === 0 ? C.n0 : C.n500,
                  background: i === 0 ? C.blue600 : 'transparent',
                }}>{t}</div>
              ))}
            </div>
            <div style={{ padding: '14px 24px', fontSize: 12, color: C.n500 }}>
              6 Mails offen — sortiert nach Priorität · IMAP <span style={{ fontFamily: 'JetBrains Mono, monospace' }}>imap.kanzlei-mustermann.de</span> · 7 Kategorien aktiv
            </div>
            <div style={{
              display: 'grid',
              gridTemplateColumns: '110px 110px 1fr 110px 160px 110px',
              padding: '10px 24px', fontSize: 10, color: C.n500,
              fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase',
              borderTop: `1px solid ${C.n100}`,
            }}>
              <div>Priorität</div><div>Kategorie</div><div>Betreff & Absender</div>
              <div>Konfidenz</div><div>Routing-Ziel</div><div></div>
            </div>
            {[
              { p: 'Kritisch', pc: C.danger, cat: 'eskalation', s: 'Steuerstrafverfahren — Brief vom FA',
                f: 'h.schulz@example.de', k: '1,00', r: 'Berufsträger', rc: C.blue600, highlight: true },
              { p: 'Hoch', pc: C.warning, cat: 'frist', s: 'Säumniszuschlag — letzte Mahnung',
                f: 'office@trans-spedition.de', k: '0,95', r: 'Sachbearbeiter', rc: C.n700 },
              { p: 'Hoch', pc: C.warning, cat: 'edge_case', s: 'termin + ust-va frage + beleg upload geht nicht!',
                f: 'info@yoga-studio-eppendorf.de', k: '0,92', r: 'Sachbearbeiter', rc: C.n700 },
            ].map((r, i) => (
              <div key={i} style={{
                display: 'grid',
                gridTemplateColumns: '110px 110px 1fr 110px 160px 110px',
                padding: '20px 24px', alignItems: 'center',
                borderTop: `1px solid ${C.n100}`,
                fontSize: 13,
                background: r.highlight && localT > 4 && localT < 8 ? C.blue50 : C.n0,
                transition: 'background 320ms',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: r.pc, fontWeight: 600 }}>
                  <div style={{ width: 6, height: 6, borderRadius: '50%', background: r.pc }}/>
                  {r.p}
                </div>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: C.n600 }}>{r.cat}</div>
                <div>
                  <div style={{ fontWeight: 600, color: C.n800 }}>{r.s}</div>
                  <div style={{ fontSize: 11, color: C.n500, marginTop: 2 }}>{r.f}</div>
                </div>
                <div style={{ fontVariantNumeric: 'tabular-nums', fontWeight: 600,
                  color: parseFloat(r.k.replace(',', '.')) > 0.9 ? C.green500 : C.n700 }}>{r.k}</div>
                <div>
                  <span style={{ padding: '4px 10px', borderRadius: 999,
                    background: r.rc === C.blue600 ? C.blue600 : C.n100,
                    color: r.rc === C.blue600 ? C.n0 : C.n700,
                    fontSize: 11, fontWeight: 500 }}>{r.r}</span>
                </div>
                <SecondaryButton style={{ padding: '6px 14px', fontSize: 12 }}>Öffnen</SecondaryButton>
              </div>
            ))}
          </div>
        </div>
      </AppShell>

      <Caption start={130} end={137} text="Eingehende Mails werden nach Priorität und Kategorie sortiert." />
      <Caption start={138} end={143} text="Kritische Themen werden direkt an den Berufsträger geroutet." accent="Berufsträger" />
    </>
  );
}

// ── 4.4 Mail-Triage Detail ────────────────────────────────────────────
function Demo44TriageDetail() {
  const time = useTime();
  const localT = time - 144;

  return (
    <>
      <AppShell activeNav="mailtriage">
        <div style={{ padding: '24px 32px 0' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ fontSize: 26, fontWeight: 600, color: C.n800,
              letterSpacing: '-0.01em' }}>
              Detailansicht <span style={{ color: C.n400, fontWeight: 400 }}>·</span>
              <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 16,
                color: C.n500, marginLeft: 8 }}>mail_017</span>
            </div>
            <SecondaryButton style={{ padding: '6px 14px', fontSize: 12 }}>← Zurück zur Liste</SecondaryButton>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 20, marginTop: 24 }}>
            <div style={{ background: C.n0, border: `1px solid ${C.n200}`, borderRadius: 10, padding: '20px 24px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: C.n800 }}>Original-Mail</div>
                <div style={{ fontSize: 11, color: C.n500 }}>IMAP-Postfach kanzlei</div>
              </div>
              <div style={{ fontSize: 12, color: C.n600, lineHeight: 1.8 }}>
                <div><strong style={{ color: C.n800 }}>Von</strong> office@trans-spedition.de</div>
                <div><strong style={{ color: C.n800 }}>Betreff</strong> Säumniszuschlag — letzte Mahnung</div>
                <div><strong style={{ color: C.n800 }}>Mail-ID</strong> <span style={{ fontFamily: 'JetBrains Mono, monospace' }}>mail_017</span></div>
              </div>
              <div style={{ marginTop: 16, padding: '14px 16px', background: C.n50,
                borderRadius: 6, fontSize: 13, color: C.n700, lineHeight: 1.6 }}>
                Sehr geehrtes Team,<br/><br/>
                ich habe heute eine letzte Mahnung mit Säumniszuschlag erhalten.
                Hatten wir nicht vereinbart, dass das schon erledigt ist?<br/><br/>
                Viele Grüße<br/>F. Albrecht
              </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <ClassificationCard localT={localT}/>
              <RoutingCard localT={localT}/>
            </div>
          </div>

          <div style={{ marginTop: 20, background: C.n0, border: `1px solid ${C.n200}`,
            borderRadius: 10, padding: '20px 24px' }}>
            <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.08em',
              color: C.n500, textTransform: 'uppercase', marginBottom: 10 }}>Vorschlagsantwort · editierbar</div>
            <div style={{
              fontSize: 13, color: C.n800, lineHeight: 1.7,
              padding: '14px 16px', background: C.n50, borderRadius: 6,
              border: `1.5px solid ${localT > 8 && localT < 12 ? C.blue600 : 'transparent'}`,
              transition: 'border-color 320ms',
            }}>
              Betreff: Re: Säumniszuschlag — letzte Mahnung<br/><br/>
              Sehr geehrter F. Albrecht,<br/><br/>
              vielen Dank für Ihre Mail. Wir haben Ihre Mitteilung zur Mahnung mit
              Säumniszuschlag erhalten und nehmen diese sehr ernst.<br/><br/>
              Unser Sachbearbeiter wird sich heute noch oder morgen früh mit Ihnen in Verbindung
              setzen, um die Situation schnellstmöglich zu klären und abzuklären, welche
              Vereinbarungen bestanden.
            </div>
            <div style={{ marginTop: 16, display: 'flex', gap: 10 }}>
              <PrimaryButton>✓ Freigeben + Senden</PrimaryButton>
              <SecondaryButton>Speichern</SecondaryButton>
              <SecondaryButton style={{ borderColor: C.n300, color: C.n600 }}>Ablehnen</SecondaryButton>
            </div>
          </div>
        </div>
      </AppShell>

      <Caption start={146} end={152} text="Jede Entscheidung bleibt nachvollziehbar." accent="nachvollziehbar" />
      <Caption start={153} end={157} text="Kategorie, Begründung, Konfidenz und Routing — sichtbar gemacht." />
    </>
  );
}

function ClassificationCard({ localT }) {
  const hl = localT > 3 && localT < 7;
  return (
    <div style={{
      background: C.n0, border: `1.5px solid ${hl ? C.blue600 : C.n200}`,
      borderRadius: 10, padding: '16px 20px',
      transition: 'border-color 320ms',
      boxShadow: hl ? `0 0 0 4px ${C.blue600}1A` : 'none',
    }}>
      <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.08em',
        color: C.n500, textTransform: 'uppercase', marginBottom: 14 }}>Klassifikation</div>
      <KVRow k="Kategorie" v={<Tag>frist</Tag>}/>
      <KVRow k="Konfidenz" v={<span style={{ color: C.green500, fontWeight: 600,
        fontVariantNumeric: 'tabular-nums' }}>0,95</span>}/>
      <KVRow k="Begründung" v={<span style={{ fontSize: 12, color: C.n700 }}>Mahnung mit Säumniszuschlag erhalten, Frage zur Begleichung/Vereinbarung</span>}/>
      <KVRow k="Trigger" v={<Tag light>LLM-Klassifikation</Tag>} last/>
    </div>
  );
}

function RoutingCard({ localT }) {
  const hl = localT > 5 && localT < 9;
  return (
    <div style={{
      background: C.n0, border: `1.5px solid ${hl ? C.blue600 : C.n200}`,
      borderRadius: 10, padding: '16px 20px',
      transition: 'border-color 320ms',
      boxShadow: hl ? `0 0 0 4px ${C.blue600}1A` : 'none',
    }}>
      <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.08em',
        color: C.n500, textTransform: 'uppercase', marginBottom: 14 }}>Routing</div>
      <KVRow k="Aktion" v={<Tag light>vorschlagsantwort_plus_eskalation</Tag>}/>
      <KVRow k="Ziel" v={<span style={{ padding: '3px 10px', borderRadius: 999,
        background: C.blue600, color: 'white', fontSize: 11, fontWeight: 500 }}>Sachbearbeiter</span>}/>
      <KVRow k="Priorität" v={<span style={{ color: C.warning, fontWeight: 600 }}>● Hoch</span>}/>
      <KVRow k="SLA" v={<span style={{ fontSize: 12, color: C.n700 }}>Reaktion ≤ 4 h</span>} last/>
    </div>
  );
}

function KVRow({ k, v, last }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '90px 1fr', gap: 12,
      padding: '8px 0', alignItems: 'center',
      borderBottom: last ? 'none' : `1px solid ${C.n100}`,
    }}>
      <div style={{ fontSize: 12, color: C.n500 }}>{k}</div>
      <div style={{ fontSize: 12, color: C.n800 }}>{v}</div>
    </div>
  );
}

function Tag({ children, light }) {
  return (
    <span style={{
      fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
      padding: '3px 8px', borderRadius: 4,
      background: light ? C.n50 : C.blue50,
      color: light ? C.n700 : C.blue700,
    }}>{children}</span>
  );
}

// ── 4.5 Belegerfassung ────────────────────────────────────────────────
function Demo45Belege() {
  const time = useTime();
  const localT = time - 158;

  return (
    <>
      <AppShell activeNav="belege">
        <PageHeader crumbs={['Steuerkanzlei Mustermann', 'Modul 3 · Belegerfassung']}
          title="Belegerfassung" subtitle="OCR + LLM-Extraktion · DATEV-Export" />
        <div style={{ padding: '24px 32px 0' }}>
          <div style={{ display: 'flex', gap: 16 }}>
            <KPICard label="Offene Belege" value="1" sub="1 freigabe-blockiert"/>
            <KPICard label="Heute extrahiert" value="18" sub="Ø 4,2 Sek/Beleg"/>
            <KPICard label="Ø Konfidenz" value="0,95" sub="via invoice2data + LLM"/>
            <KPICard label="Bereit für DATEV" value="1" sub="SKR03 · CSV-Export"/>
          </div>

          <div style={{ marginTop: 20, background: C.n0, border: `1px solid ${C.n200}`,
            borderRadius: 10, padding: '20px 24px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: C.n800 }}>
                netgo Mitte GmbH · 3.230,41 € · 1 Seite
              </div>
              <span style={{ padding: '4px 10px', borderRadius: 999, background: C.green50,
                color: C.green600, fontSize: 11, fontWeight: 600 }}>Bereit zur Freigabe · 0,95</span>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 24 }}>
              {/* PDF preview placeholder */}
              <div style={{
                background: C.n50, border: `1px solid ${C.n200}`, borderRadius: 6,
                aspectRatio: '1/1.4', padding: 20,
                display: 'flex', flexDirection: 'column', gap: 6,
              }}>
                <div style={{ fontSize: 10, color: C.n400 }}>Seite 1 von 1 · pdf_ocr_260112_121945.pdf</div>
                <div style={{ height: 16, background: C.blue700, width: '40%', marginTop: 16 }}/>
                <div style={{ height: 4, background: C.n300, width: '70%' }}/>
                <div style={{ height: 4, background: C.n300, width: '60%' }}/>
                <div style={{ height: 4, background: C.n300, width: '80%' }}/>
                <div style={{ flex: 1 }}/>
                <div style={{ height: 4, background: C.n300, width: '50%' }}/>
                <div style={{ height: 16, background: C.blue700, width: '30%', alignSelf: 'flex-end' }}/>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                {[
                  { l: 'Datum', v: '2025-04-08', k: '0,99' },
                  { l: 'Betrag brutto', v: '3.230,41 €', k: '0,97', highlight: localT > 3 && localT < 7 },
                  { l: 'Lieferant', v: 'netgo Mitte GmbH', k: '0,92' },
                  { l: 'Betrag netto', v: '2.714,63 €', k: '0,92' },
                  { l: 'Rechnungsnummer', v: '4327535', k: '0,99' },
                  { l: 'USt-Satz', v: '19 %', k: '0,95' },
                  { l: 'Lieferant USt-ID', v: '—', k: '0,99' },
                  { l: 'Beleg-Typ', v: 'rechnung', k: '0,92' },
                ].map((f, i) => (
                  <div key={i} style={{
                    border: `1.5px solid ${f.highlight ? C.blue600 : C.n200}`,
                    borderRadius: 6, padding: '10px 14px',
                    transition: 'border-color 320ms',
                  }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                      <div style={{ fontSize: 11, color: C.n500 }}>{f.l}</div>
                      <div style={{ fontSize: 10, color: C.n400, fontVariantNumeric: 'tabular-nums' }}>Konf. {f.k}</div>
                    </div>
                    <div style={{ fontSize: 14, fontWeight: 500, color: C.n800,
                      fontVariantNumeric: 'tabular-nums' }}>{f.v}</div>
                  </div>
                ))}
                <div style={{ gridColumn: 'span 2',
                  padding: '10px 14px', background: C.n50, borderRadius: 6,
                  fontSize: 12, color: C.n700 }}>
                  → SKRO3-Konto (auto): <strong style={{ color: C.blue600 }}>4980 · Sonstige Aufwendungen</strong>
                  <span style={{ color: C.n500, marginLeft: 10 }}>anpassbar pro Mandant</span>
                </div>
              </div>
            </div>

            <div style={{ marginTop: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ fontSize: 12, color: C.green500, fontWeight: 600 }}>✓ Bereit zur Freigabe</div>
              <div style={{ display: 'flex', gap: 10 }}>
                <SecondaryButton style={{ borderColor: C.n300, color: C.n600 }}>Ablehnen</SecondaryButton>
                <PrimaryButton style={{
                  boxShadow: localT > 7 ? `0 0 0 4px ${C.green500}33` : 'none',
                  transition: 'box-shadow 320ms',
                }}>Freigeben</PrimaryButton>
              </div>
            </div>
          </div>
        </div>
      </AppShell>

      <Caption start={160} end={166} text="OCR und LLM extrahieren die Rechnungsdaten." />
      <Caption start={167} end={171} text="Der Mensch prüft die Werte vor der Freigabe — Export als DATEV-CSV." accent="DATEV-CSV" />
    </>
  );
}

Object.assign(window, {
  Scene4Demo, AppShell,
  Demo41Uebersicht, Demo42Standard, Demo43TriageList, Demo44TriageDetail, Demo45Belege,
});