import React from 'react';

const ELearningSection = () => {
  return (
    <div style={{
      padding: '80px',
      display: 'flex',
      flexDirection: 'row',
      gap: '80px',
      background: '#ffffff',
      width: '100%',
      maxWidth: '1280px',
      margin: '0 auto'
    }}>
      {/* Left Content Container */}
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '32px',
        width: '540px'
      }}>
        {/* Title + Description Container */}
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '20px',
          width: '100%'
        }}>
          {/* Title Section */}
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '4px'
          }}>
            <span style={{
              color: '#3E6EE3',
              fontFamily: 'DM Sans',
              fontSize: '16px',
              fontWeight: 700,
              lineHeight: '16px',
              textTransform: 'uppercase'
            }}>
              e-learning
            </span>
            <h1 style={{
              color: '#16274F',
              fontFamily: 'DM Sans',
              fontSize: '40px',
              fontWeight: 700,
              lineHeight: '120%',
              margin: '20px 0 0 0'
            }}>
              Enrichissez vos formations avec des outils e-learning
            </h1>
          </div>

          {/* Description */}
          <p style={{
            color: '#4B5162',
            fontFamily: 'Inter',
            fontSize: '16px',
            fontWeight: 400,
            lineHeight: '24px',
            opacity: 0.8,
            margin: 0
          }}>
            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 
          style={{
            display: 'flex',
            padding: '12px 20px',
            alignItems: 'center',
            borderRadius: '200px',
            border: '1px solid #C7C9CE',
            background: 'transparent',
            cursor: 'pointer',
            width: 'fit-content'
          }}
          onMouseOver={(e) => {
            e.currentTarget.style.background = '#f5f5f5';
          }}
          onMouseOut={(e) => {
            e.currentTarget.style.background = 'transparent';
          }}
        >
          <span style={{
            color: '#4B5162',
            fontFamily: 'DM Sans',
            fontSize: '16px',
            fontWeight: 700,
            padding: '0 8px'
          }} 
          onClick={() => {
            window.open(
              "/tarif/",
              '_self'
          );
          }}
          >
            Découvrez nos tarifs
          </span>
        </button>
      </div>

      {/* Right Image */}
      <div style={{
        width: '692px',
        height: '692px',
        borderRadius: '16px',
        backgroundImage: 'url(/img/elearning_section_img.png)',
        backgroundSize: 'cover',
        backgroundPosition: 'center'
      }} />
    </div>
  );
};

export default ELearningSection;

