import React from "react";
import styles from "./HomepageResults.module.css";

const ResultsList = [
  {
    title: "Alliez compétitivité et respect de l’environnement",   
    description: (
      <>
        Froggit est pensé pour ceux qui regardent vers l&apos;avenir et choisissent des solutions robustes, responsables, qui durent dans le temps.
      </>
    ),
    img: require("../../static/img/components/HomepageResults/environment.png").default,

  },     
  {
    title: "Intégrez facilement les pratiques DevOps",  
    description: (
      <>
        Répondez plus vite aux besoins de vos clients avec notre forge logicielle agile pensée par des techs pour les techs.
      </>
    ),
    img: require("../../static/img/components/HomepageResults/advance.png").default,

  },
  {
    title: "Bénéficiez d’un service de proximité",
    description: (
      <>
        Froggit c&apos;est aussi un service client en français et une équipe qui améliore régulièrement l&apos;offre en fonction de vos retours !
      </>
    ),
    img: require("../../static/img/components/HomepageResults/conversation.png").default,

  },
];

// eslint-disable-next-line
function Results({title, description, img, alt}) {
  return (
    <div className="sectionsReverse row">
      <div className={styles.resultsCenter}>
        <img className={styles.resultsImage} src={img} alt={alt}/>
      </div>  
      <div className="col col--5">
        <h3>{title}</h3>
        <p>{description}</p>
      </div>      
    </div>
    
  );
}

export default function HomepageResults() {
  return (
    <div className="homepage_section">
      <section className="sections container" id="results">      
        <h2 className="promise-title">Obtenez de meilleurs résultats, <br/>et pas seulement au niveau du code !</h2>
        <div>
          {ResultsList.map((props, idx) => (
            <Results key={idx} {...props} />
          ))}
        </div>
      </section>
    </div>
  );
}