'use client'

import { motion } from 'framer-motion'
import { Lock, RefreshCw, Network, RotateCw, Clock } from 'lucide-react'
import { Language } from '@/lib/types'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'

interface AnnexUSPMoatSlideProps {
  lang: Language
}

const moats = [
  {
    icon: Lock,
    gradient: 'from-blue-500 to-cyan-500',
    titleDE: 'Hardware Lock-In',
    titleEN: 'Hardware Lock-In',
    descDE: 'Physische Hardware beim Kunden. Wechsel bedeutet Hardware-Austausch und Datenmigration.',
    descEN: 'Physical hardware at customer site. Switching means hardware replacement and data migration.'
  },
  {
    icon: RefreshCw,
    gradient: 'from-purple-500 to-pink-500',
    titleDE: 'Switching Costs',
    titleEN: 'Switching Costs',
    descDE: 'Compliance-Dokumentation, trainierte KI-Modelle und Audit-Historie sind nicht portabel.',
    descEN: 'Compliance documentation, trained AI models and audit history are not portable.'
  },
  {
    icon: Network,
    gradient: 'from-green-500 to-emerald-500',
    titleDE: 'Network Effects',
    titleEN: 'Network Effects',
    descDE: 'Jeder Kunde verbessert die KI. Shared learnings ueber anonymisierte Compliance-Patterns.',
    descEN: 'Every customer improves the AI. Shared learnings via anonymized compliance patterns.'
  },
  {
    icon: RotateCw,
    gradient: 'from-amber-500 to-orange-500',
    titleDE: 'Data Flywheel',
    titleEN: 'Data Flywheel',
    descDE: 'Mehr Daten → bessere KI → bessere Compliance → mehr Kunden → mehr Daten.',
    descEN: 'More data → better AI → better compliance → more customers → more data.'
  },
  {
    icon: Clock,
    gradient: 'from-pink-500 to-rose-500',
    titleDE: 'Time Advantage',
    titleEN: 'Time Advantage',
    descDE: '18 Monate Vorsprung. Erster Self-Hosted Compliance-AI Anbieter im DACH-Raum.',
    descEN: '18 months head start. First self-hosted compliance AI provider in DACH region.'
  }
]

export default function AnnexUSPMoatSlide({ lang }: AnnexUSPMoatSlideProps) {
  return (
    <div className="max-w-6xl mx-auto px-4">
      <FadeInView>
        <div className="text-center mb-12">
          <h2 className="text-4xl md:text-5xl font-bold mb-4">
            <GradientText>
              {lang === 'de' ? 'Verteidigbare Marktposition' : 'Defensible Market Position'}
            </GradientText>
          </h2>
          <p className="text-xl text-white/60">
            {lang === 'de'
              ? 'Fuenf Verteidigungslinien gegen Wettbewerber'
              : 'Five lines of defense against competitors'}
          </p>
        </div>
      </FadeInView>

      <div className="space-y-6">
        {moats.map((moat, index) => {
          const Icon = moat.icon
          return (
            <motion.div
              key={index}
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: index * 0.1, duration: 0.5 }}
              className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-6 flex items-center gap-6 hover:bg-white/[0.06] transition-colors"
            >
              <div className="flex-shrink-0">
                <div className={`w-16 h-16 rounded-full bg-gradient-to-r ${moat.gradient} flex items-center justify-center relative`}>
                  <div className="absolute -top-2 -left-2 w-8 h-8 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center border border-white/20">
                    <span className="text-xs font-bold text-white">
                      {String(index + 1).padStart(2, '0')}
                    </span>
                  </div>
                  <Icon className="w-8 h-8 text-white" />
                </div>
              </div>

              <div className="flex-1">
                <h3 className="text-xl font-bold text-white mb-2">
                  {lang === 'de' ? moat.titleDE : moat.titleEN}
                </h3>
                <p className="text-white/70 leading-relaxed">
                  {lang === 'de' ? moat.descDE : moat.descEN}
                </p>
              </div>

              <div className={`w-1 h-16 rounded-full bg-gradient-to-b ${moat.gradient} flex-shrink-0`} />
            </motion.div>
          )
        })}
      </div>

      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.8, duration: 0.5 }}
        className="mt-12 text-center"
      >
        <div className="bg-gradient-to-r from-indigo-500/10 to-purple-500/10 border border-indigo-500/20 rounded-xl p-6">
          <p className="text-white/80 text-lg font-medium">
            {lang === 'de'
              ? 'Kombination aus physischen und digitalen Barriers macht Marktposition langfristig verteidigbar'
              : 'Combination of physical and digital barriers makes market position defensible long-term'}
          </p>
        </div>
      </motion.div>
    </div>
  )
}