// ForWhoSection — for whom this is / is not
function ForWhoSection() {
  const Check = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>;
  const Cross = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>;
  const G = ({ children }) => <em style={{ color: 'var(--tsc-gold-200)', fontStyle: 'normal', fontWeight: 600 }}>{children}</em>;

  return (
    <section id="forwho" className="mi-forwho">
      <div className="mi-section__head">
        <span className="mi-eyebrow">Pour qui</span>
        <h2>Est-ce que cette lecture<br/>est <em>pour toi</em> ?</h2>
      </div>
      <div className="mi-forwho__inner">
        <div className="mi-forwho__col for">
          <h3><span className="icon"><Check/></span> C'est pour toi si…</h3>
          <ul style={{ marginTop: '1.5rem' }}>
            <li><Check/><span>Tu as envie de vraiment comprendre <G>qui tu es</G>, <G>comment tu fonctionnes</G>, et <G>ce qui te rend unique</G>.</span></li>
            <li><Check/><span>Tu es dans une <G>transition</G> ou une <G>phase d'exploration</G>, et tu cherches à aller vers quelque chose qui a <G>plus de sens</G> pour toi.</span></li>
            <li><Check/><span>Ou tu as déjà fait un <G>premier travail sur toi</G>, mais tu veux continuer à te connaître pour <G>aligner tes décisions</G>.</span></li>
            <li><Check/><span>Tu veux que ton business soit un <G>miroir de qui tu es</G>, pour <G>te différencier</G> sur ton marché.</span></li>
            <li><Check/><span>Tu en as marre de <G>forcer contre ta propre nature</G> et de fonctionner selon ce que tu « devrais » être, et tu préfères avancer en fonction de <G>qui tu es vraiment</G>.</span></li>
          </ul>
        </div>
        <div className="mi-forwho__col not">
          <h3><span className="icon"><Cross/></span> Ce n'est pas pour toi si…</h3>
          <ul style={{ marginTop: '1.5rem' }}>
            <li><Cross/><span>Tu n'as pas 90 minutes au calme à t'offrir, juste pour toi.</span></li>
            <li><Cross/><span>Tu cherches quelqu'un qui va décider à ta place : je te livre les informations, mais c'est à toi de t'en servir pour opérer tes changements.</span></li>
            <li><Cross/><span>Tu as besoin de preuves scientifiques avant tout pour y croire : pas besoin d'adhérer à 100 %, mais viens au moins avec un minimum d'ouverture d'esprit.</span></li>
            <li><Cross/><span>Tu attends que ces outils choisissent à ta place : ils t'éclairent, mais tu gardes toujours ton libre arbitre.</span></li>
          </ul>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ForWhoSection });