import React from 'react';
import learningImg from '../../img/image-learning.png'; // Adapte avec le nom de l'image fournie

export default function LearningByDoing() {
    return (
        <section className="relative w-full min-h-[460px] lg:h-[500px] flex items-center overflow-hidden bg-neutral-950 font-sans">
            {/* 1. Image de fond positionnée sur la droite */}
            <img
                src={learningImg}
                alt="Learning by Doing gaea21"
                className="absolute inset-0 w-full h-full object-cover object-[75%_center] md:object-right z-0 pointer-events-none select-none"
            />

            {/* 2. Dégradé sombre pour la lisibilité du texte à gauche */}
            <div className="absolute inset-0 bg-gradient-to-r from-black via-black/85 to-transparent z-10 pointer-events-none" />

            {/* 3. Contenu textuel aligné sur la même grille que le reste de la page */}
            <div className="relative z-20 max-w-[1240px] w-full mx-auto px-6 md:px-12 py-14 lg:py-20">
                <div className="max-w-xl text-left">
                    {/* Surtitre doré / olive */}
                    <span className="text-[11px] sm:text-xs font-semibold uppercase tracking-widest text-[#a8ad48] block mb-3">
                        APPRENDRE EN FAISANT
                    </span>

                    {/* Titre principal */}
                    <h2 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white tracking-tight leading-tight mb-4">
                        Le Learning by Doing au cœur du modèle.
                    </h2>

                    {/* Paragraphe d'introduction */}
                    <p className="text-xs sm:text-[13px] text-gray-300 leading-relaxed mb-4">
                        Chez gaea21, nous considérons que les compétences se développent avant tout dans l’action.
                        Les participants contribuent à :
                    </p>

                    {/* Liste à puces */}
                    <ul className="space-y-1.5 text-xs sm:text-[13px] text-gray-200 leading-relaxed mb-5 pl-1">
                        <li className="flex items-center gap-2">
                            <span className="w-1.5 h-1.5 rounded-full bg-[#a8ad48]" />
                            <span>des projets réels ;</span>
                        </li>
                        <li className="flex items-center gap-2">
                            <span className="w-1.5 h-1.5 rounded-full bg-[#a8ad48]" />
                            <span>des équipes réelles ;</span>
                        </li>
                        <li className="flex items-center gap-2">
                            <span className="w-1.5 h-1.5 rounded-full bg-[#a8ad48]" />
                            <span>des outils réels ;</span>
                        </li>
                        <li className="flex items-center gap-2">
                            <span className="w-1.5 h-1.5 rounded-full bg-[#a8ad48]" />
                            <span>des problématiques réelles.</span>
                        </li>
                    </ul>

                    {/* Conclusion */}
                    <div className="space-y-1 text-xs sm:text-[13px] text-gray-300 leading-relaxed border-t border-white/10 pt-4">
                        <p>Ils apprennent en expérimentant.</p>
                        <p>Ils développent leur autonomie en contribuant.</p>
                        <p>Ils acquièrent de l’expérience en produisant des résultats concrets.</p>
                    </div>
                </div>
            </div>
        </section>
    );
}