'use client';

import { useTranslation } from 'react-i18next';
import { motion } from 'motion/react';
import { Shield, Zap, Users, DollarSign, TrendingUp, Heart } from 'lucide-react';
import { Container, Card } from '@/components/ui';

export function WhyChooseSection() {
  const { t } = useTranslation();

  const reasons = [
    {
      icon: Shield,
      title: t('whyChoose.reliable.title'),
      description: t('whyChoose.reliable.description'),
      gradient: 'from-blue-500 to-blue-600',
      bgGradient: 'from-blue-50 to-blue-100/50',
    },
    {
      icon: Zap,
      title: t('whyChoose.fast.title'),
      description: t('whyChoose.fast.description'),
      gradient: 'from-yellow-500 to-orange-500',
      bgGradient: 'from-yellow-50 to-orange-100/50',
    },
    {
      icon: Users,
      title: t('whyChoose.professional.title'),
      description: t('whyChoose.professional.description'),
      gradient: 'from-purple-500 to-purple-600',
      bgGradient: 'from-purple-50 to-purple-100/50',
    },
    {
      icon: DollarSign,
      title: t('whyChoose.transparent.title'),
      description: t('whyChoose.transparent.description'),
      gradient: 'from-green-500 to-emerald-600',
      bgGradient: 'from-green-50 to-emerald-100/50',
    },
    {
      icon: TrendingUp,
      title: t('whyChoose.scalable.title'),
      description: t('whyChoose.scalable.description'),
      gradient: 'from-indigo-500 to-indigo-600',
      bgGradient: 'from-indigo-50 to-indigo-100/50',
    },
    {
      icon: Heart,
      title: t('whyChoose.trusted.title'),
      description: t('whyChoose.trusted.description'),
      gradient: 'from-pink-500 to-rose-500',
      bgGradient: 'from-pink-50 to-rose-100/50',
    },
  ];

  return (
    <section className="py-24 bg-gradient-to-b from-gray-50/50 to-white relative overflow-hidden">
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-[0.02]" style={{
        backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233A4A9C' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
      }} />

      <Container className="relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <div className="inline-block px-5 py-2 bg-gradient-to-r from-[#3A4A9C]/10 to-blue-100 rounded-full mb-6">
            <span className="text-sm font-semibold text-[#3A4A9C]">
              {t('whyChoose.badge', 'Pourquoi nous choisir')}
            </span>
          </div>
          <h2 className="text-4xl sm:text-5xl font-bold text-gray-900 mb-4">
            {t('whyChoose.title')}
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            {t('whyChoose.subtitle', 'Les raisons qui font de Dropex le partenaire idéal pour votre croissance')}
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
          {reasons.map((reason, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              className="h-full"
            >
              <Card className="h-full p-8 bg-white border border-gray-100 hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 group">
                <div className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${reason.bgGradient} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
                  <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${reason.gradient} flex items-center justify-center shadow-lg`}>
                    <reason.icon className="w-7 h-7 text-white" />
                  </div>
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-3">
                  {reason.title}
                </h3>
                <p className="text-gray-600 leading-relaxed">
                  {reason.description}
                </p>
              </Card>
            </motion.div>
          ))}
        </div>
      </Container>
    </section>
  );
}