
import React from "react";
import { MessageCircle, Palette, Rocket } from "lucide-react";

const ProcessSection = () => {
  const steps = [
    {
      icon: MessageCircle,
      title: "Consultation",
      description: "Échange approfondi sur vos besoins, objectifs et vision. Définition du cahier des charges et stratégie digitale.",
      duration: "1 jour",
      color: "from-blue-500 to-cyan-500"
    },
    {
      icon: Palette,
      title: "Création",
      description: "Design et développement de votre solution. Intégration IA, optimisations performance et tests qualité.",
      duration: "1-2 jours",
      color: "from-purple-500 to-pink-500"
    },
    {
      icon: Rocket,
      title: "Déploiement",
      description: "Mise en ligne, formation utilisateur et suivi personnalisé. Support technique et optimisations continues.",
      duration: "Immédiat",
      color: "from-green-500 to-teal-500"
    }
  ];

  return (
    <section className="py-20 bg-gradient-to-b from-gray-900 to-black text-white">
      <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">
            Notre Processus
            <span className="bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent"> Express</span>
          </h2>
          <p className="text-xl text-gray-300">
            De l'idée à la réalisation en 3 étapes simples et efficaces
          </p>
        </div>

        {/* Process timeline */}
        <div className="relative max-w-6xl mx-auto">
          {/* Timeline line */}
          <div className="hidden lg:block absolute top-24 left-0 right-0 h-0.5 bg-gradient-to-r from-blue-500 via-purple-500 to-green-500"></div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12">
            {steps.map((step, index) => {
              const Icon = step.icon;
              return (
                <div key={index} className="relative text-center group">
                  {/* Step number */}
                  <div className="lg:absolute lg:-top-4 lg:left-1/2 lg:transform lg:-translate-x-1/2 mb-8 lg:mb-0">
                    <div className={`w-16 h-16 rounded-full bg-gradient-to-r ${step.color} flex items-center justify-center mx-auto shadow-2xl group-hover:scale-110 transition-transform duration-300`}>
                      <Icon className="w-8 h-8 text-white" />
                    </div>
                  </div>

                  {/* Content */}
                  <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 mt-8 border border-white/10 group-hover:bg-white/10 transition-all duration-300">
                    <div className={`inline-block px-3 py-1 rounded-full bg-gradient-to-r ${step.color} text-white text-sm font-medium mb-4`}>
                      {step.duration}
                    </div>
                    
                    <h3 className="text-2xl font-bold mb-4">{step.title}</h3>
                    <p className="text-gray-300 leading-relaxed">{step.description}</p>
                  </div>

                  {/* Arrow for mobile */}
                  {index < steps.length - 1 && (
                    <div className="lg:hidden flex justify-center mt-8">
                      <div className="w-0.5 h-8 bg-gradient-to-b from-purple-500 to-transparent"></div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>

        {/* Bottom CTA */}
        <div className="text-center mt-16">
          <p className="text-lg text-gray-400 mb-4">Prêt à démarrer votre projet ?</p>
          <div className="inline-block px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full text-white font-medium hover:shadow-lg transition-shadow duration-300">
            Temps moyen de réalisation : 48-72h
          </div>
        </div>
      </div>
    </section>
  );
};

export default ProcessSection;
