import React from 'react';

const ContentSection = ({
  title = "GESTION ADMNISTRATIVE",
  heading = "Simplifiez vos processus administratifs.",
  description_1 = `Gagnez du temps et réduisez les erreurs grâce à des outils performants et intuitifs.`,
  description_2 = `Gérez facilement le processus d'inscription des apprenants, les émargements (à distance ou en présentiel) et les évaluations.`,

  description_3 = `Cette solution centralisée vous permet également d'administrer les enseignants, le matériel pédagogique, le planning de formation et les agendas. `,

  description_4 = `Générez en un clic votre Bilan Pédagogique et Financier (BPF) et partagez vos formations en ligne grâce à un intranet intégré.`,

  buttonText = "Découvrez nos tarifs",
  imageSrc = "/img/fonctionnalite_img/img_gestion_admin.png",
  buttonText_link_url = "/tarif/",
}) => {
  const styles = {
    section: {
      display: 'flex',
      padding: '80px',
      gap: '80px',
      background: '#ffffff',
      width: '80%',
      marginLeft: 'auto',
      marginRight: 'auto',
      paddingTop: '10px',
    },
    contentContainer: {
      display: 'flex',
      flexDirection: 'column',
      width: '540px',
      gap: '32px',
    },
    titleContainer: {
      display: 'flex',
      flexDirection: 'column',
      gap: '4px',
      width: '100%',
    },
    categoryTitle: {
      fontFamily: 'DM Sans',
      fontSize: '16px',
      fontWeight: 700,
      lineHeight: '16px',
      color: '#3e6ee3',
      textTransform: 'uppercase',
    },
    mainHeading: {
      fontFamily: 'DM Sans',
      fontSize: '40px',
      fontWeight: 700,
      lineHeight: '120%',
      color: '#16274f',
      marginTop: '20px',
    },
    description: {
      fontFamily: 'Inter',
      fontSize: '16px',
      lineHeight: '24px',
      color: '#4b5162',
      opacity: 0.8,
      whiteSpace: 'pre-line',
    },
    button: {
      display: 'flex',
      padding: '12px 20px',
      borderRadius: '200px',
      border: '1px solid #c7c9ce',
      cursor: 'pointer',
      transition: 'all 0.3s ease',
      justifyContent: 'center',
    },
    buttonText: {
      fontFamily: 'DM Sans',
      fontSize: '16px',
      fontWeight: 700,
      color: '#4b5162',
      padding: '0 8px',

    },
    image: {
      width: '692px',
      height: '692px',
      borderRadius: '16px',
      objectFit: 'cover',
    }
  };

  return (
    <div className='new_fonctionalites_2025 contentsection_section' >
      <div className='contentsection_contentcontainer'>
        <div className='contentsection_titlecontainer'>
          <div className='contentsection_categorytitle'>{title}</div>
          <h1 className='contentsection_mainheading'>{heading}</h1>
        </div>
        <p className='contentsection_description'>{description_1}</p>
        <p className='contentsection_description'>{description_2}</p>
        <p className='contentsection_description'>{description_3}</p>
        <p className='contentsection_description'>{description_4}</p>

        <button className='contentsection_description contentsection_button'
          onMouseOver={(e) => {
            e.currentTarget.style.backgroundColor = '#f5f6f7';
          }}
          onMouseOut={(e) => {
            e.currentTarget.style.backgroundColor = 'transparent';
          }}

          onClick={() => {
            window.open(
              buttonText_link_url,
              '_self'
            );
          }}
        >
          <span className='contentsection_buttonText'>{buttonText}</span>
        </button>
      </div>
      <div className='contentsection_contentcontainer_img'>
        <img src={imageSrc} alt="Content illustration" className='contentsection_image' />
      </div>
    </div>
  );
};

export default ContentSection;

