import React from 'react';
import '../styles/huitTrajectoires.css';

const TRAJECTOIRES = [
    {
        id: 1,
        color: '#436034', // Vert foncé
        tag: 'Trouver un emploi',
        title: 'Insertion Professionnelle',
        points: [
            'Transformer ses compétences, son savoir-faire et ses opportunités professionnelles.',
            'Développer son employabilité.',
            'Construire son positionnement.',
            'Accéder au marché du travail.'
        ]
    },
    {
        id: 2,
        color: '#3B82F6', // Bleu
        tag: 'Réaliser un stage ou acquérir une première expérience',
        title: 'Étudiants, Stages & Première Expérience Professionnelle',
        points: [
            'Transformer des études en expérience professionnelle.',
            'Développer des compétences concrètes.',
            'Construire un premier réseau.',
            'Découvrir des métiers.',
            'Préparer son entrée dans la vie professionnelle.'
        ]
    },
    {
        id: 3,
        color: '#F59E0B', // Jaune ambré
        tag: 'Revenir après une interruption',
        title: 'Retour à l’Emploi',
        points: [
            'Retrouver progressivement le rythme après une maladie, un burn-out, un congé parental, un accident de vie ou un changement de situation personnelle.',
            'Retrouver la confiance.',
            'Réactiver son réseau.',
            'Réactiver ses projets.'
        ]
    },
    {
        id: 4,
        color: '#EA580C', // Orange
        tag: 'Me reconvertir',
        title: 'Reconversion Professionnelle',
        points: [
            'Réinventer un nouveau chapitre professionnel sans repartir de zéro.',
            'Explorer de nouvelles possibilités.',
            'Transformer ses acquis.',
            'Développer les compétences nécessaires à son nouveau métier.'
        ]
    },
    {
        id: 5,
        color: '#8B5CF6', // Violet
        tag: 'Développer mes compétences',
        title: 'Compétences, Expérience & Évolution Professionnelle',
        points: [
            'Développer ses compétences.',
            'Développer des compétences recherchées.',
            'Apprendre en faisant.',
            'S’entraîner à la prise de responsabilité.'
        ]
    },
    {
        id: 6,
        color: '#D97706', // Ocre / Caramel
        tag: 'Construire mon projet',
        title: 'Orientation, Coaching & Construction de Trajectoire',
        points: [
            'Définir ses objectifs.',
            'Clarifier sa vision professionnelle.',
            'Identifier une direction.',
            'Structurer son évolution à court, moyen et long terme.'
        ]
    },
    {
        id: 7,
        color: '#1F2937', // Noir / Gris foncé
        tag: 'Développer mon leadership',
        title: 'Leadership, Coordination & Management Durable',
        points: [
            'Apprendre à coordonner.',
            'Transmettre.',
            'Développer des équipes, des projets et des visions stratégiques.'
        ]
    },
    {
        id: 8,
        color: '#92400E', // Brun
        tag: 'Lancer un projet ou une activité',
        title: 'Entrepreneuriat & Création d’Activité',
        points: [
            'Tester une idée, un projet, une expertise.',
            'Développer son autonomie.',
            'Créer de la valeur.',
            'Construire son activité.'
        ]
    }
];

export default function HuitTrajectoires() {
    return (
        <section className="trajectoires-section" id="trajectoires">
            <div className="trajectoires-wrapper">
                <header className="trajectoires-header">
                    <span className="trajectoires-line" aria-hidden="true"></span>
                    <span className="trajectoires-uptitle">Les trajectoires</span>
                    <h2 className="trajectoires-main-title">Huit trajectoires pour huit réalités.</h2>
                </header>

                <div className="trajectoires-cards-grid">
                    {TRAJECTOIRES.map((item) => (
                        <article key={item.id} className="trajectoire-block-card">
                            <div className="trajectoire-card-top">
                                <span
                                    className="trajectoire-indicator-badge"
                                    style={{ backgroundColor: item.color }}
                                    aria-hidden="true"
                                />
                                <p className="trajectoire-tagline">{item.tag}</p>
                            </div>

                            <h3 className="trajectoire-item-title">{item.title}</h3>

                            <ul className="trajectoire-points-list">
                                {item.points.map((point, index) => (
                                    <li key={index}>{point}</li>
                                ))}
                            </ul>

                            <div className="trajectoire-card-footer">
                                <a href="#decouvrir" className="btn-trajectoire-decouvrir">
                                    Découvrir
                                </a>
                            </div>
                        </article>
                    ))}
                </div>
            </div>
        </section>
    );
}