/* global React */
/* Page Méthode Athletik™ */

const { useState: useStateMV } = React;

const Accordion = () => {
  const [open, setOpen] = useStateMV(0);
  const piliers = [
  { t: "Gestion du temps", d: "Créer des habitudes réalistes pour bouger et récupérer, sans empiéter sur le reste de ta vie." },
  { t: "Conditionnement cardiovasculaire", d: "Développer intelligemment tes systèmes énergétiques pour que chaque entraînement te rapproche de ton sport et de tes objectifs." },
  { t: "Réflexes et proprioception", d: "Améliorer ta coordination, ton contrôle et ta stabilité pour un corps qui réagit sans y penser, même à l'imprévu." },
  { t: "Gestion du stress", d: "Comprendre et gérer les signaux de ton corps pour prévenir les blessures, autant physiques que mentales." },
  { t: "Correction des déséquilibres", d: "Identifier et corriger les asymétries biomécaniques avant qu'elles ne provoquent une blessure." },
  { t: "Habiletés fondamentales", d: "Reconstruire tes patrons de mouvement de base, la fondation sur laquelle tout le reste repose." },
  { t: "Stabilité biomécanique", d: "Bâtir ta force profonde et ton contrôle moteur pour des articulations solides et stables, même sous la fatigue." },
  { t: "Activation et récupération", d: "Préparer ton corps à l'effort et accélérer ta récupération pour enchaîner les sorties sans craindre le lendemain." },
  { t: "Respiration", d: "Développer une respiration efficace pour soutenir la stabilité de ton tronc, ton mouvement et ta récupération." },
  { t: "Gestion du mental", d: "Équilibrer ton mental avec des outils concrets, parce que ce qui se passe dans ta tête se reflète directement dans ton corps." },
  { t: "Nutrition et hydratation", d: "Trouver ce qui fonctionne pour toi, avec des réponses adaptées à ton corps plutôt que des règles universelles." },
  { t: "Sommeil", d: "Optimiser ton sommeil chaque jour pour te réveiller vraiment reposé et laisser ton corps faire son travail de réparation." }];

  return (
    <div className="accordion">
      {piliers.map((p, i) =>
      <div key={i} className={`acc-item ${open === i ? 'open' : ''}`}>
          <button className="acc-trigger" onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="acc-num">{i + 1}</div>
            <span className="acc-title">{p.t}</span>
            <svg className="acc-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M6 9l6 6 6-6" />
            </svg>
          </button>
          <div className="acc-body"><p>{p.d}</p></div>
        </div>
      )}
    </div>);

};

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

    <section className="page-hero-split">
      <div className="phs-txt">
        <div className="ey">La Méthode Athletik™</div>
        <h1>Un corps sur lequel<br />tu peux <em>vraiment</em> compter.</h1>
        <p>La Méthode Athletik™ est un accompagnement structuré de 12 mois pour passer des douleurs récurrentes à un corps fiable, autonome et confiant.</p>
        <div className="tagline">Tu passes de « je gère » à « je vis ».</div>
      </div>
      <div className="phs-pic">
        <img src="assets/sommet.jpg" alt="Atteindre ses sommets — Méthode Athletik™" />
      </div>
    </section>

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

    {/* Modalités — le texte demandé */}
    <section className="page-sec beige">
      <div className="container">
        <div className="page-sec-inner" style={{ textAlign: 'center' }}>
          <div className="ey">Format & modalités</div>
          <h2>Un accompagnement <em>sur mesure</em>, sur 12 mois.</h2>
          <p style={{ margin: '0 auto 16px', fontSize: '18px', lineHeight: 1.7, maxWidth: 700 }}>
            Un accompagnement de 12 mois, sur mesure, avec une seule professionnelle. Les modalités et le tarif se discutent à l'appel découverte — quand on a établi ensemble que c'est la bonne direction pour toi.
          </p>
        </div>
      </div>
    </section>

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

    {/* Pour qui */}
    <section className="page-sec cream">
      <div className="container">
        <div className="page-sec-inner">
          <div className="ey">Pour qui</div>
          <h2>La Méthode Athletik™ est pour toi si...</h2>
          <div className="check-list">
            <div className="check-line">{Icon.check(20)}<span>Tes douleurs reviennent dès que tu reprends l'intensité — malgré tout ce que tu as déjà essayé.</span></div>
            <div className="check-line">{Icon.check(20)}<span>Tu te limites sans le vouloir et tu commences à te demander si c'est ça, vieillir.</span></div>
            <div className="check-line">{Icon.check(20)}<span>Tu es prêt à investir en toi pendant 12 mois pour avoir une qualité de vie durable.</span></div>
            <div className="check-line">{Icon.check(20)}<span>Tu veux comprendre ton corps — pas juste recevoir des traitements à répétition.</span></div>
          </div>
          <div className="tagline-box">
            L'objectif est de te rendre autonome et t'apprendre à comprendre ton corps — au bout des 12 mois, tu auras un livre avec ton mode d'emploi personnel pour vivre sans douleur.
          </div>
        </div>
      </div>
    </section>

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

    {/* 3 étapes */}
    <section className="page-sec beige">
      <div className="container">
        <div className="page-sec-inner" style={{ textAlign: 'center' }}>
          <div className="ey">Comment ça fonctionne</div>
          <h2>Trois étapes <em>pour commencer.</em></h2>
          <div className="cards-3">
            <div className="card-num">
              <div className="n">01</div>
              <h3>L'appel découverte</h3>
              <p>Gratuit par téléphone· 15 minutes. Je comprends ta situation et on voit ensemble si la Méthode est la bonne option pour toi. Sinon, je te dirige vers la bonne ressource.</p>
            </div>
            <div className="card-num">
              <div className="n">02</div>
              <h3>Consultation individuelle</h3>
              <p>Gratuit · en personne. Une rencontre ou on retrace ton histoire, on cible la source du problème et tu repars avec des premières pistes de solution. Tu choisis de passer à l'action - et moi, de t'accompagner jusqu'au bout.</p>
            </div>
            <div className="card-num">
              <div className="n">03</div>
              <h3>L'accompagnement Méthode Athletik™</h3>
              <p>12 mois · personnalisé. On commence le vrai travail : un programme sur mesure sur les 12 piliers, à ton rythme, avec un objectif clair et des résultats mesurables.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

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

    {/* 12 piliers - accordion */}
    <section className="page-sec cream" id="piliers">
      <div className="container">
        <div className="page-sec-inner" style={{ textAlign: 'center' }}>
          <div className="ey">La Méthode Athletik™</div>
          <h2>Les 12 piliers d'un corps <em>qui dure.</em></h2>
          <p style={{ margin: '0 auto 16px', maxWidth: 600 }}>
            La plupart des approches choisissent un angle. La Méthode Athletik™ travaille sur les 12 — parce que ton corps, lui, ne fonctionne pas en silos.
          </p>
        </div>
        <Accordion />
      </div>
    </section>

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

    {/* OBJECTIF — bandeau texte (photo retirée) */}
    <section className="page-sec beige">
      <div className="container">
        <div className="page-sec-inner" style={{ textAlign: 'center' }}>
          <div className="ey">L'objectif</div>
          <h2>Atteindre tes sommets. <em>Pour vrai.</em></h2>
          <p style={{ margin: '0 auto', maxWidth: 640 }}>Pas juste être sans douleur. Vivre pleinement dans ton corps — pour le reste de ta vie.</p>
        </div>
      </div>
    </section>

    <Wave from="#f5f0e8" to="#2B72B5" variant={0} 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)' }}>Prêt à commencer ?</div>
            <h2>Les sommets commence <em>par un appel.</em></h2>
            <p>15 minutes pour voir si la Méthode est faite pour toi.
Sans pression, sans engagement.</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>Un échange honnête sur ta situation</span></li>
              <li>{Icon.check(16)}<span>On voit si c'est la bonne approche pour toi</span></li>
              <li>{Icon.check(16)}<span>Sinon, je te dirige vers la bonne ressource</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.PageMethode = PageMethode;