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 */}
                <span className="projets-tag-top">Quelques exemples de projets</span>

                {/* Grille des 6 projets avec .map() */}
                <div className="projets-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 d'action CTA */}
                <div className="projets-action">
                    <a href="#tous-les-projets" className="btn-decouvrir-projets">
                        Découvrez les projets
                    </a>
                </div>

            </div>
        </section>
    );
}