import { Language, PitchCompany, PitchFunding, PitchMarket } from '@/lib/types'
import { Page, KpiRow, TwoCol, ThreeCol, FourCol, Panel, Bullets, Callout, COLORS, Divider, ComplAI } from './PrintLayout'

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

/* ===== COVER ===== */

export function PrintCoverPage({ company, funding, lang, versionName }: { company: PitchCompany; funding: PitchFunding; lang: Language; versionName: string }) {
  const de = lang === 'de'
  const instrument = funding?.instrument || 'Pre-Seed'
  const amount = funding?.amount_eur || 400_000
  const tagline = de ? (company?.tagline_de || 'Kontinuierliche Compliance für europäische Unternehmen.') : (company?.tagline_en || 'Continuous compliance for European companies.')
  const amountLabel = amount >= 1_000_000
    ? '€' + (amount / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'M'
    : '€' + Math.round(amount / 1_000) + 'k'
  const isConvertible = (instrument || '').toLowerCase().includes('wandeldarlehen') ||
                        (instrument || '').toLowerCase().includes('convertible') ||
                        (instrument || '').toLowerCase().includes('safe')
  const coverTerms: [string, string][] = isConvertible
    ? [
        [de ? 'Funding' : 'Funding', amountLabel],
        [de ? 'Instrument' : 'Instrument', instrument],
        [de ? 'Laufzeit' : 'Maturity', de ? '24 Mo.' : '24 mo'],
      ]
    : [
        [de ? 'Funding' : 'Funding', amountLabel],
        [de ? 'Pre-Money' : 'Pre-money', '€4.0M'],
        [de ? 'Instrument' : 'Instrument', instrument],
      ]

  const MONO_FONT = "'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace"

  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', margin: '0 auto 24px', boxShadow: '0 4px 24px rgba(59,26,122,0.10)', overflow: 'hidden', padding: 0 }}>
        <div style={{ width: '100%', height: '100%', display: 'grid', gridTemplateColumns: '95mm 1fr' }}>

          {/* LEFT VIOLET BLOCK */}
          <div style={{
            background: `linear-gradient(180deg, ${COLORS.violet700} 0%, ${COLORS.violet600} 60%, ${COLORS.violet700} 100%)`,
            color: '#ffffff',
            padding: '16mm 12mm',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            WebkitPrintColorAdjust: 'exact',
            printColorAdjust: 'exact',
          }}>
            <div>
              <div style={{ fontFamily: MONO_FONT, fontSize: '7.5pt', fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.78)' }}>
                {de ? 'Investor Brief' : 'Investor Brief'}
              </div>
              <div style={{ marginTop: '6mm', height: '1px', background: 'rgba(255,255,255,0.4)', width: '32mm', WebkitPrintColorAdjust: 'exact', printColorAdjust: 'exact' }} />
              <div style={{ marginTop: '6mm', fontSize: '11pt', color: '#ffffff', lineHeight: 1.5, fontWeight: 500 }}>
                {de
                  ? 'DSGVO-konforme KI-Plattform für kontinuierliche Code-Security und automatisierte Compliance. Souverän gehostet, integriert in europäische Workflows.'
                  : 'GDPR-compliant AI platform for continuous code security and automated compliance. Sovereign-hosted, integrated into European workflows.'}
              </div>
            </div>

            {/* Mid stats */}
            <div style={{ paddingTop: '8mm', borderTop: '1px solid rgba(255,255,255,0.3)' }}>
              <div style={{ fontFamily: MONO_FONT, fontSize: '7.5pt', fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.78)', marginBottom: '4mm' }}>{de ? 'Auf einen Blick' : 'At a glance'}</div>
              <div style={{ fontFamily: MONO_FONT, fontSize: '8.5pt', color: '#ffffff', lineHeight: 1.85, fontWeight: 500 }}>
                {de ? '25 000+ atomare Prüfaspekte' : '25 000+ atomic audit aspects'}<br />
                {de ? '380+ Regularien · 10 Branchen' : '380+ regulations · 10 industries'}<br />
                {de ? '500K+ Lines of Code · 45 Container' : '500K+ lines of code · 45 containers'}<br />
                {de ? '100% EU-Hosting · BSI Cloud DE' : '100% EU hosting · BSI cloud DE'}
              </div>
            </div>

            {/* Footer */}
            <div>
              <div style={{ fontFamily: MONO_FONT, fontSize: '7pt', letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.65)', fontWeight: 700 }}>{versionName}</div>
              <div style={{ fontFamily: MONO_FONT, marginTop: '2mm', fontSize: '7pt', letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.65)', fontWeight: 700 }}>{de ? 'Vertraulich · Nur Investoren' : 'Confidential · Investors only'}</div>
            </div>
          </div>

          {/* RIGHT (violet-tinted dotted bg from .print-page-bg) PANE */}
          <div className="print-page-bg" style={{ padding: '18mm 16mm', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minWidth: 0 }}>
            <div>
              <div style={{ fontFamily: MONO_FONT, fontSize: '9pt', fontWeight: 700, color: COLORS.violet600, textTransform: 'uppercase', letterSpacing: '0.22em' }}>
                {instrument} &middot; Q4 2026
              </div>
              <h1 style={{ fontSize: '60pt', fontWeight: 800, color: COLORS.slate900, lineHeight: 0.95, letterSpacing: '-0.03em', margin: '8mm 0 4mm' }}>
                {company?.name || 'BreakPilot'}<span style={{ color: COLORS.indigo600 }}>.</span>
              </h1>
              <div style={{ height: '2px', width: '40mm', background: COLORS.indigo600, marginBottom: '6mm', WebkitPrintColorAdjust: 'exact', printColorAdjust: 'exact' }} />
              <p style={{ fontSize: '15pt', fontWeight: 500, color: COLORS.slate700, lineHeight: 1.3, maxWidth: '170mm', margin: 0, letterSpacing: '-0.008em' }}>
                {tagline}
              </p>
            </div>

            {/* Key terms */}
            <div>
              <div style={{ fontFamily: MONO_FONT, fontSize: '7.5pt', fontWeight: 700, color: COLORS.violet600, textTransform: 'uppercase', letterSpacing: '0.2em', marginBottom: '3mm', paddingBottom: '2mm', borderBottom: `1px solid ${COLORS.slate200}` }}>
                {de ? 'Key Terms' : 'Key terms'}
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '6mm' }}>
                {coverTerms.map(([label, val]) => (
                  <div key={label}>
                    <div style={{ fontFamily: MONO_FONT, fontSize: '7pt', color: COLORS.slate500, textTransform: 'uppercase', letterSpacing: '0.18em', fontWeight: 700 }}>{label}</div>
                    <div style={{ fontSize: '17pt', fontWeight: 800, color: COLORS.slate900, marginTop: '2mm', fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.015em', lineHeight: 1.05 }}>{val}</div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: '5mm', fontSize: '8.5pt', color: COLORS.slate600, lineHeight: 1.5 }}>
                {de
                  ? 'Gründerteam Benjamin Bönisch (CEO) und Sharang Parnerkar (CTO). Markeneintragung DPMA · EUIPO-Anmeldung in Bearbeitung · GmbH-Gründung August 2026.'
                  : 'Founding team Benjamin Bönisch (CEO) and Sharang Parnerkar (CTO). Trademark DPMA registered · EUIPO filing in progress · GmbH incorporation August 2026.'}
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  )
}

/* ===== EXECUTIVE SUMMARY, PAGE 1 ===== */

export function PrintExecSummaryPage1({ market, lang, pageNum, totalPages, versionName }: SlideBase & { market: PitchMarket[] }) {
  const de = lang === 'de'
  const tam = market.find(m => m.market_segment === 'TAM')
  const sam = market.find(m => m.market_segment === 'SAM')
  const som = market.find(m => m.market_segment === 'SOM')
  const fmt = (v?: number) => v ? (v >= 1e9 ? `${(v / 1e9).toFixed(1).replace('.', ',')} Mrd.` : `${(v / 1e6).toFixed(0)} Mio.`) : '—'

  return (
    <Page kicker="01" section={de ? 'EXECUTIVE SUMMARY' : 'EXECUTIVE SUMMARY'} title={<>BreakPilot <ComplAI /></>} subtitle={de ? 'DSGVO-konforme KI-Plattform, kontinuierliches Sicherheitsscanning und intelligente Compliance-Automatisierung. 25.000+ atomare Prüfaspekte, 380+ Regularien, EU-souverän gehostet.' : 'GDPR-compliant AI platform, continuous security scanning and intelligent compliance automation. 25,000+ atomic audit aspects, 380+ regulations, EU-sovereign hosted.'} pageNum={pageNum} totalPages={totalPages} versionName={versionName}>

      <KpiRow items={[
        { n: '25k+', label: de ? 'Prüfaspekte' : 'Audit aspects', tone: 'accent' },
        { n: '380+', label: de ? 'Regularien' : 'Regulations' },
        { n: '10', label: de ? 'Branchen' : 'Industries' },
        { n: '500K+', label: de ? 'Lines of Code' : 'Lines of code' },
        { n: '80%', label: de ? 'Zeit gespart' : 'Time saved', tone: 'positive' },
        { n: '10×', label: de ? 'günstiger als Pentest' : 'cheaper than pentest', tone: 'positive' },
      ]} />

      <div style={{ marginTop: '5mm', flex: 1, minHeight: 0 }}>
        <TwoCol
          ratio="1:1"
          gap="8mm"
          left={
            <Panel label={de ? 'Das Problem' : 'The Problem'} tone="negative">
              <p style={{ marginTop: 0, marginBottom: '3mm', fontStyle: 'italic', color: COLORS.slate600 }}>
                {de ? 'Unternehmen stehen vor einer unlösbaren Entscheidung:' : 'Companies face an impossible decision:'}
              </p>
              <Bullets dense tone="negative" items={de ? [
                'Ohne KI verlieren sie ihre Wettbewerbsfähigkeit',
                'Mit US-KI riskieren sie die Kontrolle über sensible Daten',
                'AI Act, CRA, NIS2 zwingen 30.000+ Unternehmen in komplexe Compliance',
                'EU-Regulierung unterscheidet nicht zwischen klein und groß',
                'Pentests + Audits: 15-40k EUR pro Prüfung, nur einmal jährlich',
                'Ergebnis: Stillstand in einer Phase, in der Geschwindigkeit zählt',
              ] : [
                'Without AI they lose their competitiveness',
                'With US AI they risk losing control over sensitive data',
                'AI Act, CRA, NIS2 force 30,000+ companies into complex compliance',
                'EU regulation does not differentiate between small and large',
                'Pentests + audits: EUR 15-40k per check, only once yearly',
                'Result: standstill in a phase where speed is decisive',
              ]} />
            </Panel>
          }
          right={
            <Panel label={de ? 'Unsere Lösung' : 'Our Solution'} tone="positive">
              <p style={{ marginTop: 0, marginBottom: '3mm', fontStyle: 'italic', color: COLORS.slate600 }}>
                {de ? 'BreakPilot macht Compliance und Security kontinuierlich, nicht punktuell.' : 'BreakPilot makes compliance and security continuous, not periodic.'}
              </p>
              <Bullets dense tone="positive" items={de ? [
                'Jede Code-Änderung automatisch geprüft (SAST, DAST, SBOM, Pentest)',
                'VVT, TOMs, DSFA, Löschfristen in Echtzeit generiert',
                'CE-Software-Risikobeurteilung schon in der Entwicklung',
                'Abweichungen End-to-End: Tickets, Nachweise, Eskalation an GF',
                'Compliance GPT für komplexe regulatorische Fragen',
                'Gehostet in EU-Infrastruktur (DE/FR), audit-ready zu jeder Zeit',
              ] : [
                'Every code change automatically checked (SAST, DAST, SBOM, pentest)',
                'RoPA, TOMs, DPIA, retention policies in real time',
                'CE software risk assessment from code, during development',
                'Deviations end-to-end: tickets, evidence, escalation to mgmt',
                'Compliance GPT for complex regulatory questions',
                'Hosted on EU infra (DE/FR), audit-ready at any time',
              ]} />
            </Panel>
          }
        />
      </div>

      <div style={{ marginTop: '4mm', flexShrink: 0 }}>
        <Callout tone="accent" label={de ? 'Unser MOAT' : 'Our MOAT'}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '5mm', marginTop: '1mm' }}>
            {[
              { t: 'Traceability', d: de ? 'Gesetz → Control → Code' : 'Law → Control → Code' },
              { t: 'Continuous Engine', d: de ? 'Echtzeit bei jeder Änderung' : 'Real-time on every change' },
              { t: 'Compliance Optimizer', d: de ? 'Max. KI-Nutzung im legalen Rahmen' : 'Max AI use within regulations' },
              { t: 'EU-Trust Stack', d: de ? '100% EU, kein US-SaaS' : '100% EU, no US SaaS' },
            ].map((m, i) => (
              <div key={i}>
                <div style={{ fontSize: '9pt', fontWeight: 700, color: COLORS.indigo700 }}>{m.t}</div>
                <div style={{ fontSize: '8pt', color: COLORS.slate600, marginTop: '1mm' }}>{m.d}</div>
              </div>
            ))}
          </div>
        </Callout>
      </div>

      {/* Tiny market footer */}
      <div style={{ flexShrink: 0, marginTop: '3mm', display: 'flex', gap: '6mm', fontSize: '8pt', color: COLORS.slate500 }}>
        <span><strong style={{ color: COLORS.slate800 }}>TAM:</strong> {fmt(tam?.value_eur)}</span>
        <span><strong style={{ color: COLORS.slate800 }}>SAM:</strong> {fmt(sam?.value_eur)}</span>
        <span><strong style={{ color: COLORS.slate800 }}>SOM:</strong> {fmt(som?.value_eur)}</span>
        <span style={{ flex: 1 }} />
        <span style={{ color: COLORS.slate400 }}>{de ? 'Fortsetzung auf Folgeseite →' : 'Continued on next page →'}</span>
      </div>
    </Page>
  )
}

/* ===== EXECUTIVE SUMMARY, PAGE 2 ===== */

const MODULES_DE = [
  { name: 'Code Security', desc: 'SAST, DAST, SBOM, Pentesting' },
  { name: 'CE-SW-Risiko', desc: 'CE-Kennzeichnung Maschinen' },
  { name: 'Compliance Docs', desc: 'VVT, DSFA, TOMs, Löschfristen' },
  { name: 'Audit Manager', desc: 'Abweichungen, Nachweise, Eskalation' },
  { name: 'DSR / Betroffene', desc: 'Auskunft, Löschung, Berichtigung' },
  { name: 'Consent', desc: 'Einwilligungs-Management' },
  { name: 'Notfallpläne', desc: 'Vorfälle, Meldung, Mitigation' },
  { name: 'Compliance LLM', desc: 'GPT (Text + Audio), EU-gehostet' },
  { name: 'Tender Matching', desc: 'RFQ-Antworten gegen Codebase' },
  { name: 'Academy', desc: 'Online-Schulungen GF + MA' },
  { name: 'Compliance Optimizer', desc: 'Max. KI-Nutzung im Rahmen' },
  { name: 'Kommunikation', desc: 'Chat + Video + KI-Support' },
]
const MODULES_EN = [
  { name: 'Code Security', desc: 'SAST, DAST, SBOM, pentesting' },
  { name: 'CE SW Risk', desc: 'CE marking for machinery' },
  { name: 'Compliance Docs', desc: 'RoPA, DPIA, TOMs, retention' },
  { name: 'Audit Manager', desc: 'Deviations, evidence, escalation' },
  { name: 'DSR / Data Subj.', desc: 'Access, erasure, rectification' },
  { name: 'Consent', desc: 'Consent management' },
  { name: 'Incident Resp.', desc: 'Breaches, reporting, mitigation' },
  { name: 'Compliance LLM', desc: 'GPT (text + audio), EU-hosted' },
  { name: 'Tender Matching', desc: 'RFQ answers against codebase' },
  { name: 'Academy', desc: 'Online training for mgmt + staff' },
  { name: 'Compliance Optimizer', desc: 'Max AI usage within limits' },
  { name: 'Communication', desc: 'Chat + video + AI support' },
]

export function PrintExecSummaryPage2({ lang, pageNum, totalPages, versionName }: SlideBase) {
  const de = lang === 'de'
  const modules = de ? MODULES_DE : MODULES_EN

  return (
    <Page kicker="01" section={de ? 'EXECUTIVE SUMMARY · DETAIL' : 'EXECUTIVE SUMMARY · DETAIL'} title={de ? 'Modularer Baukasten und Geschäftsverlauf' : 'Modular Toolkit and Trajectory'} subtitle={de ? '12 Module, 3-Phasen-GTM, 5-Jahres-Trajektorie. Kunden zahlen ~50k €/Jahr und sparen 55k+ €.' : '12 modules, 3-phase GTM, 5-year trajectory. Customers pay ~€50k/yr, save €55k+.'} pageNum={pageNum} totalPages={totalPages} versionName={versionName}>

      {/* MODULES 4x3 */}
      <div style={{ marginBottom: '4mm' }}>
        <div style={{ fontSize: '8pt', fontWeight: 700, color: COLORS.slate500, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '2mm' }}>{de ? '12 Module, Kunden wählen einzeln oder alles' : '12 modules, pick individually or take the bundle'}</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '3mm' }}>
          {modules.map((m, i) => (
            <div key={i} style={{ border: `1px solid ${COLORS.slate200}`, padding: '2.5mm 3mm', minHeight: '12mm' }}>
              <div style={{ fontSize: '9pt', fontWeight: 700, color: COLORS.slate900 }}>{m.name}</div>
              <div style={{ fontSize: '7.5pt', color: COLORS.slate600, marginTop: '1mm', lineHeight: 1.35 }}>{m.desc}</div>
            </div>
          ))}
        </div>
      </div>

      <Divider />

      {/* GTM PHASES + ARR + PRICING + SAVINGS */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: '6mm', flex: 1, minHeight: 0 }}>
        {/* GTM Phases */}
        <div>
          <div style={{ fontSize: '8pt', fontWeight: 700, color: COLORS.slate500, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '2mm' }}>{de ? 'Go-to-Market, 3 Phasen' : 'Go-to-Market, 3 Phases'}</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '2.5mm' }}>
            {[
              { t: de ? 'Phase 1 · Pilot (Jul/Aug 2026)' : 'Phase 1 · Pilot (Jul/Aug 2026)', tone: COLORS.indigo600, items: de ? ['GmbH-Gründung', 'Direktvertrieb Maschinenbau', 'White-Glove-Onboarding', 'Erste Referenzkunden'] : ['GmbH incorporation', 'Direct sales to manufacturing', 'White-glove onboarding', 'First reference customers'] },
              { t: de ? 'Phase 2 · Skalierung (2027)' : 'Phase 2 · Scale (2027)', tone: COLORS.indigo600, items: de ? ['Channel über IT-Systemhäuser', 'IHK-Kooperationen, Messen', 'Content-Marketing + Webinare', '50–200 Kunden in reg. Branchen'] : ['Channel via IT integrators', 'Chamber of Commerce, fairs', 'Content marketing + webinars', '50–200 customers in reg. sectors'] },
              { t: de ? 'Phase 3 · Expansion (2028+)' : 'Phase 3 · Expansion (2028+)', tone: COLORS.emerald600, items: de ? ['Enterprise (50–500 MA)', 'EU-Expansion (AT, CH, Benelux)', 'Distributor-Partnerschaften', 'Break-Even Q3 / 2029'] : ['Enterprise (50–500 emp.)', 'EU expansion (AT, CH, Benelux)', 'Distributor partnerships', 'Break-even Q3 / 2029'] },
            ].map((p, i) => (
              <div key={i} style={{ borderLeft: `2px solid ${p.tone}`, paddingLeft: '3mm' }}>
                <div style={{ fontSize: '9pt', fontWeight: 700, color: COLORS.slate900, marginBottom: '1mm' }}>{p.t}</div>
                <div style={{ fontSize: '7.5pt', color: COLORS.slate600, lineHeight: 1.45 }}>{p.items.join(' · ')}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Pricing */}
        <div>
          <div style={{ fontSize: '8pt', fontWeight: 700, color: COLORS.slate500, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '2mm' }}>Pricing</div>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '8pt', fontVariantNumeric: 'tabular-nums' }}>
            <tbody>
              {[
                [de ? 'Starter (<10 MA)' : 'Starter (<10 emp.)', de ? '3.600 €/J' : '€3,600/yr'],
                [de ? 'Professional (10–250)' : 'Professional (10–250)', de ? '15–40k €/J' : '€15–40k/yr'],
                [de ? 'Enterprise (250+)' : 'Enterprise (250+)', de ? 'ab 50k €/J' : 'from €50k/yr'],
              ].map((r, i) => (
                <tr key={i} style={{ borderBottom: `1px solid ${COLORS.slate100}` }}>
                  <td style={{ padding: '2mm 0', color: COLORS.slate700 }}>{r[0]}</td>
                  <td style={{ padding: '2mm 0', textAlign: 'right', fontWeight: 700, color: i === 1 ? COLORS.indigo600 : COLORS.slate900 }}>{r[1]}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <div style={{ marginTop: '3mm', fontSize: '7.5pt', color: COLORS.slate500, lineHeight: 1.4 }}>
            {de ? 'Mitarbeiterbasiert. SaaS-Subscription. BSI-Cloud DE. Modular erweiterbar.' : 'Employee-based. SaaS subscription. BSI cloud DE. Modular.'}
          </div>
        </div>

        {/* Customer Savings */}
        <div>
          <div style={{ fontSize: '8pt', fontWeight: 700, color: COLORS.slate500, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '2mm' }}>{de ? 'Kundenersparnis (KMU/Jahr)' : 'Customer Savings (SME/yr)'}</div>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '8pt', fontVariantNumeric: 'tabular-nums' }}>
            <tbody>
              {[
                ['Pentests', '13k', false],
                [de ? 'CE-Risiko' : 'CE risk', '9k', false],
                [de ? 'Compliance-Zeit' : 'Compliance time', '15k', false],
                [de ? 'Audit-Vorber.' : 'Audit prep', '9k', false],
                [de ? 'Sonstiges' : 'Other', '9k', false],
                [de ? 'Summe / KMU / Jahr' : 'Total / SME / yr', '55k €', true],
              ].map((r, i) => (
                <tr key={i} style={{ borderBottom: `1px solid ${r[2] ? COLORS.emerald600 : COLORS.slate100}` }}>
                  <td style={{ padding: '2mm 0', color: r[2] ? COLORS.slate900 : COLORS.slate700, fontWeight: r[2] ? 700 : 400 }}>{r[0]}</td>
                  <td style={{ padding: '2mm 0', textAlign: 'right', fontWeight: 700, color: r[2] ? COLORS.emerald700 : COLORS.slate700 }}>{r[1]}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <div style={{ marginTop: '3mm', fontSize: '7.5pt', color: COLORS.emerald700, fontWeight: 600 }}>
            {de ? 'ROI ab Tag 1. Kunden sparen mehr als sie zahlen.' : 'ROI from day 1. Customers save more than they pay.'}
          </div>
        </div>
      </div>
    </Page>
  )
}

/* ===== PROBLEM ===== */

const DE_PROBLEM_CARDS = [
  { kicker: 'KI-DILEMMA', stat: 'Abgehängt', desc: 'Produzierende Unternehmen brauchen KI, um wettbewerbsfähig zu bleiben. Aber Microsoft Copilot, ChatGPT oder Claude an den eigenen Quellcode und die Konstruktionsdaten zu lassen, kommt für die meisten nicht in Frage.', cite: 'Bitkom Cloud Monitor 2024 · DIHK Digitalisierungsumfrage 2024',
    pulls: [
      { v: '64%', l: 'deutsche Industrie lehnt US-Cloud für sensible Daten ab' },
      { v: '>70%', l: 'Ablehnung im Maschinenbau speziell' },
      { v: '83%', l: 'KMU sehen Datenschutz als Haupthindernis für KI-Einsatz' },
    ],
  },
  { kicker: 'PATRIOT ACT + FISA 702', stat: 'Kein Schutz', desc: 'Selbst wer EU-Server bei AWS, Google oder Microsoft bucht, ist nicht geschützt. US-Gesetze wie FISA 702 und der Cloud Act gelten extraterritorial. US-Behörden können auf Daten zugreifen, egal wo der Server steht.', cite: 'EuGH C-311/18 (Schrems II, 2020)',
    pulls: [
      { v: '2020', l: 'EuGH erklärt EU-US Privacy Shield für ungültig' },
      { v: '0', l: 'rechtssichere Wege für Cloud-Daten via US-Anbieter' },
      { v: 'CLOUD Act', l: 'gilt extraterritorial für US-Mutterkonzerne' },
    ],
  },
  { kicker: 'REGULIERUNGS-TSUNAMI', stat: 'Nicht tragbar', desc: 'Seit 2024 greifen AI Act, NIS2 und Cyber Resilience Act, zusätzlich zu DSGVO, Data Act, Maschinenverordnung und Lieferkettengesetz. Europäische Unternehmen tragen Compliance-Kosten, die US- und Asien-Konkurrenten nicht haben.', cite: 'VDMA Compliance-Kosten Maschinenbau 2024',
    pulls: [
      { v: '30 000+', l: 'DE-Unternehmen direkt von NIS2 betroffen' },
      { v: '€15-40k', l: 'pro externem Pentest, einmal jährlich' },
      { v: '€10-25k', l: 'pro CE-Software-Risikobeurteilung' },
    ],
  },
]
const EN_PROBLEM_CARDS = [
  { kicker: 'AI DILEMMA', stat: 'Left behind', desc: 'Manufacturing companies need AI to stay competitive. But letting Microsoft Copilot, ChatGPT or Claude access their source code and engineering data is out of the question for most.', cite: 'Bitkom Cloud Monitor 2024 · DIHK 2024',
    pulls: [
      { v: '64%', l: 'of German industry refuses US cloud for sensitive data' },
      { v: '>70%', l: 'rejection in manufacturing specifically' },
      { v: '83%', l: 'of SMEs cite data protection as the top AI barrier' },
    ],
  },
  { kicker: 'PATRIOT ACT + FISA 702', stat: 'No protection', desc: 'Even booking EU servers at AWS, Google or Microsoft offers no protection. US laws like FISA 702 and the Cloud Act apply extraterritorially. US authorities can access data regardless of server location.', cite: 'CJEU C-311/18 (Schrems II, 2020)',
    pulls: [
      { v: '2020', l: 'CJEU invalidates EU-US Privacy Shield' },
      { v: '0', l: 'legally safe paths for cloud data via US providers' },
      { v: 'CLOUD Act', l: 'applies extraterritorially to US parent companies' },
    ],
  },
  { kicker: 'REGULATION TSUNAMI', stat: 'Unsustainable', desc: 'Since 2024, the AI Act, NIS2 and Cyber Resilience Act apply, on top of GDPR, Data Act, Machinery Regulation and Supply Chain Act. European companies bear compliance costs that US and Asian competitors do not face.', cite: 'VDMA Compliance Costs Manufacturing 2024',
    pulls: [
      { v: '30 000+', l: 'DE companies directly hit by NIS2' },
      { v: '€15-40k', l: 'per external pentest, once a year' },
      { v: '€10-25k', l: 'per CE software risk assessment' },
    ],
  },
]

export function PrintProblemPage({ lang, pageNum, totalPages, versionName }: SlideBase) {
  const de = lang === 'de'
  const cards = de ? DE_PROBLEM_CARDS : EN_PROBLEM_CARDS
  return (
    <Page kicker="03" section={de ? 'DAS PROBLEM' : 'THE PROBLEM'} title={de ? 'Deutsche Unternehmen wollen KI, nicht um den Preis ihrer Datensouveränität.' : 'German companies want AI, not at the cost of their data sovereignty.'} subtitle={de ? 'Drei strukturelle Spannungen blockieren produzierende Unternehmen in der KI-Transformation.' : 'Three structural tensions are blocking manufacturing companies in the AI transformation.'} pageNum={pageNum} totalPages={totalPages} versionName={versionName} footnote={cards.map(c => c.cite).join(' · ')}>

      <ThreeCol cols={cards.map((c, i) => (
        <div key={i} style={{ borderLeft: `2px solid ${COLORS.red600}`, paddingLeft: '5mm', height: '100%', display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontSize: '8pt', fontWeight: 700, color: COLORS.red700, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: '3mm' }}>{c.kicker}</div>
          <div style={{ fontSize: '20pt', fontWeight: 800, color: COLORS.slate900, lineHeight: 1, letterSpacing: '-0.02em', marginBottom: '4mm' }}>{c.stat}</div>
          <div style={{ fontSize: '9pt', color: COLORS.slate700, lineHeight: 1.55, marginBottom: '4mm' }}>{c.desc}</div>
          {/* bottom stat block fills empty space and adds visual punch */}
          <div style={{ marginTop: 'auto', paddingTop: '4mm', borderTop: `1px solid ${COLORS.slate200}`, display: 'flex', flexDirection: 'column', gap: '3mm' }}>
            {c.pulls.map((p, j) => (
              <div key={j} style={{ display: 'flex', alignItems: 'baseline', gap: '4mm' }}>
                <div style={{ fontSize: '13pt', fontWeight: 800, color: COLORS.red700, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em', minWidth: '22mm' }}>{p.v}</div>
                <div style={{ fontSize: '7.5pt', color: COLORS.slate600, lineHeight: 1.4, flex: 1 }}>{p.l}</div>
              </div>
            ))}
          </div>
        </div>
      ))} />

      <div style={{ marginTop: '6mm', flexShrink: 0 }}>
        <Callout tone="caution" label={de ? 'Die Konsequenz' : 'The Consequence'}>
          {de
            ? 'Produzierende Unternehmen brauchen eine KI-Lösung, die in Europa läuft, ihren Code schützt und Compliance automatisiert, ohne ihre Daten an US-Konzerne zu geben.'
            : 'Manufacturing companies need an AI solution that runs in Europe, protects their code and automates compliance, without giving their data to US corporations.'}
        </Callout>
      </div>
    </Page>
  )
}

/* ===== SOLUTION ===== */

const DE_PILLARS = [
  { kicker: 'PILLAR 01', t: 'Kontinuierliche Code-Security', d: 'SAST, DAST, SBOM und Pentesting bei jeder Code-Änderung, nicht einmal im Jahr. Findings direkt als Tickets im Issue-Tracker deiner Wahl, mit Implementierungsvorschlägen.', stat: { v: '€15k+', l: 'Pentest-Kosten gespart / App / Jahr' },
    bullets: [
      'SAST + DAST + SBOM bei jedem Push (Semgrep, Gitleaks, Syft, Trivy)',
      'KI-Triage filtert False-Positives auf <2%',
      'LLM-basierter Auto-Fix in CI/CD direkt im Pull Request',
      'Autonomes KI-Pentesting mit Angriffsketten + Exploitability',
      'Integration in Jira, GitHub, GitLab, Azure DevOps',
    ] },
  { kicker: 'PILLAR 02', t: 'Compliance auf Autopilot', d: 'VVT, TOMs, DSFA, Löschfristen und CE-Risikobeurteilung werden automatisch generiert. Nach dem Audit: Abweichungen End-to-End mit Rollen, Stichtagen, Tickets und Eskalation an die GF.', stat: { v: '80%', l: 'Zeitersparnis bei Compliance-Prüfungen' },
    bullets: [
      'Auto-Generierung VVT (Art. 30 DSGVO) bei jeder Code-Änderung',
      'CE-Software-Risikobeurteilung auf Code-Basis (MaschVO 2023)',
      'Audit Manager: Tickets → Nachweise → GF-Eskalation bei SLA-Bruch',
      'Compliance LLM mit Quellenangabe — auditierbar zitierbar',
      'Tender Matching: RFQs in Stunden statt Wochen beantworten',
    ] },
  { kicker: 'PILLAR 03', t: 'Deutsche Cloud, volle Integration', d: 'BSI-zertifizierte Cloud in Deutschland (SysEleven, IONOS). Live-Support über Jitsi und Matrix. Keine US-SaaS im Source Code. Optional Mac Mini/Studio für absolute Privacy.', stat: { v: '100%', l: 'EU-Hosting, keine US-Anbieter' },
    bullets: [
      'BSI C5 zertifizierte Cloud-Hoster in DE und FR',
      'Self-Hosted Matrix (Chat) + Jitsi (Video) für Support-Calls',
      'Lokale LLM-Inferenz (Qwen3, DeepSeek) — air-gap-fähig',
      'Optional: Mac Mini/Studio on-premise für Kleinunternehmen',
      'Vault, Keycloak, OPA für Secrets, SSO, Policies',
    ] },
]
const EN_PILLARS = [
  { kicker: 'PILLAR 01', t: 'Continuous Code Security', d: 'SAST, DAST, SBOM and pentesting on every code change, not once a year. Findings land as tickets in your issue tracker, with implementation suggestions.', stat: { v: '€15k+', l: 'pentest costs saved / app / year' },
    bullets: [
      'SAST + DAST + SBOM on every push (Semgrep, Gitleaks, Syft, Trivy)',
      'AI triage lowers false positives to <2%',
      'LLM-based auto-fix in CI/CD directly inside the pull request',
      'Autonomous AI pentesting with attack chains + exploitability',
      'Integration with Jira, GitHub, GitLab, Azure DevOps',
    ] },
  { kicker: 'PILLAR 02', t: 'Compliance on Autopilot', d: 'RoPA, TOMs, DPIA, retention and CE risk assessment generated automatically. Post-audit: deviations end-to-end with roles, deadlines, tickets and escalation to management.', stat: { v: '80%', l: 'time saved on compliance checks' },
    bullets: [
      'Auto-generated RoPA (GDPR Art. 30) on every code change',
      'CE software risk assessment at code level (Machinery Reg. 2023)',
      'Audit Manager: tickets → evidence → mgmt escalation on SLA breach',
      'Compliance LLM with citations — audit-citable answers',
      'Tender Matching: answer RFQs in hours not weeks',
    ] },
  { kicker: 'PILLAR 03', t: 'German Cloud, Full Integration', d: 'BSI-certified cloud in Germany (SysEleven, IONOS). Live support via Jitsi and Matrix. No US SaaS in source code. Optional Mac Mini/Studio for absolute privacy.', stat: { v: '100%', l: 'EU hosting, no US providers' },
    bullets: [
      'BSI C5 certified cloud hosts in DE and FR',
      'Self-hosted Matrix (chat) + Jitsi (video) for support calls',
      'Local LLM inference (Qwen3, DeepSeek) — air-gap capable',
      'Optional: Mac Mini/Studio on-premise for micro businesses',
      'Vault, Keycloak, OPA for secrets, SSO, policies',
    ] },
]

export function PrintSolutionPage({ lang, pageNum, totalPages, versionName }: SlideBase) {
  const de = lang === 'de'
  const pillars = de ? DE_PILLARS : EN_PILLARS
  return (
    <Page kicker="04" section={de ? 'DIE LÖSUNG' : 'THE SOLUTION'} title={de ? 'Kontinuierliche Software-Compliance statt jährlicher Stichproben.' : 'Continuous software compliance instead of annual spot checks.'} subtitle={de ? 'Drei Säulen, Code-Security, Compliance-Automatisierung, EU-Souveränität, auf einer integrierten Plattform.' : 'Three pillars, code security, compliance automation, EU sovereignty, on one integrated platform.'} pageNum={pageNum} totalPages={totalPages} versionName={versionName}>

      <ThreeCol cols={pillars.map((p, i) => (
        <div key={i} style={{ borderLeft: `2px solid ${COLORS.indigo600}`, paddingLeft: '5mm', height: '100%', display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontSize: '8pt', fontWeight: 700, color: COLORS.indigo600, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: '3mm' }}>{p.kicker}</div>
          <div style={{ fontSize: '14pt', fontWeight: 700, color: COLORS.slate900, lineHeight: 1.2, letterSpacing: '-0.005em', marginBottom: '4mm' }}>{p.t}</div>
          <div style={{ fontSize: '8.5pt', color: COLORS.slate700, lineHeight: 1.5, marginBottom: '4mm' }}>{p.d}</div>
          {/* Detail bullets fill the remaining vertical space */}
          <div style={{ flex: 1, minHeight: 0 }}>
            <Bullets dense items={p.bullets} />
          </div>
          <div style={{ marginTop: '4mm', paddingTop: '3mm', borderTop: `1px solid ${COLORS.slate200}` }}>
            <div style={{ fontSize: '22pt', fontWeight: 800, color: COLORS.emerald700, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>{p.stat.v}</div>
            <div style={{ fontSize: '7.5pt', color: COLORS.slate500, textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: '1.5mm', fontWeight: 600 }}>{p.stat.l}</div>
          </div>
        </div>
      ))} />

      <div style={{ marginTop: '6mm', flexShrink: 0 }}>
        <Callout tone="accent" label={de ? 'Wie es zusammenkommt' : 'How it comes together'}>
          {de
            ? 'BreakPilot ist die einzige Plattform, die kontinuierliche Code-Security, automatisierte Compliance-Dokumentation und CE-Risikobeurteilung in EU-souveräner Infrastruktur vereint, eine Plattform, ein Audit, eine Rechnung.'
            : 'BreakPilot is the only platform that unifies continuous code security, automated compliance documentation and CE risk assessment on EU-sovereign infrastructure, one platform, one audit, one bill.'}
        </Callout>
      </div>
    </Page>
  )
}
