import React from 'react';
import alumniImg from '../../img/alumni-meeting.png'; // Place l'image exportée de Figma dans assets/img/
import '../../styles/alumniCommunaute.css';

const COLONNE_GAUCHE = [
    'Développez votre réseau.',
    'Partagez votre expérience.',
    'Contribuez à des projets.'
];

const COLONNE_DROITE = [
    'Participez à des communautés de pratique.',
    'Découvrez de nouvelles opportunités.',
    'Créez de nouvelles opportunités.'
];

export default function AlumniCommunaute() {
    return (
        <section className="alumni-section" id="communaute">
            <div className="alumni-container">

                {/* 1. Grande photo arrondie */}
                <div className="alumni-media">
                    <img
                        src={alumniImg}
                        alt="Membres de la communauté gaea21 en réunion de travail"
                        className="alumni-image"
                    />
                </div>

                {/* 2. Bloc textuel sous l'image */}
                <div className="alumni-content">
                    <p className="alumni-intro-title">
                        La fin d’une trajectoire ne marque pas la fin de l’aventure.
                    </p>

                    <div className="alumni-columns-grid">
                        <ul className="alumni-list">
                            {COLONNE_GAUCHE.map((item, index) => (
                                <li key={index}>{item}</li>
                            ))}
                        </ul>

                        <ul className="alumni-list">
                            {COLONNE_DROITE.map((item, index) => (
                                <li key={index}>{item}</li>
                            ))}
                        </ul>
                    </div>
                </div>

            </div>
        </section>
    );
}