import React from 'react';
import heroTrajectoireImg from'../../img/img-traject-banner.png';
import HuitTrajectoires from '../trajectoire/HuitTrajectoires';
import HumanEmploymentModel from '../trajectoire/HumanEmploymentModel';
import MethodologieEtapes from '../trajectoire/MethodologieEtapes';
import LearningByDoing from '../trajectoire/LearningByDoing';
import '../../styles/trajectoire.css';
import ExemplesProjets from '../trajectoire/ExemplesProjets';
import CompetencesEvoluer from '../trajectoire/CompetencesEvoluer';
import TrajectoireJamaisFigee from '../trajectoire/TrajectoireJamaisFigee';
import AlumniCommunaute from '../trajectoire/AlumniCommunaute';
import Footer from '../Footer';

export default function ConstruireTrajectoire() {
    return (
        <div className="trajectoire-page">
            {/* 1. Hero */}
            <section
                className="trajectoire-hero"
                style={{ backgroundImage: `url("${heroTrajectoireImg}")` }}
            >
                <div className="trajectoire-overlay" />
                <div className="trajectoire-hero-content">
                    <div className="trajectoire-text-wrapper">
                        <h1 className="trajectoire-title">
                            Construire sa <br />
                            trajectoire.
                        </h1>
                        <div className="trajectoire-paragraphs">
                            <p>Parfois, nous savons exactement où nous voulons aller.</p>
                            <p>Parfois, nous savons simplement que nous ne pouvons plus rester là où nous sommes.</p>
                            <p>Depuis plus de vingt ans, gaea21 accompagne les personnes dans ces moments de transition, d'évolution et de construction.</p>
                            <p>Non pas en leur proposant une solution unique.</p>
                        </div>
                        <div className="trajectoire-cta-group">
                            <a href="#questionnaire" className="btn-trajectoire-primary">
                                Trouver ma trajectoire
                            </a>
                            <a href="#approche" className="btn-trajectoire-secondary">
                                Découvrir notre approche
                            </a>
                        </div>
                    </div>
                </div>
            </section>

            {/* 2. Questionnaire Intro */}
            <section className="trajectoire-intro-questions" id="questionnaire">
                <div className="trajectoire-questions-container">
                    <span className="trajectoire-subtitle-green">
                        Trouvons ensemble la trajectoire qui vous correspond
                    </span>
                    <h2 className="trajectoire-heading-black">
                        Répondez à quelques questions.
                    </h2>
                    <div className="trajectoire-action-wrapper">
                        <a href="#demarrer" className="btn-trajectoire-commencer">
                            Commencer
                        </a>
                    </div>
                </div>
            </section>

            {/* 3. Les 8 Trajectoires */}
            <HuitTrajectoires />
            {/* 4. Approche Human Employment Model */}
            <HumanEmploymentModel />
            {/* 5. Méthodologie en 6 Étapes */}
            <MethodologieEtapes />
            {/* 6. Learning by Doing */}
            <LearningByDoing />
            {/* 7. Exemples de projets */}
            <ExemplesProjets />
            {/* 8. Des compétences pour évoluer */}
            <CompetencesEvoluer />
            {/* 9. Une trajectoire n'est jamais figée */}
            <TrajectoireJamaisFigee />
            {/* 10. Communauté & fin de parcours */}
            <AlumniCommunaute />

            {/* 11. Footer global du site */}
            <Footer />
        </div>
    );
}