import React from 'react';
import CommentMarche_Card_Title from './CommentMarche_Card_Title';
import CommentMarche_ListCard from './CommentMarche_ListCard';
import ButtonText from './ButtonText';

const CommentMarche = () => {
  return (
    <div className='CommentMarche_block1' >
      <div style={{ flexGrow: 1 }}>
        <CommentMarche_Card_Title />
      </div>
      <div className='CommentMarche_block2'>
        <CommentMarche_ListCard imageUrl="/img/home_page_marge_img1.png" title="Configuration de votre espace" buttonText="Découvrir" description="Nous vous accompagnons dans la création et paramétrage de votre espace" type="1" />
        <CommentMarche_ListCard imageUrl="/img/home_page_marge_img_tiret_horiz.png" title="" buttonText="" description="" type="0" />
        <CommentMarche_ListCard imageUrl="/img/home_page_marge_img2.png" title="Gestion de vos formations" buttonText="Découvrir" description="Organisez vos formations, suivez les progrès de vos apprenants, et automatisez vos tâches administratives" type="1" />
        <CommentMarche_ListCard imageUrl="/img/home_page_marge_img_tiret_horiz.png" title="" buttonText="" description="" type="0" />
        <CommentMarche_ListCard imageUrl="/img/home_page_marge_img3.png" title="Développez vos activités" buttonText="Découvrir" description="Exploitez les données et fonctionnalités avancées pour améliorer vos offres" type="1" />

      </div>
      <div style={{ flexGrow: 1, display: 'flex', justifyContent: 'center' }}
       onClick={() => {
        window.open(
          "/fonctionnalites/",
          '_self'
      );
      }}
      >
        <ButtonText text="Découvrir nos fonctionnalités" />
      </div>
    </div>
  );
};

export default CommentMarche;

