import React from 'react';
import '../styles/methodologie-etapes.css';

// Import des 6 icônes
import iconSearch from '../img/Search.png';
import iconUser from '../img/User Account.png';
import iconWrench from '../img/Frame 715.png';
import iconPlant from '../img/Tree Planting.png';
import iconElectrical from '../img/Electrical.png';
import iconCycle from '../img/Frame 719.png';

const ETAPES_DATA = [
    {
        step: "01",
        title: "Comprendre",
        description: "Identifier votre situation, vos aspirations, vos compétences et vos besoins.",
        icon: iconSearch,
        hasCircleBg: false // L'icône est brute, on lui applique le cercle CSS
    },
    {
        step: "02",
        title: "Structurer",
        description: "Construire une trajectoire réaliste, progressive et durable.",
        icon: iconUser,
        hasCircleBg: false
    },
    {
        step: "03",
        title: "Expérimenter",
        description: "Développer des compétences à travers des projets réels.",
        icon: iconWrench,
        hasCircleBg: true // Frame 715 contient déjà son cercle de fond
    },
    {
        step: "04",
        title: "Développer",
        description: "Renforcer son autonomie, ses capacités d'action et son leadership.",
        icon: iconPlant,
        hasCircleBg: false
    },
    {
        step: "05",
        title: "Connecter",
        description: "S'inscrire dans un écosystème bienveillant et activer son réseau.",
        icon: iconElectrical,
        hasCircleBg: false
    },
    {
        step: "06",
        title: "Évoluer",
        description: "Mesurer l'impact de sa transition et pérenniser son parcours.",
        icon: iconCycle,
        hasCircleBg: true // Frame 719 contient déjà son cercle de fond
    }
];

export default function MethodologieEtapes() {
    return (
        <section className="etapes-section">
            <div className="etapes-container">
                <div className="etapes-grid">
                    {ETAPES_DATA.map((item) => (
                        <div key={item.step} className="etape-item">

                            {/* Conteneur cercle + badge numéro */}
                            <div className="etape-circle-wrapper">
                                <div className={`etape-circle ${item.hasCircleBg ? 'transparent-bg' : ''}`}>
                                    <img
                                        src={item.icon}
                                        alt={item.title}
                                        className="etape-icon-img"
                                    />
                                </div>
                                <span className="etape-badge">{item.step}</span>
                            </div>

                            {/* Titre et description */}
                            <h3 className="etape-title">{item.title}</h3>
                            <p className="etape-desc">{item.description}</p>

                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}