import React from 'react';

const ELearningSection = () => {
  return (
    <div className='new_fonctionalites_2025 elearningsection_block1'>
      {/* Left Content Container */}
      <div className='elearningsection_block2'>
        {/* Title + Description Container */}
        <div className='elearningsection_text_title'>
          {/* Title Section */}
          <div className='elearningsection_text_title_title'>
            <span className='elearningsection_text_title_title_span'>
              e-learning
            </span>
            <h1 className='elearningsection_text_title_title_h1'>
              Enrichissez vos formations avec des outils e-learning
            </h1>
          </div>

          {/* Description */}
          <p className='elearningsection_text_title_p'>
            Créez votre propre espace de formation en ligne et publiez vos cours facilement.
            <br /><br />
            Chaque apprenant, grâce à son identifiant et mot de passe, peut accéder à ses formations, interagir avec son enseignant via email ou réseaux sociaux et progresser à son rythme.
            <br /><br />
            Les enseignants disposent d'outils pour concevoir des travaux dirigés, suivre le temps de réponse des apprenants et corriger leurs exercices.
            <br /><br />
            Un tableau de bord détaillé permet d'analyser le parcours et la progression de chaque apprenant en temps réel.
          </p>
        </div>

        {/* Button */}
        <button className='elearningsection_text_bton'
          onMouseOver={(e) => {
            e.currentTarget.style.background = '#f5f5f5';
          }}
          onMouseOut={(e) => {
            e.currentTarget.style.background = 'transparent';
          }}
          onClick={() => {
            window.open(
              "/tarif/",
              '_self'
            );
          }}>
          <span className='elearningsection_text_bton_span'  >
            Découvrez nos tarifs
          </span>
        </button>
      </div>

      {/* Right Image */}
      <div className='elearningsection_img'>
        <img src="/img/fonctionnalite_img/img_lms.png" alt="Content illustration" className='contentsection_image' />
      </div>
    </div>
  );
};

export default ELearningSection;

