'use client'

import { motion } from 'framer-motion'
import { Shield, Lock, ShieldCheck, Search, FileCode, Key, FileText } from 'lucide-react'
import { Language } from '@/lib/types'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'

interface AnnexSecuritySlideProps {
  lang: Language
}

export default function AnnexSecuritySlide({ lang }: AnnexSecuritySlideProps) {
  const securityFeatures = [
    {
      icon: Shield,
      title: lang === 'de' ? 'BSI & Compliance' : 'BSI & Compliance',
      accentColor: 'from-blue-400 to-blue-600',
      items: [
        lang === 'de' ? 'BSI-TR-03161 zertifizierte Architektur' : 'BSI-TR-03161 certified architecture',
        lang === 'de' ? 'DSGVO Art. 32 TOM implementiert' : 'DSGVO Art. 32 TOM implemented',
        lang === 'de' ? 'Regelmäßige Penetrationstests' : 'Regular penetration testing',
        lang === 'de' ? 'Sicherheits-Audit-Trail' : 'Security audit trail'
      ]
    },
    {
      icon: Lock,
      title: lang === 'de' ? 'Verschlüsselung & Vault' : 'Encryption & Vault',
      accentColor: 'from-purple-400 to-purple-600',
      items: [
        lang === 'de' ? 'E2E-Verschlüsselung für Daten in Transit (TLS 1.3)' : 'E2E encryption for all data in transit (TLS 1.3)',
        lang === 'de' ? 'AES-256 Verschlüsselung im Ruhezustand' : 'AES-256 encryption at rest',
        lang === 'de' ? 'HashiCorp Vault für Secret Management' : 'HashiCorp Vault for secret management',
        lang === 'de' ? 'Automatische Zertifikatsrotation' : 'Automatic certificate rotation'
      ]
    },
    {
      icon: ShieldCheck,
      title: lang === 'de' ? 'Zero Trust' : 'Zero Trust',
      accentColor: 'from-green-400 to-green-600',
      items: [
        lang === 'de' ? 'Kein implizites Vertrauen, alles verifizieren' : 'No implicit trust, verify everything',
        lang === 'de' ? 'JWT-basierte Authentifizierung' : 'JWT-based authentication',
        lang === 'de' ? 'RBAC mit minimalen Rechten' : 'RBAC with least privilege',
        lang === 'de' ? 'Netzwerksegmentierung via Docker' : 'Network segmentation via Docker'
      ]
    }
  ]

  const securityTools = [
    { name: 'Trivy', description: lang === 'de' ? 'Container Scanning' : 'Container Scanning', icon: Search },
    { name: 'Semgrep', description: 'SAST', icon: FileCode },
    { name: 'Gitleaks', description: lang === 'de' ? 'Secret Detection' : 'Secret Detection', icon: Key },
    { name: 'SBOM', description: lang === 'de' ? 'Software Bill of Materials' : 'Software Bill of Materials', icon: FileText }
  ]

  return (
    <div className="max-w-6xl mx-auto px-4">
      <FadeInView>
        <div className="text-center mb-12">
          <h2 className="text-5xl font-bold mb-4">
            <GradientText>
              {lang === 'de' ? 'Sicherheitsarchitektur' : 'Security Architecture'}
            </GradientText>
          </h2>
          <p className="text-xl text-white/60">
            {lang === 'de'
              ? 'Enterprise-Grade Sicherheit auf eigener Hardware'
              : 'Enterprise-grade security on own hardware'}
          </p>
        </div>
      </FadeInView>

      {/* Security Features Grid */}
      <div className="grid md:grid-cols-3 gap-6 mb-8">
        {securityFeatures.map((feature, index) => (
          <motion.div
            key={feature.title}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: index * 0.1 }}
            className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-4"
          >
            <div className={`w-12 h-12 rounded-lg bg-gradient-to-br ${feature.accentColor} flex items-center justify-center mb-4`}>
              <feature.icon className="w-6 h-6 text-white" />
            </div>
            <h3 className="text-xl font-semibold mb-4 text-white">{feature.title}</h3>
            <ul className="space-y-2">
              {feature.items.map((item, itemIndex) => (
                <li key={itemIndex} className="text-sm text-white/70 flex items-start">
                  <span className="mr-2 text-white/40">•</span>
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </motion.div>
        ))}
      </div>

      {/* Security Tools Bar */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.4 }}
        className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-6"
      >
        <h3 className="text-lg font-semibold mb-4 text-white/90">
          {lang === 'de' ? 'Sicherheitstools' : 'Security Tools'}
        </h3>
        <div className="flex flex-wrap gap-3">
          {securityTools.map((tool, index) => (
            <motion.div
              key={tool.name}
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.5 + index * 0.05 }}
              className="bg-white/[0.06] border border-white/[0.08] rounded-lg px-4 py-2 flex items-center gap-2"
            >
              <tool.icon className="w-4 h-4 text-white/60" />
              <div>
                <span className="text-sm font-medium text-white">{tool.name}</span>
                <span className="text-xs text-white/50 ml-2">{tool.description}</span>
              </div>
            </motion.div>
          ))}
        </div>
      </motion.div>
    </div>
  )
}