/* global React */
/* Page À propos — Catherine */

const PageApropos = () =>
<div className="v1">
    <style dangerouslySetInnerHTML={{ __html: V1_CSS + V1_CSS_PART2 + V1_CSS_PART3 + PAGE_CSS }}></style>
    <V1Nav active="apropos" />

    <section className="page-hero-split">
      <div className="phs-txt">
        <div className="ey">À propos · Catherine Martin · CAT(C)</div>
        <h1>26 ans <em>à voir plus loin que la douleur...</em></h1>
        <p>Thérapeute du sport, créatrice de la Méthode Athletik™. Coureuse, cycliste, skieuse. Je comprends ton mode de vie parce que c'est le mien aussi.</p>
      </div>
      <div className="phs-pic">
        <img src="assets/apropos-hero-foret.jpg" alt="Catherine Martin en course en sentier" style={{ objectPosition: 'center 30%' }} />
      </div>
    </section>

    <Wave from="#faf7f2" to="#f5f0e8" variant={0} />

    {/* BIO LONGUE — photo + texte */}
    <section className="page-sec beige">
      <div className="container">
        <div className="cath-grid" data-frame="F">
          <div className="cath-photo-wrap">
            <div className="cath-decor" style={{ display: 'none' }}></div>
            <div className="cath-photo">
              <img src="assets/catherine-bio-portrait.jpg" alt="Catherine Martin" />
            </div>
            <div className="cath-badge">
              <div className="num">26</div>
              <div className="lbl">ans d'expérience</div>
            </div>
          </div>
          <div className="cath-txt">
            <div className="ey">Ce qui m'anime</div>
            <h2>Voir la confiance revenir <em>dans le regard de quelqu'un</em> qui pensait avoir tout essayé.</h2>
            <p>
              Depuis plus de 26 ans, j'accompagne des personnes actives à comprendre leur corps, corriger la source de leurs limitations et retrouver un corps sur lequel elles peuvent compter.
            </p>
            <p>
              Quand je te demande comment était ta dernière sortie, ce n'est pas une formule de politesse — je sais ce que ça représente, et ce que ça fait quand le corps ne suit plus.
            </p>
            <div className="cath-quote">
              « Je ne traite pas des dossiers. J'accompagne des personnes — avec leur histoire, leur sport, leurs objectifs, leur vie. »
            </div>
            <p>
Au fil de ces années, j'ai accompagné des athlètes à tous les niveaux de la compétition — du secondaire au cégep, de l'universitaire à l'équipe nationale.
          </p>
            <div className="cath-creds">
              <div className="cath-cred">CTSQ</div>
              <div className="cath-cred">ACTS</div>
              <div className="cath-cred">APMSQ</div>
              <div className="cath-cred">ESL</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <Wave from="#f5f0e8" to="#faf7f2" variant={1} />

    {/* APPROCHE DIFFÉRENCIANTE */}
    <section className="page-sec cream">
      <div className="container">
        <div className="page-sec-inner">
          <div className="ey ey--blue">Mon approche</div>
          <h2>Ce qui rend mon travail <em>différent.</em></h2>
          <p style={{ maxWidth: 720 }}>
            Je ne travaille pas seulement <em style={{ fontStyle: 'italic' }}>sur</em> le corps : je travaille <em style={{ fontStyle: 'italic', color: 'var(--orange)' }}>avec</em> lui — et avec tout ce qui le gouverne.
          </p>
          <p style={{ maxWidth: 720 }}>Après 26 ans de pratique et plusieurs formations complémentaires, j'ai arrêté de croire qu'on règle durablement une douleur en ne regardant que l'endroit où elle se manifeste. Une douleur tenace cache rarement un simple problème de tissu. Elle vient de plus loin : de la commande du mouvement, des compensations accumulées, d'un système nerveux réactif. C'est là que tout se joue.

        </p>
          <p style={{ maxWidth: 720, marginTop: 24, fontStyle: 'italic', color: 'var(--dark)' }}>Mon travail intègre quatre niveaux rarement réunis :</p>
          <div className="cards-3" style={{ gridTemplateColumns: '1fr 1fr', marginTop: 24 }}>
            <div className="card-num">
              <div className="n">01</div>
              <h3>Le corps physique</h3>
              <p>Évaluation fonctionnelle, travail manuel, réadaptation par le mouvement. La base solide.</p>
            </div>
            <div className="card-num">
              <div className="n">02</div>
              <h3>Les fascias et la respiration</h3>
              <p>Les tensions profondes que les muscles n'expliquent pas toujours, et le souffle comme outil de régulation.</p>
            </div>
            <div className="card-num">
              <div className="n">03</div>
              <h3>Le contrôle moteur et les compensations</h3>
              <p>Ton corps a appris à contourner le problème depuis des années. On reprogramme les patrons de mouvement pour le résoudre vraiment.</p>
            </div>
            <div className="card-num">
              <div className="n">04</div>
              <h3>Le système nerveux</h3>
              <p>Parce qu'une douleur qui persiste n'est pas toujours un problème de tissu. C'est parfois un système nerveux qui protège encore, qui n'a pas reçu le signal que c'est sécuritaire de bouger autrement.</p>
            </div>
          </div>
          <div className="tagline-box" style={{ marginTop: 36 }}>
            Ce n'est pas de la magie. C'est de la cohérence — traiter l'humain complet plutôt que de passer d'un professionnel à l'autre en espérant que quelqu'un trouve une solution rapide.
          </div>
        </div>
      </div>
    </section>

    <Wave from="#faf7f2" to="#2B72B5" variant={3} height={100} />

    {/* CTA */}
    <section className="page-cta" id="cta">
      <div className="container">
        <div className="page-cta-inner">
          <div>
            <div className="ey" style={{ color: 'var(--orange-soft, #f4956e)', fontSize: "24px" }}>Travaillons ensemble</div>
            <h2 style={{ fontSize: "16px" }}>Prêt à comprendre ton corps <em style={{ fontSize: "16px" }}>  et à en reprendre le contrôle ?
            </em></h2>
            <p style={{ fontSize: "14px" }}>L'appel découverte est gratuit, 15 minutes, sans pression. On regarde ta situation et on voit si c'est la bonne direction pour toi.</p>
          </div>
          <div className="page-cta-card">
            <h3>Appel découverte</h3>
            <div className="sub">15 min · gratuit · sans engagement</div>
            <ul>
              <li>{Icon.check(16)}<span>On clarifie ta situation</span></li>
              <li>{Icon.check(16)}<span>On définit ensemble la bonne direction</span></li>
              <li>{Icon.check(16)}<span>Sans pression, sans engagement</span></li>
            </ul>
            <a href="rendez-vous.html" className="btn btn--orange">
              Réserve ton appel gratuit
              {Icon.arrow(14)}
            </a>
          </div>
        </div>
      </div>
    </section>

    <V1Footer />
  </div>;

window.PageApropos = PageApropos;