
import React from "react";
import Layout from "@/components/layout/Layout";
import HeroSection from "@/components/sections/HeroSection";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Link } from "react-router-dom";
import { ChevronRight, TrendingUp, LineChart, BarChart2, Users, Target, RefreshCw } from "lucide-react";

const ServicesPage = () => {
  const services = [
    {
      id: "growth-strategy",
      title: "Stratégie de croissance",
      description: "Nous vous aidons à définir et mettre en œuvre une stratégie de croissance adaptée à votre entreprise et à votre marché.",
      icon: TrendingUp,
      benefits: [
        "Analyse approfondie de votre marché et de vos concurrents",
        "Identification des opportunités de croissance",
        "Élaboration d'une roadmap stratégique",
        "Accompagnement dans la mise en œuvre",
        "Suivi et ajustement de la stratégie",
      ],
    },
    {
      id: "digital-transformation",
      title: "Transformation digitale",
      description: "Nous vous accompagnons dans votre transformation digitale pour améliorer votre performance et votre compétitivité.",
      icon: LineChart,
      benefits: [
        "Audit de maturité digitale",
        "Définition de la feuille de route digitale",
        "Sélection des technologies adaptées",
        "Accompagnement au changement",
        "Mesure des résultats et ROI",
      ],
    },
    {
      id: "fundraising",
      title: "Levée de fonds",
      description: "Nous vous accompagnons dans la préparation et la réalisation de votre levée de fonds pour financer votre croissance.",
      icon: BarChart2,
      benefits: [
        "Définition du besoin de financement",
        "Préparation du business plan",
        "Identification des investisseurs potentiels",
        "Préparation du pitch et des documents",
        "Négociation et closing",
      ],
    },
    {
      id: "executive-coaching",
      title: "Accompagnement dirigeants",
      description: "Nous vous accompagnons dans votre développement personnel et professionnel pour vous aider à devenir un meilleur leader.",
      icon: Users,
      benefits: [
        "Coaching individuel sur mesure",
        "Développement des compétences de leadership",
        "Gestion du stress et de la pression",
        "Amélioration de la prise de décision",
        "Équilibre vie professionnelle et personnelle",
      ],
    },
    {
      id: "market-expansion",
      title: "Expansion de marché",
      description: "Nous vous aidons à identifier et pénétrer de nouveaux marchés pour accélérer votre croissance.",
      icon: Target,
      benefits: [
        "Étude de marché approfondie",
        "Analyse de la concurrence locale",
        "Stratégie d'entrée adaptée",
        "Plan de déploiement commercial",
        "Adaptation de votre offre au marché cible",
      ],
    },
    {
      id: "operational-excellence",
      title: "Excellence opérationnelle",
      description: "Nous vous aidons à optimiser vos processus pour améliorer votre efficacité et votre rentabilité.",
      icon: RefreshCw,
      benefits: [
        "Audit des processus existants",
        "Identification des inefficacités",
        "Optimisation des flux de travail",
        "Mise en place d'indicateurs de performance",
        "Formation des équipes aux nouvelles méthodes",
      ],
    },
  ];

  return (
    <Layout>
      <HeroSection
        title="Nos services d'accompagnement"
        subtitle="Des solutions sur mesure pour accélérer votre croissance, optimiser votre performance et atteindre vos objectifs."
        imageUrl="https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80"
      />

      {/* Services Section */}
      <section className="py-16 md:py-24">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl font-bold mb-6">
              Des solutions adaptées à vos enjeux
            </h2>
            <p className="text-gray-700">
              Nous proposons une gamme complète de services pour répondre à vos besoins spécifiques en matière de croissance et de développement.
            </p>
          </div>

          <div className="space-y-12 md:space-y-24">
            {services.map((service, index) => (
              <div
                key={service.id}
                id={service.id}
                className={`flex flex-col ${
                  index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse"
                } items-center gap-12`}
              >
                <div className="md:w-2/5">
                  <div className="bg-primary-50 p-8 rounded-lg h-full flex flex-col items-center justify-center">
                    <service.icon className="h-24 w-24 text-primary-600 mb-6" />
                    <h3 className="text-2xl font-bold text-center text-gray-800 mb-4">
                      {service.title}
                    </h3>
                    <p className="text-gray-600 text-center">
                      {service.description}
                    </p>
                  </div>
                </div>
                <div className="md:w-3/5">
                  <h3 className="text-2xl font-bold mb-6">
                    Comment nous pouvons vous aider
                  </h3>
                  <div className="space-y-4 mb-8">
                    {service.benefits.map((benefit) => (
                      <div key={benefit} className="flex items-start">
                        <ChevronRight className="h-5 w-5 text-primary-600 mr-2 flex-shrink-0 mt-0.5" />
                        <p className="text-gray-700">{benefit}</p>
                      </div>
                    ))}
                  </div>
                  <Button asChild>
                    <Link to="/contact">
                      Discuter de votre projet
                      <ChevronRight className="ml-2 h-4 w-4" />
                    </Link>
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Methodology Section */}
      <section className="py-16 md:py-24 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl font-bold mb-6">
              Notre méthodologie
            </h2>
            <p className="text-gray-700">
              Une approche structurée et éprouvée pour garantir le succès de votre projet de croissance.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {["Analyse", "Stratégie", "Action", "Résultats"].map((step, index) => (
              <Card key={step} className="relative border-0 shadow-lg">
                <div className="absolute -top-4 -left-4 h-12 w-12 rounded-full bg-primary-600 flex items-center justify-center text-white font-bold text-xl">
                  {index + 1}
                </div>
                <CardContent className="pt-8">
                  <h3 className="text-xl font-semibold mb-4">{step}</h3>
                  <p className="text-gray-600">
                    {index === 0 && "Nous analysons en profondeur votre entreprise, votre marché et vos concurrents pour comprendre les enjeux."}
                    {index === 1 && "Nous définissons avec vous une stratégie sur mesure adaptée à vos objectifs et à votre contexte."}
                    {index === 2 && "Nous vous accompagnons dans la mise en œuvre concrète des actions définies dans la stratégie."}
                    {index === 3 && "Nous mesurons les résultats obtenus et ajustons la stratégie si nécessaire pour atteindre vos objectifs."}
                  </p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 md:py-20 bg-primary-600">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold text-white mb-6">
            Prêt à accélérer la croissance de votre entreprise ?
          </h2>
          <p className="text-lg text-white/90 mb-8 max-w-2xl mx-auto">
            Contactez-nous dès aujourd'hui pour une consultation gratuite et découvrez comment nos services peuvent répondre à vos besoins spécifiques.
          </p>
          <Button asChild size="lg" variant="secondary">
            <Link to="/contact">Demander une consultation gratuite</Link>
          </Button>
        </div>
      </section>
    </Layout>
  );
};

export default ServicesPage;
