breakpilot-pwa/pitch-deck/components/slides/CompetitionSlide.tsx

'use client'

import { Language, PitchFeature, PitchCompetitor } from '@/lib/types'
import { t } from '@/lib/i18n'
import { ShieldCheck, Code2, ScanLine, FileSearch, Package, Bug } from 'lucide-react'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import FeatureMatrix from '../ui/FeatureMatrix'
import GlassCard from '../ui/GlassCard'
import BrandName from '../ui/BrandName'

interface CompetitionSlideProps {
  lang: Language
  features: PitchFeature[]
  competitors: PitchCompetitor[]
}

const securityFeatures = {
  de: [
    { icon: ShieldCheck, title: 'DevSecOps Security Suite', desc: '6 integrierte Security-Tools fuer kontinuierliche Sicherheitsueberwachung' },
    { icon: ScanLine, title: 'SAST & Secrets Detection', desc: 'Automatische Code-Analyse (Semgrep) + Secrets-Scanning (Gitleaks) in der CI/CD Pipeline' },
    { icon: Bug, title: 'Container & Dependency Scanning', desc: 'Trivy + Grype scannen Container-Images und Abhaengigkeiten auf CVEs' },
    { icon: Package, title: 'SBOM-Generator (NIS2-konform)', desc: 'CycloneDX/SPDX Software Bill of Materials fuer NIS2 und ISO 27001 Compliance' },
    { icon: FileSearch, title: 'Software-Risikoanalyse', desc: 'Automatisierte Risikoklassifizierung fuer Embedded-Entwicklung und AI-Act-konforme Systeme' },
    { icon: Code2, title: 'KI-Code-Assistent (1000b)', desc: 'Das Cloud-LLM unterstuetzt Entwickler bei Code-Reviews, Security-Fixes und Compliance-Dokumentation' },
  ],
  en: [
    { icon: ShieldCheck, title: 'DevSecOps Security Suite', desc: '6 integrated security tools for continuous security monitoring' },
    { icon: ScanLine, title: 'SAST & Secrets Detection', desc: 'Automatic code analysis (Semgrep) + secrets scanning (Gitleaks) in CI/CD pipeline' },
    { icon: Bug, title: 'Container & Dependency Scanning', desc: 'Trivy + Grype scan container images and dependencies for CVEs' },
    { icon: Package, title: 'SBOM Generator (NIS2 compliant)', desc: 'CycloneDX/SPDX Software Bill of Materials for NIS2 and ISO 27001 compliance' },
    { icon: FileSearch, title: 'Software Risk Analysis', desc: 'Automated risk classification for embedded development and AI Act compliant systems' },
    { icon: Code2, title: 'AI Code Assistant (1000b)', desc: 'Cloud LLM assists developers with code reviews, security fixes and compliance documentation' },
  ],
}

export default function CompetitionSlide({ lang, features, competitors }: CompetitionSlideProps) {
  const i = t(lang)
  const coreFeatures = features.filter(f => f.category !== 'security')
  const secFeats = securityFeatures[lang]

  return (
    <div>
      <FadeInView className="text-center mb-8">
        <h2 className="text-4xl md:text-5xl font-bold mb-3">
          <GradientText>{i.competition.title}</GradientText>
        </h2>
        <p className="text-lg text-white/50 max-w-2xl mx-auto">{i.competition.subtitle}</p>
      </FadeInView>

      {/* Feature Matrix (Core Compliance) */}
      <FadeInView delay={0.3}>
        <GlassCard className="mb-6 p-4 overflow-x-auto" hover={false}>
          <FeatureMatrix features={coreFeatures} lang={lang} />
        </GlassCard>
      </FadeInView>

      {/* Security & Developer Features — nur bei ComplAI */}
      <FadeInView delay={0.5}>
        <div className="mb-6">
          <h3 className="text-sm font-semibold text-indigo-400 mb-3 flex items-center gap-2">
            <ShieldCheck className="w-4 h-4" />
            {lang === 'de' ? <>Integrierte Security &amp; Developer Tools — nur bei <BrandName /></> : <>Integrated Security &amp; Developer Tools — <BrandName /> only</>}
          </h3>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
            {secFeats.map((feat, idx) => {
              const Icon = feat.icon
              return (
                <FadeInView key={idx} delay={0.6 + idx * 0.08}>
                  <div className="bg-indigo-500/5 border border-indigo-500/10 rounded-xl p-3">
                    <div className="flex items-center gap-2 mb-1.5">
                      <Icon className="w-4 h-4 text-indigo-400 shrink-0" />
                      <span className="text-xs font-semibold text-white">{feat.title}</span>
                    </div>
                    <p className="text-[11px] text-white/40 leading-relaxed">{feat.desc}</p>
                  </div>
                </FadeInView>
              )
            })}
          </div>
        </div>
      </FadeInView>

      {/* Competitor Summary */}
      <div className="grid md:grid-cols-3 gap-4">
        {competitors.map((c, idx) => (
          <FadeInView key={c.id} delay={0.9 + idx * 0.1}>
            <div className="bg-white/[0.04] border border-white/5 rounded-xl p-4">
              <div className="flex items-center justify-between mb-2">
                <h4 className="font-medium text-white/70">{c.name}</h4>
                <span className="text-xs text-white/30">{c.customers_count.toLocaleString()} {lang === 'de' ? 'Kunden' : 'customers'}</span>
              </div>
              <p className="text-xs text-white/40 mb-2">{c.pricing_range}</p>
              <div className="flex flex-wrap gap-1">
                {(c.weaknesses || []).slice(0, 2).map((w, widx) => (
                  <span key={widx} className="text-xs px-2 py-0.5 rounded-full bg-red-500/10 text-red-400">
                    {w}
                  </span>
                ))}
              </div>
            </div>
          </FadeInView>
        ))}
      </div>
    </div>
  )
}