'use client'

import { Language } from '@/lib/types'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import {
  FileCheck,
  Code,
  Zap,
  Shield,
  GitPullRequest,
  ArrowLeftRight,
} 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 outerCapabilities = [
    {
      icon: GitPullRequest,
      color: 'text-indigo-400',
      border: 'border-indigo-500/30',
      bg: 'bg-indigo-500/10',
      label: de ? 'RFQ-Prüfung' : 'RFQ Verification',
      desc: de ? 'Kunden-Dokumente gegen Code prüfen' : 'Verify customer docs against code',
      position: 'top-left',
    },
    {
      icon: ArrowLeftRight,
      color: 'text-purple-400',
      border: 'border-purple-500/30',
      bg: 'bg-purple-500/10',
      label: de ? 'Bidirektional' : 'Bidirectional',
      desc: de ? 'Code ↔ Docs synchronisiert' : 'Code ↔ Docs synchronized',
      position: 'top-right',
    },
    {
      icon: Zap,
      color: 'text-amber-400',
      border: 'border-amber-500/30',
      bg: 'bg-amber-500/10',
      label: de ? 'Prozess-Compliance' : 'Process Compliance',
      desc: de ? 'Finding → Ticket → Fix automatisch' : 'Finding → Ticket → Fix automatic',
      position: 'bottom-left',
    },
    {
      icon: Shield,
      color: 'text-emerald-400',
      border: 'border-emerald-500/30',
      bg: 'bg-emerald-500/10',
      label: de ? 'Kontinuierlich' : 'Continuous',
      desc: de ? 'Bei jeder Code-Änderung' : 'On every code change',
      position: 'bottom-right',
    },
  ]

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

      <FadeInView delay={0.2}>
        <div className="relative max-w-4xl mx-auto" style={{ height: '420px' }}>

          {/* Outer rotating ring */}
          <div className="absolute inset-0 flex items-center justify-center">
            <div
              className="w-[340px] h-[340px] rounded-full border-2 border-dashed border-indigo-500/20 animate-[spin_20s_linear_infinite]"
            />
          </div>

          {/* Inner solid ring */}
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="w-[300px] h-[300px] rounded-full border border-white/[0.08] bg-white/[0.02]" />
          </div>

          {/* Center: BreakPilot Hub */}
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="w-20 h-20 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-xl shadow-indigo-500/30 z-10">
              <div className="text-center">
                <span className="text-[10px] font-black text-white block leading-tight">Break</span>
                <span className="text-[10px] font-black text-white block leading-tight">Pilot</span>
              </div>
            </div>
          </div>

          {/* Left half: Compliance & Audits */}
          <div className="absolute left-1/2 top-1/2 -translate-x-[190px] -translate-y-1/2 w-[130px]">
            <div className="flex items-center gap-1.5 mb-2">
              <FileCheck className="w-3.5 h-3.5 text-indigo-400" />
              <span className="text-[11px] font-bold text-indigo-400">Compliance</span>
            </div>
            <ul className="space-y-1.5">
              {complianceItems.map((item, idx) => (
                <li key={idx} className="flex items-start gap-1.5 text-[10px] text-white/50 leading-tight">
                  <span className="w-1 h-1 rounded-full bg-indigo-400 mt-1 shrink-0" />
                  {item}
                </li>
              ))}
            </ul>
          </div>

          {/* Right half: Code & Security */}
          <div className="absolute left-1/2 top-1/2 translate-x-[60px] -translate-y-1/2 w-[130px]">
            <div className="flex items-center gap-1.5 mb-2">
              <Code className="w-3.5 h-3.5 text-purple-400" />
              <span className="text-[11px] font-bold text-purple-400">Code & Security</span>
            </div>
            <ul className="space-y-1.5">
              {codeItems.map((item, idx) => (
                <li key={idx} className="flex items-start gap-1.5 text-[10px] text-white/50 leading-tight">
                  <span className="w-1 h-1 rounded-full bg-purple-400 mt-1 shrink-0" />
                  {item}
                </li>
              ))}
            </ul>
          </div>

          {/* Connecting arrows inside circle */}
          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
            <div className="absolute left-1/2 top-1/2 -translate-x-[48px] -translate-y-1/2 text-indigo-400/40 text-lg">&#x25C0;</div>
            <div className="absolute left-1/2 top-1/2 translate-x-[38px] -translate-y-1/2 text-purple-400/40 text-lg">&#x25B6;</div>
            <div className="absolute left-1/2 top-1/2 -translate-x-[5px] -translate-y-[48px] text-white/20 text-lg">&#x25B2;</div>
            <div className="absolute left-1/2 top-1/2 -translate-x-[5px] translate-y-[32px] text-white/20 text-lg">&#x25BC;</div>
          </div>

          {/* Outer capability cards — 4 corners */}
          {/* Top Left */}
          <div className="absolute top-0 left-0 w-[180px]">
            <div className={`border ${outerCapabilities[0].border} ${outerCapabilities[0].bg} rounded-xl p-3`}>
              <div className="flex items-center gap-1.5 mb-1">
                <outerCapabilities[0].icon className={`w-3.5 h-3.5 ${outerCapabilities[0].color}`} />
                <span className={`text-[11px] font-bold ${outerCapabilities[0].color}`}>{outerCapabilities[0].label}</span>
              </div>
              <p className="text-[10px] text-white/40 leading-tight">{outerCapabilities[0].desc}</p>
            </div>
            {/* Connector line */}
            <div className="absolute bottom-0 right-0 w-8 h-8 border-b border-r border-white/10 rounded-br-xl translate-x-4 translate-y-4" />
          </div>

          {/* Top Right */}
          <div className="absolute top-0 right-0 w-[180px]">
            <div className={`border ${outerCapabilities[1].border} ${outerCapabilities[1].bg} rounded-xl p-3`}>
              <div className="flex items-center gap-1.5 mb-1">
                <outerCapabilities[1].icon className={`w-3.5 h-3.5 ${outerCapabilities[1].color}`} />
                <span className={`text-[11px] font-bold ${outerCapabilities[1].color}`}>{outerCapabilities[1].label}</span>
              </div>
              <p className="text-[10px] text-white/40 leading-tight">{outerCapabilities[1].desc}</p>
            </div>
          </div>

          {/* Bottom Left */}
          <div className="absolute bottom-0 left-0 w-[180px]">
            <div className={`border ${outerCapabilities[2].border} ${outerCapabilities[2].bg} rounded-xl p-3`}>
              <div className="flex items-center gap-1.5 mb-1">
                <outerCapabilities[2].icon className={`w-3.5 h-3.5 ${outerCapabilities[2].color}`} />
                <span className={`text-[11px] font-bold ${outerCapabilities[2].color}`}>{outerCapabilities[2].label}</span>
              </div>
              <p className="text-[10px] text-white/40 leading-tight">{outerCapabilities[2].desc}</p>
            </div>
          </div>

          {/* Bottom Right */}
          <div className="absolute bottom-0 right-0 w-[180px]">
            <div className={`border ${outerCapabilities[3].border} ${outerCapabilities[3].bg} rounded-xl p-3`}>
              <div className="flex items-center gap-1.5 mb-1">
                <outerCapabilities[3].icon className={`w-3.5 h-3.5 ${outerCapabilities[3].color}`} />
                <span className={`text-[11px] font-bold ${outerCapabilities[3].color}`}>{outerCapabilities[3].label}</span>
              </div>
              <p className="text-[10px] text-white/40 leading-tight">{outerCapabilities[3].desc}</p>
            </div>
          </div>

          {/* Dashed connection lines from corners to circle */}
          <svg className="absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 800 420">
            <line x1="180" y1="60" x2="310" y2="160" stroke="rgba(99,102,241,0.2)" strokeWidth="1" strokeDasharray="4 4" />
            <line x1="620" y1="60" x2="490" y2="160" stroke="rgba(168,85,247,0.2)" strokeWidth="1" strokeDasharray="4 4" />
            <line x1="180" y1="360" x2="310" y2="260" stroke="rgba(245,158,11,0.2)" strokeWidth="1" strokeDasharray="4 4" />
            <line x1="620" y1="360" x2="490" y2="260" stroke="rgba(16,185,129,0.2)" strokeWidth="1" strokeDasharray="4 4" />
          </svg>
        </div>
      </FadeInView>
    </div>
  )
}