
import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Globe, Bot, Zap, Rocket, Brain, Smartphone } from "lucide-react";

const ServicesSection = () => {
  const services = [
    {
      icon: Globe,
      title: "Sites Internet Ultra-Rapides",
      description: "Design moderne, développement accéléré avec les dernières technologies. Responsive, optimisé SEO et prêt en 48h.",
      features: ["Design sur mesure", "Développement express", "Optimisation SEO", "Responsive mobile"],
      gradient: "from-blue-500 to-cyan-500"
    },
    {
      icon: Bot,
      title: "Agents IA Personnalisés",
      description: "Chatbots intelligents, automatisation des processus, intégration IA pour optimiser votre business.",
      features: ["Chatbots conversationnels", "Automatisation workflow", "IA générative", "Intégration APIs"],
      gradient: "from-purple-500 to-pink-500"
    }
  ];

  const additionalServices = [
    { icon: Zap, title: "Optimisation Performance", description: "Sites ultra-rapides et optimisés" },
    { icon: Rocket, title: "Déploiement Express", description: "Mise en ligne en quelques heures" },
    { icon: Brain, title: "IA Générative", description: "Contenu automatisé par IA" },
    { icon: Smartphone, title: "Mobile First", description: "Expérience mobile parfaite" }
  ];

  return (
    <section className="py-20 bg-gradient-to-b from-blue-100/60 via-cyan-50/40 to-slate-100">
      <div className="container mx-auto px-4">
        {/* Header */}
        <div className="text-center max-w-4xl mx-auto mb-16">
          <h2 className="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
            Nos Solutions Innovantes
          </h2>
          <p className="text-xl text-gray-600">
            Deux spécialités, un seul objectif : propulser votre business vers le futur
          </p>
        </div>

        {/* Main services */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
          {services.map((service, index) => {
            const Icon = service.icon;
            return (
              <Card key={index} className="group hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border-0 bg-white/80 backdrop-blur-sm">
                <CardContent className="p-8">
                  <div className={`w-16 h-16 rounded-xl bg-gradient-to-r ${service.gradient} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
                    <Icon className="w-8 h-8 text-white" />
                  </div>
                  
                  <h3 className="text-2xl font-bold mb-4 text-gray-900">{service.title}</h3>
                  <p className="text-gray-600 mb-6 leading-relaxed">{service.description}</p>
                  
                  <ul className="space-y-3">
                    {service.features.map((feature, idx) => (
                      <li key={idx} className="flex items-center text-gray-700">
                        <div className={`w-2 h-2 rounded-full bg-gradient-to-r ${service.gradient} mr-3`}></div>
                        {feature}
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            );
          })}
        </div>

        {/* Additional services grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {additionalServices.map((service, index) => {
            const Icon = service.icon;
            return (
              <Card key={index} className="group hover:shadow-lg transition-all duration-300 hover:-translate-y-1 border-0 bg-white/60 backdrop-blur-sm">
                <CardContent className="p-6 text-center">
                  <div className="w-12 h-12 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-500 flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                    <Icon className="w-6 h-6 text-white" />
                  </div>
                  <h4 className="font-semibold text-gray-900 mb-2">{service.title}</h4>
                  <p className="text-sm text-gray-600">{service.description}</p>
                </CardContent>
              </Card>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export default ServicesSection;
