import React from 'react';

// Imports des 7 images (vérifie bien tes extensions .png ou .png)
import decouvertImg from '../../img/decouvert.png';
import preProfilImg from '../../img/pre-profil.png';
import entretienImg from '../../img/entretien.png';
import constructionImg from '../../img/construction.png';
import integrationImg from '../../img/intergation.png';
import developpementImg from '../../img/developpement.png';
import evolutionImg from '../../img/evolution.png';

const STEPS = [
    {
        step: 1,
        title: 'Étape 1 — Découverte',
        intro:
            'Vous découvrez les projets, les équipes, les trajectoires et les opportunités proposées par gaea21.',
        image: decouvertImg,
    },
    {
        step: 2,
        title: 'Étape 2 — Pré-profil',
        intro:
            'Vous complétez un questionnaire permettant de mieux comprendre :',
        bullets: [
            'votre situation ;',
            'votre parcours ;',
            'vos compétences ;',
            'vos objectifs ;',
            'vos disponibilités ;',
            'vos centres d’intérêt ;',
            'vos attentes.',
        ],
        conclusion:
            'Cette étape constitue la base de votre future trajectoire.',
        image: preProfilImg,
    },
    {
        step: 3,
        title: 'Étape 3 — Entretien',
        intro:
            'Un entretien permet d’approfondir votre démarche et d’identifier les opportunités les plus adaptées :',
        bullets: [
            'vos compétences à mobiliser ;',
            'les projets correspondant à votre profil ;',
            'ce que vous souhaitez développer.',
        ],
        image: entretienImg,
    },
    {
        step: 4,
        title: 'Étape 4 — Construction de la trajectoire',
        intro:
            'À partir des informations recueillies, nous définissons :',
        bullets: [
            'vos objectifs d’apprentissage ;',
            'les compétences à développer ;',
            'votre rôle dans les projets gaea21 ;',
            'la durée et le rythme de votre parcours.',
        ],
        conclusion:
            'Cette étape permet de construire une feuille de route sur mesure.',
        image: constructionImg,
    },
    {
        step: 5,
        title: 'Étape 5 — Intégration dans les projets',
        intro:
            'Vous intégrez un ou plusieurs projets réels :',
        bullets: [
            'accompagné(e) par des tuteurs et experts ;',
            'au sein d’une équipe pluridisciplinaire ;',
            'avec des livrables concrets à réaliser.',
        ],
        image: integrationImg,
    },
    {
        step: 6,
        title: 'Étape 6 — Développement des compétences',
        intro:
            'Vous montez en compétences à travers la pratique :',
        bullets: [
            'ateliers, méthodologies et outils gaea21 ;',
            'développement de compétences transversales et techniques ;',
            'suivi personnalisé et feedback régulier.',
        ],
        image: developpementImg,
    },
    {
        step: 7,
        title: 'Étape 7 — Évolution et opportunités',
        intro:
            'À la fin de votre parcours :',
        bullets: [
            'bilan des compétences acquises ;',
            'attestation de parcours gaea21 ;',
            'recommandation professionnelle ;',
            'opportunités de mandats internes ou externes ;',
            'accès au réseau Alumni gaea21.',
        ],
        image: evolutionImg,
    },
];

export default function ParcoursIntegration() {
    return (
        <section className="w-full bg-[#fbfbf9] text-[#1e293b] py-14 lg:py-20 px-6 md:px-12 font-sans">
            <div className="max-w-[1240px] mx-auto">

                {/* 1. Le trait vert horizontal au-dessus du titre (identique à Figma) */}
                <div className="w-12 h-1 bg-[#475734] rounded-full mb-6" />

                {/* 2. Titre de section */}
                <h2 className="text-base sm:text-lg lg:text-xl font-extrabold uppercase tracking-tight text-[#111827] mb-14 text-left">
                    COMMENT FONCTIONNE LE{' '}
                    <span className="text-[#8c8f3e]">PARCOURS D'INTÉGRATION</span> ?
                </h2>

                {/* 3. Timeline */}
                <div className="max-w-[940px] mx-auto lg:ml-0 flex flex-col">
                    {STEPS.map((item, index) => {
                        const isLast = index === STEPS.length - 1;

                        return (
                            <div key={item.step} className="flex items-start">

                                {/* Colonne GAUCHE : Illustration */}
                                <div className="w-[42%] flex justify-end pr-6 sm:pr-10 shrink-0">
                                    <div className="w-40 h-28 sm:w-52 sm:h-36 flex items-center justify-end">
                                        <img
                                            src={item.image}
                                            alt={item.title}
                                            className="max-h-full max-w-full object-contain"
                                        />
                                    </div>
                                </div>

                                {/* Colonne CENTRALE : Cercle numéroté + Ligne verticale */}
                                <div className="relative flex flex-col items-center shrink-0 self-stretch">
                                    {/* Rond vert olive avec chiffre blanc (Figma) */}
                                    <div className="w-8 h-8 rounded-full bg-[#8c8f3e] text-white text-xs sm:text-sm font-bold flex items-center justify-center shadow-xs z-10">
                                        {item.step}
                                    </div>

                                    {/* Ligne verticale verte reliant chaque pastille */}
                                    {!isLast && (
                                        <div className="w-[2px] bg-[#8c8f3e] flex-1 my-1" />
                                    )}
                                </div>

                                {/* Colonne DROITE : Textes fidèles à Figma */}
                                <div className="flex-1 pl-6 sm:pl-10 pb-12 sm:pb-16 text-left">
                                    <h3 className="text-xs sm:text-sm font-bold text-[#111827] leading-none mb-2">
                                        {item.title}
                                    </h3>

                                    {item.intro && (
                                        <p className="text-[11px] sm:text-xs text-[#52525b] leading-relaxed mb-2 max-w-md">
                                            {item.intro}
                                        </p>
                                    )}

                                    {item.bullets && item.bullets.length > 0 && (
                                        <ul className="space-y-1 text-[11px] text-[#71717a] leading-tight max-w-md">
                                            {item.bullets.map((bullet, idx) => (
                                                <li key={idx} className="flex items-start gap-1.5">
                                                    <span className="text-[#8c8f3e] text-xs leading-none mt-0.5">•</span>
                                                    <span>{bullet}</span>
                                                </li>
                                            ))}
                                        </ul>
                                    )}

                                    {item.conclusion && (
                                        <p className="text-[11px] text-[#52525b] leading-relaxed mt-2 max-w-md">
                                            {item.conclusion}
                                        </p>
                                    )}
                                </div>

                            </div>
                        );
                    })}
                </div>

            </div>
        </section>
    );
}