import { motion } from 'framer-motion'
import { useTranslation } from 'react-i18next'
import { Cpu, Languages, MessageSquare } from 'lucide-react'

const services = [
  { icon: Cpu, titleKey: 'services.pillar1_title', descKey: 'services.pillar1_desc' },
  { icon: Languages, titleKey: 'services.pillar2_title', descKey: 'services.pillar2_desc' },
  { icon: MessageSquare, titleKey: 'services.pillar3_title', descKey: 'services.pillar3_desc' },
]

export default function Services() {
  const { t } = useTranslation()

  return (
    <section className="py-24 bg-nordic-navy relative">
      <div className="container mx-auto px-6">
        <motion.div 
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          className="mb-16 text-center"
        >
          <h2 className="text-3xl md:text-4xl font-bold text-nordic-ice mb-4">{t('services.title')}</h2>
          <div className="w-24 h-1 bg-nordic-cyan mx-auto" />
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {services.map((service, idx) => (
            <motion.div
              key={idx}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: idx * 0.2 }}
              whileHover={{ y: -5 }}
              className="group p-8 rounded-sm border border-nordic-stone/20 bg-nordic-glass backdrop-blur-sm hover:border-nordic-cyan/50 transition-all duration-300"
            >
              <div className="w-12 h-12 bg-nordic-cyan/10 rounded-sm flex items-center justify-center mb-6 group-hover:bg-nordic-cyan/20 transition-colors">
                <service.icon className="w-6 h-6 text-nordic-cyan" />
              </div>
              <h3 className="text-xl font-bold text-nordic-ice mb-3">{t(service.titleKey)}</h3>
              <p className="text-nordic-stone font-mono text-sm leading-relaxed">{t(service.descKey)}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}