import React from 'react';
import routeImg from '../img/trajectoire-route.png'; // Place ton image exportée de Figma dans assets/img/
import '../styles/trajectoireJamaisFigee.css';

const TEXTES_TRANSITIONS = [
    'Un étudiant peut devenir coordinateur.',
    'Un coordinateur peut devenir référent.',
    'Un référent peut devenir entrepreneur.',
    'Un entrepreneur peut devenir mentor.',
    'Une personne en reconversion peut découvrir une vocation inattendue.',
    'Une première expérience peut ouvrir une carrière entière.'
];

export default function TrajectoireJamaisFigee() {
    return (
        <section className="trajectoire-figee-section" id="trajectoire-evolutive">
            <div className="trajectoire-figee-container">

                {/* Colonne gauche : Contenu textuel */}
                <div className="trajectoire-figee-content">
                    <header className="trajectoire-figee-header">
                        <span className="trajectoire-figee-line" aria-hidden="true" />
                        <span className="trajectoire-figee-uptitle">Les trajectoires</span>
                        <h2 className="trajectoire-figee-title">Une trajectoire n'est jamais figée.</h2>
                    </header>

                    <div className="trajectoire-figee-list">
                        {TEXTES_TRANSITIONS.map((texte, idx) => (
                            <p key={idx} className="trajectoire-figee-step">{texte}</p>
                        ))}
                    </div>

                    <div className="trajectoire-figee-conclusion">
                        <p>
                            C'est pourquoi les trajectoires gaea21<br />
                            ne sont pas conçues comme des programmes isolés. Elles sont conçues comme des étapes<br />
                            d'un parcours d'évolution.
                        </p>
                    </div>
                </div>

                {/* Colonne droite : Image route */}
                <div className="trajectoire-figee-media">
                    <img
                        src={routeImg}
                        alt="Route sinueuse traversant la nature"
                        className="trajectoire-figee-image"
                    />
                </div>

            </div>
        </section>
    );
}