'use client'

import { motion } from 'framer-motion'
import { Server, Brain, Shield, Layers, Bot } from 'lucide-react'
import { Language } from '@/lib/types'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'

interface AnnexUSPOverviewSlideProps {
  lang: Language
}

const usps = [
  {
    icon: Server,
    gradient: 'from-blue-500 to-cyan-500',
    titleDE: 'Self-Hosted',
    titleEN: 'Self-Hosted',
    descDE: 'Volle Datensouveraenitaet. Kein Byte verlaesst das Unternehmen. Hardware steht im eigenen Serverraum.',
    descEN: 'Full data sovereignty. No byte leaves the company. Hardware sits in your own server room.'
  },
  {
    icon: Brain,
    gradient: 'from-purple-500 to-pink-500',
    titleDE: 'AI-First',
    titleEN: 'AI-First',
    descDE: 'Alles was durch KI loesbar ist, wird durch KI geloest. Kein klassischer Support, minimales Personal.',
    descEN: 'Everything solvable by AI is solved by AI. No traditional support, minimal personnel.'
  },
  {
    icon: Shield,
    gradient: 'from-green-500 to-emerald-500',
    titleDE: 'Hardware-Moat',
    titleEN: 'Hardware-Moat',
    descDE: 'Apple Hardware als physische Markteintrittsbarriere. Wechselkosten machen Lock-in positiv.',
    descEN: 'Apple hardware as physical market entry barrier. Switching costs create positive lock-in.'
  },
  {
    icon: Layers,
    gradient: 'from-amber-500 to-orange-500',
    titleDE: 'All-in-One',
    titleEN: 'All-in-One',
    descDE: 'DSGVO + AI Act + NIS2 in einer Loesung. Kein Tool-Dschungel, eine Plattform fuer alles.',
    descEN: 'GDPR + AI Act + NIS2 in one solution. No tool jungle, one platform for everything.'
  },
  {
    icon: Bot,
    gradient: 'from-pink-500 to-rose-500',
    titleDE: 'Autonomous Support',
    titleEN: 'Autonomous Support',
    descDE: '24/7 KI-Support beantwortet Fragen, aendert Dokumente, bereitet Audits vor. Ohne menschliches Eingreifen.',
    descEN: '24/7 AI support answers questions, modifies documents, prepares audits. Without human intervention.'
  }
]

export default function AnnexUSPOverviewSlide({ lang }: AnnexUSPOverviewSlideProps) {
  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' ? 'Unsere 5 USPs' : 'Our 5 USPs'}
            </GradientText>
          </h2>
          <p className="text-xl text-white/60">
            {lang === 'de' ? 'Was uns einzigartig macht' : 'What makes us unique'}
          </p>
        </div>
      </FadeInView>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        {usps.slice(0, 3).map((usp, index) => {
          const Icon = usp.icon
          return (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1, duration: 0.5 }}
              className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-4 relative overflow-hidden"
            >
              <div className={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${usp.gradient}`} />
              <div className="flex flex-col items-center text-center pt-2">
                <div className={`w-16 h-16 rounded-full bg-gradient-to-r ${usp.gradient} flex items-center justify-center mb-4`}>
                  <Icon className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-xl font-bold text-white mb-3">
                  {lang === 'de' ? usp.titleDE : usp.titleEN}
                </h3>
                <p className="text-sm text-white/70 leading-relaxed">
                  {lang === 'de' ? usp.descDE : usp.descEN}
                </p>
              </div>
            </motion.div>
          )
        })}
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
        {usps.slice(3, 5).map((usp, index) => {
          const Icon = usp.icon
          return (
            <motion.div
              key={index + 3}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: (index + 3) * 0.1, duration: 0.5 }}
              className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-4 relative overflow-hidden"
            >
              <div className={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${usp.gradient}`} />
              <div className="flex flex-col items-center text-center pt-2">
                <div className={`w-16 h-16 rounded-full bg-gradient-to-r ${usp.gradient} flex items-center justify-center mb-4`}>
                  <Icon className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-xl font-bold text-white mb-3">
                  {lang === 'de' ? usp.titleDE : usp.titleEN}
                </h3>
                <p className="text-sm text-white/70 leading-relaxed">
                  {lang === 'de' ? usp.descDE : usp.descEN}
                </p>
              </div>
            </motion.div>
          )
        })}
      </div>
    </div>
  )
}