import React from 'react';

// Photos exportées
import referentImg from '../../img/referent.png';
import cordonateurImg from '../../img/cordonateur.png';
import rhImg from '../../img/rh.png';
import coachImg from '../../img/coach-img.png';
import coachePersonnelImg from '../../img/coache-personnel.png';

// Icônes exportées
import iconeReferent from '../../img/icone-referent.png';
import iconeCordonateur from '../../img/icone-cordonateur.png';
import iconeRh from '../../img/icone-rh.png';
import iconeJobCoach from '../../img/coach-job-icon.png';
import iconeCoachPersonnel from '../../img/icone-coach-personnel.png';

const ACTEURS = [
    {
        role: 'Référent',
        description: 'Développement des compétences.',
        photo: referentImg,
        icon: iconeReferent,
    },
    {
        role: 'Coordinateur Projet',
        description: 'Suivi opérationnel et intégration dans les équipes.',
        photo: cordonateurImg,
        icon: iconeCordonateur,
    },
    {
        role: 'RH Projet',
        description: 'Accompagnement administratif et suivi du parcours.',
        photo: rhImg,
        icon: iconeRh,
    },
    {
        role: 'Job Coach',
        description:
            'Construction du projet professionnel et développement de l’employabilité.',
        photo: coachImg,
        icon: iconeJobCoach,
    },
    {
        role: 'Coach Personnel',
        description:
            'Accompagnement des dimensions personnelles influençant la trajectoire.',
        photo: coachePersonnelImg,
        icon: iconeCoachPersonnel,
    },
];

export default function EquipeAccompagnement() {
    return (
        <section className="w-full bg-[#ffffff] text-[#1e293b] py-12 sm:py-16 lg:py-20 px-4 sm:px-8 md:px-12 font-sans">
            <div className="max-w-[1240px] mx-auto">

                {/* ========================================================= */}
                {/* En-tête de la section                                     */}
                {/* ========================================================= */}
                <div className="text-left mb-12 sm:mb-16">
                    {/* Trait vert horizontal */}
                    <div className="w-12 h-1 bg-[#475734] rounded-full mb-5" />

                    {/* Sur-titre vert olive */}
                    <p className="text-[11px] sm:text-xs md:text-sm font-extrabold uppercase tracking-wider text-[#8c8f3e] mb-2 sm:mb-3">
                        UNE ÉQUIPE AUTOUR DE CHAQUE PARTICIPANT
                    </p>

                    {/* Titre principal */}
                    <h2 className="text-xl sm:text-2xl lg:text-[28px] font-extrabold text-[#111827] leading-tight">
                        Selon les besoins,
                        <br />
                        plusieurs acteurs peuvent intervenir :
                    </h2>
                </div>

                {/* ========================================================= */}
                {/* Grille des 5 acteurs                                      */}
                {/* ========================================================= */}
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-8 sm:gap-6 lg:gap-5 justify-items-center">
                    {ACTEURS.map((item, index) => (
                        <div
                            key={index}
                            className="flex flex-col items-center text-center w-full max-w-[210px]"
                        >
                            {/* Conteneur photo avec découpe Figma */}
                            <div className="relative w-[155px] sm:w-[165px] h-[155px] sm:h-[165px] flex items-center justify-center">
                                <img
                                    src={item.photo}
                                    alt={item.role}
                                    className="w-full h-full object-contain select-none pointer-events-none"
                                />
                            </div>

                            {/* Pastille icône insérée dans l'échancrure basse */}
                            <div className="relative -mt-6 z-10 w-11 h-11 rounded-full bg-[#8c8f3e] flex items-center justify-center shadow-xs ring-4 ring-[#fbfbf9] overflow-hidden">
                                <img
                                    src={item.icon}
                                    alt={item.role}
                                    className="w-full h-full object-contain p-2"
                                />
                            </div>

                            {/* Rôle / Titre */}
                            <h3 className="text-sm sm:text-[15px] text-[#98984B] mt-3.5 mb-1.5 leading-tight">
                                {item.role}
                            </h3>

                            {/* Description */}
                            <p className="text-[11px] sm:text-xs font-extrabold text-[#050505] leading-relaxed">
                                {item.description}
                            </p>
                        </div>
                    ))}
                </div>

            </div>
        </section>
    );
}