merge: gitea/main — resolve pitch-deck conflicts (accept theirs)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

pitch-deck/components/PitchDeck.tsx

@@ -6,7 +6,9 @@ import { useSlideNavigation } from '@/lib/hooks/useSlideNavigation'
 import { useKeyboard } from '@/lib/hooks/useKeyboard'
 import { usePitchData } from '@/lib/hooks/usePitchData'
 import { usePresenterMode } from '@/lib/hooks/usePresenterMode'
+import { useAuditTracker } from '@/lib/hooks/useAuditTracker'
 import { Language, PitchData } from '@/lib/types'
+import { Investor } from '@/lib/hooks/useAuth'
 
 import ParticleBackground from './ParticleBackground'
 import ProgressBar from './ProgressBar'
@@ -17,13 +19,12 @@ import SlideOverview from './SlideOverview'
 import SlideContainer from './SlideContainer'
 import PresenterOverlay from './presenter/PresenterOverlay'
 import AvatarPlaceholder from './presenter/AvatarPlaceholder'
+import Watermark from './Watermark'
 
 import IntroPresenterSlide from './slides/IntroPresenterSlide'
-import ExecutiveSummarySlide from './slides/ExecutiveSummarySlide'
 import CoverSlide from './slides/CoverSlide'
 import ProblemSlide from './slides/ProblemSlide'
 import SolutionSlide from './slides/SolutionSlide'
-import RegulatoryLandscapeSlide from './slides/RegulatoryLandscapeSlide'
 import ProductSlide from './slides/ProductSlide'
 import HowItWorksSlide from './slides/HowItWorksSlide'
 import MarketSlide from './slides/MarketSlide'
@@ -33,8 +34,6 @@ import CompetitionSlide from './slides/CompetitionSlide'
 import TeamSlide from './slides/TeamSlide'
 import FinancialsSlide from './slides/FinancialsSlide'
 import TheAskSlide from './slides/TheAskSlide'
-import CapTableSlide from './slides/CapTableSlide'
-import SavingsSlide from './slides/SavingsSlide'
 import AIQASlide from './slides/AIQASlide'
 import AssumptionsSlide from './slides/AssumptionsSlide'
 import ArchitectureSlide from './slides/ArchitectureSlide'
@@ -42,33 +41,18 @@ import GTMSlide from './slides/GTMSlide'
 import RegulatorySlide from './slides/RegulatorySlide'
 import EngineeringSlide from './slides/EngineeringSlide'
 import AIPipelineSlide from './slides/AIPipelineSlide'
-import SDKDemoSlide from './slides/SDKDemoSlide'
-import StrategySlide from './slides/StrategySlide'
-import FinanzplanSlide from './slides/FinanzplanSlide'
-import GlossarySlide from './slides/GlossarySlide'
 
 interface PitchDeckProps {
   lang: Language
   onToggleLanguage: () => void
+  investor: Investor | null
+  onLogout: () => void
 }
 
-export default function PitchDeck({ lang, onToggleLanguage }: PitchDeckProps) {
+export default function PitchDeck({ lang, onToggleLanguage, investor, onLogout }: PitchDeckProps) {
   const { data, loading, error } = usePitchData()
   const nav = useSlideNavigation()
   const [fabOpen, setFabOpen] = useState(false)
-  const [theme, setTheme] = useState<'dark' | 'light'>('dark')
-
-  const toggleTheme = useCallback(() => {
-    setTheme(prev => {
-      const next = prev === 'dark' ? 'light' : 'dark'
-      if (next === 'light') {
-        document.documentElement.classList.add('theme-light')
-      } else {
-        document.documentElement.classList.remove('theme-light')
-      }
-      return next
-    })
-  }, [])
 
   const presenter = usePresenterMode({
     goToSlide: nav.goToSlide,
@@ -77,6 +61,13 @@ export default function PitchDeck({ lang, onToggleLanguage }: PitchDeckProps) {
     language: lang,
   })
 
+  // Audit tracking
+  useAuditTracker({
+    investorId: investor?.id || null,
+    currentSlide: nav.currentSlide,
+    enabled: !!investor,
+  })
+
   const toggleFullscreen = useCallback(() => {
     if (!document.fullscreenElement) {
       document.documentElement.requestFullscreen()
@@ -137,24 +128,20 @@ export default function PitchDeck({ lang, onToggleLanguage }: PitchDeckProps) {
             isPresenting={presenter.state !== 'idle'}
           />
         )
-      case 'executive-summary':
-        return <ExecutiveSummarySlide lang={lang} data={data} />
       case 'cover':
         return <CoverSlide lang={lang} onNext={nav.nextSlide} funding={data.funding} />
       case 'problem':
         return <ProblemSlide lang={lang} />
       case 'solution':
         return <SolutionSlide lang={lang} />
-      case 'regulatory-landscape':
-        return <RegulatoryLandscapeSlide lang={lang} />
       case 'product':
-        return <ProductSlide lang={lang} />
+        return <ProductSlide lang={lang} products={data.products} />
       case 'how-it-works':
         return <HowItWorksSlide lang={lang} />
       case 'market':
         return <MarketSlide lang={lang} market={data.market} />
       case 'business-model':
-        return <BusinessModelSlide lang={lang} />
+        return <BusinessModelSlide lang={lang} products={data.products} />
       case 'traction':
         return <TractionSlide lang={lang} milestones={data.milestones} metrics={data.metrics} />
       case 'competition':
@@ -162,13 +149,9 @@ export default function PitchDeck({ lang, onToggleLanguage }: PitchDeckProps) {
       case 'team':
         return <TeamSlide lang={lang} team={data.team} />
       case 'financials':
-        return <FinancialsSlide lang={lang} />
+        return <FinancialsSlide lang={lang} investorId={investor?.id || null} />
       case 'the-ask':
         return <TheAskSlide lang={lang} funding={data.funding} />
-      case 'cap-table':
-        return <CapTableSlide lang={lang} />
-      case 'customer-savings':
-        return <SavingsSlide lang={lang} />
       case 'ai-qa':
         return <AIQASlide lang={lang} />
       case 'annex-assumptions':
@@ -183,40 +166,21 @@ export default function PitchDeck({ lang, onToggleLanguage }: PitchDeckProps) {
         return <EngineeringSlide lang={lang} />
       case 'annex-aipipeline':
         return <AIPipelineSlide lang={lang} />
-      case 'annex-sdk-demo':
-        return <SDKDemoSlide lang={lang} />
-      case 'annex-strategy':
-        return <StrategySlide lang={lang} />
-      case 'annex-finanzplan':
-        return <FinanzplanSlide lang={lang} />
-      case 'annex-glossary':
-        return <GlossarySlide lang={lang} />
       default:
         return null
     }
   }
 
   return (
-    <div className={`h-screen relative overflow-hidden bg-gradient-to-br ${theme === 'light' ? 'from-[#eef0f5] via-[#f8f9fc] to-[#eef0f5]' : 'from-slate-950 via-[#0a0a1a] to-slate-950'}`}>
+    <div
+      className="h-screen relative overflow-hidden bg-gradient-to-br from-slate-950 via-[#0a0a1a] to-slate-950 select-none"
+      onContextMenu={(e) => e.preventDefault()}
+    >
       <ParticleBackground />
       <ProgressBar current={nav.currentIndex} total={nav.totalSlides} />
 
-      {/* Theme Toggle */}
-      <button
-        onClick={toggleTheme}
-        className="fixed top-4 right-4 z-50 p-2 rounded-full bg-white/[0.08] border border-white/10 hover:bg-white/[0.15] transition-colors backdrop-blur-xl"
-        title={theme === 'dark' ? 'Tag-Modus' : 'Nacht-Modus'}
-      >
-        {theme === 'dark' ? (
-          <svg className="w-4 h-4 text-amber-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <circle cx="12" cy="12" r="5" /><path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
-          </svg>
-        ) : (
-          <svg className="w-4 h-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
-          </svg>
-        )}
-      </button>
+      {/* Investor watermark */}
+      {investor && <Watermark text={investor.email} />}
 
       <SlideContainer slideKey={nav.currentSlide} direction={nav.direction}>
         {renderSlide()}
@@ -263,11 +227,6 @@ export default function PitchDeck({ lang, onToggleLanguage }: PitchDeckProps) {
         onResume={presenter.resume}
         onStop={presenter.stop}
         onSkip={presenter.skipSlide}
-        onPrev={presenter.prevSlide}
-        isSpeaking={presenter.isSpeaking}
-        ttsAvailable={presenter.ttsAvailable}
-        ttsEnabled={presenter.ttsEnabled}
-        onToggleTts={() => presenter.setTtsEnabled(!presenter.ttsEnabled)}
       />
 
       <AnimatePresence>

pitch-deck/components/Watermark.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+interface WatermarkProps {
+  text: string
+}
+
+export default function Watermark({ text }: WatermarkProps) {
+  if (!text) return null
+
+  return (
+    <div
+      className="fixed inset-0 pointer-events-none z-10 overflow-hidden select-none"
+      aria-hidden="true"
+    >
+      <div className="absolute inset-0 flex items-center justify-center">
+        <div
+          className="text-white/[0.03] text-2xl font-mono whitespace-nowrap tracking-widest"
+          style={{
+            transform: 'rotate(-35deg) scale(1.5)',
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+          }}
+        >
+          {/* Repeat the watermark text in a grid pattern */}
+          {Array.from({ length: 7 }, (_, row) => (
+            <div key={row} className="my-16">
+              {Array.from({ length: 3 }, (_, col) => (
+                <span key={col} className="mx-12">{text}</span>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

pitch-deck/components/pitch-admin/AdminShell.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname, useRouter } from 'next/navigation'
+import { useState } from 'react'
+import {
+  LayoutDashboard,
+  Users,
+  FileText,
+  TrendingUp,
+  ShieldCheck,
+  LogOut,
+  Menu,
+  X,
+} from 'lucide-react'
+
+interface AdminShellProps {
+  admin: { id: string; email: string; name: string }
+  children: React.ReactNode
+}
+
+const NAV = [
+  { href: '/pitch-admin', label: 'Dashboard', icon: LayoutDashboard, exact: true },
+  { href: '/pitch-admin/investors', label: 'Investors', icon: Users },
+  { href: '/pitch-admin/audit', label: 'Audit Log', icon: FileText },
+  { href: '/pitch-admin/financial-model', label: 'Financial Model', icon: TrendingUp },
+  { href: '/pitch-admin/admins', label: 'Admins', icon: ShieldCheck },
+]
+
+export default function AdminShell({ admin, children }: AdminShellProps) {
+  const pathname = usePathname()
+  const router = useRouter()
+  const [open, setOpen] = useState(false)
+
+  async function logout() {
+    await fetch('/api/admin-auth/logout', { method: 'POST' })
+    router.push('/pitch-admin/login')
+  }
+
+  function isActive(item: typeof NAV[number]) {
+    if (item.exact) return pathname === item.href
+    return pathname === item.href || pathname.startsWith(item.href + '/')
+  }
+
+  return (
+    <div className="min-h-screen bg-[#0a0a1a] text-white flex">
+      {/* Sidebar */}
+      <aside
+        className={`fixed lg:static inset-y-0 left-0 z-40 w-64 bg-black/40 backdrop-blur-xl border-r border-white/[0.06]
+          transform transition-transform lg:transform-none ${open ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}`}
+      >
+        <div className="h-full flex flex-col">
+          <div className="px-6 py-5 border-b border-white/[0.06]">
+            <div className="flex items-center gap-3">
+              <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
+                <svg width="20" height="20" viewBox="0 0 40 40" fill="none">
+                  <path d="M8 12L20 6L32 12V28L20 34L8 28V12Z" stroke="white" strokeWidth="2.5" fill="none" />
+                  <circle cx="20" cy="20" r="3" fill="white" />
+                </svg>
+              </div>
+              <div className="min-w-0">
+                <div className="text-sm font-semibold text-white">BreakPilot</div>
+                <div className="text-[10px] text-white/40 uppercase tracking-wider">Pitch Admin</div>
+              </div>
+            </div>
+          </div>
+
+          <nav className="flex-1 px-3 py-4 space-y-1">
+            {NAV.map((item) => {
+              const Icon = item.icon
+              const active = isActive(item)
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  onClick={() => setOpen(false)}
+                  className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors
+                    ${active
+                      ? 'bg-indigo-500/15 text-indigo-300 border border-indigo-500/20'
+                      : 'text-white/60 hover:bg-white/[0.04] hover:text-white/90 border border-transparent'}`}
+                >
+                  <Icon className="w-4 h-4" />
+                  {item.label}
+                </Link>
+              )
+            })}
+          </nav>
+
+          <div className="px-3 py-4 border-t border-white/[0.06]">
+            <div className="px-3 py-2 mb-2">
+              <div className="text-sm font-medium text-white/90 truncate">{admin.name}</div>
+              <div className="text-xs text-white/40 truncate">{admin.email}</div>
+            </div>
+            <button
+              onClick={logout}
+              className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-white/60 hover:bg-red-500/10 hover:text-red-300 transition-colors"
+            >
+              <LogOut className="w-4 h-4" />
+              Logout
+            </button>
+          </div>
+        </div>
+      </aside>
+
+      {/* Mobile overlay */}
+      {open && (
+        <div
+          onClick={() => setOpen(false)}
+          className="fixed inset-0 bg-black/60 z-30 lg:hidden"
+        />
+      )}
+
+      {/* Main content */}
+      <div className="flex-1 flex flex-col min-w-0">
+        <header className="lg:hidden flex items-center justify-between px-4 py-3 border-b border-white/[0.06]">
+          <button
+            onClick={() => setOpen(true)}
+            className="w-9 h-9 rounded-lg bg-white/[0.04] flex items-center justify-center"
+          >
+            <Menu className="w-5 h-5" />
+          </button>
+          <div className="text-sm font-semibold">Pitch Admin</div>
+          <div className="w-9" />
+        </header>
+        <main className="flex-1 p-6 lg:p-8 overflow-y-auto">{children}</main>
+      </div>
+    </div>
+  )
+}

pitch-deck/components/pitch-admin/AuditLogTable.tsx

@@ -0,0 +1,153 @@
+'use client'
+
+export interface AuditLogRow {
+  id: number | string
+  action: string
+  created_at: string
+  details: Record<string, unknown> | null
+  ip_address?: string | null
+  slide_id?: string | null
+  investor_email?: string | null
+  investor_name?: string | null
+  target_investor_email?: string | null
+  target_investor_name?: string | null
+  admin_email?: string | null
+  admin_name?: string | null
+}
+
+interface AuditLogTableProps {
+  rows: AuditLogRow[]
+  showActor?: boolean
+}
+
+const ACTION_COLORS: Record<string, string> = {
+  login_success: 'text-green-400 bg-green-500/10',
+  login_failed: 'text-rose-400 bg-rose-500/10',
+  admin_login_success: 'text-green-400 bg-green-500/10',
+  admin_login_failed: 'text-rose-400 bg-rose-500/10',
+  admin_logout: 'text-white/40 bg-white/[0.04]',
+  logout: 'text-white/40 bg-white/[0.04]',
+  slide_viewed: 'text-indigo-400 bg-indigo-500/10',
+  assumption_changed: 'text-amber-400 bg-amber-500/10',
+  assumption_edited: 'text-amber-400 bg-amber-500/10',
+  scenario_edited: 'text-amber-400 bg-amber-500/10',
+  investor_invited: 'text-purple-400 bg-purple-500/10',
+  magic_link_resent: 'text-purple-400 bg-purple-500/10',
+  investor_revoked: 'text-rose-400 bg-rose-500/10',
+  investor_edited: 'text-blue-400 bg-blue-500/10',
+  admin_created: 'text-green-400 bg-green-500/10',
+  admin_edited: 'text-blue-400 bg-blue-500/10',
+  admin_deactivated: 'text-rose-400 bg-rose-500/10',
+  new_ip_detected: 'text-amber-400 bg-amber-500/10',
+}
+
+function actorLabel(row: AuditLogRow): { label: string; sub: string; kind: 'admin' | 'investor' | 'system' } {
+  if (row.admin_email) {
+    return { label: row.admin_name || row.admin_email, sub: row.admin_email, kind: 'admin' }
+  }
+  if (row.investor_email) {
+    return { label: row.investor_name || row.investor_email, sub: row.investor_email, kind: 'investor' }
+  }
+  return { label: 'system', sub: '', kind: 'system' }
+}
+
+function targetLabel(row: AuditLogRow): string | null {
+  if (row.target_investor_email) {
+    return row.target_investor_name
+      ? `${row.target_investor_name} <${row.target_investor_email}>`
+      : row.target_investor_email
+  }
+  return null
+}
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleString()
+}
+
+function summarizeDetails(action: string, details: Record<string, unknown> | null): string {
+  if (!details) return ''
+  if (action === 'slide_viewed' && details.slide_id) return String(details.slide_id)
+  if (action === 'assumption_edited' || action === 'scenario_edited') {
+    const before = details.before as Record<string, unknown> | undefined
+    const after = details.after as Record<string, unknown> | undefined
+    if (before && after) {
+      const keys = Object.keys(after).filter(k => JSON.stringify(before[k]) !== JSON.stringify(after[k]))
+      return keys.map(k => `${k}: ${JSON.stringify(before[k])} → ${JSON.stringify(after[k])}`).join(', ')
+    }
+  }
+  if (action === 'investor_invited' || action === 'magic_link_resent') {
+    return String(details.email || '')
+  }
+  if (action === 'investor_edited') {
+    const before = details.before as Record<string, unknown> | undefined
+    const after = details.after as Record<string, unknown> | undefined
+    if (before && after) {
+      const keys = Object.keys(after).filter(k => before[k] !== after[k])
+      return keys.map(k => `${k}: "${before[k] || ''}" → "${after[k] || ''}"`).join(', ')
+    }
+  }
+  return JSON.stringify(details).slice(0, 80)
+}
+
+export default function AuditLogTable({ rows, showActor = true }: AuditLogTableProps) {
+  if (rows.length === 0) {
+    return <div className="text-white/40 text-sm py-8 text-center">No audit events</div>
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="text-left text-xs uppercase tracking-wider text-white/40 border-b border-white/[0.06]">
+            <th className="py-3 px-3 font-medium">When</th>
+            {showActor && <th className="py-3 px-3 font-medium">Actor</th>}
+            <th className="py-3 px-3 font-medium">Action</th>
+            <th className="py-3 px-3 font-medium">Target / Details</th>
+            <th className="py-3 px-3 font-medium">IP</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => {
+            const actor = actorLabel(row)
+            const target = targetLabel(row)
+            const summary = summarizeDetails(row.action, row.details)
+            const colorClass = ACTION_COLORS[row.action] || 'text-white/60 bg-white/[0.04]'
+            return (
+              <tr key={row.id} className="border-b border-white/[0.04] hover:bg-white/[0.02]">
+                <td className="py-3 px-3 text-white/60 whitespace-nowrap">{formatDate(row.created_at)}</td>
+                {showActor && (
+                  <td className="py-3 px-3">
+                    <div className="flex items-center gap-2">
+                      <span
+                        className={`text-[9px] px-1.5 py-0.5 rounded uppercase font-semibold ${
+                          actor.kind === 'admin'
+                            ? 'bg-purple-500/20 text-purple-300'
+                            : actor.kind === 'investor'
+                              ? 'bg-indigo-500/20 text-indigo-300'
+                              : 'bg-white/10 text-white/50'
+                        }`}
+                      >
+                        {actor.kind}
+                      </span>
+                      <div className="min-w-0">
+                        <div className="text-white/80 truncate max-w-[180px]">{actor.label}</div>
+                      </div>
+                    </div>
+                  </td>
+                )}
+                <td className="py-3 px-3">
+                  <span className={`text-xs px-2 py-1 rounded font-mono ${colorClass}`}>{row.action}</span>
+                </td>
+                <td className="py-3 px-3 text-white/60 max-w-md">
+                  {target && <div className="text-white/80 truncate">→ {target}</div>}
+                  {summary && <div className="text-xs text-white/40 truncate">{summary}</div>}
+                </td>
+                <td className="py-3 px-3 text-white/40 font-mono text-xs">{row.ip_address || '—'}</td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}

pitch-deck/components/pitch-admin/StatCard.tsx

@@ -0,0 +1,33 @@
+import { LucideIcon } from 'lucide-react'
+
+interface StatCardProps {
+  label: string
+  value: string | number
+  icon?: LucideIcon
+  hint?: string
+  accent?: 'indigo' | 'green' | 'amber' | 'rose'
+}
+
+const ACCENTS = {
+  indigo: 'text-indigo-400 bg-indigo-500/10 border-indigo-500/20',
+  green: 'text-green-400 bg-green-500/10 border-green-500/20',
+  amber: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
+  rose: 'text-rose-400 bg-rose-500/10 border-rose-500/20',
+}
+
+export default function StatCard({ label, value, icon: Icon, hint, accent = 'indigo' }: StatCardProps) {
+  return (
+    <div className="bg-white/[0.04] border border-white/[0.06] rounded-2xl p-5">
+      <div className="flex items-start justify-between mb-3">
+        <span className="text-xs font-medium text-white/50 uppercase tracking-wider">{label}</span>
+        {Icon && (
+          <div className={`w-9 h-9 rounded-lg flex items-center justify-center border ${ACCENTS[accent]}`}>
+            <Icon className="w-4 h-4" />
+          </div>
+        )}
+      </div>
+      <div className="text-3xl font-semibold text-white">{value}</div>
+      {hint && <div className="text-xs text-white/40 mt-1">{hint}</div>}
+    </div>
+  )
+}

pitch-deck/components/slides/FinancialsSlide.tsx

@@ -1,73 +1,57 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import { Language, FMComputeResponse } from '@/lib/types'
+import { useState } from 'react'
+import { Language } from '@/lib/types'
 import { t } from '@/lib/i18n'
+import { useFinancialModel } from '@/lib/hooks/useFinancialModel'
 import GradientText from '../ui/GradientText'
 import FadeInView from '../ui/FadeInView'
 import FinancialChart from '../ui/FinancialChart'
+import FinancialSliders from '../ui/FinancialSliders'
 import KPICard from '../ui/KPICard'
+import RunwayGauge from '../ui/RunwayGauge'
 import WaterfallChart from '../ui/WaterfallChart'
+import UnitEconomicsCards from '../ui/UnitEconomicsCards'
+import ScenarioSwitcher from '../ui/ScenarioSwitcher'
+import AnnualPLTable from '../ui/AnnualPLTable'
 import AnnualCashflowChart from '../ui/AnnualCashflowChart'
 
 type FinTab = 'overview' | 'guv' | 'cashflow'
 
 interface FinancialsSlideProps {
   lang: Language
+  investorId: string | null
 }
 
-export default function FinancialsSlide({ lang }: FinancialsSlideProps) {
+export default function FinancialsSlide({ lang, investorId }: FinancialsSlideProps) {
   const i = t(lang)
+  const fm = useFinancialModel(investorId)
   const [activeTab, setActiveTab] = useState<FinTab>('overview')
-  const [data, setData] = useState<FMComputeResponse | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [guv, setGuv] = useState<any[]>([])
   const de = lang === 'de'
 
-  // Auto-load Finanzplan data
-  useEffect(() => {
-    async function load() {
-      try {
-        // Compute Finanzplan and get FMResult format
-        const res = await fetch('/api/financial-model/compute', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ source: 'finanzplan' }),
-        })
-        if (res.ok) {
-          const d = await res.json()
-          setData(d)
-        }
-        // Load GuV separately
-        const guvRes = await fetch('/api/finanzplan/guv')
-        if (guvRes.ok) {
-          const guvData = await guvRes.json()
-          setGuv(guvData.rows || [])
-        }
-      } catch (e) {
-        console.error('Failed to load Finanzplan:', e)
-      } finally {
-        setLoading(false)
-      }
-    }
-    load()
-  }, [])
+  const activeResults = fm.activeResults
+  const summary = activeResults?.summary
+  const lastResult = activeResults?.results[activeResults.results.length - 1]
 
-  const summary = data?.summary
-  const results = data?.results || []
-  const lastResult = results.length > 0 ? results[results.length - 1] : null
+  // Build scenario color map
+  const scenarioColors: Record<string, string> = {}
+  fm.scenarios.forEach(s => { scenarioColors[s.id] = s.color })
 
-  // Find break-even month (first month where revenue > costs)
-  const breakEvenMonth = results.findIndex(r => r.revenue_eur > r.total_costs_eur && r.revenue_eur > 0)
-  const breakEvenYear = breakEvenMonth >= 0 ? results[breakEvenMonth]?.year : null
+  // Build compare results (exclude active scenario)
+  const compareResults = new Map(
+    Array.from(fm.results.entries()).filter(([id]) => id !== fm.activeScenarioId)
+  )
+
+  // Initial funding from assumptions
+  const initialFunding = (fm.activeScenario?.assumptions.find(a => a.key === 'initial_funding')?.value as number) || 200000
 
   const tabs: { id: FinTab; label: string }[] = [
-    { id: 'overview', label: de ? 'Übersicht' : 'Overview' },
+    { id: 'overview', label: de ? 'Uebersicht' : 'Overview' },
     { id: 'guv', label: de ? 'GuV (Jahres)' : 'P&L (Annual)' },
-    { id: 'cashflow', label: de ? 'Cashflow' : 'Cash Flow' },
+    { id: 'cashflow', label: de ? 'Cashflow & Finanzbedarf' : 'Cashflow & Funding' },
   ]
 
-  if (loading) {
+  if (fm.loading) {
     return (
       <div className="flex items-center justify-center h-full">
         <div className="w-8 h-8 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" />
@@ -87,8 +71,8 @@ export default function FinancialsSlide({ lang }: FinancialsSlideProps) {
       {/* Hero KPI Cards */}
       <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mb-3">
         <KPICard
-          label="ARR 2030"
-          value={lastResult ? Math.round(lastResult.arr_eur / 1_000_000 * 10) / 10 : 0}
+          label={`ARR 2030`}
+          value={summary ? Math.round(summary.final_arr / 1_000_000 * 10) / 10 : 0}
           suffix=" Mio."
           decimals={1}
           trend="up"
@@ -97,29 +81,29 @@ export default function FinancialsSlide({ lang }: FinancialsSlideProps) {
           subLabel="EUR"
         />
         <KPICard
-          label={de ? 'Mitarbeiter 2030' : 'Employees 2030'}
-          value={lastResult?.employees_count || 0}
+          label={de ? 'Kunden 2030' : 'Customers 2030'}
+          value={summary?.final_customers || 0}
           trend="up"
           color="#22c55e"
           delay={0.15}
         />
         <KPICard
           label="Break-Even"
-          value={breakEvenYear || 0}
-          trend={breakEvenMonth >= 0 ? 'up' : 'neutral'}
+          value={summary?.break_even_month || 0}
+          suffix={de ? ' Mo.' : ' mo.'}
+          trend={summary?.break_even_month && summary.break_even_month <= 24 ? 'up' : 'down'}
           color="#eab308"
           delay={0.2}
-          subLabel={breakEvenMonth >= 0 ? `${de ? 'Monat' : 'Month'} ${breakEvenMonth + 1}` : ''}
+          subLabel={summary?.break_even_month ? `~${Math.ceil((summary.break_even_month) / 12) + 2025}` : ''}
         />
         <KPICard
-          label={de ? 'Cash Ende 2030' : 'Cash End 2030'}
-          value={lastResult ? Math.round(lastResult.cash_balance_eur / 1_000_000 * 10) / 10 : 0}
-          suffix=" Mio."
+          label="LTV/CAC"
+          value={summary?.final_ltv_cac || 0}
+          suffix="x"
           decimals={1}
-          trend={(lastResult?.cash_balance_eur || 0) > 0 ? 'up' : 'down'}
+          trend={(summary?.final_ltv_cac || 0) >= 3 ? 'up' : 'down'}
           color="#a855f7"
           delay={0.25}
-          subLabel="EUR"
         />
       </div>
 
@@ -140,119 +124,175 @@ export default function FinancialsSlide({ lang }: FinancialsSlideProps) {
         ))}
       </div>
 
-      {/* TAB: Overview — monatlicher Chart */}
-      {activeTab === 'overview' && (
-        <div className="space-y-3">
-          <FadeInView delay={0.1}>
-            <div className="bg-white/[0.05] backdrop-blur-xl border border-white/10 rounded-2xl p-3">
-              <div className="flex items-center justify-between mb-2">
-                <p className="text-xs text-white/40">
-                  {de ? 'Umsatz vs. Kosten (60 Monate)' : 'Revenue vs. Costs (60 months)'}
-                </p>
-                <div className="flex items-center gap-3 text-[9px]">
-                  <span className="flex items-center gap-1"><span className="w-2 h-0.5 bg-indigo-500 inline-block" /> {de ? 'Umsatz' : 'Revenue'}</span>
-                  <span className="flex items-center gap-1"><span className="w-2 h-0.5 bg-red-400 inline-block" /> {de ? 'Kosten' : 'Costs'}</span>
-                  <span className="flex items-center gap-1"><span className="w-2 h-0.5 bg-emerald-500 inline-block" /> Cash</span>
+      {/* Main content: 3-column layout */}
+      <div className="grid md:grid-cols-12 gap-3">
+        {/* Left: Charts (8 columns) */}
+        <div className="md:col-span-8 space-y-3">
+
+          {/* TAB: Overview — monatlicher Chart + Waterfall + Unit Economics */}
+          {activeTab === 'overview' && (
+            <>
+              <FadeInView delay={0.1}>
+                <div className="bg-white/[0.05] backdrop-blur-xl border border-white/10 rounded-2xl p-3">
+                  <div className="flex items-center justify-between mb-2">
+                    <p className="text-xs text-white/40">
+                      {de ? 'Umsatz vs. Kosten (60 Monate)' : 'Revenue vs. Costs (60 months)'}
+                    </p>
+                    <div className="flex items-center gap-3 text-[9px]">
+                      <span className="flex items-center gap-1"><span className="w-2 h-0.5 bg-indigo-500 inline-block" /> {de ? 'Umsatz' : 'Revenue'}</span>
+                      <span className="flex items-center gap-1"><span className="w-2 h-0.5 bg-red-400 inline-block" style={{ borderBottom: '1px dashed' }} /> {de ? 'Kosten' : 'Costs'}</span>
+                      <span className="flex items-center gap-1"><span className="w-2 h-0.5 bg-emerald-500 inline-block" /> {de ? 'Kunden' : 'Customers'}</span>
+                    </div>
+                  </div>
+                  <FinancialChart
+                    activeResults={activeResults}
+                    compareResults={compareResults}
+                    compareMode={fm.compareMode}
+                    scenarioColors={scenarioColors}
+                    lang={lang}
+                  />
                 </div>
+              </FadeInView>
+
+              <div className="grid md:grid-cols-2 gap-3">
+                <FadeInView delay={0.2}>
+                  <div className="bg-white/[0.05] backdrop-blur-xl border border-white/10 rounded-2xl p-3">
+                    <p className="text-xs text-white/40 mb-2">
+                      {de ? 'Cash-Flow (Quartal)' : 'Cash Flow (Quarterly)'}
+                    </p>
+                    {activeResults && <WaterfallChart results={activeResults.results} lang={lang} />}
+                  </div>
+                </FadeInView>
+
+                <FadeInView delay={0.25}>
+                  <div className="space-y-3">
+                    <div className="bg-white/[0.05] backdrop-blur-xl border border-white/10 rounded-2xl p-3 flex justify-center">
+                      <RunwayGauge
+                        months={lastResult?.runway_months || 0}
+                        size={120}
+                        label={de ? 'Runway (Monate)' : 'Runway (months)'}
+                      />
+                    </div>
+                    {lastResult && (
+                      <UnitEconomicsCards
+                        cac={lastResult.cac_eur}
+                        ltv={lastResult.ltv_eur}
+                        ltvCacRatio={lastResult.ltv_cac_ratio}
+                        grossMargin={lastResult.gross_margin_pct}
+                        churnRate={fm.activeScenario?.assumptions.find(a => a.key === 'churn_rate_monthly')?.value as number || 3}
+                        lang={lang}
+                      />
+                    )}
+                  </div>
+                </FadeInView>
               </div>
-              <FinancialChart
-                activeResults={data}
-                compareResults={new Map()}
-                compareMode={false}
-                scenarioColors={{}}
+            </>
+          )}
+
+          {/* TAB: GuV — Annual P&L Table */}
+          {activeTab === 'guv' && activeResults && (
+            <FadeInView delay={0.1}>
+              <div className="bg-white/[0.05] backdrop-blur-xl border border-white/10 rounded-2xl p-4">
+                <div className="flex items-center justify-between mb-3">
+                  <p className="text-xs text-white/40">
+                    {de ? 'Gewinn- und Verlustrechnung (5 Jahre)' : 'Profit & Loss Statement (5 Years)'}
+                  </p>
+                  <p className="text-[9px] text-white/20">
+                    {de ? 'Alle Werte in EUR' : 'All values in EUR'}
+                  </p>
+                </div>
+                <AnnualPLTable results={activeResults.results} lang={lang} />
+              </div>
+            </FadeInView>
+          )}
+
+          {/* TAB: Cashflow & Finanzbedarf */}
+          {activeTab === 'cashflow' && activeResults && (
+            <FadeInView delay={0.1}>
+              <div className="bg-white/[0.05] backdrop-blur-xl border border-white/10 rounded-2xl p-4">
+                <p className="text-xs text-white/40 mb-3">
+                  {de ? 'Jaehrlicher Cashflow & Finanzbedarf' : 'Annual Cash Flow & Funding Requirements'}
+                </p>
+                <AnnualCashflowChart
+                  results={activeResults.results}
+                  initialFunding={initialFunding}
+                  lang={lang}
+                />
+              </div>
+            </FadeInView>
+          )}
+        </div>
+
+        {/* Right: Controls (4 columns) */}
+        <div className="md:col-span-4 space-y-3">
+          {/* Scenario Switcher */}
+          <FadeInView delay={0.15}>
+            <div className="bg-white/[0.05] backdrop-blur-xl border border-white/10 rounded-2xl p-3">
+              <ScenarioSwitcher
+                scenarios={fm.scenarios}
+                activeId={fm.activeScenarioId}
+                compareMode={fm.compareMode}
+                onSelect={(id) => {
+                  fm.setActiveScenarioId(id)
+                }}
+                onToggleCompare={() => {
+                  if (!fm.compareMode) {
+                    fm.computeAll()
+                  }
+                  fm.setCompareMode(!fm.compareMode)
+                }}
                 lang={lang}
               />
             </div>
           </FadeInView>
 
-          <div className="grid md:grid-cols-2 gap-3">
-            <FadeInView delay={0.2}>
-              <div className="bg-white/[0.05] backdrop-blur-xl border border-white/10 rounded-2xl p-3">
-                <p className="text-xs text-white/40 mb-2">
-                  {de ? 'Cash-Flow (Quartal)' : 'Cash Flow (Quarterly)'}
-                </p>
-                {data && <WaterfallChart results={data.results} lang={lang} />}
-              </div>
-            </FadeInView>
-
-            <FadeInView delay={0.25}>
-              <div className="bg-white/[0.05] backdrop-blur-xl border border-white/10 rounded-2xl p-3">
-                <p className="text-xs text-white/40 mb-2">
-                  {de ? 'Jährlicher Cashflow' : 'Annual Cash Flow'}
-                </p>
-                {data && (
-                  <AnnualCashflowChart
-                    results={data.results}
-                    initialFunding={1000000}
-                    lang={lang}
-                  />
-                )}
-              </div>
-            </FadeInView>
-          </div>
-        </div>
-      )}
-
-      {/* TAB: GuV — aus Finanzplan DB */}
-      {activeTab === 'guv' && (
-        <FadeInView delay={0.1}>
-          <div className="bg-white/[0.05] backdrop-blur-xl border border-white/10 rounded-2xl p-4">
-            <div className="flex items-center justify-between mb-3">
-              <p className="text-xs text-white/40">
-                {de ? 'Gewinn- und Verlustrechnung (5 Jahre)' : 'Profit & Loss Statement (5 Years)'}
+          {/* Assumption Sliders */}
+          <FadeInView delay={0.2}>
+            <div className="bg-white/[0.05] backdrop-blur-xl border border-white/10 rounded-2xl p-3">
+              <p className="text-[10px] text-white/40 uppercase tracking-wider mb-2">
+                {i.financials.adjustAssumptions}
               </p>
-              <p className="text-[9px] text-white/20">{de ? 'Alle Werte in EUR' : 'All values in EUR'}</p>
+              {fm.activeScenario && (
+                <FinancialSliders
+                  assumptions={fm.activeScenario.assumptions}
+                  onAssumptionChange={(key, value) => {
+                    if (fm.activeScenarioId) {
+                      fm.updateAssumption(fm.activeScenarioId, key, value)
+                    }
+                  }}
+                  lang={lang}
+                />
+              )}
+              {fm.computing && (
+                <div className="flex items-center gap-2 mt-2 text-[10px] text-indigo-400">
+                  <div className="w-3 h-3 border border-indigo-400 border-t-transparent rounded-full animate-spin" />
+                  {de ? 'Berechne...' : 'Computing...'}
+                </div>
+              )}
+
+              {/* Snapshot status + reset */}
+              {investorId && (
+                <div className="flex items-center justify-between mt-2 pt-2 border-t border-white/5">
+                  <span className="text-[9px] text-white/30">
+                    {fm.snapshotStatus === 'saving' && (de ? 'Speichere...' : 'Saving...')}
+                    {fm.snapshotStatus === 'saved' && (de ? 'Ihre Aenderungen gespeichert' : 'Your changes saved')}
+                    {fm.snapshotStatus === 'restored' && (de ? 'Ihre Werte geladen' : 'Your values restored')}
+                    {fm.snapshotStatus === 'default' && (de ? 'Standardwerte' : 'Defaults')}
+                  </span>
+                  {fm.snapshotStatus !== 'default' && (
+                    <button
+                      onClick={() => fm.activeScenarioId && fm.resetToDefaults(fm.activeScenarioId)}
+                      className="text-[9px] text-white/40 hover:text-white/70 transition-colors"
+                    >
+                      {de ? 'Zuruecksetzen' : 'Reset to defaults'}
+                    </button>
+                  )}
+                </div>
+              )}
             </div>
-            <table className="w-full text-[11px]">
-              <thead>
-                <tr className="border-b border-white/10">
-                  <th className="text-left py-2 px-2 text-white/40 font-medium min-w-[200px]">{de ? 'Position' : 'Item'}</th>
-                  {[2026, 2027, 2028, 2029, 2030].map(y => (
-                    <th key={y} className="text-right py-2 px-3 text-white/40 font-medium">{y}</th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {guv.map((row: any) => {
-                  const label = row.row_label || ''
-                  const values = row.values || {}
-                  const isBold = row.is_sum_row || label.includes('EBIT') || label.includes('Summe') || label.includes('Rohergebnis') || label.includes('Gesamtleistung') || label.includes('Jahresueberschuss') || label.includes('Ergebnis')
-
-                  return (
-                    <tr key={row.id} className={`border-b border-white/[0.03] ${isBold ? 'bg-white/[0.03]' : ''}`}>
-                      <td className={`py-1.5 px-2 ${isBold ? 'font-bold text-white/80' : 'text-white/60'}`}>{label}</td>
-                      {[2026, 2027, 2028, 2029, 2030].map(y => {
-                        const v = Math.round(values[`y${y}`] || 0)
-                        return (
-                          <td key={y} className={`text-right py-1.5 px-3 ${v < 0 ? 'text-red-400' : v > 0 ? (isBold ? 'text-white/80' : 'text-white/50') : 'text-white/15'} ${isBold ? 'font-bold' : ''}`}>
-                            {v === 0 ? '—' : v.toLocaleString('de-DE')}
-                          </td>
-                        )
-                      })}
-                    </tr>
-                  )
-                })}
-              </tbody>
-            </table>
-          </div>
-        </FadeInView>
-      )}
-
-      {/* TAB: Cashflow */}
-      {activeTab === 'cashflow' && data && (
-        <FadeInView delay={0.1}>
-          <div className="bg-white/[0.05] backdrop-blur-xl border border-white/10 rounded-2xl p-4">
-            <p className="text-xs text-white/40 mb-3">
-              {de ? 'Jährlicher Cashflow & Liquiditätsentwicklung' : 'Annual Cash Flow & Liquidity Development'}
-            </p>
-            <AnnualCashflowChart
-              results={data.results}
-              initialFunding={1000000}
-              lang={lang}
-            />
-          </div>
-        </FadeInView>
-      )}
+          </FadeInView>
+        </div>
+      </div>
     </div>
   )
 }