'use client'

import { Language, PitchMilestone, PitchMetric } from '@/lib/types'
import { t } from '@/lib/i18n'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import GlassCard from '../ui/GlassCard'
import Timeline from '../ui/Timeline'
import LiveIndicator from '../ui/LiveIndicator'

interface TractionSlideProps {
  lang: Language
  milestones: PitchMilestone[]
  metrics: PitchMetric[]
}

export default function TractionSlide({ lang, milestones, metrics }: TractionSlideProps) {
  const i = t(lang)

  return (
    <div>
      <FadeInView className="text-center mb-10">
        <h2 className="text-4xl md:text-5xl font-bold mb-3">
          <GradientText>{i.traction.title}</GradientText>
        </h2>
        <p className="text-lg text-white/50 max-w-2xl mx-auto">{i.traction.subtitle}</p>
      </FadeInView>

      <div className="grid md:grid-cols-2 gap-8">
        {/* KPI Cards */}
        <div>
          <div className="grid grid-cols-2 gap-3 mb-6">
            {metrics.slice(0, 6).map((m, idx) => (
              <GlassCard key={m.id} delay={0.2 + idx * 0.08} className="p-4">
                <div className="flex items-center justify-between mb-1">
                  <span className="text-xs text-white/40">
                    {lang === 'de' ? m.label_de : m.label_en}
                  </span>
                  {m.is_live && <LiveIndicator />}
                </div>
                <p className="text-2xl font-bold text-white">
                  {m.value}{m.unit ? ` ${m.unit}` : ''}
                </p>
              </GlassCard>
            ))}
          </div>
        </div>

        {/* Timeline */}
        <FadeInView delay={0.4}>
          <div className="bg-white/[0.03] rounded-2xl p-5 border border-white/5 max-h-[400px] overflow-y-auto">
            <Timeline milestones={milestones} lang={lang} />
          </div>
        </FadeInView>
      </div>
    </div>
  )
}