'use client'

import { motion } from 'framer-motion'
import { Language } from '@/lib/types'
import { t } from '@/lib/i18n'
import { Plug, GitBranch, RefreshCw, CheckCircle2 } from 'lucide-react'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'

interface HowItWorksSlideProps {
  lang: Language
}

const stepIcons = [Plug, GitBranch, RefreshCw, CheckCircle2]
const stepColors = ['text-blue-400', 'text-indigo-400', 'text-purple-400', 'text-green-400']

export default function HowItWorksSlide({ lang }: HowItWorksSlideProps) {
  const i = t(lang)

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

      <div className="relative max-w-4xl mx-auto">
        {/* Connection Line */}
        <div className="absolute left-8 top-12 bottom-12 w-px bg-gradient-to-b from-blue-500 via-purple-500 to-green-500 hidden md:block" />

        <div className="space-y-8">
          {i.howItWorks.steps.map((step, idx) => {
            const Icon = stepIcons[idx]
            return (
              <motion.div
                key={idx}
                initial={{ opacity: 0, x: -30 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.3 + idx * 0.2, duration: 0.5 }}
                className="flex items-start gap-6 relative"
              >
                <div className={`
                  w-16 h-16 rounded-2xl bg-white/[0.06] border border-white/10
                  flex items-center justify-center shrink-0 relative z-10
                  ${stepColors[idx]}
                `}>
                  <Icon className="w-7 h-7" />
                </div>
                <div className="pt-2">
                  <div className="flex items-center gap-3 mb-1">
                    <span className="text-xs font-mono text-white/30">0{idx + 1}</span>
                    <h3 className="text-xl font-bold text-white">{step.title}</h3>
                  </div>
                  <p className="text-sm text-white/50 leading-relaxed max-w-lg">{step.desc}</p>
                </div>
              </motion.div>
            )
          })}
        </div>
      </div>
    </div>
  )
}