import React from 'react';

// Imports des icônes fournies (ajuste le chemin vers ton dossier d'images)
import etudiantIcon from '../../img/etudiant.png';
import expertIcon from '../../img/expert.png';
import entrepreneurIcon from '../../img/entrepreneur.png';
import personneIcon from '../../img/personne.png';
import professionnelsIcon from '../../img/professionnels.png';
import retraiteIcon from '../../img/retraite.png';

// Données organisées par colonnes pour respecter la hauteur et l'agencement Figma
const COLUMNS_DATA = [
    {
        colId: 'col-1',
        cards: [
            {
                id: 'etudiants',
                title: 'Étudiants',
                description:
                    'Pour réaliser un stage, développer une première expérience professionnelle ou compléter leur formation.',
                icon: etudiantIcon,
            },
            {
                id: 'personnes-transition',
                title: 'Personnes en transition',
                isList: true,
                listItems: [
                    'Retour à l’emploi.',
                    'Reconversion.',
                    'Réorientation.',
                    'Évolution professionnelle.',
                ],
                icon: personneIcon,
                isTall: true, // Carte plus haute
            },
        ],
    },
    {
        colId: 'col-2',
        cards: [
            {
                id: 'jeunes-diplomes',
                title: 'Jeunes diplômés',
                description:
                    'Pour renforcer leur employabilité et préparer leur entrée sur le marché du travail.',
                icon: etudiantIcon, // Ou l'icône jeune diplômé si distincte
            },
            {
                id: 'entrepreneurs',
                title: 'Entrepreneurs',
                description:
                    'Pour développer un projet, une activité ou une initiative à impact.',
                icon: entrepreneurIcon,
            },
            {
                id: 'retraites',
                title: 'Retraités',
                description:
                    'Pour mettre leur expérience au service de projets utiles et porteurs de sens.',
                icon: retraiteIcon,
            },
        ],
    },
    {
        colId: 'col-3',
        cards: [
            {
                id: 'professionnels',
                title: 'Professionnels',
                description:
                    'Pour développer de nouvelles compétences, élargir leur expérience ou préparer une évolution de carrière.',
                icon: professionnelsIcon,
            },
            {
                id: 'experts-specialistes',
                title: 'Experts et spécialistes',
                description:
                    'Pour transmettre leurs compétences, accompagner des projets, bénéficier de mandats ou contribuer à l’écosystème.',
                icon: expertIcon,
                isTall: true,
            },
        ],
    },
];

export default function QuiPeutRejoindre() {
    return (
        <section className="w-full bg-[#fbfbf9] text-[#1e293b] py-14 lg:py-20 px-6 md:px-12 lg:px-20 font-sans">
            <div className="max-w-[1320px] mx-auto">
                {/* Trait de repère vert olive */}
                <div className="w-12 h-1 bg-[#475734] rounded-full mb-6" />

                {/* Titre de section */}
                <h2 className="text-2xl sm:text-3xl font-extrabold text-[#111827] uppercase tracking-tight mb-10">
                    QUI PEUT <span className="text-[#7a8035]">REJOINDRE</span> GAEA21 ?
                </h2>

                {/* Grille 3 colonnes responsive */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-start">
                    {COLUMNS_DATA.map((column) => (
                        <div key={column.colId} className="flex flex-col gap-6">
                            {column.cards.map((card) => (
                                <div
                                    key={card.id}
                                    className={`rounded-2xl border border-[#e5e2d6] bg-white p-6 flex items-start gap-4 transition-all duration-200 shadow-sm hover:shadow-md ${card.isTall ? 'min-h-[190px]' : ''
                                        }`}
                                >
                                    {/* Icône PNG dédiée */}
                                    <img
                                        src={card.icon}
                                        alt={card.title}
                                        className="w-12 h-12 object-contain shrink-0"
                                    />

                                    {/* Contenu textuel */}
                                    <div className="flex-1">
                                        <h3 className="text-base sm:text-lg font-bold text-[#111827] mb-2 leading-snug">
                                            {card.title}
                                        </h3>

                                        {card.isList ? (
                                            <ul className="space-y-1.5 text-xs sm:text-[13px] text-[#4b5563] leading-relaxed">
                                                {card.listItems.map((item, idx) => (
                                                    <li key={idx} className="list-none">
                                                        {item}
                                                    </li>
                                                ))}
                                            </ul>
                                        ) : (
                                            <p className="text-xs sm:text-[13px] text-[#6b7280] leading-relaxed">
                                                {card.description}
                                            </p>
                                        )}
                                    </div>
                                </div>
                            ))}
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}