// LectureSection — explains the 3 pillars
function LectureSection() {
  const pillars = [
    {
      tag: 'Outil 01',
      glyph: '⚯',
      title: 'Human Design',
      body: "L'outil qui te permet de comprendre comment tu fonctionnes vraiment et pas comme on t'a dit que tu devrais fonctionner. Tu comprends comment ton énergie fonctionne et comment la gérer au quotidien pour organiser tes journées, et enfin comment prendre les bonnes décisions pour toi."
    },
    {
      tag: 'Outil 02',
      glyph: '✦',
      title: 'Numérologie',
      body: "L'outil qui te permet d'identifier la thématique de la période que tu traverses pour savoir sur quoi te concentrer en priorité et avancer dans le sens du courant au lieu de ramer à contre-courant."
    },
    {
      tag: 'Outil 03',
      glyph: '☾',
      title: 'Astrologie',
      body: "L'outil qui te permet de comprendre qui tu es en profondeur : ta personnalité, tes forces, ce qui te fait vibrer. Tu comprends pourquoi tu es attirée par certaines choses, là où tu brilles naturellement, et comment faire de ce qui te rend unique ta force au quotidien."
    },
  ];
  return (
    <section id="lecture" className="mi-lecture">
      <div className="mi-lecture__inner">
        <div className="mi-section__head">
          <span className="mi-eyebrow">La lecture cosmique</span>
          <h2>Les <em>outils spirituels</em><br/>que j'aime utiliser.</h2>
          <p>Je croise Human Design, Numérologie et Astrologie pour te donner une lecture complète de qui tu es. Pas pour te mettre dans une case mais pour t'apporter plus de clarté et faire des choix alignés.</p>
        </div>
        <div className="mi-pillars">
          {pillars.map(p => (
            <article key={p.title} className="mi-pillar">
              <div className="mi-pillar__glyph">{p.glyph}</div>
              <span className="mi-pillar__tag">{p.tag}</span>
              <h3>{p.title}</h3>
              <p>{p.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LectureSection });