'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, Globe } from 'lucide-react'

interface AnnexRoadmap2028SlideProps {
  lang: Language
}

export default function AnnexRoadmap2028Slide({ lang }: AnnexRoadmap2028SlideProps) {
  const quarters = [
    {
      quarter: 'Q1 2028',
      accent: 'from-blue-500 to-cyan-500',
      items: [
        lang === 'de' ? 'Federated Learning über Kunden' : 'Federated Learning across customers',
        lang === 'de' ? 'Multi-Tenant Architektur' : 'Multi-tenant architecture',
        lang === 'de' ? '80 zahlende Kunden' : '80 paying customers',
        lang === 'de' ? 'Series A Abschluss (EUR 2-3M)' : 'Series A close (EUR 2-3M)'
      ]
    },
    {
      quarter: 'Q2 2028',
      accent: 'from-indigo-500 to-blue-500',
      items: [
        lang === 'de' ? 'API Marketplace Launch' : 'API Marketplace launch',
        lang === 'de' ? 'Partner Ökosystem Start' : 'Partner ecosystem start',
        lang === 'de' ? '120 zahlende Kunden' : '120 paying customers',
        lang === 'de' ? 'Team: 6 Personen' : 'Team: 6 people'
      ]
    },
    {
      quarter: 'Q3 2028',
      accent: 'from-purple-500 to-indigo-500',
      items: [
        lang === 'de' ? 'Enterprise Tier Launch' : 'Enterprise tier launch',
        lang === 'de' ? 'DACH Expansion (Österreich, Schweiz)' : 'DACH expansion (Austria, Switzerland)',
        lang === 'de' ? '160 zahlende Kunden' : '160 paying customers',
        lang === 'de' ? 'Team: 7 Personen' : 'Team: 7 people'
      ]
    },
    {
      quarter: 'Q4 2028',
      accent: 'from-violet-500 to-purple-500',
      items: [
        lang === 'de' ? 'Volle DACH Abdeckung' : 'Full DACH coverage',
        lang === 'de' ? '200+ zahlende Kunden' : '200+ paying customers',
        'ARR: EUR 360k',
        lang === 'de' ? 'Team: 8 Personen' : 'Team: 8 people'
      ]
    }
  ]

  const metrics = [
    {
      icon: Target,
      label: lang === 'de' ? 'Zielkunden' : 'Target Customers',
      value: '200+'
    },
    {
      icon: TrendingUp,
      label: lang === 'de' ? 'Ziel ARR' : 'Target ARR',
      value: 'EUR 360k'
    },
    {
      icon: Users,
      label: lang === 'de' ? 'Team-Größe' : 'Team Size',
      value: '8'
    },
    {
      icon: Globe,
      label: lang === 'de' ? 'Key Milestone' : 'Key Milestone',
      value: lang === 'de' ? 'DACH Expansion' : 'DACH Expansion'
    }
  ]

  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 2028' : 'Roadmap 2028'}
            </GradientText>
          </h2>
          <p className="text-xl text-gray-400">
            {lang === 'de'
              ? 'Enterprise Scale & Series A'
              : 'Enterprise Scale & Series A'}
          </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>
  )
}