'use client'

import { motion } from 'framer-motion'
import { Language } from '@/lib/types'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import { Users, Target, TrendingUp, Award } from 'lucide-react'

interface AnnexRoadmap2027SlideProps {
  lang: Language
}

export default function AnnexRoadmap2027Slide({ lang }: AnnexRoadmap2027SlideProps) {
  const quarters = [
    {
      quarter: 'Q1 2027',
      accent: 'from-blue-500 to-cyan-500',
      items: [
        lang === 'de' ? 'Multi-Model Router Launch' : 'Multi-Model Router launch',
        lang === 'de' ? 'RAG 2.0 mit Advanced Retrieval' : 'RAG 2.0 with advanced retrieval',
        lang === 'de' ? '15 zahlende Kunden' : '15 paying customers',
        lang === 'de' ? 'Team: 3 Personen' : 'Team: 3 people'
      ]
    },
    {
      quarter: 'Q2 2027',
      accent: 'from-indigo-500 to-blue-500',
      items: [
        lang === 'de' ? 'Auto Compliance-Scan Feature' : 'Auto Compliance-Scan feature',
        lang === 'de' ? 'Kunden Self-Service Portal' : 'Customer self-service portal',
        lang === 'de' ? '25 zahlende Kunden' : '25 paying customers',
        lang === 'de' ? 'Erster Enterprise Pilot' : 'First enterprise pilot'
      ]
    },
    {
      quarter: 'Q3 2027',
      accent: 'from-purple-500 to-indigo-500',
      items: [
        lang === 'de' ? 'Echtzeit-Monitoring Dashboard' : 'Real-time monitoring dashboard',
        lang === 'de' ? 'API für Partner-Integrationen' : 'API for partner integrations',
        lang === 'de' ? '35 zahlende Kunden' : '35 paying customers',
        lang === 'de' ? 'Team: 4 Personen' : 'Team: 4 people'
      ]
    },
    {
      quarter: 'Q4 2027',
      accent: 'from-violet-500 to-purple-500',
      items: [
        lang === 'de' ? 'Series A Vorbereitung' : 'Series A preparation',
        lang === 'de' ? 'Due Diligence Package bereit' : 'Due diligence package ready',
        lang === 'de' ? '50+ zahlende Kunden' : '50+ paying customers',
        'ARR: EUR 90k'
      ]
    }
  ]

  const metrics = [
    {
      icon: Target,
      label: lang === 'de' ? 'Zielkunden' : 'Target Customers',
      value: '50+'
    },
    {
      icon: TrendingUp,
      label: lang === 'de' ? 'Ziel ARR' : 'Target ARR',
      value: 'EUR 90k'
    },
    {
      icon: Users,
      label: lang === 'de' ? 'Team-Größe' : 'Team Size',
      value: '4'
    },
    {
      icon: Award,
      label: lang === 'de' ? 'Key Milestone' : 'Key Milestone',
      value: 'Series A Ready'
    }
  ]

  return (
    <div className="max-w-6xl mx-auto px-4">
      <FadeInView>
        <div className="text-center mb-12">
          <h2 className="text-5xl font-bold mb-4">
            <GradientText>
              {lang === 'de' ? 'Roadmap 2027' : 'Roadmap 2027'}
            </GradientText>
          </h2>
          <p className="text-xl text-gray-400">
            {lang === 'de'
              ? 'Product-Market Fit & Series A Vorbereitung'
              : 'Product-Market Fit & Series A Preparation'}
          </p>
        </div>
      </FadeInView>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        {quarters.map((quarter, index) => (
          <motion.div
            key={quarter.quarter}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: index * 0.1 }}
            className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-4"
          >
            <div className={`bg-gradient-to-r ${quarter.accent} text-white text-sm font-bold px-3 py-1 rounded-lg inline-block mb-4`}>
              {quarter.quarter}
            </div>
            <ul className="space-y-3">
              {quarter.items.map((item, i) => (
                <li key={i} className="text-sm text-gray-300 flex items-start">
                  <span className="text-blue-400 mr-2">•</span>
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </motion.div>
        ))}
      </div>

      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.5 }}
        className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-6"
      >
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
          {metrics.map((metric, index) => {
            const Icon = metric.icon
            return (
              <div key={index} className="text-center">
                <Icon className="w-8 h-8 text-blue-400 mx-auto mb-2" />
                <p className="text-sm text-gray-400 mb-1">{metric.label}</p>
                <p className="text-2xl font-bold text-white">{metric.value}</p>
              </div>
            )
          })}
        </div>
      </motion.div>
    </div>
  )
}