'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 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', 'Audit-Management', 'RFQ-Anforderungen', 'CE-Bewertungen']
    : ['GDPR documents', 'Audit management', 'RFQ requirements', 'CE assessments']

  const codeItems = de
    ? ['SAST / DAST / SBOM', 'Pentesting', 'Issue-Tracker', 'Auto-Fixes']
    : ['SAST / DAST / SBOM', 'Pentesting', 'Issue tracker', 'Auto-fixes']

  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-Anforderungsdokumente werden automatisiert gegen die aktuelle Source-Code-Umsetzung geprüft. Abweichungen werden erkannt, Änderungen vorgeschlagen und auf Wunsch direkt im Code umgesetzt — ohne manuelles Nacharbeiten.'
        : 'Customer requirement documents are automatically verified against current source code. Deviations are detected, changes proposed and implemented directly in code on request — no manual rework needed.',
    },
    {
      icon: ArrowLeftRight,
      color: 'text-purple-400',
      border: 'border-purple-500/20',
      bg: 'bg-purple-500/10',
      label: de ? 'Bidirektional' : 'Bidirectional',
      desc: de
        ? 'Compliance-Anforderungen fliessen direkt in den Code. Umgekehrt aktualisieren Code-Änderungen automatisch die Compliance-Dokumentation. Beide Seiten sind immer synchron — kein Informationsverlust zwischen Audit und Entwicklung.'
        : 'Compliance requirements flow directly into code. Conversely, code changes automatically update compliance documentation. Both sides always stay in sync — no information loss between audit and development.',
    },
    {
      icon: Zap,
      color: 'text-amber-400',
      border: 'border-amber-500/20',
      bg: 'bg-amber-500/10',
      label: de ? 'Prozess-Compliance' : 'Process Compliance',
      desc: de
        ? 'Vom Audit-Finding über das Ticket bis zur Code-Änderung läuft der gesamte Prozess automatisiert durch. Rollen, Fristen und Eskalation werden End-to-End verwaltet. Nachweise werden automatisch generiert und archiviert.'
        : 'From audit finding to ticket to code change, the entire process runs automatically. Roles, deadlines and escalation are managed end-to-end. Evidence is automatically generated and archived.',
    },
    {
      icon: Shield,
      color: 'text-emerald-400',
      border: 'border-emerald-500/20',
      bg: 'bg-emerald-500/10',
      label: de ? 'Kontinuierlich' : 'Continuous',
      desc: de
        ? 'Klassische Compliance prüft einmal im Jahr und hofft auf das Beste. Unsere Plattform prüft bei jeder Code-Änderung. Findings werden sofort zu Tickets mit konkreten Implementierungsvorschlägen im Issue-Tracker der Wahl.'
        : 'Traditional compliance checks once a year and hopes for the best. Our platform checks on every code change. Findings immediately become tickets with concrete implementation proposals in the issue tracker of choice.',
    },
  ]

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

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

          {/* ===== CENTER: Large circle ===== */}
          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" style={{ width: '380px', height: '380px' }}>

            {/* Outer spinning dashed ring */}
            <div className="absolute inset-0 rounded-full border-2 border-dashed border-indigo-500/20 animate-[spin_20s_linear_infinite]" />

            {/* Inner ring */}
            <div className="absolute inset-4 rounded-full border border-white/[0.06] bg-white/[0.015]" />

            {/* Center hub: Infinity symbol */}
            <div className="absolute inset-0 flex items-center justify-center z-10">
              <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">
                <span className="text-3xl font-black text-white">&#x221E;</span>
              </div>
            </div>

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

            {/* Right half: Code */}
            <div className="absolute right-8 top-1/2 -translate-y-1/2 w-[120px] z-10">
              <div className="flex items-center gap-1.5 mb-2">
                <Code className="w-4 h-4 text-purple-400" />
                <span className="text-xs 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-center gap-1.5 text-[11px] text-white/50">
                    <span className="w-1.5 h-1.5 rounded-full bg-purple-400 shrink-0" />
                    {item}
                  </li>
                ))}
              </ul>
            </div>

            {/* 4 directional arrows */}
            <div className="absolute top-[12%] left-[12%] text-indigo-400/60 text-lg z-20">&#x25C0;</div>
            <div className="absolute top-[12%] right-[12%] text-purple-400/60 text-lg z-20">&#x25B6;</div>
            <div className="absolute bottom-[12%] left-[12%] text-amber-400/60 text-lg z-20">&#x25C0;</div>
            <div className="absolute bottom-[12%] right-[12%] text-emerald-400/60 text-lg z-20">&#x25B6;</div>
          </div>

          {/* ===== CARDS: 4 corners, spread out ===== */}

          {/* Top Left */}
          <div className="absolute top-0 left-0 w-[220px]">
            {(() => { const Icon = capabilities[0].icon; const cap = capabilities[0]; return (
              <div className={`border ${cap.border} ${cap.bg} rounded-xl p-4`}>
                <div className="flex items-center gap-2 mb-2">
                  <Icon className={`w-5 h-5 ${cap.color}`} />
                  <span className={`text-sm font-bold ${cap.color}`}>{cap.label}</span>
                </div>
                <p className="text-xs text-white/50 leading-relaxed">{cap.desc}</p>
              </div>
            )})()}
          </div>

          {/* Top Right */}
          <div className="absolute top-0 right-0 w-[220px]">
            {(() => { const Icon = capabilities[1].icon; const cap = capabilities[1]; return (
              <div className={`border ${cap.border} ${cap.bg} rounded-xl p-4`}>
                <div className="flex items-center gap-2 mb-2">
                  <Icon className={`w-5 h-5 ${cap.color}`} />
                  <span className={`text-sm font-bold ${cap.color}`}>{cap.label}</span>
                </div>
                <p className="text-xs text-white/50 leading-relaxed">{cap.desc}</p>
              </div>
            )})()}
          </div>

          {/* Bottom Left */}
          <div className="absolute bottom-0 left-0 w-[220px]">
            {(() => { const Icon = capabilities[2].icon; const cap = capabilities[2]; return (
              <div className={`border ${cap.border} ${cap.bg} rounded-xl p-4`}>
                <div className="flex items-center gap-2 mb-2">
                  <Icon className={`w-5 h-5 ${cap.color}`} />
                  <span className={`text-sm font-bold ${cap.color}`}>{cap.label}</span>
                </div>
                <p className="text-xs text-white/50 leading-relaxed">{cap.desc}</p>
              </div>
            )})()}
          </div>

          {/* Bottom Right */}
          <div className="absolute bottom-0 right-0 w-[220px]">
            {(() => { const Icon = capabilities[3].icon; const cap = capabilities[3]; return (
              <div className={`border ${cap.border} ${cap.bg} rounded-xl p-4`}>
                <div className="flex items-center gap-2 mb-2">
                  <Icon className={`w-5 h-5 ${cap.color}`} />
                  <span className={`text-sm font-bold ${cap.color}`}>{cap.label}</span>
                </div>
                <p className="text-xs text-white/50 leading-relaxed">{cap.desc}</p>
              </div>
            )})()}
          </div>

          {/* Dashed connection lines from circle to cards */}
          <svg className="absolute inset-0 w-full h-full pointer-events-none z-0" preserveAspectRatio="none" viewBox="0 0 100 100">
            <line x1="32" y1="28" x2="22" y2="18" stroke="rgba(99,102,241,0.15)" strokeWidth="0.3" strokeDasharray="1 1" />
            <line x1="68" y1="28" x2="78" y2="18" stroke="rgba(168,85,247,0.15)" strokeWidth="0.3" strokeDasharray="1 1" />
            <line x1="32" y1="72" x2="22" y2="82" stroke="rgba(245,158,11,0.15)" strokeWidth="0.3" strokeDasharray="1 1" />
            <line x1="68" y1="72" x2="78" y2="82" stroke="rgba(16,185,129,0.15)" strokeWidth="0.3" strokeDasharray="1 1" />
          </svg>
        </div>
      </FadeInView>
    </div>
  )
}