import React from 'react';
import { Link } from 'react-router-dom';
import teamImg from '../../img/team-discussion.png'; // Vérifie le chemin de ton image

export default function ParcoursPresentation() {
  return (
    <section className="w-full bg-[#ffffff] text-[#1e293b] py-14 lg:py-20 px-6 md:px-12 lg:px-20">
      <div className="max-w-[1320px] mx-auto space-y-20">

        {/* ========================================================
            PARTIE 1 : INTRODUCTION & STATS BANNER
        ======================================================== */}
        <div className="space-y-10">
          {/* Header 2 colonnes : Titre à gauche / Paragraphes à droite */}
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-16 items-start">
            <div className="lg:col-span-5">
              <span className="text-xs uppercase tracking-wider text-[#7a8035] font-semibold block mb-3">
                REJOINDRE gaea21
              </span>
              <h2 className="text-2xl sm:text-3xl lg:text-[32px] font-extrabold text-[#111827] leading-[1.25]">
                Développer des compétences.<br />
                Acquérir de l'expérience.<br />
                Construire une trajectoire.
              </h2>
            </div>

            <div className="lg:col-span-7 space-y-3.5 text-xs sm:text-[13px] leading-relaxed text-[#4b5563]">
              <p>
                Chaque année, des étudiants, jeunes diplômés, professionnels, entrepreneurs, chercheurs, personnes en transition et experts rejoignent gaea21. Certains recherchent un stage. D'autres souhaitent acquérir une première expérience. Certains cherchent à développer leurs compétences.
              </p>
              <p>
                D'autres souhaitent retrouver une activité professionnelle, lancer un projet ou contribuer à une initiative porteuse de sens. Ce qui les rassemble n'est pas leur parcours. C'est leur volonté d'évoluer.
              </p>
              <p>
                Depuis plus de vingt ans, gaea21 accompagne des milliers de personnes dans le développement de leurs compétences, de leur expérience et de leur trajectoire professionnelle à travers des projets réels, des accompagnements structurés et un modèle unique d'apprentissage par l'action.
              </p>
              <p className="font-medium text-[#1f2937]">
                Rejoindre gaea21 ne consiste pas simplement à intégrer un projet.<br />
                C'est rejoindre un écosystème conçu pour apprendre, expérimenter, contribuer et grandir.
              </p>
            </div>
          </div>

          {/* Bandeau beige + Bouton pilule Figma */}
          <div className="flex flex-col lg:flex-row items-center justify-between gap-5">
            {/* Boîte beige claire avec bordure discrète */}
            <div className="w-full lg:flex-1 bg-[#edeade]/80 rounded-2xl px-8 py-5 flex flex-col md:flex-row items-center justify-between gap-6 border border-[#e2dec9]">

              {/* Approche systémique */}
              <div className="text-center md:text-left">
                <span className="text-xs sm:text-[13px] font-semibold text-[#1e293b] block">
                  Une approche systémique et humaine
                </span>
                <span className="text-[11px] text-[#6b7280]">
                  pour des résultats concrets et durables
                </span>
              </div>

              {/* Ligne séparatrice */}
              <div className="hidden md:block w-px h-10 bg-[#d8d3c5]" />

              {/* Stat 1 : 20 + ans (Icône Cible au trait noir/anthracite sans cercle) */}
              <div className="flex items-center gap-3">
                <svg
                  className="w-7 h-7 text-[#1e293b] shrink-0"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.8"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <circle cx="12" cy="12" r="10" />
                  <circle cx="12" cy="12" r="6" />
                  <circle cx="12" cy="12" r="2" />
                </svg>
                <div>
                  <span className="text-base sm:text-lg font-bold text-[#1e293b] block leading-tight">
                    20 + ans
                  </span>
                  <span className="text-[10px] text-[#6b7280]">
                    d'accompagnement
                  </span>
                </div>
              </div>

              {/* Ligne séparatrice */}
              <div className="hidden md:block w-px h-10 bg-[#d8d3c5]" />

              {/* Stat 2 : 3 000 + (Icône 3 personnes au trait noir/anthracite sans cercle) */}
              <div className="flex items-center gap-3">
                <svg
                  className="w-7 h-7 text-[#1e293b] shrink-0"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.8"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                  <circle cx="9" cy="7" r="4" />
                  <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
                  <path d="M16 3.13a4 4 0 0 1 0 7.75" />
                </svg>
                <div>
                  <span className="text-base sm:text-lg font-bold text-[#1e293b] block leading-tight">
                    3 000 +
                  </span>
                  <span className="text-[10px] text-[#6b7280]">
                    personnes accompagnées
                  </span>
                </div>
              </div>
            </div>

            {/* Bouton style PILULE arrondi (rounded-full) fidèle à Figma */}
            <Link
              to="/#participer"
              className="w-full lg:w-auto text-center shrink-0 bg-[#7a8035] hover:bg-[#686d2b] text-white px-7 py-3.5 rounded-full text-xs sm:text-[13px] font-semibold tracking-wide transition-all shadow-sm hover:shadow whitespace-nowrap"
            >
              Découvrir les opportunités &rarr;
            </Link>
          </div>
        </div>

        {/* ========================================================
            PARTIE 2 : QUI SOMMES-NOUS ? / QU'EST-CE QUE GAEA21 ?
        ======================================================== */}
        <div className="pt-6">
          {/* Petite barre de soulignement verte */}
          <div className="w-12 h-1 bg-[#7a8035] rounded-full mb-6" />

          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
            {/* Texte de gauche */}
            <div className="lg:col-span-7 space-y-5">
              <div>
                <span className="text-xs uppercase tracking-wider text-[#7a8035] font-bold block mb-2">
                  Qui sommes-nous ?
                </span>
                <h3 className="text-2xl sm:text-3xl font-extrabold text-[#111827] tracking-tight uppercase">
                  QU'EST-CE QUE GAEA21 ?
                </h3>
              </div>

              <div className="space-y-3.5 text-xs sm:text-[13px] leading-relaxed text-[#4b5563]">
                <p>
                  gaea21 est un centre de recherche appliquée, d'innovation, de développement durable et d'insertion professionnelle.
                </p>
                <p>
                  Notre mission est de créer des ponts entre :
                </p>
                <ul className="list-disc pl-5 space-y-1 text-[#374151]">
                  <li>la formation et l'emploi ;</li>
                  <li>les compétences et les opportunités ;</li>
                  <li>les individus et les organisations ;</li>
                  <li>les projets et les territoires ;</li>
                  <li>le développement humain et le développement durable.</li>
                </ul>
                <p>
                  Depuis plus de vingt ans, nous développons des projets réels permettant aux participants d'acquérir une expérience concrète tout en contribuant à des enjeux réels.
                </p>
              </div>
            </div>

            {/* Cercle avec l'équipe de travail */}
            <div className="lg:col-span-5 flex justify-center lg:justify-end">
              <div className="relative w-64 h-64 sm:w-80 sm:h-80 md:w-96 md:h-96 rounded-full overflow-hidden shadow-md border-4 border-white">
                <img
                  src={teamImg}
                  alt="Équipe gaea21 en réunion de travail"
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
          </div>
        </div>

      </div>
    </section>
  );
}