'use client'

import { motion } from 'framer-motion'
import { Language } from '@/lib/types'
import { t } from '@/lib/i18n'
import { AlertTriangle, Scale, Shield } from 'lucide-react'
import GlassCard from '../ui/GlassCard'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'

interface ProblemSlideProps {
  lang: Language
}

const icons = [AlertTriangle, Scale, Shield]

export default function ProblemSlide({ lang }: ProblemSlideProps) {
  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.problem.title}</GradientText>
        </h2>
        <p className="text-lg text-white/50 max-w-2xl mx-auto">{i.problem.subtitle}</p>
      </FadeInView>

      <div className="grid md:grid-cols-3 gap-6 mb-12">
        {i.problem.cards.map((card, idx) => {
          const Icon = icons[idx]
          return (
            <GlassCard key={idx} delay={0.2 + idx * 0.15} className="text-center">
              <div className="w-12 h-12 mx-auto mb-4 rounded-xl bg-red-500/10 flex items-center justify-center">
                <Icon className="w-6 h-6 text-red-400" />
              </div>
              <h3 className="text-lg font-bold mb-2 text-white">{card.title}</h3>
              <p className="text-3xl font-bold text-red-400 mb-3">{card.stat}</p>
              <p className="text-sm text-white/50 leading-relaxed">{card.desc}</p>
            </GlassCard>
          )
        })}
      </div>

      <FadeInView delay={0.8} className="max-w-3xl mx-auto">
        <blockquote className="text-center">
          <p className="text-lg md:text-xl text-white/70 italic leading-relaxed">
            &ldquo;{i.problem.quote}&rdquo;
          </p>
        </blockquote>
      </FadeInView>
    </div>
  )
}