'use client'

import { useCallback, useEffect, useState } from 'react'
import { Language, PitchData } from '@/lib/types'
import { t, formatEur } from '@/lib/i18n'
import { useFpKPIs } from '@/lib/hooks/useFpKPIs'
import { generatePdfHtml } from './ExecutiveSummarySlide.pdf'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import GlassCard from '../ui/GlassCard'
import { Download, Shield, Server, Brain, TrendingUp, FileText, Target, ScanLine, CheckCircle2, ClipboardCheck, GraduationCap, Cpu, Users, UserCheck, AlertTriangle } from 'lucide-react'

interface ExecutiveSummarySlideProps {
  lang: Language
  data: PitchData
  investorId?: string | null
  preferredScenarioId?: string | null
  isWandeldarlehen?: boolean
}

export default function ExecutiveSummarySlide({ lang, data, investorId, preferredScenarioId, isWandeldarlehen }: ExecutiveSummarySlideProps) {
  const i = t(lang)
  const es = i.executiveSummary
  const de = lang === 'de'

  // Unternehmensentwicklung from fp_* tables (source of truth)
  const { kpis: fpKPIs } = useFpKPIs(isWandeldarlehen)

  // Pipeline stats from DB
  const [pipelineStats, setPipelineStats] = useState<Record<string, { value: number }>>({})
  useEffect(() => {
    fetch('/api/pipeline-stats', { cache: 'no-store' }).then(r => r.json()).then(setPipelineStats).catch(() => {})
  }, [])

  const funding = data.funding
  const amount = funding?.amount_eur || 0
  const amountLabel = amount >= 1_000_000
    ? `${(amount / 1_000_000).toFixed(1)} Mio. EUR`
    : `${(amount / 1_000).toFixed(0)}k EUR`

  const market = data.market || []
  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 handleDownloadPdf = useCallback(() => {
    const printWindow = window.open('', '_blank')
    if (!printWindow) return

    const html = generatePdfHtml({ lang, data, es, funding, tam, sam, som, amountLabel, de })
    printWindow.document.write(html)

    printWindow.document.close()
    setTimeout(() => printWindow.print(), 300)
  }, [lang, data, es, funding, tam, sam, som, amountLabel, de])

  // === SLIDE VIEW ===
  return (
    <div className="max-w-6xl mx-auto overflow-y-auto max-h-[85vh] pr-2">
      <FadeInView className="text-center mb-4">
        <h2 className="text-3xl md:text-5xl font-bold mb-2">
          <span className="text-white">BreakPilot COMPL</span><GradientText>AI</GradientText>
        </h2>
        <p className="text-base text-white/50 max-w-2xl mx-auto">Executive Summary</p>
      </FadeInView>

      {/* Hero Description */}
      <FadeInView delay={0.05} className="mb-4">
        <div className="bg-gradient-to-r from-indigo-500/10 to-cyan-500/10 border-l-4 border-indigo-500 rounded-r-xl px-5 py-4">
          <p className="text-sm text-white/70 leading-relaxed">
            {de
              ? <>BreakPilot COMPL<strong className="text-indigo-300">AI</strong> ist eine <strong className="text-indigo-300">DSGVO-konforme KI-Plattform</strong>, die kontinuierliches Sicherheitsscanning mit intelligenter Compliance-Automatisierung vereint. Wir helfen unseren Kunden, ihren <strong className="text-indigo-300">Code abzusichern</strong>, <strong className="text-indigo-300">Compliance skalierbar durchzusetzen</strong> und <strong className="text-indigo-300">volle Datensouveränität zu bewahren</strong> — gestützt auf über 25.000 atomaren Prüfaspekten für einen lückenlosen Audit-Trail.</>
              : <>BreakPilot COMPL<strong className="text-indigo-300">AI</strong> is a <strong className="text-indigo-300">GDPR-compliant AI platform</strong> that combines continuous security scanning with intelligent compliance automation. We help our customers <strong className="text-indigo-300">secure their code</strong>, <strong className="text-indigo-300">enforce compliance at scale</strong> and <strong className="text-indigo-300">maintain full data sovereignty</strong> — powered by over 25,000 atomic audit aspects for a complete audit trail.</>
            }
          </p>
        </div>
      </FadeInView>

      {/* USP / MOAT */}
      <FadeInView delay={0.1} className="mb-4">
        <div className="bg-gradient-to-r from-indigo-500/10 to-purple-500/10 border border-indigo-500/20 rounded-2xl px-5 py-4">
          <h3 className="text-sm font-bold text-indigo-400 uppercase tracking-wider text-center">{de ? 'Unser MOAT' : 'Our MOAT'}</h3>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mt-3">
            <div className="text-center">
              <p className="text-sm font-bold text-indigo-300">Traceability</p>
              <p className="text-xs text-white/50">{de ? 'Gesetz → Control → Code' : 'Law → Control → Code'}</p>
            </div>
            <div className="text-center">
              <p className="text-sm font-bold text-purple-300">Continuous Engine</p>
              <p className="text-xs text-white/50">{de ? 'Echtzeit bei jeder Änderung' : 'Real-time on every change'}</p>
            </div>
            <div className="text-center">
              <p className="text-sm font-bold text-amber-300">Compliance Optimizer</p>
              <p className="text-xs text-white/50">{de ? 'Maximale KI-Nutzung im Rahmen' : 'Max AI use within regulations'}</p>
            </div>
            <div className="text-center">
              <p className="text-sm font-bold text-emerald-300">EU-Trust Stack</p>
              <p className="text-xs text-white/50">{de ? '100% EU, kein US-SaaS' : '100% EU, no US SaaS'}</p>
            </div>
          </div>
        </div>
      </FadeInView>

      {/* Problem + Solution */}
      <div className="grid md:grid-cols-2 gap-3 mb-4">
        <GlassCard delay={0.15} hover={false} className="p-4">
          <div className="flex items-center gap-2 mb-2">
            <Shield className="w-4 h-4 text-red-400" />
            <h3 className="text-sm font-bold text-red-400 uppercase tracking-wider">{es.problem}</h3>
          </div>
          <p className="text-xs text-white/60 mb-2 italic">
            {de ? 'Unternehmen stehen vor einer unlösbaren Entscheidung:' : 'Companies face an impossible decision:'}
          </p>
          <div className="space-y-1.5">
            {(de ? [
              'Ohne KI verlieren sie ihre Wettbewerbsfähigkeit',
              'Mit US-KI riskieren sie, die Kontrolle über ihre sensibelsten Daten zu verlieren',
              'Neue EU-Regulierungen (AI Act, CRA, NIS2) zwingen über 30.000 Unternehmen in hochkomplexe Compliance-Prozesse',
              'EU-Regulierung unterscheidet nicht zwischen kleinen und großen Unternehmen',
              'Hohe Kosten für Pentests und Audits — Prüfungen nur einmal im Jahr',
              'Das Ergebnis: Stillstand in einer Phase, in der Geschwindigkeit entscheidend ist',
            ] : [
              'Without AI they lose their competitiveness',
              'With US AI they risk losing control over their most sensitive data',
              'New EU regulations (AI Act, CRA, NIS2) force over 30,000 companies into complex compliance processes',
              'EU regulation does not differentiate between small and large companies',
              'High costs for pentests and audits — checks only once a year',
              'The result: standstill in a phase where speed is decisive',
            ]).map((item, idx) => (
              <p key={idx} className="text-xs text-white/70 pl-4 relative leading-relaxed">
                <span className="absolute left-0 top-1 w-1.5 h-1.5 rounded-full bg-red-400/60" />
                {item}
              </p>
            ))}
          </div>
        </GlassCard>
        <GlassCard delay={0.2} hover={false} className="p-4">
          <div className="flex items-center gap-2 mb-2">
            <CheckCircle2 className="w-4 h-4 text-emerald-400" />
            <h3 className="text-sm font-bold text-emerald-400 uppercase tracking-wider">{es.solution}</h3>
          </div>
          <p className="text-xs text-white/60 mb-2 italic">
            {de ? 'Breakpilot macht Compliance und Security kontinuierlich – nicht mehr punktuell.' : 'Breakpilot makes compliance and security continuous – no longer periodic.'}
          </p>
          <div className="space-y-1.5">
            {(de ? [
              'Jede Code-Änderung wird automatisch geprüft (SAST, DAST, SBOM, Pentesting)',
              'VVT, TOMs, DSFA, Löschfristen und Pflichten entstehen in Echtzeit',
              'CE-Software-Risikobeurteilung auf Code-Basis schon in der Entwicklung',
              'Abweichungen vollständig orchestriert: Tickets, Nachweise, Eskalation an GF',
              'Compliance GPT für komplexe Fragen',
              'Gehostet in europäischer Infrastruktur (DE/FR) für maximale Datensouveränität',
              'Ergebnis: audit-ready zu jedem Zeitpunkt',
            ] : [
              'Every code change is automatically checked (SAST, DAST, SBOM, pentesting)',
              'RoPA, TOMs, DPIA, retention and obligations created in real-time',
              'CE software risk assessment on code level already during development',
              'Deviations fully orchestrated: tickets, evidence, escalation to management',
              'Compliance GPT for complex questions',
              'Hosted on European infrastructure (DE/FR) for maximum data sovereignty',
              'Result: audit-ready at any time',
            ]).map((item, idx) => (
              <p key={idx} className="text-xs text-white/70 pl-4 relative leading-relaxed">
                <span className="absolute left-0 top-1 w-1.5 h-1.5 rounded-full bg-emerald-400/60" />
                {item}
              </p>
            ))}
          </div>
        </GlassCard>
      </div>

      {/* KPI Row — 6 Kacheln (ohne Finanzierung, mit Zeitersparnis + Pentest-Kosten) */}
      <FadeInView delay={0.25} className="mb-4">
        <div className="grid grid-cols-3 md:grid-cols-6 gap-2">
          {[
            { value: pipelineStats.unique_controls ? `${Math.round(pipelineStats.unique_controls.value / 1000)}k+` : '25k+', label: es.controls, icon: Shield, color: '#6366f1' },
            { value: pipelineStats.legal_sources ? `${pipelineStats.legal_sources.value}+` : '380+', label: es.regulations, icon: Brain, color: '#60a5fa' },
            { value: '10', label: es.industries, icon: Target, color: '#34d399' },
            { value: '500K+', label: es.linesOfCode, icon: Cpu, color: '#fbbf24' },
            { value: '80%', label: de ? 'Zeitersparnis bei\nCompliance-Prüfungen' : 'Time saved on\ncompliance checks', icon: TrendingUp, color: '#10b981' },
            { value: '10x', label: de ? 'Günstiger als\nmanuelle Pentests' : 'Cheaper than\nmanual pentests', icon: Shield, color: '#f472b6' },
          ].map((kpi, idx) => (
            <div key={idx} className="bg-white/[0.06] backdrop-blur-xl border border-white/10 rounded-xl p-2.5 text-center">
              <kpi.icon className="w-3.5 h-3.5 mx-auto mb-0.5 opacity-60" style={{ color: kpi.color }} />
              <p className="text-lg font-bold text-white">{kpi.value}</p>
              <p className="text-[10px] text-white/40 uppercase tracking-wider whitespace-pre-line">{kpi.label}</p>
            </div>
          ))}
        </div>
      </FadeInView>

      {/* Product Cards — Scanner + Platform */}
      <div className="grid md:grid-cols-2 gap-3 mb-4">
        <GlassCard delay={0.3} hover={false} className="p-3 border-t-2 border-t-indigo-500">
          <div className="flex items-center gap-2 mb-1">
            <ScanLine className="w-4 h-4 text-indigo-400" />
            <h3 className="text-sm font-bold text-indigo-400">Compliance Scanner</h3>
          </div>
          <p className="text-[10px] text-white/30 uppercase tracking-wider mb-2">{de ? 'Kontinuierlicher KI-Sicherheitsagent' : 'Continuous AI Security Agent'}</p>
          <div className="space-y-1">
            {[
              de ? 'SAST + DAST + SBOM — bei jeder Code-Änderung' : 'SAST + DAST + SBOM — on every code change',
              de ? 'KI-gestütztes Pentesting — kontinuierlich statt jährlich' : 'AI-powered pentesting — continuous not annual',
              de ? 'CE-Software-Risikobeurteilung für Maschinenverordnung' : 'CE software risk assessment for Machinery Regulation',
              de ? 'Compliance Optimizer + Tender Matching gegen Codebase' : 'Compliance Optimizer + Tender Matching against codebase',
              de ? 'Lückenloser Audit-Trail von Erkennung bis Behebung' : 'Complete audit trail from detection to remediation',
            ].map((item, idx) => (
              <p key={idx} className="text-xs text-white/60 pl-3 relative">
                <span className="absolute left-0 top-1 w-1.5 h-1.5 rounded-full bg-indigo-400/60" />
                {item}
              </p>
            ))}
          </div>
        </GlassCard>

        <GlassCard delay={0.35} hover={false} className="p-3 border-t-2 border-t-cyan-500">
          <div className="flex items-center gap-2 mb-1">
            <Server className="w-4 h-4 text-cyan-400" />
            <h3 className="text-sm font-bold text-cyan-400">COMPL<span className="text-indigo-400">AI</span> Plattform</h3>
          </div>
          <p className="text-[10px] text-white/30 uppercase tracking-wider mb-2">{de ? 'Souveräne Compliance-Infrastruktur' : 'Sovereign Compliance Infrastructure'}</p>
          <div className="space-y-1">
            {[
              de ? 'VVT, TOMs, DSFA, Löschfristen — automatisch generiert' : 'RoPA, TOMs, DPIA, retention — auto-generated',
              de ? 'Audit Manager — Abweichungen End-to-End mit Eskalation' : 'Audit Manager — deviations end-to-end with escalation',
              de ? 'Compliance LLM — GPT für Text und Audio, EU-gehostet' : 'Compliance LLM — GPT for text and audio, EU-hosted',
              de ? 'Academy — Online-Schulungen für GF und Mitarbeiter' : 'Academy — online training for management and employees',
              de ? 'BSI-Cloud DE / FR' : 'BSI Cloud DE / FR',
            ].map((item, idx) => (
              <p key={idx} className="text-xs text-white/60 pl-3 relative">
                <span className="absolute left-0 top-1 w-1.5 h-1.5 rounded-full bg-cyan-400/60" />
                {item}
              </p>
            ))}
          </div>
        </GlassCard>
      </div>

      {/* Go-to-Market Roadmap (3 Phasen) */}
      <FadeInView delay={0.4} className="mb-4">
        <h3 className="text-xs font-bold text-white/40 uppercase tracking-wider mb-2">{de ? 'Go-to-Market Roadmap' : 'Go-to-Market Roadmap'}</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
          {[
            { title: de ? 'Phase 1: Pilot (Jul/Aug 2026)' : 'Phase 1: Pilot (Jul/Aug 2026)', color: 'bg-indigo-500/10 border-indigo-500/20', textColor: 'text-indigo-300',
              items: de ? ['Gründung GmbH', 'Direktvertrieb an Maschinen- und Anlagenbauer', 'Persönliches Onboarding, White-Glove-Service', 'Case Studies und Referenzkunden'] : ['Company founding', 'Direct sales to machine manufacturers', 'Personal onboarding, white-glove service', 'Case studies and reference customers'] },
            { title: de ? 'Phase 2: Skalierung (2027)' : 'Phase 2: Scale (2027)', color: 'bg-purple-500/10 border-purple-500/20', textColor: 'text-purple-300',
              items: de ? ['Channel-Partnerschaften mit IT-Systemhäusern', 'IHK-Kooperationen, Messen', 'Content Marketing, Compliance-Webinare', '50-200 Kunden in regulierten Branchen'] : ['Channel partnerships with IT integrators', 'Chamber of Commerce, trade fairs', 'Content marketing, compliance webinars', '50-200 customers in regulated industries'] },
            { title: de ? 'Phase 3: Expansion (2028+)' : 'Phase 3: Expansion (2028+)', color: 'bg-emerald-500/10 border-emerald-500/20', textColor: 'text-emerald-300',
              items: de ? ['Enterprise-Kunden (50-500 MA)', 'EU-Expansion: AT, CH, Benelux', 'Distributor-Partnerschaften', 'Break-Even Q3/2029'] : ['Enterprise customers (50-500 emp.)', 'EU expansion: AT, CH, Benelux', 'Distributor partnerships', 'Break-even Q3/2029'] },
          ].map((phase, idx) => (
            <div key={idx} className={`${phase.color} border rounded-lg px-3 py-3`}>
              <p className={`text-sm font-bold ${phase.textColor} mb-1.5`}>{phase.title}</p>
              {phase.items.map((item, i) => (
                <p key={i} className="text-xs text-white/60 pl-4 relative leading-relaxed">
                  <span className={`absolute left-0 top-1 w-1.5 h-1.5 rounded-full ${phase.textColor === 'text-indigo-300' ? 'bg-indigo-400/60' : phase.textColor === 'text-purple-300' ? 'bg-purple-400/60' : 'bg-emerald-400/60'}`} />{item}
                </p>
              ))}
            </div>
          ))}
        </div>
      </FadeInView>

      {/* 8 Module — gleiche Optik wie Folie 7 */}
      <FadeInView delay={0.45} className="mb-4">
        <h3 className="text-xs font-bold text-white/40 uppercase tracking-wider mb-2">{de ? 'Modularer Baukasten' : 'Modular Toolkit'}</h3>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          {[
            { name: 'Code Security', desc: de ? 'SAST, DAST, SBOM, Pentesting' : 'SAST, DAST, SBOM, pentesting', color: '#ef4444', icon: ScanLine },
            { name: de ? 'CE-SW-Risiko' : 'CE SW Risk', desc: de ? 'CE-Kennzeichnung' : 'CE marking', color: '#f97316', icon: Shield },
            { name: de ? 'Compliance Docs' : 'Compliance Docs', desc: de ? 'VVT, DSFA, TOMs' : 'RoPA, DPIA, TOMs', color: '#6366f1', icon: FileText },
            { name: 'Audit Manager', desc: de ? 'Abweichungen, Nachweise' : 'Deviations, evidence', color: '#10b981', icon: CheckCircle2 },
            { name: de ? 'DSR / Betroffene' : 'DSR / Data Subj.', desc: de ? 'Auskunft, Löschung' : 'Access, erasure', color: '#06b6d4', icon: Users },
            { name: 'Consent', desc: de ? 'Einwilligungen' : 'Consent mgmt', color: '#14b8a6', icon: UserCheck },
            { name: de ? 'Notfallpläne' : 'Incident Resp.', desc: de ? 'Vorfälle, Meldung' : 'Breaches, reporting', color: '#f59e0b', icon: AlertTriangle },
            { name: 'Compliance LLM', desc: de ? 'GPT Text + Audio' : 'GPT text + audio', color: '#a855f7', icon: Brain },
            { name: 'Tender Matching', desc: de ? 'RFQ gegen Codebase' : 'RFQ vs codebase', color: '#8b5cf6', icon: Shield },
            { name: 'Academy', desc: de ? 'Schulungen' : 'Training', color: '#ec4899', icon: GraduationCap },
            { name: 'Compliance Optimizer', desc: de ? 'Maximale KI-Nutzung im Rahmen' : 'Max AI usage within limits', color: '#0ea5e9', icon: Cpu },
            { name: de ? 'Kommunikation' : 'Communication', desc: de ? 'Chat + Video + AI' : 'Chat + video + AI', color: '#22c55e', icon: Server },
          ].map((mod, idx) => {
            const Icon = mod.icon
            return (
              <GlassCard key={idx} delay={0.45 + idx * 0.03} hover className="p-3 text-center">
                <Icon className="w-5 h-5 mx-auto mb-2" style={{ color: mod.color }} />
                <p className="text-xs font-bold text-white mb-1">{mod.name}</p>
                <p className="text-[10px] text-white/40 leading-tight">{mod.desc}</p>
              </GlassCard>
            )
          })}
        </div>
      </FadeInView>

      {/* 3-Spalten Layout: schmal | mittel-breit | schmal */}
      <div className="grid md:grid-cols-[1fr_1.6fr_1fr] gap-3 mb-4">

        {/* Linke Spalte: Zielmärkte + Markt — Höhe an Mitte angepasst */}
        <div className="grid grid-rows-2 gap-3">
          <GlassCard delay={0.5} hover={false} className="p-3">
            <h3 className="text-xs font-bold text-purple-400 uppercase tracking-wider mb-2">{de ? 'Zielmärkte' : 'Target Markets'}</h3>
            <div className="space-y-1.5">
              {(de ? [
                'Maschinen- & Anlagenbau',
                'Automobilindustrie',
                'Zulieferindustrie',
                'Produzierende Unternehmen',
              ] : [
                'Machine & Plant Manufacturing',
                'Automotive Industry',
                'Supplier Industry',
                'Manufacturing Companies',
              ]).map((item, idx) => (
                <p key={idx} className="text-xs text-white/60 pl-3 relative">
                  <span className="absolute left-0 top-1 w-1.5 h-1.5 rounded-full bg-purple-400/60" />
                  {item}
                </p>
              ))}
            </div>
          </GlassCard>

          <GlassCard delay={0.55} hover={false} className="p-3">
            <h3 className="text-xs font-bold text-amber-400 uppercase tracking-wider mb-2">{de ? 'Markt' : 'Market'}</h3>
            <div className="space-y-1.5 text-xs">
              <div className="flex justify-between"><span className="text-white/40">TAM</span><span className="text-white/70">{tam ? formatEur(tam.value_eur, lang) : '—'}</span></div>
              <div className="flex justify-between"><span className="text-white/40">SAM</span><span className="text-white/70">{sam ? formatEur(sam.value_eur, lang) : '—'}</span></div>
              <div className="flex justify-between"><span className="text-white/40">SOM</span><span className="text-white/70">{som ? formatEur(som.value_eur, lang) : '—'} *</span></div>
              <p className="text-[9px] text-white/30 italic mt-1">* {de ? 'nur Anlagen- und Maschinenbau' : 'machine & plant manufacturing only'}</p>
            </div>
          </GlassCard>
        </div>

        {/* Mittlere Spalte: Unternehmensentwicklung + Wettbewerber */}
        <div className="grid grid-rows-2 gap-3">
          <GlassCard delay={0.5} hover={false} className="p-3">
            <h3 className="text-xs font-bold text-indigo-400 uppercase tracking-wider mb-2">{de ? 'Unternehmensentwicklung' : 'Company Growth'}</h3>
            <div className="grid grid-cols-4 gap-x-3 text-[10px] text-white/30 uppercase tracking-wider mb-1.5 border-b border-white/10 pb-1">
              <span>{de ? 'Jahr' : 'Year'}</span><span className="text-right">MA</span><span className="text-right">{de ? 'Kunden' : 'Customers'}</span><span className="text-right">ARR</span>
            </div>
            <div className="space-y-1">
              {!fpKPIs.y2026 ? (
                <p className="text-xs text-white/30 text-center py-2">{de ? 'Lade Finanzplan...' : 'Loading financial plan...'}</p>
              ) : [2026, 2027, 2028, 2029, 2030].map((year, idx) => {
                const k = fpKPIs[`y${year}`]
                if (!k) return null
                const arrLabel = k.arr >= 1_000_000
                  ? (de ? `~${(k.arr / 1_000_000).toFixed(1).replace('.', ',')} Mio. EUR` : `~EUR ${(k.arr / 1_000_000).toFixed(1)}M`)
                  : (de ? `~${Math.round(k.arr / 1000)}k EUR` : `~EUR ${Math.round(k.arr / 1000)}k`)
                return (
                  <div key={idx} className="grid grid-cols-4 gap-x-3 text-xs">
                    <span className="text-white/40">{year}</span>
                    <span className="text-right text-white/50">{k.headcount}</span>
                    <span className="text-right text-white/50">~{k.customers.toLocaleString('de-DE')}</span>
                    <span className={`text-right font-mono ${idx >= 3 ? 'text-emerald-300 font-bold' : 'text-white/70'}`}>{arrLabel}</span>
                  </div>
                )
              })}
            </div>
          </GlassCard>

          <GlassCard delay={0.55} hover={false} className="p-3 flex-1">
            <h3 className="text-xs font-bold text-red-400 uppercase tracking-wider mb-2">{de ? 'Wettbewerber' : 'Competitors'}</h3>
            <div className="grid grid-cols-5 gap-x-3 text-[9px] text-white/30 uppercase tracking-wider mb-1.5 border-b border-white/10 pb-1">
              <span></span><span>{de ? 'Gegr.' : 'Est.'}</span><span>MA</span><span className="text-right">{de ? 'Kunden' : 'Cust.'}</span><span className="text-right">ARR</span>
            </div>
            <div className="space-y-1.5">
              {[
                { name: 'Vanta', flag: '🇺🇸', year: '2018', emp: '500+', cust: '8.000+', rev: '$220M' },
                { name: 'Drata', flag: '🇺🇸', year: '2020', emp: '500+', cust: '5.000+', rev: '$100M' },
                { name: 'Sprinto', flag: '🇮🇳', year: '2020', emp: '345', cust: '2.000+', rev: '$38M' },
                { name: 'Delve', flag: '🇺🇸', year: '2024', emp: '24', cust: '—', rev: '$2,6M' },
                { name: 'DataGuard', flag: '🇩🇪', year: '2017', emp: '400+', cust: '4.000+', rev: '€20-30M' },
                { name: 'Proliance', flag: '🇩🇪', year: '2017', emp: '100+', cust: '2.500+', rev: '€5-10M' },
                { name: 'heyData', flag: '🇩🇪', year: '2019', emp: '80+', cust: '2.000+', rev: '€3-10M' },
              ].map((c, idx) => (
                <div key={idx} className="grid grid-cols-5 gap-x-3 text-[10px]">
                  <span className="text-white/70 font-medium">{c.flag} {c.name}</span>
                  <span className="text-white/40">{c.year}</span>
                  <span className="text-white/50">{c.emp}</span>
                  <span className="text-right text-white/60">{c.cust}</span>
                  <span className="text-right text-white/70 font-mono font-semibold">{c.rev}</span>
                </div>
              ))}
            </div>
          </GlassCard>
        </div>

        {/* Rechte Spalte: Pricing + Kundenersparnis — Höhe an Mitte angepasst */}
        <div className="grid grid-rows-2 gap-3">
          <GlassCard delay={0.6} hover={false} className="p-3">
            <h3 className="text-xs font-bold text-amber-400 uppercase tracking-wider mb-2">{de ? 'Pricing' : 'Pricing'}</h3>
            <div className="space-y-1.5">
              {[
                { tier: de ? 'Starter (<10 MA)' : 'Starter (<10 emp.)', price: de ? '3.600€/J.' : '€3,600/yr' },
                { tier: de ? 'Professional (10–250)' : 'Professional (10–250)', price: de ? '15.000–40.000€/J.' : '€15k–40k/yr', highlight: true },
                { tier: de ? 'Enterprise (250+)' : 'Enterprise (250+)', price: de ? 'ab 50.000€/J.' : 'from €50k/yr' },
              ].map((t, idx) => (
                <div key={idx} className={`flex justify-between text-xs ${t.highlight ? 'text-amber-300 font-bold' : 'text-white/60'}`}>
                  <span>{t.tier}</span>
                  <span className="font-mono text-[10px]">{t.price}</span>
                </div>
              ))}
            </div>
          </GlassCard>

          <GlassCard delay={0.65} hover={false} className="p-3">
            <h3 className="text-xs font-bold text-emerald-400 uppercase tracking-wider mb-2">{de ? 'Kundenersparnis' : 'Customer Savings'}</h3>
            <div className="space-y-1 text-xs text-white/60">
              <div className="flex justify-between"><span>Pentests</span><strong className="text-emerald-300">13k</strong></div>
              <div className="flex justify-between"><span>CE-Risiko</span><strong className="text-emerald-300">9k</strong></div>
              <div className="flex justify-between"><span>{de ? 'Compliance-Zeit' : 'Compliance time'}</span><strong className="text-emerald-300">15k</strong></div>
              <div className="flex justify-between"><span>{de ? 'Audit-Vorb.' : 'Audit prep.'}</span><strong className="text-emerald-300">9k</strong></div>
              <div className="flex justify-between border-t border-white/10 pt-1 mt-1"><span className="font-bold text-white/80">{de ? 'KMU/Jahr' : 'SME/year'}</span><strong className="text-emerald-300">55k</strong></div>
            </div>
          </GlassCard>
        </div>

      </div>

      {/* Disclaimer */}
      <FadeInView delay={0.7} className="mb-4">
        <div className="bg-white/[0.03] border border-white/[0.03] rounded-lg px-4 py-3">
          <h4 className="text-xs font-bold text-white/40 uppercase tracking-wider mb-1">{de ? 'Hinweis / Haftungsausschluss' : 'Disclaimer'}</h4>
          <p className="text-[11px] text-white/30 leading-relaxed">
            {de
              ? 'Dieses Dokument dient ausschließlich Informationszwecken und stellt weder ein Angebot zum Verkauf noch eine Aufforderung zum Kauf von Anteilen oder Wertpapieren dar. Die enthaltenen Informationen wurden vom Team Breakpilot (Gründerteam, noch keine Gesellschaft gegründet) nach bestem Wissen und Gewissen erstellt, können jedoch unvollständig sein und jederzeit ohne vorherige Ankündigung geändert werden. Es wird keine ausdrückliche oder konkludente Gewähr für die Richtigkeit, Vollständigkeit oder Aktualität der Inhalte übernommen. Dieses Dokument enthält zukunftsgerichtete Aussagen, die auf aktuellen Annahmen und Erwartungen beruhen und mit erheblichen Risiken und Unsicherheiten verbunden sind. Die tatsächlichen Ergebnisse können wesentlich von den dargestellten abweichen. Eine Investitionsentscheidung sollte ausschließlich auf Grundlage weitergehender, rechtlich verbindlicher Unterlagen sowie unter Hinzuziehung eigener rechtlicher, steuerlicher und finanzieller Beratung getroffen werden. Soweit gesetzlich zulässig, wird jede Haftung des Team Breakpilot sowie seiner Mitglieder für etwaige Schäden, die direkt oder indirekt aus der Nutzung dieses Dokuments entstehen, ausgeschlossen. Dieses Dokument ist vertraulich und ausschließlich für den vorgesehenen Empfänger bestimmt. Eine Weitergabe, Vervielfältigung oder Veröffentlichung ist ohne vorherige schriftliche Zustimmung nicht gestattet.'
              : 'This document is for informational purposes only and does not constitute an offer to sell or a solicitation to purchase shares or securities. The information contained herein was prepared by Team Breakpilot (founding team, no company incorporated yet) to the best of their knowledge, but may be incomplete and subject to change without prior notice. No express or implied warranty is given for the accuracy, completeness or timeliness of the content. This document contains forward-looking statements based on current assumptions and expectations that involve significant risks and uncertainties. Actual results may differ materially. Any investment decision should be based solely on further legally binding documents and with the advice of independent legal, tax and financial counsel. To the extent permitted by law, all liability of Team Breakpilot and its members for any damages arising directly or indirectly from the use of this document is excluded. This document is confidential and intended solely for the designated recipient. Distribution, reproduction or publication without prior written consent is prohibited.'
            }
          </p>
        </div>
      </FadeInView>

      {/* PDF Download Button */}
      <FadeInView delay={0.75} className="text-center pb-4">
        <button
          onClick={handleDownloadPdf}
          className="inline-flex items-center gap-2 px-6 py-2.5 rounded-full bg-indigo-500 hover:bg-indigo-600 transition-colors text-white text-sm font-medium shadow-lg shadow-indigo-500/30"
        >
          <Download className="w-4 h-4" />
          {es.downloadPdf} (DIN A3)
        </button>
      </FadeInView>
    </div>
  )
}