breakpilot-core/pitch-deck/components/slides/RegulatorySlide.tsx

'use client'

import { useState } from 'react'
import { Language } from '@/lib/types'
import { t } from '@/lib/i18n'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import GlassCard from '../ui/GlassCard'
import { Shield, Scale, Wifi, Lock, Calendar, AlertTriangle, CheckCircle2, Clock } from 'lucide-react'

interface RegulatorySlideProps {
  lang: Language
}

type RegTab = 'dsgvo' | 'aiact' | 'cra' | 'nis2'

export default function RegulatorySlide({ lang }: RegulatorySlideProps) {
  const i = t(lang)
  const de = lang === 'de'
  const [activeTab, setActiveTab] = useState<RegTab>('dsgvo')

  const tabs: { id: RegTab; label: string; icon: typeof Shield }[] = [
    { id: 'dsgvo', label: de ? 'DSGVO / GDPR' : 'GDPR', icon: Shield },
    { id: 'aiact', label: 'AI Act', icon: Scale },
    { id: 'cra', label: 'CRA', icon: Lock },
    { id: 'nis2', label: 'NIS2', icon: Wifi },
  ]

  const regulations: Record<RegTab, {
    fullName: string
    status: string
    statusColor: string
    statusIcon: typeof CheckCircle2
    deadline: string
    affectedCompanies: string
    keyRequirements: string[]
    fines: string
    howWeHelp: string[]
  }> = {
    dsgvo: {
      fullName: de ? 'Datenschutz-Grundverordnung (EU 2016/679)' : 'General Data Protection Regulation (EU 2016/679)',
      status: de ? 'In Kraft seit Mai 2018' : 'In effect since May 2018',
      statusColor: 'text-emerald-400',
      statusIcon: CheckCircle2,
      deadline: de ? 'Bereits anzuwenden' : 'Already applicable',
      affectedCompanies: de ? 'Alle Unternehmen die personenbezogene Daten verarbeiten' : 'All companies processing personal data',
      keyRequirements: de
        ? [
            'Verzeichnis von Verarbeitungstaetigkeiten (VVT)',
            'Datenschutz-Folgenabschaetzung (DSFA)',
            'Technische und organisatorische Massnahmen (TOM)',
            'Betroffenenrechte (Auskunft, Loeschung, Portabilitaet)',
            'Auftragsverarbeitungsvertraege (AVV)',
            'Datenschutzbeauftragter (ab 20 MA)',
            'Meldepflicht bei Datenpannen (72h)',
          ]
        : [
            'Records of Processing Activities (RoPA)',
            'Data Protection Impact Assessment (DPIA)',
            'Technical & Organizational Measures (TOMs)',
            'Data Subject Rights (Access, Erasure, Portability)',
            'Data Processing Agreements (DPA)',
            'Data Protection Officer (from 20 employees)',
            'Breach Notification (72h)',
          ],
      fines: de ? 'Bis zu 20 Mio. EUR oder 4% des weltweiten Jahresumsatzes' : 'Up to EUR 20M or 4% of global annual revenue',
      howWeHelp: de
        ? [
            'Automatische VVT-Erstellung aus Unternehmensdaten',
            'KI-gestuetzte DSFA-Durchfuehrung',
            'TOM-Generator mit Branchenvorlagen',
            'Self-Service-Portal fuer Betroffenenanfragen',
            'Automatische Dokumentation und Audit-Trail',
          ]
        : [
            'Automatic RoPA generation from company data',
            'AI-powered DPIA execution',
            'TOM generator with industry templates',
            'Self-service portal for data subject requests',
            'Automatic documentation and audit trail',
          ],
    },
    aiact: {
      fullName: de ? 'KI-Verordnung (EU 2024/1689)' : 'AI Act (EU 2024/1689)',
      status: de ? 'Schrittweise ab Aug 2025' : 'Phased from Aug 2025',
      statusColor: 'text-amber-400',
      statusIcon: Clock,
      deadline: de ? 'Aug 2025: Verbote · Aug 2026: Hochrisiko · Aug 2027: Vollstaendig' : 'Aug 2025: Prohibitions · Aug 2026: High-Risk · Aug 2027: Full',
      affectedCompanies: de ? 'Anbieter und Betreiber von KI-Systemen in der EU' : 'Providers and deployers of AI systems in the EU',
      keyRequirements: de
        ? [
            'Risikoklassifizierung aller KI-Systeme (Art. 6)',
            'Konformitaetsbewertung fuer Hochrisiko-KI (Art. 43)',
            'Technische Dokumentation und Transparenz (Art. 11-13)',
            'Menschliche Aufsicht (Art. 14)',
            'Registrierung in EU-Datenbank (Art. 49)',
            'GPAI-Modell-Pflichten (Art. 51-56)',
            'Grundrechte-Folgenabschaetzung (Art. 27)',
          ]
        : [
            'Risk classification of all AI systems (Art. 6)',
            'Conformity assessment for high-risk AI (Art. 43)',
            'Technical documentation and transparency (Art. 11-13)',
            'Human oversight (Art. 14)',
            'Registration in EU database (Art. 49)',
            'GPAI model obligations (Art. 51-56)',
            'Fundamental rights impact assessment (Art. 27)',
          ],
      fines: de ? 'Bis zu 35 Mio. EUR oder 7% des weltweiten Jahresumsatzes' : 'Up to EUR 35M or 7% of global annual revenue',
      howWeHelp: de
        ? [
            'Automatische Risikoklassifizierung von KI-Systemen',
            'Konformitaets-Checklisten mit KI-Unterstuetzung',
            'Technische Dokumentation per Template-Engine',
            'Audit-Vorbereitung fuer Hochrisiko-Systeme',
            'Monitoring von Rechtsaenderungen',
          ]
        : [
            'Automatic AI system risk classification',
            'Conformity checklists with AI assistance',
            'Technical documentation via template engine',
            'Audit preparation for high-risk systems',
            'Regulatory change monitoring',
          ],
    },
    cra: {
      fullName: de ? 'Cyber Resilience Act (EU 2024/2847)' : 'Cyber Resilience Act (EU 2024/2847)',
      status: de ? 'In Kraft seit Dez 2024' : 'In effect since Dec 2024',
      statusColor: 'text-amber-400',
      statusIcon: Clock,
      deadline: de ? 'Sep 2026: Meldepflichten · Dez 2027: Vollstaendig anzuwenden' : 'Sep 2026: Reporting · Dec 2027: Fully applicable',
      affectedCompanies: de ? 'Alle Hersteller von Produkten mit digitalen Elementen (Hardware & Software)' : 'All manufacturers of products with digital elements (hardware & software)',
      keyRequirements: de
        ? [
            'Security by Design fuer alle Produkte mit Software',
            'Schwachstellen-Management ueber gesamten Produktlebenszyklus',
            'Software Bill of Materials (SBOM) fuer jedes Produkt',
            'Kostenlose Sicherheitsupdates fuer Kunden',
            'Meldepflicht bei aktiv ausgenutzten Schwachstellen (24h)',
            'Konformitaetsbewertung durch Drittstelle (fuer kritische Produkte)',
            'CE-Kennzeichnung fuer Cybersecurity-Compliance',
          ]
        : [
            'Security by design for all products with software',
            'Vulnerability management across entire product lifecycle',
            'Software Bill of Materials (SBOM) for every product',
            'Free security updates for customers',
            'Reporting of actively exploited vulnerabilities (24h)',
            'Third-party conformity assessment (for critical products)',
            'CE marking for cybersecurity compliance',
          ],
      fines: de ? 'Bis zu 15 Mio. EUR oder 2,5% des weltweiten Jahresumsatzes' : 'Up to EUR 15M or 2.5% of global annual revenue',
      howWeHelp: de
        ? [
            'Automatische SBOM-Generierung aus Code-Repositories',
            'Kontinuierliches Schwachstellen-Scanning (Trivy, Grype)',
            'Security-Fixes durch 1000B Cloud-LLM implementiert',
            'CRA-konforme Dokumentation und Audit-Trail',
            'Risikoanalysen fuer Embedded-Software und Firmware',
          ]
        : [
            'Automatic SBOM generation from code repositories',
            'Continuous vulnerability scanning (Trivy, Grype)',
            'Security fixes implemented by 1000B cloud LLM',
            'CRA-compliant documentation and audit trail',
            'Risk assessments for embedded software and firmware',
          ],
    },
    nis2: {
      fullName: de ? 'NIS-2-Richtlinie (EU 2022/2555)' : 'NIS2 Directive (EU 2022/2555)',
      status: de ? 'Umsetzung in nationales Recht laeuft' : 'National transposition in progress',
      statusColor: 'text-amber-400',
      statusIcon: Clock,
      deadline: de ? 'NIS2UmsuCG: voraussichtlich 2025/2026' : 'NIS2 Implementation Act: expected 2025/2026',
      affectedCompanies: de ? '30.000+ Unternehmen in DE (Energie, Transport, Gesundheit, Digital, KRITIS)' : '30,000+ companies in DE (Energy, Transport, Healthcare, Digital, Critical Infrastructure)',
      keyRequirements: de
        ? [
            'Risikomanagement-Massnahmen (Art. 21)',
            'Incident-Meldepflichten: 24h Fruehwarnung, 72h Bericht (Art. 23)',
            'Business Continuity und Krisenmanagement',
            'Supply-Chain-Security (Lieferkettenrisiken)',
            'Geschaeftsleiterhaftung (persoenliche Haftung)',
            'Registrierung beim BSI',
            'Regelmaessige Audits und Nachweise',
          ]
        : [
            'Risk management measures (Art. 21)',
            'Incident reporting: 24h early warning, 72h report (Art. 23)',
            'Business continuity and crisis management',
            'Supply chain security',
            'Management liability (personal liability)',
            'Registration with national authority (BSI)',
            'Regular audits and evidence',
          ],
      fines: de ? 'Bis zu 10 Mio. EUR oder 2% des weltweiten Jahresumsatzes' : 'Up to EUR 10M or 2% of global annual revenue',
      howWeHelp: de
        ? [
            'Cybersecurity-Policy-Generator nach BSI-Grundschutz',
            'Incident-Response-Plaene mit KI-Unterstuetzung',
            'Supply-Chain-Risikoanalyse',
            'Automatische Audit-Dokumentation',
            'NIS2-Readiness-Assessment',
          ]
        : [
            'Cybersecurity policy generator based on BSI standards',
            'AI-assisted incident response plans',
            'Supply chain risk analysis',
            'Automatic audit documentation',
            'NIS2 readiness assessment',
          ],
    },
  }

  const reg = regulations[activeTab]

  return (
    <div>
      <FadeInView className="text-center mb-8">
        <p className="text-xs font-mono text-indigo-400/60 uppercase tracking-widest mb-2">
          {de ? 'Anhang' : 'Appendix'}
        </p>
        <h2 className="text-4xl md:text-5xl font-bold mb-3">
          <GradientText>{i.annex.regulatory.title}</GradientText>
        </h2>
        <p className="text-lg text-white/50 max-w-2xl mx-auto">{i.annex.regulatory.subtitle}</p>
      </FadeInView>

      {/* Tab Navigation */}
      <FadeInView delay={0.15}>
        <div className="flex items-center justify-center gap-2 mb-6">
          {tabs.map((tab) => {
            const Icon = tab.icon
            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm transition-all
                  ${activeTab === tab.id
                    ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/30'
                    : 'bg-white/[0.04] text-white/40 border border-transparent hover:text-white/60 hover:bg-white/[0.06]'
                  }`}
              >
                <Icon className="w-4 h-4" />
                {tab.label}
              </button>
            )
          })}
        </div>
      </FadeInView>

      {/* Content */}
      <FadeInView delay={0.2} key={activeTab}>
        <div className="grid md:grid-cols-12 gap-4">
          {/* Left: Overview */}
          <div className="md:col-span-5 space-y-4">
            <GlassCard hover={false} className="p-4">
              <h3 className="text-sm font-bold text-white mb-1">{reg.fullName}</h3>
              <div className="space-y-2 mt-3 text-xs">
                <div className="flex items-center gap-2">
                  <reg.statusIcon className={`w-4 h-4 ${reg.statusColor}`} />
                  <span className="text-white/60">{reg.status}</span>
                </div>
                <div className="flex items-start gap-2">
                  <Calendar className="w-4 h-4 text-white/30 mt-0.5" />
                  <span className="text-white/60">{reg.deadline}</span>
                </div>
                <div className="flex items-start gap-2">
                  <AlertTriangle className="w-4 h-4 text-red-400 mt-0.5" />
                  <span className="text-red-400/80">{reg.fines}</span>
                </div>
              </div>
            </GlassCard>

            <GlassCard hover={false} className="p-4">
              <p className="text-xs font-semibold text-emerald-400 uppercase tracking-wider mb-2">
                {de ? 'Wie ComplAI hilft' : 'How ComplAI Helps'}
              </p>
              <ul className="space-y-1.5">
                {reg.howWeHelp.map((item, idx) => (
                  <li key={idx} className="flex items-start gap-2 text-xs text-white/60">
                    <CheckCircle2 className="w-3 h-3 text-emerald-400 mt-0.5 shrink-0" />
                    {item}
                  </li>
                ))}
              </ul>
            </GlassCard>
          </div>

          {/* Right: Requirements */}
          <div className="md:col-span-7">
            <GlassCard hover={false} className="p-4 h-full">
              <p className="text-xs font-semibold text-white/40 uppercase tracking-wider mb-3">
                {de ? 'Kernanforderungen' : 'Key Requirements'}
              </p>
              <div className="space-y-2">
                {reg.keyRequirements.map((req, idx) => (
                  <div
                    key={idx}
                    className="flex items-start gap-3 p-2 rounded-lg bg-white/[0.03] border border-white/5"
                  >
                    <span className="text-xs font-mono text-indigo-400/60 mt-0.5 shrink-0 w-4 text-right">{idx + 1}</span>
                    <span className="text-xs text-white/70">{req}</span>
                  </div>
                ))}
              </div>
              <p className="text-[10px] text-white/20 mt-3">
                {de ? 'Betroffene Unternehmen' : 'Affected companies'}: {reg.affectedCompanies}
              </p>
            </GlassCard>
          </div>
        </div>
      </FadeInView>
    </div>
  )
}