import React from 'react';
import '../styles/learning-by-doing.css';
import plantBannerImg from '../img/learning-by-doing.png'; // ou learning-by-doing.png

export default function LearningByDoing() {
    return (
        <section className="lbd-section" id="learning-by-doing">
            <div className="lbd-container">

                {/* Trait vert au-dessus */}
                <div className="lbd-green-line" aria-hidden="true" />

                {/* Surtitre */}
                <span className="lbd-tag-top">Les trajectoires</span>

                {/* Titre principal */}
                <h2 className="lbd-main-title">
                    Le Learning by Doing au cœur de l'expérience.
                </h2>

                {/* Paragraphe descriptif conforme au Figma */}
                <p className="lbd-description">
                    Depuis plus de vingt ans, gaea21 accompagne les personnes dans ces moments de transition, d'évolution et de construction.
                    Non pas en leur proposant une solution unique, mais en les aidant à comprendre leur situation, identifier leurs forces,
                    développer leurs compétences, acquérir de l'expérience et construire une trajectoire cohérente avec leurs aspirations et la réalité du monde qui les entoure.
                </p>

                {/* Image bannière arrondie */}
                <div className="lbd-image-wrapper">
                    <img
                        src={plantBannerImg}
                        alt="Le Learning by Doing au cœur de l'expérience - gaea21"
                        className="lbd-banner-img"
                    />
                </div>

            </div>
        </section>
    );
}