'use client'

import { Language } from '@/lib/types'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import GlassCard from '../ui/GlassCard'
import {
  FileCheck,
  Code,
  Zap,
  Shield,
  GitPullRequest,
  ArrowLeftRight,
  ArrowRight,
  ArrowDown,
  RotateCw,
} from 'lucide-react'

interface USPSlideProps {
  lang: Language
}

export default function USPSlide({ lang }: USPSlideProps) {
  const de = lang === 'de'

  const title = 'USP'
  const subtitle = de
    ? 'Die erste Plattform, die Compliance-Dokumente und tatsächliche Code-Umsetzung verbindet'
    : 'The first platform that connects compliance documents with actual code implementation'

  const complianceItems = de
    ? ['DSGVO-Dokumente (VVT, DSFA, TOMs)', 'Audit-Management & Nachweise', 'Kunden-Anforderungen (RFQ)', 'CE-Risikobeurteilungen']
    : ['GDPR documents (RoPA, DPIA, TOMs)', 'Audit management & evidence', 'Customer requirements (RFQ)', 'CE risk assessments']

  const codeItems = de
    ? ['SAST / DAST / SBOM-Analyse', 'Kontinuierliches Pentesting', 'Issue-Tracker-Integration', 'Automatische Code-Änderungen']
    : ['SAST / DAST / SBOM analysis', 'Continuous pentesting', 'Issue tracker integration', 'Automatic code changes']

  const capabilities = [
    {
      icon: GitPullRequest,
      color: 'text-indigo-400',
      border: 'border-indigo-500/20',
      bg: 'bg-indigo-500/10',
      label: de ? 'RFQ-Prüfung' : 'RFQ Verification',
      desc: de ? 'Kunden-Dokumente automatisch gegen Code prüfen' : 'Verify customer docs against code automatically',
    },
    {
      icon: ArrowLeftRight,
      color: 'text-purple-400',
      border: 'border-purple-500/20',
      bg: 'bg-purple-500/10',
      label: de ? 'Bidirektional' : 'Bidirectional',
      desc: de ? 'Code ↔ Compliance-Docs immer synchron' : 'Code ↔ Compliance docs always in sync',
    },
    {
      icon: Zap,
      color: 'text-amber-400',
      border: 'border-amber-500/20',
      bg: 'bg-amber-500/10',
      label: de ? 'Prozess-Compliance' : 'Process Compliance',
      desc: de ? 'Finding → Ticket → Fix vollautomatisch' : 'Finding → Ticket → Fix fully automatic',
    },
    {
      icon: Shield,
      color: 'text-emerald-400',
      border: 'border-emerald-500/20',
      bg: 'bg-emerald-500/10',
      label: de ? 'Kontinuierlich' : 'Continuous',
      desc: de ? 'Bei jeder Code-Änderung, nicht jährlich' : 'On every code change, not annually',
    },
  ]

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

      {/* Main bridge: Compliance ← BreakPilot → Code */}
      <FadeInView delay={0.2}>
        <div className="grid grid-cols-11 gap-2 items-center max-w-5xl mx-auto mb-6">
          {/* Left: Compliance */}
          <div className="col-span-4">
            <GlassCard hover={false} className="p-4 h-full">
              <div className="flex items-center gap-2 mb-3">
                <div className="w-7 h-7 rounded-lg bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center">
                  <FileCheck className="w-3.5 h-3.5 text-indigo-400" />
                </div>
                <span className="text-sm font-bold text-indigo-400">Compliance & Audits</span>
              </div>
              <ul className="space-y-2">
                {complianceItems.map((item, idx) => (
                  <li key={idx} className="flex items-start gap-2 text-xs text-white/60">
                    <span className="w-1.5 h-1.5 rounded-full bg-indigo-400 mt-1 shrink-0" />
                    {item}
                  </li>
                ))}
              </ul>
            </GlassCard>
          </div>

          {/* Center: BreakPilot Hub */}
          <div className="col-span-3 flex flex-col items-center justify-center py-4">
            {/* Arrow left */}
            <div className="flex items-center gap-2 mb-3">
              <ArrowRight className="w-4 h-4 text-indigo-400/40 rotate-180" />
              <span className="text-[9px] text-white/20 uppercase tracking-wider">{de ? 'synchron' : 'sync'}</span>
              <ArrowRight className="w-4 h-4 text-purple-400/40" />
            </div>

            {/* Spinning ring + hub */}
            <div className="relative w-28 h-28">
              <div className="absolute inset-0 rounded-full border-2 border-dashed border-indigo-500/20 animate-[spin_15s_linear_infinite]" />
              <div className="absolute inset-2 rounded-full border border-white/[0.06]" />
              <div className="absolute inset-4 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-xl shadow-indigo-500/30">
                <div className="text-center">
                  <span className="text-xs font-black text-white block leading-tight">Break</span>
                  <span className="text-xs font-black text-white block leading-tight">Pilot</span>
                </div>
              </div>
            </div>

            {/* Cycle indicator */}
            <div className="flex items-center gap-1.5 mt-3">
              <RotateCw className="w-3 h-3 text-white/20" />
              <span className="text-[9px] text-white/20 uppercase tracking-wider">{de ? 'Kreislauf' : 'Loop'}</span>
            </div>
          </div>

          {/* Right: Code & Security */}
          <div className="col-span-4">
            <GlassCard hover={false} className="p-4 h-full">
              <div className="flex items-center gap-2 mb-3">
                <div className="w-7 h-7 rounded-lg bg-purple-500/10 border border-purple-500/20 flex items-center justify-center">
                  <Code className="w-3.5 h-3.5 text-purple-400" />
                </div>
                <span className="text-sm font-bold text-purple-400">Code & Security</span>
              </div>
              <ul className="space-y-2">
                {codeItems.map((item, idx) => (
                  <li key={idx} className="flex items-start gap-2 text-xs text-white/60">
                    <span className="w-1.5 h-1.5 rounded-full bg-purple-400 mt-1 shrink-0" />
                    {item}
                  </li>
                ))}
              </ul>
            </GlassCard>
          </div>
        </div>
      </FadeInView>

      {/* Arrow down */}
      <FadeInView delay={0.3} className="flex justify-center mb-4">
        <ArrowDown className="w-5 h-5 text-white/15" />
      </FadeInView>

      {/* Bottom: 4 capability cards */}
      <FadeInView delay={0.4}>
        <div className="grid grid-cols-4 gap-3 max-w-5xl mx-auto">
          {capabilities.map((cap, idx) => {
            const Icon = cap.icon
            return (
              <div key={idx} className={`border ${cap.border} ${cap.bg} rounded-xl p-3`}>
                <div className="flex items-center gap-1.5 mb-1.5">
                  <Icon className={`w-4 h-4 ${cap.color}`} />
                  <span className={`text-xs font-bold ${cap.color}`}>{cap.label}</span>
                </div>
                <p className="text-[11px] text-white/45 leading-relaxed">{cap.desc}</p>
              </div>
            )
          })}
        </div>
      </FadeInView>
    </div>
  )
}