// 1. IMPORTATION DE REACT
import React from 'react';

/**
 * 2. TABLEAU DE DONNÉES STATIQUE : LES 6 ÉTAPES DE LA MÉTHODOLOGIE
 * Externaliser les étapes hors du composant évite de recréer ce tableau 
 * en mémoire à chaque nouveau cycle de rendu (re-render) du composant.
 */
const STEPS = [
    {
        number: '01',
        title: 'Diagnostiquer',
        description: 'Comprendre les besoins humains, professionnels et systémiques.',
        // Icône SVG : Loupe d'analyse / audit
        icon: (
            <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth="2.2" viewBox="0 0 24 24">
                <circle cx="11" cy="11" r="7" />
                <path strokeLinecap="round" strokeLinejoin="round" d="m20 20-3.5-3.5" />
            </svg>
        ),
    },
    {
        number: '02',
        title: 'Structurer',
        description: 'Créer un cadre, des outils et des trajectoires cohérentes.',
        // Icône SVG : Arborescence / Organigramme hiérarchique
        icon: (
            <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth="2.2" viewBox="0 0 24 24">
                <rect x="9" y="3" width="6" height="5" rx="1" />
                <rect x="3" y="16" width="6" height="5" rx="1" />
                <rect x="15" y="16" width="6" height="5" rx="1" />
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4m0 0H6v4m6-4h6v4" />
            </svg>
        ),
    },
    {
        number: '03',
        title: 'Appliquer',
        description: 'Travailler sur des projets réels dans un environnement collaboratif.',
        // Icône SVG : Outil clé / mise en œuvre pratique
        icon: (
            <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth="2.2" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" d="m14.7 6.3 3 3-9.4 9.4H5.3v-3l9.4-9.4z" />
                <path strokeLinecap="round" strokeLinejoin="round" d="m13 8 3 3" />
            </svg>
        ),
    },
    {
        number: '04',
        title: 'Transformer',
        description: 'Développer autonomie, compétences et stabilité.',
        // Icône SVG : Pousse végétale / croissance durable
        icon: (
            <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth="2.2" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 21V11" />
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 11c0-4 4-7 8-7-1 4-4 7-8 7z" />
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 13c0-3.5-3.5-6-7-6 .9 3.5 3.5 6 7 6z" />
            </svg>
        ),
    },
    {
        number: '05',
        title: 'Connecter',
        description: 'Relier humain, économie, territoires et opportunités.',
        // Icône SVG : Maillons de chaîne / réseau
        icon: (
            <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth="2.2" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
                <path strokeLinecap="round" strokeLinejoin="round" d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
            </svg>
        ),
    },
    {
        number: '06',
        title: 'Régénérer',
        description: 'Créer des boucles de valeur autonomes et durables.',
        // Icône SVG : Flèches d'économie circulaire / régénération
        icon: (
            <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth="2.2" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" d="M21 12a9 9 0 0 0-15.5-6.36L3 8" />
                <path strokeLinecap="round" strokeLinejoin="round" d="M3 3v5h5" />
                <path strokeLinecap="round" strokeLinejoin="round" d="M3 12a9 9 0 0 0 15.5 6.36L21 16" />
                <path strokeLinecap="round" strokeLinejoin="round" d="M16 16h5v5" />
            </svg>
        ),
    },
];

/**
 * 3. COMPOSANT PRINCIPAL : Methodology
 * Présente la section "Comment ça fonctionne ?" en deux parties :
 * - Haut : Titre + descriptif à gauche (4 cols) et les 6 étapes à droite (8 cols).
 * - Bas : Bandeau beige avec statistiques clés et bouton d'action.
 */
export default function Methodology() {
    return (
        /* 
          Section englobante :
          - py-20 : padding vertical de 5rem (80px)
          - px-6 sm:px-12 : padding horizontal adaptatif
          - bg-white : fond blanc assurant la continuité avec les autres blocs
        */
        <section className="py-20 px-6 sm:px-12 bg-white">
            {/* Conteneur centré borné à 1400px (largeur standard de la maquette Figma) */}
            <div className="max-w-[1400px] mx-auto">

                {/* ====================================================================
            A. PARTIE SUPÉRIEURE : EN-TÊTE + GRILLE DES 6 ÉTAPES
            - Grille CSS de 12 colonnes sur grand écran (lg:grid-cols-12)
            - 1 colonne unique sur mobile / tablette
            ==================================================================== */}
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start mb-16">

                    {/* COLONNE GAUCHE (4 colonnes sur 12) : Titres et texte explicatif */}
                    <div className="lg:col-span-4 pr-0 lg:pr-6">
                        {/* Surtitre vert olive (#798334) */}
                        <span className="text-[0.85rem] font-bold text-[#798334] tracking-wide block mb-2">
                            Notre méthodologie
                        </span>

                        {/* Titre principal */}
                        <h2 className="text-3xl sm:text-4xl font-extrabold text-slate-900 leading-tight mb-5">
                            Comment <br /> ça fonctionne ?
                        </h2>

                        {/* Sous-titre mis en avant */}
                        <h3 className="text-sm font-bold text-slate-900 mb-3">
                            Une méthodologie “Learning by Doing” validée sur plus de 20 ans.
                        </h3>

                        {/* Paragraphe descriptif avec largeur bridée pour une lecture confortable */}
                        <p className="text-xs sm:text-sm text-slate-500 leading-relaxed max-w-sm">
                            gaea21 transforme la recherche en action et les trajectoires humaines en capacités concrètes à travers une méthodologie systémique structurée.
                        </p>
                    </div>

                    {/* COLONNE DROITE (8 colonnes sur 12) : Les 6 étapes numérotées */}
                    {/*
              Découpage responsive :
              - Mobile : 2 colonnes (grid-cols-2)
              - Tablette : 3 colonnes (sm:grid-cols-3)
              - Desktop : 6 colonnes alignées (md:grid-cols-6)
          */}
                    <div className="lg:col-span-8 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-6 text-center">
                        {STEPS.map((step) => (
                            /*
                              group : permet à la bulle d'icône d'animer son zoom et sa couleur 
                              dès que le curseur entre dans le bloc de l'étape
                            */
                            <div key={step.number} className="flex flex-col items-center group">
                                {/* Numéro de l'étape (01, 02, etc.) */}
                                <span className="text-xs sm:text-sm font-semibold text-slate-400 mb-2">
                                    {step.number}
                                </span>

                                {/* Bulle d'icône vert olive (#8c8f3e) avec transition fluide */}
                                <div className="w-16 h-16 rounded-full bg-[#8c8f3e] flex items-center justify-center mb-3 shadow-md group-hover:bg-[#737630] group-hover:scale-105 transition-all duration-200">
                                    {step.icon}
                                </div>

                                {/* Titre de l'étape */}
                                <h4 className="text-sm font-bold text-slate-900 mb-1.5 leading-snug">
                                    {step.title}
                                </h4>

                                {/* Description de l'étape */}
                                <p className="text-[0.68rem] sm:text-[0.72rem] text-slate-500 leading-snug">
                                    {step.description}
                                </p>
                            </div>
                        ))}
                    </div>
                </div>

                {/* ====================================================================
            B. BANDEAU INFÉRIEUR : STATISTIQUES & BOUTON D'ACTION (CTA)
            - bg-[#f7f8f0] : fond beige/vert très clair doux
            - border-[#e8ebd5] : bordure fine d'encadrement
            - rounded-2xl : coins arrondis
            ==================================================================== */}
                <div className="bg-[#f7f8f0] border border-[#e8ebd5] rounded-2xl p-6 sm:p-8 flex flex-col lg:flex-row items-center justify-between gap-6 shadow-sm">

                    {/* Bloc Accroche textuelle à gauche */}
                    <div className="lg:w-1/4 text-center lg:text-left">
                        <h4 className="text-sm sm:text-base font-bold text-slate-900 leading-snug">
                            Une approche systémique et humaine
                        </h4>
                        <span className="text-xs sm:text-sm text-[#798334] font-medium block mt-0.5">
                            pour des résultats concrets et durables.
                        </span>
                    </div>

                    {/* Ligne séparatrice verticale visible uniquement sur desktop (lg) */}
                    <div className="hidden lg:block w-px h-12 bg-slate-300"></div>

                    {/* Statistique 1 : Ancienneté (20+ ans) */}
                    <div className="flex items-center gap-4">
                        {/* Icône cible / horloge */}
                        <div className="text-[#8c8f3e]">
                            <svg className="w-8 h-8" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="9" />
                                <path strokeLinecap="round" strokeLinejoin="round" d="M12 7v5l3 3" />
                            </svg>
                        </div>
                        <div>
                            <span className="text-xl sm:text-2xl font-black text-slate-900 block leading-tight">
                                20 + ans
                            </span>
                            <span className="text-xs text-slate-500 font-medium">
                                d'expérimentation
                            </span>
                        </div>
                    </div>

                    {/* Ligne séparatrice verticale visible uniquement sur desktop (lg) */}
                    <div className="hidden lg:block w-px h-12 bg-slate-300"></div>

                    {/* Statistique 2 : Nombre de bénéficiaires (3 000+ personnes) */}
                    <div className="flex items-center gap-4">
                        {/* Icône groupe / communauté */}
                        <div className="text-[#8c8f3e]">
                            <svg className="w-8 h-8" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                                <circle cx="9" cy="7" r="4" />
                                <path strokeLinecap="round" strokeLinejoin="round" d="M22 21v-2a4 4 0 0 0-3-3.87" />
                                <path strokeLinecap="round" strokeLinejoin="round" d="M16 3.13a4 4 0 0 1 0 7.75" />
                            </svg>
                        </div>
                        <div>
                            <span className="text-xl sm:text-2xl font-black text-slate-900 block leading-tight">
                                3 000 +
                            </span>
                            <span className="text-xs text-[#798334] font-medium">
                                personnes accompagnées
                            </span>
                        </div>
                    </div>

                    {/* Bouton CTA d'ancrage vers le détail de la méthodologie */}
                    <div className="mt-2 lg:mt-0">
                        <a
                            href="#methodologie"
                            className="inline-flex items-center gap-2 bg-[#798334] hover:bg-[#656d2b] text-white text-xs sm:text-sm font-semibold px-6 py-3 rounded-full transition-all duration-200 shadow-sm hover:shadow-md transform hover:-translate-y-0.5"
                        >
                            <span>Découvrir la méthodologie</span>
                            {/* Flèche droite indicative */}
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
                                <line x1="5" y1="12" x2="19" y2="12"></line>
                                <polyline points="12 5 19 12 12 19"></polyline>
                            </svg>
                        </a>
                    </div>

                </div>

            </div>
        </section>
    );
}