feat: Add staged funding model, financial compute engine, annex slides and UI enhancements

Restructure financial plan from single 200k SAFE to realistic staged funding (25k Stammkapital, 25k Angel, 200k Wandeldarlehen, 1M Series A = 1.25M total). Add 60-month compute engine with CAPEX/OPEX accounting, cash constraints, hardware financing (30% upfront / 70% leasing), and revenue-based hiring caps. Rebuild TheAskSlide with 4-event funding timeline, update i18n (DE/EN), chat agent core messages, and add 15 new annex/technology slides with supporting UI components (KPICard, RunwayGauge, WaterfallChart, etc.). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-14 21:20:02 +01:00
parent ac1bb1d97b
commit b464366341
44 changed files with 5196 additions and 262 deletions
--- a/pitch-deck/components/slides/FinancialsSlide.tsx
+++ b/pitch-deck/components/slides/FinancialsSlide.tsx
@@ -1,92 +1,312 @@
 'use client'

 import { useState } from 'react'
-import { Language, PitchFinancial } from '@/lib/types'
-import { t, formatEur } from '@/lib/i18n'
+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 GlassCard from '../ui/GlassCard'
-import AnimatedCounter from '../ui/AnimatedCounter'
+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, { AccountingStandard } from '../ui/AnnualPLTable'
+import AnnualCashflowChart from '../ui/AnnualCashflowChart'
+
+type FinTab = 'overview' | 'guv' | 'cashflow'

 interface FinancialsSlideProps {
  lang: Language
-  financials: PitchFinancial[]
 }

-export default function FinancialsSlide({ lang, financials }: FinancialsSlideProps) {
+export default function FinancialsSlide({ lang }: FinancialsSlideProps) {
  const i = t(lang)
-  const [growthRate, setGrowthRate] = useState(100)
-  const [churnRate, setChurnRate] = useState(5)
-  const [arpu, setArpu] = useState(500)
+  const fm = useFinancialModel()
+  const [activeTab, setActiveTab] = useState<FinTab>('overview')
+  const [accountingStandard, setAccountingStandard] = useState<AccountingStandard>('hgb')
+  const de = lang === 'de'

-  const growthMultiplier = growthRate / 100
-  const lastYear = financials[financials.length - 1]
+  const activeResults = fm.activeResults
+  const summary = activeResults?.summary
+  const lastResult = activeResults?.results[activeResults.results.length - 1]
+
+  // Build scenario color map
+  const scenarioColors: Record<string, string> = {}
+  fm.scenarios.forEach(s => { scenarioColors[s.id] = s.color })
+
+  // 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 ? 'Uebersicht' : 'Overview' },
+    { id: 'guv', label: de ? 'GuV (Jahres)' : 'P&L (Annual)' },
+    { id: 'cashflow', label: de ? 'Cashflow & Finanzbedarf' : 'Cashflow & Funding' },
+  ]
+
+  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" />
+      </div>
+    )
+  }

  return (
-    <div>
-      <FadeInView className="text-center mb-8">
-        <h2 className="text-4xl md:text-5xl font-bold mb-3">
+    <div className="max-w-6xl mx-auto px-4">
+      <FadeInView className="text-center mb-3">
+        <h2 className="text-3xl md:text-4xl font-bold mb-1">
          <GradientText>{i.financials.title}</GradientText>
        </h2>
-        <p className="text-lg text-white/50 max-w-2xl mx-auto">{i.financials.subtitle}</p>
+        <p className="text-sm text-white/50 max-w-2xl mx-auto">{i.financials.subtitle}</p>
      </FadeInView>

-      {/* Key Numbers */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
-        <GlassCard delay={0.2} className="p-4 text-center">
-          <p className="text-xs text-white/40 mb-1">{i.financials.arr} 2030</p>
-          <p className="text-xl font-bold text-white">
-            <AnimatedCounter
-              target={Math.round((lastYear?.arr_eur || 0) * growthMultiplier / 1_000_000)}
-              suffix={lang === 'de' ? ' Mio.' : 'M'}
-              duration={1200}
-            />
-          </p>
-        </GlassCard>
-        <GlassCard delay={0.25} className="p-4 text-center">
-          <p className="text-xs text-white/40 mb-1">{i.financials.customers} 2030</p>
-          <p className="text-xl font-bold text-white">
-            <AnimatedCounter target={Math.round((lastYear?.customers_count || 0) * growthMultiplier)} duration={1200} />
-          </p>
-        </GlassCard>
-        <GlassCard delay={0.3} className="p-4 text-center">
-          <p className="text-xs text-white/40 mb-1">{i.financials.employees} 2030</p>
-          <p className="text-xl font-bold text-white">{lastYear?.employees_count || 0}</p>
-        </GlassCard>
-        <GlassCard delay={0.35} className="p-4 text-center">
-          <p className="text-xs text-white/40 mb-1">{i.financials.mrr} 2030</p>
-          <p className="text-xl font-bold text-white">
-            <AnimatedCounter
-              target={Math.round((lastYear?.mrr_eur || 0) * growthMultiplier / 1_000)}
-              suffix="k"
-              duration={1200}
-            />
-          </p>
-        </GlassCard>
+      {/* Hero KPI Cards */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mb-3">
+        <KPICard
+          label={`ARR 2030`}
+          value={summary ? Math.round(summary.final_arr / 1_000_000 * 10) / 10 : 0}
+          suffix=" Mio."
+          decimals={1}
+          trend="up"
+          color="#6366f1"
+          delay={0.1}
+          subLabel="EUR"
+        />
+        <KPICard
+          label={de ? 'Kunden 2030' : 'Customers 2030'}
+          value={summary?.final_customers || 0}
+          trend="up"
+          color="#22c55e"
+          delay={0.15}
+        />
+        <KPICard
+          label="Break-Even"
+          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={summary?.break_even_month ? `~${Math.ceil((summary.break_even_month) / 12) + 2025}` : ''}
+        />
+        <KPICard
+          label="LTV/CAC"
+          value={summary?.final_ltv_cac || 0}
+          suffix="x"
+          decimals={1}
+          trend={(summary?.final_ltv_cac || 0) >= 3 ? 'up' : 'down'}
+          color="#a855f7"
+          delay={0.25}
+        />
      </div>

-      <div className="grid md:grid-cols-3 gap-6">
-        {/* Chart */}
-        <FadeInView delay={0.4} className="md:col-span-2">
-          <GlassCard hover={false} className="p-4">
-            <FinancialChart financials={financials} lang={lang} growthMultiplier={growthMultiplier} />
-          </GlassCard>
-        </FadeInView>
+      {/* Tab Navigation + Accounting Standard Toggle */}
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-1">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`px-3 py-1.5 rounded-lg text-xs transition-all
+                ${activeTab === tab.id
+                  ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/30'
+                  : 'bg-white/[0.04] text-white/40 border border-transparent hover:text-white/60 hover:bg-white/[0.06]'
+                }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>

-        {/* Sliders */}
-        <FadeInView delay={0.5}>
-          <FinancialSliders
-            growthRate={growthRate}
-            churnRate={churnRate}
-            arpu={arpu}
-            onGrowthChange={setGrowthRate}
-            onChurnChange={setChurnRate}
-            onArpuChange={setArpu}
-            lang={lang}
-          />
-        </FadeInView>
+        {/* HGB / US GAAP Toggle — only visible on GuV and Cashflow tabs */}
+        {(activeTab === 'guv' || activeTab === 'cashflow') && (
+          <div className="flex items-center gap-1 bg-white/[0.04] rounded-lg p-0.5 border border-white/[0.06]">
+            <button
+              onClick={() => setAccountingStandard('hgb')}
+              className={`px-2.5 py-1 rounded-md text-[10px] font-medium transition-all
+                ${accountingStandard === 'hgb'
+                  ? 'bg-indigo-500/25 text-indigo-300 shadow-sm'
+                  : 'text-white/40 hover:text-white/60'
+                }`}
+            >
+              HGB
+            </button>
+            <button
+              onClick={() => setAccountingStandard('usgaap')}
+              className={`px-2.5 py-1 rounded-md text-[10px] font-medium transition-all
+                ${accountingStandard === 'usgaap'
+                  ? 'bg-indigo-500/25 text-indigo-300 shadow-sm'
+                  : 'text-white/40 hover:text-white/60'
+                }`}
+            >
+              US GAAP
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* 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>
+            </>
+          )}
+
+          {/* 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">
+                    {accountingStandard === 'hgb'
+                      ? (de ? 'Gewinn- und Verlustrechnung (HGB, 5 Jahre)' : 'Profit & Loss Statement (HGB, 5 Years)')
+                      : (de ? 'Gewinn- und Verlustrechnung (US GAAP, 5 Jahre)' : 'Profit & Loss Statement (US GAAP, 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} standard={accountingStandard} />
+              </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">
+                  {accountingStandard === 'hgb'
+                    ? (de ? 'Kapitalflussrechnung (HGB)' : 'Cash Flow Statement (HGB)')
+                    : (de ? 'Cash Flow Statement (US GAAP)' : 'Cash Flow Statement (US GAAP)')
+                  }
+                </p>
+                <AnnualCashflowChart
+                  results={activeResults.results}
+                  initialFunding={initialFunding}
+                  lang={lang}
+                  standard={accountingStandard}
+                />
+              </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>
+
+          {/* 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>
+              {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>
+              )}
+            </div>
+          </FadeInView>
+        </div>
      </div>
    </div>
  )