import React from 'react';
import hemBannerImg from '../../img/human-model-banner.png'; // Place ton export Figma dans assets/img/
import '../../styles/human-employment.css';

const DIMENSIONS_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-section" id="approche">
            <div className="hem-container">

                {/* Trait vert olive + Titre de section */}
                <header className="hem-header">
                    <span className="hem-line" aria-hidden="true" />
                    <span className="hem-uptitle">Les trajectoires</span>
                    <h2 className="hem-main-title">Huit trajectoires pour huit réalités.</h2>
                    <p className="hem-intro-text">
                        Chez gaea21, nous ne considérons pas l’insertion, l’emploi ou l’entrepreneuriat comme des objectifs isolés.<br />
                        Nous considérons que les trajectoires durables se construisent lorsque plusieurs dimensions évoluent ensemble.
                    </p>
                </header>

                {/* 4 Cartes de dimensions */}
                <div className="hem-cards-grid">
                    {DIMENSIONS_DATA.map((card) => (
                        <article key={card.id} className="hem-card">
                            <h3 className="hem-card-title">{card.title}</h3>
                            <div className="hem-card-content">
                                {card.items.map((line, idx) => (
                                    <p key={idx}>{line}</p>
                                ))}
                            </div>
                        </article>
                    ))}
                </div>

                {/* Conclusion / Phrase clé */}
                <footer className="hem-footer">
                    <p className="hem-footer-text">
                        C’est cette approche que nous appelons le <strong>Human Employment Model</strong>.
                    </p>
                </footer>

                {/* Grande Image Bannière (Mains et cubes en bois) */}
                <div className="hem-banner-wrapper">
                    <img 
                        src={hemBannerImg} 
                        alt="Construction et modélisation humaine gaea21" 
                        className="hem-banner-image" 
                    />
                </div>

            </div>
        </section>
    );
}