// MEMORI — Constat
function Manifesto() {
  const problems = [
    {
      num: '01',
      title: 'Vous perdez des deals face à des inconnus.',
      desc: 'Le prospect ne vous connaît pas. Il prend le moins de risque possible et signe avec celui qu\'il a déjà vu prouver son expertise.',
    },
    {
      num: '02',
      title: 'Votre profil LinkedIn ne vous met pas en valeur.',
      desc: 'Ni votre vision, ni votre voix, ni votre avantage concurrentiel. Un profil qui ne rassure personne ne convertit personne.',
    },
    {
      num: '03',
      title: 'Vous avez essayé. Pour pas ou peu de résultat ?',
      desc: '2h d\'effort par post, et vous avez fini par abandonner. Ce n\'est pas de votre faute, vous manquez simplement de méthode.',
    },
  ];

  return (
    <section className="constat" id="approche">
      <div className="wrap">
        <span className="eyebrow fade-up">§ 01 : Le constat</span>
        <div className="constat-grid">
          <div className="constat-left fade-up">
            <h2 className="constat-h">
              Vous êtes expert.<br/>
              <em>Mais personne ne le sait.</em>
            </h2>
            <p className="constat-body">
              Vos concurrents moins compétents signent des clients, des talents vous
              échappent et des partenaires potentiels ne vous considèrent pas ?
            </p>
            <p className="constat-accent">
              Ce n'est pas un manque d'expertise, mais un manque de visibilité et d'autorité.
            </p>
          </div>
          <div className="constat-right">
            {problems.map(p => (
              <div className="constat-problem fade-up" key={p.num}>
                <span className="constat-num">{p.num}</span>
                <div className="constat-problem-body">
                  <h3 className="constat-problem-title">{p.title}</h3>
                  <p className="constat-problem-desc">{p.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Kpis() {
  const kpis = [
    { tag: '01', num: <><span className="plus">+</span>70</>, label: 'dirigeants accompagnés sur LinkedIn' },
    { tag: '02', num: 'Millions', label: 'de vues générées sur les profils accompagnés' },
    { tag: '03', num: <><span className="plus">+</span>5 ans</>, label: "d'expertise dédiée à LinkedIn" },
    { tag: '04', num: '50-100', label: 'points de contact qualifiés générés chaque mois' },
  ];
  return (
    <section className="kpis">
      <div className="kpis-grid">
        {kpis.map(k => (
          <div className="kpi fade-up" key={k.tag}>
            <span className="kpi-tag">{k.tag}</span>
            <h3 className="kpi-num">{k.num}</h3>
            <p className="kpi-label">{k.label}</p>
          </div>
        ))}
      </div>
    </section>
  );
}
Object.assign(window, { Manifesto, Kpis });