import React from 'react';
import '../styles/competences-evoluer.css';

const COMPETENCES_DATA = [
    {
        id: 1,
        title: "Compétences professionnelles",
        content: "Gestion de projet. Communication. Coordination. Recherche appliquée. Organisation. Développement commercial. Leadership. Gestion durable. Développement durable. Pensée stratégique."
    },
    {
        id: 2,
        title: "Compétences humaines",
        content: "Confiance. Autonomie. Résilience. Adaptabilité. Intelligence émotionnelle. Leadership. Collaboration. Prise de décision. Gestion du changement."
    },
    {
        id: 3,
        title: "Vision systémique",
        intro: "Comprendre les liens entre :",
        content: "les individus, les organisations, l'économie, les territoires, les communautés, les projets, et les enjeux de transition."
    }
];

export default function CompetencesEvoluer() {
    return (
        <section className="competences-section" id="competences-evoluer">
            <div className="competences-container">

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

                {/* En-tête */}
                <span className="competences-tag-top">Les trajectoires</span>
                <h2 className="competences-main-title">
                    Des compétences pour évoluer.
                </h2>

                {/* Grille des 3 cartes blanches avec .map() */}
                <div className="competences-grid">
                    {COMPETENCES_DATA.map((item) => (
                        <article key={item.id} className="competence-card">
                            <h3 className="competence-card-title">{item.title}</h3>
                            {item.intro && (
                                <p className="competence-card-intro">{item.intro}</p>
                            )}
                            <p className="competence-card-text">{item.content}</p>
                        </article>
                    ))}
                </div>

            </div>
        </section>
    );
}