import { Language, FMResult } from '@/lib/types'
import { Page, COLORS, Bullets } from './PrintLayout'
import {
  ScanLine, Shield, Database, Brain, ShieldCheck, Lock, MessageSquare, Wrench,
  Layers, Sparkles, TrendingUp, Globe,
  type LucideIcon,
} from 'lucide-react'
import { getDetails } from '@/components/slides/USPSlide.data'
import { computeAnnualKPIs } from '@/lib/finanzplan/annual-kpis'

interface SlideBase { lang: Language; pageNum: number; totalPages: number; versionName: string }

const MONO = "'JetBrains Mono', ui-monospace, monospace"

/* ====================================================================== */
/* TL;DR — 02 · 30 Sekunden (4 quad cards)                                */
/* ====================================================================== */

export function PrintTLDRPage({ lang, pageNum, totalPages, versionName }: SlideBase) {
  const de = lang === 'de'

  const cards = de ? [
    { kicker: '01 · Scale',        title: '25.000+ Controls',      body: 'Atomare Prüfaspekte über DSGVO, AI Act, NIS-2, CRA, MaschVO und 380+ weitere Quellen.', ticker: 'idx 26.123 atomic checks',     tint: COLORS.violet600 },
    { kicker: '02 · Sovereignty',  title: '100 % EU-souverän',     body: 'BSI-C5-zertifizierte Cloud in Deutschland und Frankreich. Keine US-Anbieter. Air-gap-fähig.', ticker: 'region BSI C5 · DE/FR',     tint: COLORS.violet500 },
    { kicker: '03 · Bidirectional', title: 'Compliance ↔ Code',    body: 'Policy-Änderungen fliessen in den Code; Code-Änderungen aktualisieren Policies. Zero Drift.', ticker: 'sync policy.md → controller.ts', tint: COLORS.amber600 },
    { kicker: '04 · Speed',        title: '<20 Tage audit-ready',  body: 'Vom Vertrag zum auditfähigen Status: typischerweise 14–20 Tage. White-Glove-Onboarding.', ticker: 'tag 17 bis audit-ready',         tint: COLORS.amber700 },
  ] : [
    { kicker: '01 · Scale',        title: '25,000+ Controls',     body: 'Atomic audit aspects across GDPR, AI Act, NIS-2, CRA, Machinery Reg. and 380+ other sources.', ticker: 'idx 26,123 atomic checks',    tint: COLORS.violet600 },
    { kicker: '02 · Sovereignty',  title: '100 % EU-sovereign',   body: 'BSI-C5 certified cloud in Germany and France. No US vendors. Air-gap capable.',           ticker: 'region BSI C5 · DE/FR',       tint: COLORS.violet500 },
    { kicker: '03 · Bidirectional', title: 'Compliance ↔ Code',  body: 'Policy edits flow into code; code changes update policies. Zero drift.',                  ticker: 'sync policy.md → controller.ts', tint: COLORS.amber600 },
    { kicker: '04 · Speed',        title: '<20 days audit-ready', body: 'From contract to audit-ready: typically 14–20 days. White-glove onboarding.',            ticker: 'day 17 to audit-ready',       tint: COLORS.amber700 },
  ]

  return (
    <Page kicker="02" section={de ? '30 SEKUNDEN' : '30 SECONDS'} title={de ? 'Was BreakPilot in einem Satz.' : 'BreakPilot in one sentence.'} subtitle={de ? 'Kontinuierliche Compliance & Security für den industriellen Mittelstand — EU-souverän, Bidirektional, in unter 20 Tagen produktiv.' : 'Continuous compliance & security for the industrial mid-market — EU-sovereign, bidirectional, productive in under 20 days.'} pageNum={pageNum} totalPages={totalPages} versionName={versionName}>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr', gap: '5mm', flex: 1, minHeight: 0 }}>
        {cards.map((c, i) => (
          <div key={i} style={{ border: `1px solid ${c.tint}55`, borderTop: `3px solid ${c.tint}`, borderRadius: '4pt', background: `linear-gradient(135deg, ${c.tint}10 0%, #ffffff 100%)`, padding: '5mm 6mm', display: 'flex', flexDirection: 'column', WebkitPrintColorAdjust: 'exact', printColorAdjust: 'exact' }}>
            <div style={{ fontFamily: MONO, fontSize: '8pt', fontWeight: 700, color: c.tint, textTransform: 'uppercase', letterSpacing: '0.22em', marginBottom: '3mm' }}>{c.kicker}</div>
            <div style={{ fontSize: '22pt', fontWeight: 800, color: COLORS.slate900, lineHeight: 1.05, letterSpacing: '-0.025em', marginBottom: '3mm' }}>{c.title}</div>
            <div style={{ fontSize: '9pt', color: COLORS.slate700, lineHeight: 1.5, flex: 1 }}>{c.body}</div>
            <div style={{ marginTop: '3mm', paddingTop: '2mm', borderTop: `1px solid ${COLORS.slate200}`, display: 'flex', alignItems: 'center', gap: '2mm' }}>
              <span style={{ width: '2mm', height: '2mm', borderRadius: '50%', background: COLORS.emerald600, WebkitPrintColorAdjust: 'exact', printColorAdjust: 'exact' }} />
              <span style={{ fontFamily: MONO, fontSize: '7pt', color: c.tint, fontWeight: 700 }}>{c.ticker}</span>
            </div>
          </div>
        ))}
      </div>
    </Page>
  )
}

/* ====================================================================== */
/* DIFFERENTIATORS — 4 under-the-hood cards (moved out of USP p2)         */
/* ====================================================================== */

const DIFF_ICON: Record<string, LucideIcon> = {
  trace: Layers,
  engine: Sparkles,
  opt: TrendingUp,
  stack: Globe,
}

export function PrintDifferentiatorsPage({ lang, pageNum, totalPages, versionName }: SlideBase) {
  const de = lang === 'de'
  const d = getDetails(de)
  const cards = ['trace', 'engine', 'opt', 'stack'] as const
  const tickers = de
    ? ['trace 13.605 evidence-chain', 'validate 1.450 · 98,9 %', 'optimize gap → policy §4.2', 'check BSI C5 · 1.382']
    : ['trace 13,605 evidence-chain', 'validate 1,450 · 98.9 %', 'optimize gap → policy §4.2', 'check BSI C5 · 1,382']

  return (
    <Page kicker="06" section={de ? 'DIFFERENTIATORS' : 'DIFFERENTIATORS'} title={de ? 'Vier technische Differentiator.' : 'Four technical differentiators.'} subtitle={de ? 'Was kein anderer Anbieter geschlossen liefert: Traceability, kontinuierliche Engine, Compliance-Optimizer, EU-Trust-Stack.' : 'What no other vendor delivers end-to-end: traceability, continuous engine, compliance optimizer, EU-trust stack.'} pageNum={pageNum} totalPages={totalPages} versionName={versionName}>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '4mm', flex: 1, minHeight: 0 }}>
        {cards.map((k, i) => {
          const p = d[k]
          const Icon = DIFF_ICON[k]
          const tint = i < 2 ? COLORS.violet600 : COLORS.amber600
          const tintDark = i < 2 ? COLORS.violet700 : COLORS.amber700
          const tintLight = i < 2 ? COLORS.violet50 : COLORS.amber50
          return (
            <div key={k} style={{ border: `1px solid ${tint}40`, background: `linear-gradient(135deg, ${tintLight} 0%, #ffffff 100%)`, borderRadius: '4pt', padding: '4mm 5mm', display: 'flex', flexDirection: 'column', overflow: 'hidden', WebkitPrintColorAdjust: 'exact', printColorAdjust: 'exact' }}>
              <div style={{ width: '9mm', height: '9mm', background: '#ffffff', borderRadius: '2pt', border: `1px solid ${tint}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: tint, marginBottom: '3mm', WebkitPrintColorAdjust: 'exact', printColorAdjust: 'exact' }}>
                {Icon && <Icon size={16} strokeWidth={1.5} />}
              </div>
              <div style={{ fontFamily: MONO, fontSize: '7pt', fontWeight: 700, color: tintDark, textTransform: 'uppercase', letterSpacing: '0.16em', marginBottom: '1mm' }}>{String(i + 1).padStart(2, '0')} &middot; {p.kicker.replace(/^Säule[\s·]+|^Under the Hood|^Pillar[\s·]+/i, '').trim() || p.kicker}</div>
              <div style={{ fontSize: '12pt', fontWeight: 700, color: COLORS.slate900, lineHeight: 1.15, marginBottom: '2.5mm', letterSpacing: '-0.005em' }}>{p.title}</div>
              <div style={{ fontSize: '8pt', color: COLORS.slate700, lineHeight: 1.45, marginBottom: '2.5mm' }}>{p.body}</div>
              {p.bullets && <Bullets dense items={p.bullets} />}
              <div style={{ marginTop: 'auto', paddingTop: '2mm', borderTop: `1px solid ${COLORS.slate200}`, display: 'flex', alignItems: 'center', gap: '2mm' }}>
                <span style={{ width: '2mm', height: '2mm', borderRadius: '50%', background: COLORS.emerald600, WebkitPrintColorAdjust: 'exact', printColorAdjust: 'exact' }} />
                <span style={{ fontFamily: MONO, fontSize: '6.5pt', color: tintDark, fontWeight: 700 }}>{tickers[i]}</span>
              </div>
            </div>
          )
        })}
      </div>
    </Page>
  )
}

/* ====================================================================== */
/* KPI HERO — 8 trajectory tiles 2026 → 2030                              */
/* ====================================================================== */

function fmtEur(n: number): string {
  const abs = Math.abs(n)
  const sign = n < 0 ? '−' : ''
  if (abs >= 1e6) return `${sign}€${(abs / 1e6).toLocaleString('de-DE', { maximumFractionDigits: 1 })}M`
  if (abs >= 1e3) return `${sign}€${Math.round(abs / 1e3)}k`
  return `${sign}€${Math.round(abs)}`
}

/* Small inline SVG sparkline. Renders an empty-state em-dash if all values are zero. */
function Sparkline({ values, width = 56, height = 22, stroke = COLORS.violet600 }: { values: number[]; width?: number; height?: number; stroke?: string }) {
  const allZero = values.every(v => v === 0)
  if (allZero || values.length < 2) {
    return <span style={{ fontFamily: MONO, fontSize: '11pt', color: COLORS.slate300, fontWeight: 700, lineHeight: 1 }}>&mdash;</span>
  }
  const min = Math.min(...values)
  const max = Math.max(...values)
  const range = max - min || 1
  const stepX = width / (values.length - 1)
  const padY = 2
  const innerH = height - padY * 2
  const points = values.map((v, i) => {
    const x = i * stepX
    const y = padY + innerH - ((v - min) / range) * innerH
    return { x, y }
  })
  const path = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(' ')
  const last = points[points.length - 1]
  // Area fill polygon for soft tone under the line
  const area = `${path} L${last.x.toFixed(2)},${height} L0,${height} Z`
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={{ display: 'block', overflow: 'visible' }}>
      <path d={area} fill={stroke} fillOpacity={0.08} />
      <path d={path} fill="none" stroke={stroke} strokeWidth={1.2} strokeLinecap="round" strokeLinejoin="round" />
      <circle cx={last.x} cy={last.y} r={1.6} fill={stroke} />
    </svg>
  )
}

export function PrintKPIHeroPage({ fmResults, lang, pageNum, totalPages, versionName }: SlideBase & { fmResults: FMResult[] }) {
  const de = lang === 'de'
  const kpis = computeAnnualKPIs(fmResults)
  const k26 = kpis.find(k => k.year === 2026)
  const k30 = kpis.find(k => k.year === 2030)
  const breakEvenYear = kpis.find(k => k.ebit > 0)?.year
  const series = (pick: (k: typeof kpis[number]) => number): number[] =>
    [2026, 2027, 2028, 2029, 2030].map(y => {
      const row = kpis.find(k => k.year === y)
      return row ? pick(row) : 0
    })

  type Tile = { label: string; start: string; end: string; endColor: string; series: number[]; hideStart?: boolean; stroke?: string }
  const tiles: Tile[] = k26 && k30 ? [
    { label: 'ARR',                                start: fmtEur(k26.arr),         end: fmtEur(k30.arr),         endColor: COLORS.violet600,                                              series: series(k => k.arr),         hideStart: k26.arr === 0 },
    { label: de ? 'Kunden' : 'Customers',          start: k26.customers.toLocaleString('de-DE'), end: k30.customers.toLocaleString('de-DE'), endColor: COLORS.violet600,        series: series(k => k.customers),   hideStart: k26.customers === 0 },
    { label: de ? 'ARPU / Mo'   : 'ARPU / mo',     start: fmtEur(k26.arpu),        end: fmtEur(k30.arpu),        endColor: COLORS.slate900,                                              series: series(k => k.arpu),        hideStart: k26.arpu === 0 },
    { label: de ? 'Mitarbeiter' : 'Employees',     start: String(k26.employees),   end: String(k30.employees),   endColor: COLORS.slate900,                                              series: series(k => k.employees),   hideStart: k26.employees === 0 },
    { label: de ? 'Bruttomarge' : 'Gross margin',  start: `${k26.grossMargin}%`,   end: `${k30.grossMargin}%`,   endColor: COLORS.emerald700,                                            series: series(k => k.grossMargin), hideStart: k26.grossMargin === 0, stroke: COLORS.emerald600 },
    { label: 'EBIT',                                start: fmtEur(k26.ebit),        end: fmtEur(k30.ebit),        endColor: k30.ebit >= 0 ? COLORS.emerald700 : COLORS.red700,            series: series(k => k.ebit),        hideStart: k26.ebit === 0, stroke: k30.ebit >= 0 ? COLORS.emerald600 : COLORS.red600 },
    { label: de ? 'Netto-Ergebnis' : 'Net income', start: fmtEur(k26.netIncome),   end: fmtEur(k30.netIncome),   endColor: k30.netIncome >= 0 ? COLORS.emerald700 : COLORS.red700,       series: series(k => k.netIncome),   hideStart: k26.netIncome === 0, stroke: k30.netIncome >= 0 ? COLORS.emerald600 : COLORS.red600 },
    { label: de ? 'Cash (Dez)'  : 'Cash (Dec)',    start: fmtEur(k26.cashBalance), end: fmtEur(k30.cashBalance), endColor: COLORS.emerald700,                                            series: series(k => k.cashBalance), hideStart: k26.cashBalance === 0, stroke: COLORS.emerald600 },
  ] : []

  return (
    <Page kicker="18" section={de ? 'ANHANG · KENNZAHLEN' : 'APPENDIX · KEY METRICS'} title={de ? 'Trajektorie 2026 → 2030.' : 'Trajectory 2026 → 2030.'} subtitle={de ? `Acht investorrelevante KPIs auf einen Blick. Base-Case-Szenario, abgeleitet aus dem Finanzplan. Break-Even: ${breakEvenYear ?? 'Q3 2029'}.` : `Eight investor-relevant KPIs at a glance. Base-case scenario, derived from the financial plan. Break-even: ${breakEvenYear ?? 'Q3 2029'}.`} pageNum={pageNum} totalPages={totalPages} versionName={versionName}>

      {tiles.length === 0 ? (
        <p style={{ fontSize: '10pt', color: COLORS.slate600 }}>{de ? 'Keine Finanzdaten verfügbar.' : 'No financial data available.'}</p>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gridTemplateRows: '1fr 1fr', gap: '5mm', flex: 1, minHeight: 0 }}>
          {tiles.map((t, i) => (
            <div key={i} style={{ border: `1px solid ${COLORS.slate200}`, borderTop: `3px solid ${COLORS.violet600}`, background: '#ffffff', padding: '5mm', display: 'flex', flexDirection: 'column', WebkitPrintColorAdjust: 'exact', printColorAdjust: 'exact' }}>
              <div style={{ fontFamily: MONO, fontSize: '7.5pt', fontWeight: 700, color: COLORS.slate500, textTransform: 'uppercase', letterSpacing: '0.18em', marginBottom: '3.5mm' }}>{t.label}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: '3mm', marginBottom: '3.5mm' }}>
                {!t.hideStart && (
                  <>
                    <span style={{ fontSize: '11pt', fontWeight: 600, color: COLORS.slate400, fontVariantNumeric: 'tabular-nums' }}>{t.start}</span>
                    <span style={{ fontFamily: MONO, fontSize: '11pt', color: COLORS.slate400, fontWeight: 700 }}>→</span>
                  </>
                )}
                <span style={{ fontSize: '24pt', fontWeight: 800, color: t.endColor, lineHeight: 1, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.025em' }}>{t.end}</span>
              </div>
              <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: '1.5mm' }}>
                <Sparkline values={t.series} stroke={t.stroke ?? COLORS.violet600} />
                <div style={{ paddingTop: '1.5mm', borderTop: `1px solid ${COLORS.slate100}`, fontFamily: MONO, fontSize: '6.5pt', color: COLORS.slate500, textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 700, display: 'flex', justifyContent: 'space-between' }}>
                  <span>2026</span><span>2030</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </Page>
  )
}

/* ====================================================================== */
/* TECH STACK — 8-category grid                                            */
/* ====================================================================== */

export function PrintTechStackPage({ lang, pageNum, totalPages, versionName }: SlideBase) {
  const de = lang === 'de'

  const cats = de ? [
    { name: 'Frontend',          icon: ScanLine,      blurb: 'User-facing Oberflächen',   items: ['Next.js 15', 'React 19', 'Tailwind CSS', 'Framer Motion', 'Dioxus (Rust)'] },
    { name: 'Backend',           icon: Wrench,        blurb: 'API & Business-Logik',      items: ['Go/Gin', 'Python/FastAPI', 'Rust/Axum', 'OpenAPI'] },
    { name: 'Storage',           icon: Database,      blurb: 'Persistenter Zustand',      items: ['PostgreSQL 16', 'MongoDB', 'Qdrant Vector DB', 'Valkey (cache)'] },
    { name: 'KI / RAG',          icon: Brain,         blurb: 'Inferenz & Retrieval',      items: ['LiteLLM', 'Qwen3-32B', 'DeepSeek-R1', 'Sentence-Transformers', 'LangGraph'] },
    { name: 'Code-Scanning',     icon: Shield,        blurb: 'Schwachstellen-Erkennung',  items: ['Semgrep', 'Gitleaks', 'Syft', 'Trivy', 'CycloneDX'] },
    { name: 'Auth & SSO',        icon: Lock,          blurb: 'Identität & Rechte',        items: ['Keycloak', 'OIDC', 'OPA (policies)'] },
    { name: 'Kommunikation',     icon: MessageSquare, blurb: 'Echtzeit-Kanäle',           items: ['Matrix (chat)', 'Jitsi (video)', 'Mailpit'] },
    { name: 'DevOps',            icon: ShieldCheck,   blurb: 'Build & Ship',              items: ['Gitea', 'Woodpecker CI', 'HashiCorp Vault', 'Orca', 'Docker Compose'] },
  ] : [
    { name: 'Frontend',          icon: ScanLine,      blurb: 'User-facing surfaces',      items: ['Next.js 15', 'React 19', 'Tailwind CSS', 'Framer Motion', 'Dioxus (Rust)'] },
    { name: 'Backend',           icon: Wrench,        blurb: 'API & business logic',      items: ['Go/Gin', 'Python/FastAPI', 'Rust/Axum', 'OpenAPI'] },
    { name: 'Storage',           icon: Database,      blurb: 'Persistent state',          items: ['PostgreSQL 16', 'MongoDB', 'Qdrant vector DB', 'Valkey (cache)'] },
    { name: 'AI / RAG',          icon: Brain,         blurb: 'Inference & retrieval',     items: ['LiteLLM', 'Qwen3-32B', 'DeepSeek-R1', 'Sentence-Transformers', 'LangGraph'] },
    { name: 'Code scanning',     icon: Shield,        blurb: 'Vulnerability detection',   items: ['Semgrep', 'Gitleaks', 'Syft', 'Trivy', 'CycloneDX'] },
    { name: 'Auth & SSO',        icon: Lock,          blurb: 'Identity & permissions',    items: ['Keycloak', 'OIDC', 'OPA (policies)'] },
    { name: 'Communication',     icon: MessageSquare, blurb: 'Real-time channels',        items: ['Matrix (chat)', 'Jitsi (video)', 'Mailpit'] },
    { name: 'DevOps',            icon: ShieldCheck,   blurb: 'Build & ship',              items: ['Gitea', 'Woodpecker CI', 'HashiCorp Vault', 'Orca', 'Docker Compose'] },
  ]

  return (
    <Page kicker="26" section={de ? 'ANHANG · TECH-STACK' : 'APPENDIX · TECH STACK'} title={de ? '8 Kategorien. Polyglott. 100% Open Source.' : '8 categories. Polyglot. 100% open source.'} subtitle={de ? 'Alle Komponenten mit kommerziell nutzbarer Lizenz (MIT, Apache-2.0, BSD, ISC, MPL-2.0, LGPL). Keine GPL/AGPL. Keine US-SaaS-Abhängigkeit.' : 'All components carry a commercially usable license (MIT, Apache-2.0, BSD, ISC, MPL-2.0, LGPL). No GPL/AGPL. No US SaaS dependency.'} pageNum={pageNum} totalPages={totalPages} versionName={versionName}>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gridTemplateRows: '1fr 1fr', gap: '4mm', flex: 1, minHeight: 0 }}>
        {cats.map((c, i) => {
          const Icon = c.icon
          const num = String(i + 1).padStart(2, '0')
          return (
            <div key={i} style={{
              border: `1px solid ${COLORS.violet200}`,
              borderRadius: '4pt',
              background: `linear-gradient(160deg, ${COLORS.violet50} 0%, #ffffff 55%)`,
              padding: '4mm 4mm 3.5mm',
              display: 'flex', flexDirection: 'column', alignItems: 'center',
              boxShadow: '0 4px 12px rgba(124,58,237,0.08)',
              WebkitPrintColorAdjust: 'exact', printColorAdjust: 'exact',
            }}>
              <div style={{
                width: '14mm', height: '14mm', borderRadius: '3pt',
                background: `linear-gradient(135deg, ${COLORS.violet400} 0%, ${COLORS.violet600} 100%)`,
                boxShadow: '0 4px 10px rgba(124,58,237,0.28)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: '#ffffff', flexShrink: 0, marginBottom: '2.5mm',
                WebkitPrintColorAdjust: 'exact', printColorAdjust: 'exact',
              }}>
                <Icon size={24} strokeWidth={1.6} />
              </div>
              <div style={{ fontFamily: MONO, fontSize: '6.5pt', fontWeight: 700, color: COLORS.violet600, textTransform: 'uppercase', letterSpacing: '0.22em', marginBottom: '0.5mm' }}>{num}</div>
              <div style={{ fontSize: '12pt', fontWeight: 800, color: COLORS.slate900, lineHeight: 1.1, letterSpacing: '-0.005em', textAlign: 'center' }}>{c.name}</div>
              <div style={{ fontSize: '7pt', fontStyle: 'italic', color: COLORS.slate500, lineHeight: 1.3, textAlign: 'center', marginTop: '0.8mm', marginBottom: '2.5mm' }}>{c.blurb}</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.2mm', justifyContent: 'center', marginTop: 'auto' }}>
                {c.items.map((it, j) => (
                  <span key={j} style={{
                    fontFamily: MONO, fontSize: '7.5pt', fontWeight: 600,
                    color: COLORS.slate700,
                    background: COLORS.violet50,
                    border: `1px solid ${COLORS.violet200}`,
                    borderRadius: '999px',
                    padding: '0.8mm 2mm',
                    lineHeight: 1.15,
                    WebkitPrintColorAdjust: 'exact', printColorAdjust: 'exact',
                  }}>{it}</span>
                ))}
              </div>
            </div>
          )
        })}
      </div>
    </Page>
  )
}

/* ====================================================================== */
/* ANHANG DIVIDER (moved from PrintAnnexSlides.tsx)                       */
/* ====================================================================== */

export function PrintAnnexDividerPage({ lang, pageNum, totalPages, versionName }: SlideBase) {
  const de = lang === 'de'

  const sections: [string, string, string][] = de ? [
    ['18', 'Go-to-Market Strategie',     'Pilot · Skalierung · Expansion'],
    ['19', 'Kennzahlen 2026 → 2030',     '8 KPIs Trajektorie · Base-Case'],
    ['20', 'Finanzplan',                  'P&L 2026–2030 · KPI-Dashboard'],
    ['21', 'P&L Detail',                  'Annualisierte Gewinn-/Verlust-Rechnung'],
    ['22', 'Treibervariablen',            'Annahmen + Sensitivitätsszenarien'],
    ['23', 'Regulatorische Details',      'DSGVO · AI Act · NIS-2 · CRA · MaschVO'],
    ['24', 'Systemarchitektur',           '3 Tiers · LiteLLM Gateway · lokale Inferenz'],
    ['25', 'Engineering Deep Dive',       '500K+ LoC · 45 Container · 100 % Self-Hosted'],
    ['26', 'Tech-Stack',                  '8 Kategorien · polyglott · Open Source'],
    ['27', 'KI-Pipeline',                 'RAG · Multi-Agent · Document Intelligence · QA'],
    ['28', 'Risiken & Mitigation',        '10 Risiken in 5 Kategorien'],
    ['29', 'Glossar',                     '30 Begriffe · Compliance · Engineering · Recht'],
  ] : [
    ['18', 'Go-to-Market Strategy',       'Pilot · Scale · Expansion'],
    ['19', 'KPIs 2026 → 2030',            '8 KPI trajectory · base case'],
    ['20', 'Financial Plan',              'P&L 2026–2030 · KPI dashboard'],
    ['21', 'P&L Detail',                  'Annualized profit & loss'],
    ['22', 'Driver Variables',            'Assumptions + sensitivity scenarios'],
    ['23', 'Regulatory Details',          'GDPR · AI Act · NIS-2 · CRA · Machinery Reg.'],
    ['24', 'System Architecture',         '3 tiers · LiteLLM gateway · local inference'],
    ['25', 'Engineering Deep Dive',       '500K+ LoC · 45 containers · 100 % self-hosted'],
    ['26', 'Tech Stack',                  '8 categories · polyglot · open source'],
    ['27', 'AI Pipeline',                 'RAG · multi-agent · document intelligence · QA'],
    ['28', 'Risks & Mitigation',          '10 risks across 5 categories'],
    ['29', 'Glossary',                    '30 terms · compliance · engineering · law'],
  ]

  return (
    <div className="print-page-break">
      <div className="print-page print-page-bg" style={{
        width: '297mm', height: '210mm', color: COLORS.slate900,
        fontFamily: "'Inter', system-ui, sans-serif", boxSizing: 'border-box',
        padding: '14mm 18mm', margin: '0 auto 24px',
        boxShadow: '0 4px 24px rgba(59,26,122,0.10)', overflow: 'hidden',
        WebkitPrintColorAdjust: 'exact', printColorAdjust: 'exact',
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: `1px solid ${COLORS.slate200}`, paddingBottom: '3mm' }}>
          <span style={{ fontFamily: MONO, fontSize: '7.5pt', fontWeight: 700, color: COLORS.violet600, textTransform: 'uppercase', letterSpacing: '0.22em' }}>{de ? 'Teil II · Anhang' : 'Part II · Appendix'}</span>
          <span style={{ fontFamily: MONO, fontSize: '7pt', color: COLORS.slate500, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 700 }}>BreakPilot &middot; ComplAI</span>
        </div>

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', maxWidth: '260mm' }}>
          <div style={{ fontFamily: MONO, fontSize: '10pt', fontWeight: 700, color: COLORS.violet600, textTransform: 'uppercase', letterSpacing: '0.3em', marginBottom: '5mm' }}>
            {de ? '17 · Kapitelwechsel' : '17 · Chapter break'}
          </div>
          <h1 style={{ fontSize: '64pt', fontWeight: 800, color: COLORS.slate900, lineHeight: 0.95, letterSpacing: '-0.035em', margin: 0 }}>
            {de ? 'Anhang' : 'Appendix'}<span style={{ color: COLORS.violet600 }}>.</span>
          </h1>
          <div style={{ height: '3px', width: '60mm', background: `linear-gradient(90deg, ${COLORS.violet700} 0%, ${COLORS.violet400} 50%, ${COLORS.violet700} 100%)`, marginTop: '5mm', marginBottom: '6mm', WebkitPrintColorAdjust: 'exact', printColorAdjust: 'exact' }} />
          <p style={{ fontSize: '13pt', fontWeight: 500, color: COLORS.slate700, lineHeight: 1.3, margin: 0, letterSpacing: '-0.008em', maxWidth: '230mm' }}>
            {de
              ? 'Detailangaben & Belege. Was wir in der Pitch gesagt haben, mit Quellen, Zahlen und Architektur belegt.'
              : 'Detail & evidence. Everything we claimed in the pitch, backed by sources, numbers and architecture.'}
          </p>

          <div style={{ marginTop: '8mm' }}>
            <div style={{ fontFamily: MONO, fontSize: '8pt', fontWeight: 700, color: COLORS.slate500, textTransform: 'uppercase', letterSpacing: '0.18em', marginBottom: '4mm' }}>
              {de ? 'Auf den folgenden Seiten' : 'On the following pages'}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '4mm 8mm' }}>
              {sections.map(([n, t, sub]) => (
                <div key={n} style={{ display: 'flex', alignItems: 'flex-start', gap: '4mm' }}>
                  <span style={{ fontFamily: MONO, fontSize: '13pt', fontWeight: 800, color: COLORS.violet600, lineHeight: 1, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em', minWidth: '11mm' }}>{n}</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: '9.5pt', fontWeight: 700, color: COLORS.slate900, lineHeight: 1.2 }}>{t}</div>
                    <div style={{ fontSize: '7pt', color: COLORS.slate600, marginTop: '0.5mm', lineHeight: 1.35 }}>{sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="print-mono" style={{ fontFamily: MONO, paddingTop: '3mm', borderTop: `1px solid ${COLORS.slate200}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: '7pt', color: COLORS.slate500, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 700 }}>
          <span>BreakPilot &middot; ComplAI</span>
          <span style={{ color: COLORS.violet600 }}>{versionName}</span>
          <span style={{ fontVariantNumeric: 'tabular-nums' }}>{String(pageNum).padStart(2, '0')} / {String(totalPages).padStart(2, '0')}</span>
        </div>
      </div>
    </div>
  )
}
