// MEMORI — T.A.P.I. method
function Tapi() {
  const pillars = [
    { letter: 'T', name: 'Technique', q: 'Le « Quoi »', d: 'Conseils actionnables, immédiatement applicables. La preuve par l\'usage.' },
    { letter: 'A', name: 'Aspirationnel', q: 'Le « Comment »', d: 'Succès, récits de croissance et résultats client. La preuve sociale.' },
    { letter: 'P', name: 'Personnel', q: 'Le « Qui »', d: 'Anecdotes personnelles, storytelling humain. L\'aspérité qui crée le lien.' },
    { letter: 'I', name: 'Instructif', q: 'Le « Pourquoi »', d: 'Analyse des tendances, prise de hauteur. La vision qui marque les esprits.' },
  ];
  return (
    <section className="section tapi" id="methode">
      <div className="wrap">
        <div className="s-head fade-up">
          <span className="eyebrow">§ 03 : Méthode propriétaire</span>
          <h2>T.A.P.I., <em>notre méthode</em> propriétaire.</h2>
          <p className="lede">
            Quatre piliers de contenu qui se nourrissent l'un l'autre. Aucune publication
            n'est laissée au hasard, chacune sert une fonction précise dans la mécanique de marque.
          </p>
        </div>
        <div className="tapi-grid">
          {pillars.map(p => (
            <div className="tapi-pillar fade-up" key={p.letter}>
              <span className="tapi-letter">{p.letter}</span>
              <h3 className="tapi-name">{p.name}</h3>
              <p className="tapi-q">{p.q}</p>
              <p className="tapi-d">{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Tapi });