breakpilot-core/pitch-deck/components/slides/USPSlide.tsx

'use client'

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

interface USPSlideProps {
  lang: Language
}

type BridgeVariant = 'A' | 'B' | 'C'

export default function USPSlide({ lang }: USPSlideProps) {
  const de = lang === 'de'
  const [bridgeVariant, setBridgeVariant] = useState<BridgeVariant>('A')

  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 bridgeLeft = {
    icon: FileCheck,
    label: de ? 'Compliance & Audits' : 'Compliance & Audits',
    items: 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 bridgeRight = {
    icon: Code,
    label: de ? 'Code & Security' : 'Code & Security',
    items: de
      ? ['SAST / DAST / SBOM-Analyse', 'Kontinuierliches Pentesting', 'Issue-Tracker-Integration', 'Automatische Code-Aenderungen']
      : ['SAST / DAST / SBOM analysis', 'Continuous pentesting', 'Issue tracker integration', 'Automatic code changes'],
  }

  const capabilities = [
    {
      icon: GitPullRequest,
      color: 'text-indigo-400',
      bg: 'bg-indigo-500/10 border-indigo-500/20',
      title: de ? 'RFQ-gegen-Code Prüfung' : 'RFQ-to-Code Verification',
      desc: de
        ? 'Kunden-Anforderungsdokumente werden automatisiert gegen die aktuelle Source-Code-Umsetzung geprüft. Abweichungen werden erkannt, Änderungen vorgeschlagen und auf Wunsch automatisiert umgesetzt.'
        : 'Customer requirement documents are automatically verified against current source code implementation. Deviations are detected, changes proposed and automatically implemented on request.',
    },
    {
      icon: ArrowLeftRight,
      color: 'text-purple-400',
      bg: 'bg-purple-500/10 border-purple-500/20',
      title: de ? 'Bidirektionale Synchronisation' : 'Bidirectional Synchronization',
      desc: de
        ? 'Compliance-Anforderungen fliessen direkt in den Code — und Code-Aenderungen aktualisieren automatisch die Compliance-Dokumentation. Kein manuelles Nacharbeiten.'
        : 'Compliance requirements flow directly into code — and code changes automatically update compliance documentation. No manual rework.',
    },
    {
      icon: Zap,
      color: 'text-amber-400',
      bg: 'bg-amber-500/10 border-amber-500/20',
      title: de ? 'Automatisierte Prozess-Compliance' : 'Automated Process Compliance',
      desc: de
        ? 'Vom Audit-Finding über das Ticket bis zur Code-Aenderung — der gesamte Prozess laeuft automatisiert durch. Rollen, Fristen, Eskalation und Nachweise werden End-to-End verwaltet.'
        : 'From audit finding to ticket to code change — the entire process runs automatically. Roles, deadlines, escalation and evidence are managed end-to-end.',
    },
    {
      icon: Shield,
      color: 'text-emerald-400',
      bg: 'bg-emerald-500/10 border-emerald-500/20',
      title: de ? 'Kontinuierlich statt jährlich' : 'Continuous Instead of Annual',
      desc: de
        ? 'Klassische Compliance prüft einmal im Jahr und hofft auf das Beste. Unsere Plattform prüft bei jeder Code-Aenderung — Findings werden sofort zu Tickets mit konkreten Implementierungsvorschlaegen.'
        : '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.',
    },
  ]

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

      {/* Bridge Visualization */}
      <FadeInView delay={0.2}>
        <div className="grid grid-cols-5 gap-3 items-center mb-8 max-w-4xl mx-auto">
          {/* Left: Compliance */}
          <div className="col-span-2">
            <GlassCard hover={false} className="p-4">
              <div className="flex items-center gap-2 mb-3">
                <div className="w-8 h-8 rounded-lg bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center">
                  <bridgeLeft.icon className="w-4 h-4 text-indigo-400" />
                </div>
                <p className="text-sm font-bold text-white">{bridgeLeft.label}</p>
              </div>
              <ul className="space-y-1.5">
                {bridgeLeft.items.map((item, idx) => (
                  <li key={idx} className="flex items-center gap-2 text-xs text-white/50">
                    <span className="w-1.5 h-1.5 rounded-full bg-indigo-400 shrink-0" />
                    {item}
                  </li>
                ))}
              </ul>
            </GlassCard>
          </div>

          {/* Center: Bridge — 3 variants to choose from */}
          <div className="col-span-1 flex flex-col items-center justify-center">
            {bridgeVariant === 'A' && (
              /* Variant A: Circular Loop with BreakPilot in center */
              <div className="relative w-24 h-24">
                {/* Rotating ring */}
                <div className="absolute inset-0 rounded-full border-2 border-dashed border-indigo-500/30 animate-[spin_12s_linear_infinite]" />
                {/* Arrows on ring */}
                <div className="absolute -top-1 left-1/2 -translate-x-1/2 text-indigo-400 text-xs">&#x25B2;</div>
                <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 text-purple-400 text-xs">&#x25BC;</div>
                <div className="absolute top-1/2 -left-1 -translate-y-1/2 text-indigo-400 text-xs">&#x25C0;</div>
                <div className="absolute top-1/2 -right-1 -translate-y-1/2 text-purple-400 text-xs">&#x25B6;</div>
                {/* Center hub */}
                <div className="absolute inset-3 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-500/30">
                  <span className="text-[9px] font-black text-white leading-tight text-center">Break<br/>Pilot</span>
                </div>
              </div>
            )}
            {bridgeVariant === 'B' && (
              /* Variant B: Infinity Loop */
              <div className="relative w-28 h-16 flex items-center justify-center">
                <svg viewBox="0 0 120 50" className="w-full h-full">
                  <path d="M60,25 C60,10 40,0 25,10 C10,20 10,30 25,40 C40,50 60,40 60,25 C60,10 80,0 95,10 C110,20 110,30 95,40 C80,50 60,40 60,25" fill="none" stroke="url(#inf-grad)" strokeWidth="2" strokeDasharray="4 2" className="animate-[dash_3s_linear_infinite]" />
                  <defs>
                    <linearGradient id="inf-grad" x1="0%" y1="0%" x2="100%" y2="0%">
                      <stop offset="0%" stopColor="#6366f1" />
                      <stop offset="100%" stopColor="#a855f7" />
                    </linearGradient>
                  </defs>
                  <circle cx="60" cy="25" r="14" fill="url(#inf-grad)" />
                  <text x="60" y="23" textAnchor="middle" fill="white" fontSize="6" fontWeight="bold">Break</text>
                  <text x="60" y="30" textAnchor="middle" fill="white" fontSize="6" fontWeight="bold">Pilot</text>
                </svg>
              </div>
            )}
            {bridgeVariant === 'C' && (
              /* Variant C: Hexagonal Hub with arrows */
              <div className="relative">
                <div className="w-20 h-20 bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-500/30" style={{ clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)' }}>
                  <div className="text-center">
                    <span className="text-[8px] font-black text-white block leading-tight">Break</span>
                    <span className="text-[8px] font-black text-white block leading-tight">Pilot</span>
                    <span className="text-[6px] text-white/60 block mt-0.5">COMPLAI</span>
                  </div>
                </div>
                {/* Left arrow */}
                <div className="absolute top-1/2 -left-3 -translate-y-1/2 text-indigo-400">&#x25C0;</div>
                {/* Right arrow */}
                <div className="absolute top-1/2 -right-3 -translate-y-1/2 text-purple-400">&#x25B6;</div>
              </div>
            )}
            {/* Variant toggle — small buttons below */}
            <div className="flex gap-1 mt-2">
              {(['A', 'B', 'C'] as BridgeVariant[]).map(v => (
                <button
                  key={v}
                  onClick={() => setBridgeVariant(v)}
                  className={`w-5 h-5 rounded text-[9px] font-bold transition-all ${bridgeVariant === v ? 'bg-indigo-500 text-white' : 'bg-white/10 text-white/30 hover:text-white/60'}`}
                >
                  {v}
                </button>
              ))}
            </div>
          </div>

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

      {/* Capability Cards */}
      <FadeInView delay={0.4}>
        <div className="grid md:grid-cols-2 gap-3 max-w-4xl mx-auto">
          {capabilities.map((cap, idx) => {
            const Icon = cap.icon
            return (
              <div key={idx} className={`border rounded-xl p-4 ${cap.bg}`}>
                <div className="flex items-center gap-2 mb-2">
                  <Icon className={`w-4 h-4 ${cap.color}`} />
                  <h3 className="text-sm font-bold text-white">{cap.title}</h3>
                </div>
                <p className="text-xs text-white/50 leading-relaxed">{cap.desc}</p>
              </div>
            )
          })}
        </div>
      </FadeInView>
    </div>
  )
}