/* global React */
const VALUES = [
  ["Excellence terrain", "Discret en service, exigeant sur l'image."],
  ["Authenticité", "Du vrai, du vivant. Pas du contenu pour cocher une case."],
  ["Simplicité", "Une méthode claire, des livrables utiles, zéro blabla."],
  ["Régularité", "On produit pour durer, pas pour faire un coup."],
  ["Respect du rythme CHR", "On s'adapte à vos contraintes, pas l'inverse."],
];

function ValuesList() {
  return (
    <section className="fn-section" id="about">
      <div className="fn-section-head">
        <span className="eyebrow">À propos</span>
        <h2 className="display-m">Cinq valeurs.<br/>Aucune négociable.</h2>
      </div>
      <ul className="fn-values">
        {VALUES.map(([title, body], i) => (
          <li key={title} className="fn-value">
            <span className="fn-value-num">0{i + 1}</span>
            <h3>{title}</h3>
            <p>{body}</p>
          </li>
        ))}
      </ul>
    </section>
  );
}

window.ValuesList = ValuesList;