'use client'

import { motion } from 'framer-motion'
import { Language } from '@/lib/types'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import { Brain, Cpu, Zap, ArrowRight } from 'lucide-react'

interface AnnexAIStackSlideProps {
  lang: Language
}

export default function AnnexAIStackSlide({ lang }: AnnexAIStackSlideProps) {
  const roadmapSteps = [
    {
      year: '2026',
      model: 'Qwen 32B',
      label: lang === 'de' ? 'Foundation' : 'Foundation',
    },
    {
      year: '2027',
      model: 'Multi-Model 70B',
      label: lang === 'de' ? 'Skalierung' : 'Scaling',
    },
    {
      year: '2028',
      model: 'Fine-Tuned 100B+',
      label: 'Enterprise',
    },
    {
      year: '2030',
      model: '1000B Agent Network',
      label: lang === 'de' ? 'Volle Autonomie' : 'Full Autonomy',
    },
  ]

  return (
    <div className="h-screen w-full flex items-center justify-center bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-white p-8">
      <div className="max-w-6xl mx-auto px-4">
        <FadeInView>
          <div className="text-center mb-16">
            <h2 className="text-5xl font-bold mb-4">
              <GradientText>
                {lang === 'de' ? 'KI-Stack & LLM-Architektur' : 'AI Stack & LLM Architecture'}
              </GradientText>
            </h2>
            <p className="text-xl text-slate-400">
              {lang === 'de' ? 'Von 32B zu 1000B Parametern' : 'From 32B to 1000B parameters'}
            </p>
          </div>
        </FadeInView>

        {/* LLM Evolution Roadmap */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2, duration: 0.6 }}
          className="mb-12"
        >
          <div className="flex items-center justify-between gap-2 mb-12">
            {roadmapSteps.map((step, index) => (
              <div key={step.year} className="flex items-center flex-1">
                <motion.div
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ delay: 0.3 + index * 0.1, duration: 0.5 }}
                  className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-4 flex-1"
                >
                  <div className="text-sm text-blue-400 font-semibold mb-1">{step.year}</div>
                  <div className="text-base font-bold mb-1">{step.model}</div>
                  <div className="text-xs text-slate-400">{step.label}</div>
                </motion.div>

                {index < roadmapSteps.length - 1 && (
                  <motion.div
                    initial={{ opacity: 0, x: -10 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 0.4 + index * 0.1, duration: 0.5 }}
                    className="mx-2"
                  >
                    <ArrowRight className="w-5 h-5 text-blue-400" />
                  </motion.div>
                )}
              </div>
            ))}
          </div>
        </motion.div>

        {/* Bottom Section: 2-column grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Left Card - Multi-Model Router */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: 0.6, duration: 0.6 }}
            className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-6"
          >
            <div className="flex items-center gap-3 mb-4">
              <div className="bg-blue-500/20 p-3 rounded-lg">
                <Brain className="w-6 h-6 text-blue-400" />
              </div>
              <h3 className="text-xl font-bold">
                {lang === 'de' ? 'Multi-Model Router' : 'Multi-Model Router'}
              </h3>
            </div>
            <ul className="space-y-3 text-slate-300">
              <li className="flex items-start gap-2">
                <span className="text-blue-400 mt-1">•</span>
                <span>
                  {lang === 'de'
                    ? 'Automatische Modellauswahl basierend auf Aufgabe'
                    : 'Automatic model selection based on task'}
                </span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-blue-400 mt-1">•</span>
                <span>
                  {lang === 'de'
                    ? 'Einfache Anfragen → kleineres Modell (schnell, günstig)'
                    : 'Simple queries → smaller model (fast, cheap)'}
                </span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-blue-400 mt-1">•</span>
                <span>
                  {lang === 'de'
                    ? 'Komplexe Analysen → größeres Modell (präzise)'
                    : 'Complex analysis → larger model (accurate)'}
                </span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-green-400 mt-1">•</span>
                <span className="font-semibold text-green-400">
                  {lang === 'de'
                    ? 'Kostenoptimierung: 60% günstiger als immer großes Modell'
                    : 'Cost optimization: 60% cheaper than always using large model'}
                </span>
              </li>
            </ul>
          </motion.div>

          {/* Right Card - Inference Optimization */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: 0.7, duration: 0.6 }}
            className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-6"
          >
            <div className="flex items-center gap-3 mb-4">
              <div className="bg-purple-500/20 p-3 rounded-lg">
                <Zap className="w-6 h-6 text-purple-400" />
              </div>
              <h3 className="text-xl font-bold">
                {lang === 'de' ? 'Inference-Optimierung' : 'Inference Optimization'}
              </h3>
            </div>
            <ul className="space-y-3 text-slate-300">
              <li className="flex items-start gap-2">
                <span className="text-purple-400 mt-1">•</span>
                <span>
                  {lang === 'de'
                    ? 'Apple Neural Engine Beschleunigung'
                    : 'Apple Neural Engine acceleration'}
                </span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-purple-400 mt-1">•</span>
                <span>
                  {lang === 'de'
                    ? 'Quantisierung (INT4/INT8) für schnellere Inferenz'
                    : 'Quantization (INT4/INT8) for faster inference'}
                </span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-purple-400 mt-1">•</span>
                <span>Context window: 32k tokens</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-purple-400 mt-1">•</span>
                <span>
                  {lang === 'de'
                    ? 'Durchschn. Antwortzeit: <2s für einfache Anfragen'
                    : 'Avg response time: <2s for simple queries'}
                </span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-green-400 mt-1">•</span>
                <span className="font-semibold text-green-400">
                  {lang === 'de'
                    ? 'GPU vs Apple Silicon: Apple 3x besseres Preis-/Leistungsverhältnis für Inferenz'
                    : 'GPU vs Apple Silicon: Apple 3x better price/performance for inference'}
                </span>
              </li>
            </ul>
          </motion.div>
        </div>
      </div>
    </div>
  )
}