import React from 'react';
import '../styles/human-employment.css';
import hemImg from '../img/human-model-banner.png'; // Adapte le nom de ton image

const PILLIERS_DATA = [
    {
        id: 1,
        title: "La personne",
        items: ["Ses aspirations.", "Ses motivations.", "Ses besoins.", "Ses valeurs."]
    },
    {
        id: 2,
        title: "Les compétences",
        items: ["Celles qu'elle possède déjà.", "Celles qu'elle doit développer."]
    },
    {
        id: 3,
        title: "L'expérience",
        items: ["Les projets.", "Les réalisations.", "Les responsabilités."]
    },
    {
        id: 4,
        title: "Le réseau",
        items: ["Ses aspirations.", "Ses motivations.", "Ses besoins.", "Ses valeurs."]
    }
];

export default function HumanEmploymentModel() {
    return (
        <section className="hem-wrapper">
            <div className="hem-inner">

                {/* Paragraphe descriptif */}
                <p className="hem-description">
                    Chaque parcours est unique et ne peut pas se réduire à un simple intitulé de poste.
                    Nous considérons que les trajectoires durables se construisent lorsque quatre dimensions essentielles s'articulent.
                </p>

                {/* Grille forcée sur 4 colonnes */}
                <div className="hem-cards-grid">
                    {PILLIERS_DATA.map((p) => (
                        <div key={p.id} className="hem-card">
                            <h3 className="hem-card-title">{p.title}</h3>
                            <ul className="hem-card-list">
                                {p.items.map((it, idx) => (
                                    <li key={idx}>{it}</li>
                                ))}
                            </ul>
                        </div>
                    ))}
                </div>

                {/* Phrase d'accroche */}
                <p className="hem-phrase">
                    C’est cette approche que nous appelons le <strong>Human Employment Model</strong>.
                </p>

                {/* Cadre de l'image */}
                <div className="hem-banner-container">
                    <img
                        src={hemImg}
                        alt="Human Employment Model Table"
                        className="hem-banner-img"
                    />
                </div>

            </div>
        </section>
    );
}