'use client'

import { Language, PitchProduct } from '@/lib/types'
import { t } from '@/lib/i18n'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import GlassCard from '../ui/GlassCard'
import {
  ScanLine, Shield, FileText, ClipboardCheck, GraduationCap,
  Brain, CheckCircle2, Puzzle, Cloud, HardDrive, Users, UserCheck, AlertTriangle
} from 'lucide-react'

interface ProductSlideProps {
  lang: Language
  products?: unknown[]
}

const MODULES = [
  { icon: ScanLine, color: '#ef4444', de: 'Code Security', en: 'Code Security', descDe: 'SAST, DAST, SBOM, kontinuierliches Pentesting', descEn: 'SAST, DAST, SBOM, continuous pentesting' },
  { icon: Shield, color: '#f97316', de: 'CE-Software-Risikobeurteilung', en: 'CE Software Risk Assessment', descDe: 'Software-Risikoanalyse für CE-Kennzeichnung', descEn: 'Software risk assessment for CE marking' },
  { icon: FileText, color: '#6366f1', de: 'Compliance-Dokumente', en: 'Compliance Documents', descDe: 'VVT, DSFA, TOMs, Löschfristen, Pflichten', descEn: 'RoPA, DPIA, TOMs, retention, obligations' },
  { icon: ClipboardCheck, color: '#10b981', de: 'Audit Manager', en: 'Audit Manager', descDe: 'Abweichungen, Nachweise, Stichtage, Eskalation', descEn: 'Deviations, evidence, deadlines, escalation' },
  { icon: Users, color: '#06b6d4', de: 'DSR / Betroffenenrechte', en: 'DSR / Data Subject Rights', descDe: 'Auskunft, Löschung, Berichtigung, Portabilität', descEn: 'Access, erasure, rectification, portability' },
  { icon: UserCheck, color: '#14b8a6', de: 'Consent Management', en: 'Consent Management', descDe: 'Einwilligungen, Cookie-Banner, Widerruf', descEn: 'Consent, cookie banner, withdrawal' },
  { icon: AlertTriangle, color: '#f59e0b', de: 'Notfallpläne', en: 'Incident Response', descDe: 'Datenschutzvorfälle, Meldepflichten, Eskalation', descEn: 'Data breaches, reporting obligations, escalation' },
  { icon: Brain, color: '#a855f7', de: 'Compliance LLM', en: 'Compliance LLM', descDe: 'GPT für Text und Audio — sicher in der EU', descEn: 'GPT for text and audio — securely in EU' },
  { icon: Shield, color: '#8b5cf6', de: 'Tender Matching', en: 'Tender Matching', descDe: 'Kundenanfragen (RFQ) gegen Codebase prüfen', descEn: 'Verify customer RFQs against codebase' },
  { icon: GraduationCap, color: '#ec4899', de: 'Academy', en: 'Academy', descDe: 'Online-Schulungen für GF und Mitarbeiter', descEn: 'Online training for management and employees' },
  { icon: Puzzle, color: '#0ea5e9', de: 'Compliance Optimizer', en: 'Compliance Optimizer', descDe: 'Maximale KI-Nutzung im regulatorischen Rahmen', descEn: 'Maximum AI usage within regulatory limits' },
  { icon: CheckCircle2, color: '#22c55e', de: 'Sichere Kommunikation', en: 'Secure Communication', descDe: 'Chat + Video mit AI Notetaker', descEn: 'Chat + video with AI notetaker' },
]

const PRICING_TIERS = [
  { employees: 'Startup / < 10', priceDe: 'ab 3.600 EUR/Jahr', priceEn: 'from EUR 3,600/yr', highlight: false, noteDe: '14 Tage Test (Kreditkarte)', noteEn: '14-day trial (credit card)' },
  { employees: '10 – 50', priceDe: 'ab 15.000 EUR/Jahr', priceEn: 'from EUR 15,000/yr', highlight: false },
  { employees: '50 – 250', priceDe: 'ab 30.000 EUR/Jahr', priceEn: 'from EUR 30,000/yr', highlight: false },
  { employees: '250+', priceDe: 'ab 40.000 EUR/Jahr', priceEn: 'from EUR 40,000/yr', highlight: true },
]

export default function ProductSlide({ lang }: ProductSlideProps) {
  const i = t(lang)
  const de = lang === 'de'

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

      {/* Module Grid */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
        {MODULES.map((mod, idx) => {
          const Icon = mod.icon
          return (
            <GlassCard key={idx} delay={0.1 + idx * 0.05} 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">{de ? mod.de : mod.en}</p>
              <p className="text-xs text-white/40 leading-tight">{de ? mod.descDe : mod.descEn}</p>
            </GlassCard>
          )
        })}
      </div>

      {/* Deployment Options — 2 cards side by side */}
      <div className="grid md:grid-cols-2 gap-4">
        <FadeInView delay={0.6}>
          <GlassCard hover={false} className="p-4 h-full border-t-2 border-t-blue-500">
            <div className="flex items-center gap-2 mb-2">
              <Cloud className="w-5 h-5 text-blue-400" />
              <h3 className="text-sm font-bold text-blue-400">{i.product.cloud}</h3>
            </div>
            <p className="text-sm text-white/50 leading-relaxed mb-3">{i.product.cloudDesc}</p>
            <div className="flex gap-2">
              <span className="text-xs bg-blue-500/15 text-blue-300 px-2 py-0.5 rounded-full">BSI DE</span>
              <span className="text-xs bg-blue-500/15 text-blue-300 px-2 py-0.5 rounded-full">{de ? 'Fix oder flexibel' : 'Fixed or flexible'}</span>
            </div>
          </GlassCard>
        </FadeInView>

        <FadeInView delay={0.7}>
          <GlassCard hover={false} className="p-4 h-full border-t-2 border-t-emerald-500">
            <div className="flex items-center gap-2 mb-2">
              <HardDrive className="w-5 h-5 text-emerald-400" />
              <h3 className="text-sm font-bold text-emerald-400">{i.product.privacy}</h3>
            </div>
            <p className="text-sm text-white/50 leading-relaxed mb-3">{i.product.privacyDesc}</p>
            <div className="flex gap-2">
              <span className="text-xs bg-emerald-500/15 text-emerald-300 px-2 py-0.5 rounded-full">{de ? 'Geplant, optional' : 'Planned, optional'}</span>
            </div>
          </GlassCard>
        </FadeInView>
      </div>
    </div>
  )
}
