import React from 'react';

// Imports des 3 icônes exportées
import baseIcon from '../../img/base.png';
import maitriseIcon from '../../img/maitrise.png';
import expertiseIcon from '../../img/expertise.png';

const NIVEAUX = [
    {
        number: '01',
        title: 'Bases',
        icon: baseIcon,
        description:
            'Compréhension des concepts. Premières applications avec accompagnement.',
    },
    {
        number: '02',
        title: 'Maîtrise opérationnelle',
        icon: maitriseIcon,
        description:
            'Capacité à réaliser de manière autonome. Contribution active aux projets.',
    },
    {
        number: '03',
        title: 'Expertise',
        icon: expertiseIcon,
        description:
            'Capacité à transmettre, accompagner et structurer les pratiques.',
    },
];

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

                {/* Grille adaptative : 1 col sur mobile/tablette portrait, 12 cols sur grand écran */}
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 sm:gap-12 lg:gap-14 items-center">

                    {/* ================================================================= */}
                    {/* 1. Bloc TEXTES GAUCHE (Prend 5 colonnes sur desktop)              */}
                    {/* ================================================================= */}
                    <div className="lg:col-span-5 text-left">
                        {/* Sur-titre vert olive */}
                        <p className="text-[11px] sm:text-xs md:text-sm font-extrabold uppercase tracking-wider text-[#7a8335] mb-2 sm:mb-3">
                            LE MODÈLE DE DÉVELOPPEMENT DES COMPÉTENCES
                        </p>

                        {/* Grand titre */}
                        <h2 className="text-xl sm:text-2xl lg:text-[28px] font-extrabold text-[#111827] leading-tight mb-4 sm:mb-6">
                            Des compétences observables, mesurables et transférables.
                        </h2>

                        {/* Paragraphes explicatifs */}
                        <div className="space-y-1.5 sm:space-y-2 text-xs sm:text-[13px] sm:-ml-2 text-[#4b5563] leading-relaxed mb-4 sm:mb-6">
                            <p>Chaque métier est composé de compétences.</p>
                            <p>Chaque compétence est composée de sous-compétences.</p>
                            <p>
                                Le développement professionnel consiste à faire évoluer progressivement ces compétences.
                            </p>
                            <p>
                                Chez gaea21, nous utilisons un système d’évaluation permettant d’identifier le niveau de maîtrise de chaque compétence.
                            </p>
                        </div>

                        {/* Conclusion en gras */}
                        <p className="text-xs sm:text-[13px] font-bold text-[#111827] leading-relaxed">
                            Cette approche permet de visualiser les progrès, construire des plans de développement et valoriser l’expérience acquise.
                        </p>
                    </div>

                    {/* ================================================================= */}
                    {/* 2. Bloc NIVEAUX DROITE (Prend 7 colonnes sur desktop)             */}
                    {/* ================================================================= */}
                    <div className="lg:col-span-7 w-full">
                        <div className="grid grid-cols-1 sm:grid-cols-3 gap-8 sm:gap-4 md:gap-6 lg:gap-8">
                            {NIVEAUX.map((item) => (
                                <div
                                    key={item.number}
                                    className="flex flex-col items-center text-center px-2"
                                >
                                    {/* Numéro gris clair 01 / 02 / 03 */}
                                    <span className="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-300 tracking-wider mb-2 sm:mb-3 lg:mb-4 select-none">
                                        {item.number}
                                    </span>

                                    {/* Rond avec l'icône verte */}
                                    <div className="w-20 h-20 sm:w-24 sm:h-24 md:w-28 md:h-28 rounded-full overflow-hidden flex items-center justify-center mb-3 sm:mb-4 shrink-0 shadow-xs">
                                        <img
                                            src={item.icon}
                                            alt={item.title}
                                            className="w-full h-full object-contain select-none pointer-events-none"
                                        />
                                    </div>

                                    {/* Titre du niveau */}
                                    <h3 className="text-sm sm:text-[15px] lg:text-base font-extrabold text-[#111827] mb-1.5 sm:mb-2">
                                        {item.title}
                                    </h3>

                                    {/* Courte description */}
                                    <p className="text-[11px] sm:text-xs text-[#52525b] leading-relaxed max-w-[220px]">
                                        {item.description}
                                    </p>
                                </div>
                            ))}
                        </div>
                    </div>

                </div>

            </div>
        </section>
    );
}