'use client';

import { useTranslation } from 'react-i18next';
import { motion } from 'motion/react';
import { Package, DollarSign, Users, MapPin, Headphones, BarChart3 } from 'lucide-react';
import { Container, Card } from '@/components/ui';
import type { Service } from '@/models';
import servicesData from '@/data/services.json';

const iconMap = {
  Package,
  DollarSign,
  Users,
  MapPin,
  Headphones,
  BarChart3,
};

export function ServicesSection() {
  const { t } = useTranslation();
  const services = servicesData as Service[];

  return (
    <section className="py-24 bg-gradient-to-b from-white to-gray-50/50">
      <Container>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <h2 className="text-4xl sm:text-5xl font-bold text-gray-900 mb-4">
            {t('services.title')}
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            {t('services.subtitle', 'Des solutions complètes pour développer votre activité e-commerce')}
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {services.map((service, index) => {
            const Icon = iconMap[service.icon as keyof typeof iconMap];
            
            return (
              <motion.div
                key={service.id}
                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 
                  hover 
                  padding="lg"
                  className="h-full bg-white border border-gray-200/60 shadow-sm hover:shadow-2xl hover:border-[#3A4A9C]/30 transition-all duration-300 hover:-translate-y-2 group relative overflow-hidden"
                >
                  {/* Modern gradient background accent with brand color */}
                  <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-[#3A4A9C]/5 via-blue-50/50 to-transparent rounded-full -mr-16 -mt-16 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                  
                  {/* Icon with brand color styling */}
                  <div className="relative w-14 h-14 rounded-xl bg-gradient-to-br from-[#3A4A9C]/10 to-blue-50 border border-[#3A4A9C]/20 flex items-center justify-center mb-6 shadow-sm group-hover:shadow-md group-hover:scale-110 group-hover:border-[#3A4A9C]/40 transition-all duration-300">
                    <Icon className="w-7 h-7 text-[#3A4A9C]" strokeWidth={1.5} />
                  </div>
                  
                  <h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-[#3A4A9C] transition-colors duration-300">
                    {t(service.titleKey)}
                  </h3>
                  <p className="text-gray-600 leading-relaxed">
                    {t(service.descriptionKey)}
                  </p>
                </Card>
              </motion.div>
            );
          })}
        </div>
      </Container>
    </section>
  );
}