import React from 'react';
import '../styles/exemples-projets.css';

const PROJETS_DATA = [
    {
        id: 1,
        title: 'Répertoire Vert',
        description: 'Développer l’économie locale durable.'
    },
    {
        id: 2,
        title: 'Green Index',
        description: 'Construire des outils d’évaluation et de transition.'
    },
    {
        id: 3,
        title: 'Recherche appliquée',
        description: 'Transformer les connaissances en solutions concrètes.'
    },
    {
        id: 4,
        title: 'Développement commercial',
        description: 'Créer des liens entre projets, entreprises et opportunités.'
    },
    {
        id: 5,
        title: 'Innovation territoriale',
        description: 'Contribuer à la transformation des territoires.'
    },
    {
        id: 6,
        title: 'Programmes de développement international',
        description: 'Participer à des initiatives liées à l’agriculture durable, à la création d’emplois, à la recherche et au développement territorial.'
    }
];

export default function ExemplesProjets() {
    return (
        <section className="projets-section" id="exemples-projets">
            <div className="projets-container">

                {/* Surtitre vert */}
                <span className="projets-uptitle">Quelques exemples de projets</span>

                {/* Grille des 6 cartes via .map() */}
                <div className="projets-cards-grid">
                    {PROJETS_DATA.map((projet) => (
                        <article key={projet.id} className="projet-card">
                            <h3 className="projet-card-title">{projet.title}</h3>
                            <p className="projet-card-desc">{projet.description}</p>
                        </article>
                    ))}
                </div>

                {/* Bouton CTA */}
                <div className="projets-action-wrap">
                    <a href="#projets" className="btn-projets-decouvrir">
                        Découvrez les projets
                    </a>
                </div>

            </div>
        </section>
    );
}