'use client'

import { motion } from 'framer-motion'
import { Check, X, Minus } from 'lucide-react'
import { Language } from '@/lib/types'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'

interface AnnexUSPComparisonSlideProps {
  lang: Language
}

const comparisonData = [
  {
    featureDE: 'Self-Hosted',
    featureEN: 'Self-Hosted',
    breakpilot: 'yes',
    proliance: 'no',
    dataguard: 'no',
    heydata: 'no'
  },
  {
    featureDE: 'Eigene KI',
    featureEN: 'Own AI',
    breakpilot: 'yes',
    proliance: 'no',
    dataguard: 'partial',
    heydata: 'no'
  },
  {
    featureDE: 'Autonomer Support',
    featureEN: 'Autonomous Support',
    breakpilot: 'yes',
    proliance: 'no',
    dataguard: 'no',
    heydata: 'no'
  },
  {
    featureDE: 'DSGVO',
    featureEN: 'GDPR',
    breakpilot: 'yes',
    proliance: 'yes',
    dataguard: 'yes',
    heydata: 'yes'
  },
  {
    featureDE: 'AI Act',
    featureEN: 'AI Act',
    breakpilot: 'yes',
    proliance: 'no',
    dataguard: 'partial',
    heydata: 'no'
  },
  {
    featureDE: 'NIS2',
    featureEN: 'NIS2',
    breakpilot: 'yes',
    proliance: 'no',
    dataguard: 'no',
    heydata: 'no'
  },
  {
    featureDE: 'Hardware inkl.',
    featureEN: 'Hardware incl.',
    breakpilot: 'yes',
    proliance: 'no',
    dataguard: 'no',
    heydata: 'no'
  },
  {
    featureDE: 'Preis/Monat',
    featureEN: 'Price/Month',
    breakpilot: 'ab EUR 149',
    proliance: 'ab EUR 299',
    dataguard: 'ab EUR 499',
    heydata: 'ab EUR 199'
  }
]

const StatusIcon = ({ status }: { status: string }) => {
  if (status === 'yes') {
    return <Check className="w-5 h-5 text-green-500" />
  } else if (status === 'no') {
    return <X className="w-5 h-5 text-white/40" />
  } else if (status === 'partial') {
    return <Minus className="w-5 h-5 text-amber-500" />
  }
  return <span className="text-sm text-white/80">{status}</span>
}

export default function AnnexUSPComparisonSlide({ lang }: AnnexUSPComparisonSlideProps) {
  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' ? 'Detailvergleich Wettbewerb' : 'Detailed Competitor Comparison'}
            </GradientText>
          </h2>
          <p className="text-xl text-white/60">
            {lang === 'de' ? 'BreakPilot vs. etablierte Anbieter' : 'BreakPilot vs. established providers'}
          </p>
        </div>
      </FadeInView>

      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="bg-white/[0.04] border border-white/[0.06] rounded-xl overflow-hidden"
      >
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-white/[0.06]">
                <th className="text-left p-4 text-white/60 font-medium"></th>
                <th className="text-center p-4 bg-indigo-500/10 border-x border-indigo-500/20">
                  <div className="text-lg font-bold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">
                    BreakPilot
                  </div>
                </th>
                <th className="text-center p-4 text-white font-medium">Proliance</th>
                <th className="text-center p-4 text-white font-medium">DataGuard</th>
                <th className="text-center p-4 text-white font-medium">heyData</th>
              </tr>
            </thead>
            <tbody>
              {comparisonData.map((row, index) => (
                <motion.tr
                  key={index}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: index * 0.05, duration: 0.3 }}
                  className="border-b border-white/[0.06] hover:bg-white/[0.02] transition-colors"
                >
                  <td className="p-4 text-white/80 font-medium">
                    {lang === 'de' ? row.featureDE : row.featureEN}
                  </td>
                  <td className="p-4 text-center bg-indigo-500/5 border-x border-indigo-500/10">
                    <div className="flex justify-center">
                      <StatusIcon status={row.breakpilot} />
                    </div>
                  </td>
                  <td className="p-4 text-center">
                    <div className="flex justify-center">
                      <StatusIcon status={row.proliance} />
                    </div>
                  </td>
                  <td className="p-4 text-center">
                    <div className="flex justify-center">
                      <StatusIcon status={row.dataguard} />
                    </div>
                  </td>
                  <td className="p-4 text-center">
                    <div className="flex justify-center">
                      <StatusIcon status={row.heydata} />
                    </div>
                  </td>
                </motion.tr>
              ))}
            </tbody>
          </table>
        </div>
      </motion.div>

      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.6, duration: 0.5 }}
        className="mt-8 text-center"
      >
        <p className="text-sm text-white/50">
          {lang === 'de'
            ? 'Stand: Februar 2026. Preise und Features der Wettbewerber koennen variieren.'
            : 'As of: February 2026. Competitor prices and features may vary.'}
        </p>
      </motion.div>
    </div>
  )
}