const KeyMetrics = () => {
  const metrics = [
    {
      value: "10 ans",
      description: "d'expériences."
    },
    {
      value: "98%",
      description: "de satisfaction\nclient."
    },
    {
      value: "500+",
      description: "organismes de formation\naccompagnés."
    },
    {
      value: "20+",
      description: "partenariats avec des\ninstitutions."
    }
  ];

  const containerStyle = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: '100px 0',
    backgroundColor: '#ffffff',
    width: '100%'
  };

  const headerStyle = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: '4px',
    marginBottom: '40px'
  };

  const subtitleStyle = {
    fontFamily: 'DM Sans',
    fontSize: '16px',
    fontWeight: 700,
    color: '#0aa690',
    textTransform: 'uppercase',
    textAlign: 'center',
    lineHeight: '16px'
  };

  const titleStyle = {
    fontFamily: 'DM Sans',
    fontSize: '40px',
    fontWeight: 700,
    color: '#16274f',
    textAlign: 'center',
    lineHeight: '120%',
    maxWidth: '679px',
    margin: '20px 0 0 0'
  };

  const metricsContainerStyle = {
    display: 'flex',
    flexDirection: 'row',
    gap: '20px',
    justifyContent: 'center',
    maxWidth: '1116px',
    width: '100%'
  };

  const metricStyle = {
    display: 'flex',
    flexDirection: 'column',
    gap: '8px',
    width: '260px',
    alignItems: 'center'
  };

  const valueStyle = {
    fontFamily: 'Plus Jakarta Sans',
    fontSize: '60px',
    fontWeight: 700,
    color: '#0aa690',
    textAlign: 'center',
    lineHeight: '70px',
    margin: 0
  };

  const descriptionStyle = {
    fontFamily: 'Inter',
    fontSize: '14px',
    fontWeight: 400,
    color: '#16274f',
    textAlign: 'center',
    lineHeight: '160%',
    margin: 0,
    whiteSpace: 'pre-line'
  };

  return (
    <div className="KeyMetrics_containerStyle">
      <div className="KeyMetrics_headerStyle">
        <div className="KeyMetrics_subtitleStyle">Nos chiffres clés</div>
        <h2 className="KeyMetrics_titleStyle" >Quelques chiffres qui parlent de nous.</h2>
      </div>
      <div className="KeyMetrics_metricsContainerStyle">
        {metrics.map((metric, index) => (
          <div key={index} className="KeyMetrics_metricStyle">
            <div className="KeyMetrics_valueStyle">{metric.value}</div>
            <p className="KeyMetrics_descriptionStyle" >{metric.description}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default KeyMetrics;

