/* global React */

/* ============================================================
   V1 — Éditorial chaleureux — Composant React
   ============================================================ */

const { useState } = React;

/* Petits SVG icons (lucide-style) */
const Icon = {
  check: (size = 16) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="20 6 9 17 4 12"></polyline>
    </svg>,

  arrow: (size = 14) =>
  <svg className="arrow" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12"></line>
      <polyline points="12 5 19 12 12 19"></polyline>
    </svg>,

  phone: (size = 18) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"></path>
    </svg>

};

const Wave = ({ from = "#faf7f2", to = "#f5f0e8", height = 80, variant = 0 }) => {
  // Variants give different organic curves so they don't all look identical
  const paths = [
  "M0,40 C220,80 420,12 720,40 C980,64 1180,16 1440,44 L1440,100 L0,100 Z",
  "M0,50 C260,8 520,90 800,50 C1080,18 1240,72 1440,40 L1440,100 L0,100 Z",
  "M0,30 C320,72 640,8 960,38 C1200,62 1320,28 1440,48 L1440,100 L0,100 Z",
  "M0,60 C200,20 500,72 760,42 C1020,16 1280,62 1440,32 L1440,100 L0,100 Z"];

  return (
    <svg viewBox="0 0 1440 100" preserveAspectRatio="none"
    style={{ display: "block", width: "100%", height, background: from, marginBottom: -1 }}>
      <path d={paths[variant % paths.length]} fill={to}></path>
    </svg>);

};

const NAV_LINKS = [
{ href: 'index.html', key: 'accueil', label: 'Accueil' },
{ href: 'methode-vitalite.html', key: 'methode', label: <>La Méthode Athletik<sup className="tm">MC</sup></> },
{ href: 'therapie-sport.html', key: 'therapie', label: 'Thérapie du sport' },
{ href: 'massotherapie.html', key: 'massotherapie', label: 'Massothérapie' },
{ href: 'a-propos.html', key: 'apropos', label: 'À propos' },
{ href: 'contact.html', key: 'contact', label: 'Contact' }];

const V1Nav = ({ active = 'accueil' }) => {
  const [open, setOpen] = useState(false);
  return (
    <header className={open ? 'nav nav--open' : 'nav'}>
      <div className="nav-inner">
        <a className="nav-logo" href="index.html">
          <img src="assets/logo-mark.png" alt="" />
          <div className="nav-logo-text">
            <div>ACADÉMIE ATHLETIK</div>
          </div>
        </a>
        <nav className="nav-links">
          {NAV_LINKS.map((l) =>
          <a key={l.key} href={l.href} className={active === l.key ? 'active' : ''}>{l.label}</a>
          )}
        </nav>
        <div className="nav-right">
          <a className="nav-cta" href="rendez-vous.html">Appel découverte</a>
        </div>
        <button
          className="nav-burger"
          type="button"
          aria-label="Menu"
          aria-expanded={open}
          onClick={() => setOpen((o) => !o)}>
          <span></span><span></span><span></span>
        </button>
      </div>
      <nav className="nav-mobile">
        {NAV_LINKS.map((l) =>
        <a key={l.key} href={l.href} className={active === l.key ? 'active' : ''} onClick={() => setOpen(false)}>{l.label}</a>
        )}
        <a className="nav-mobile-cta" href="rendez-vous.html">Appel découverte</a>
      </nav>
    </header>);

};


const V1Hero = ({ tweaks = { btnStyle: 'A', pillStyle: 'A' } }) => {
  return (
    <section className="hero" data-btn-style={tweaks.btnStyle} data-pill-style={tweaks.pillStyle}>
    <div className="hero-left">
      <div className="hero-mark">M</div>
      <div className="hero-meta">
        <span className="ey">Méthode Athletik<sup className="tm">MC</sup></span>
      </div>
      <h1>
        Retrouve un corps solide <em>sur lequel tu peux compter.</em>
      </h1>
      <p className="hero-lede">
        Une approche globale et structurée pour les personnes actives qui veulent arrêter de <em style={{ fontStyle: 'italic', color: 'var(--text)' }}>gérer</em> leurs douleurs et recommencer à bouger avec confiance.
      </p>
      <div className="hero-ctas">
        <a href="rendez-vous.html" className="btn btn--primary">
          Réserve ton appel découverte
          {Icon.arrow(14)}
        </a>
      </div>
      <div className="hero-reassure">
        <strong>15 min · appel découverte gratuit</strong> — sans pression, sans engagement
      </div>
    </div>
    <div className="hero-right">
      <div className="hero-photo-bleed">
        <img src="assets/hero-catherine-new.jpg?v=9" alt="Catherine Martin, thérapeute du sport" />
      </div>
      <div className="hero-fade"></div>
      <div className="hero-tag">CAT(C) · 26 ans d'expérience</div>
      <div className="hero-photo-meta">
        <span className="avatar-dot"></span>
        <div className="name">
          <strong>Catherine Martin</strong>
          <span>Thérapeute du sport · CAT(C)</span>
        </div>
      </div>
    </div>
  </section>);

};


const V1Stats = () => {
  const stats = [
  { n: "26", unit: "ans", label: "d'expérience clinique avec des personnes actives" },
  { n: "12", unit: "piliers", label: "complémentaires pour un corps qui dure" },
  { n: "3", unit: "étapes", label: "simples pour commencer" },
  { n: "100", unit: "%", label: "personnalisé selon ton corps, ton mode de vie et tes objectifs" },
  { n: "15", unit: "min", label: "appel découverte — gratuit, sans pression" }];

  return (
    <section className="stats">
      <div className="container">
        <div className="stats-grid">
          {stats.map((s, i) =>
          <div className="stat" key={i}>
              <div className="stat-n">
                {s.n}<span className="unit" style={{ fontSize: "18px" }}>{s.unit}</span>
              </div>
              <div className="stat-label">{s.label}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const V1Reconnais = () => {
  const items = [
  "Tu t'entraînes ",
  "Tu fais attention à ta santé — le sport est un mode de vie pour toi",
  "Tu as consulté plusieurs professionnels de la santé mais les tensions ou les douleurs reviennent",
  "Tu n'es plus blessé, mais tu n'as plus confiance en ton corps",
  "Tu te limites sans le vouloir",
  "Tu commences à te demander si c'est ça, l'idée de vieillir"];

  return (
    <section className="reconnais">
      <div className="container">
        <div className="reconnais-grid">
          <div className="reco-list">
            <div className="ey">Tu te reconnais ?</div>
            <h2>Tu as essayé plusieurs approches — <em>
et pourtant ton corps t'envoie encore des signaux.</em></h2>
            <div className="reco-checks">
              {items.map((t, i) => <div key={i} className="reco-check">
                  {Icon.check(18)}
                  <span>{t}</span>
                </div>
              )}
            </div>
            <div className="reco-tagline">
              Si tout ça te parle, j'ai une solution structurée pour toi.
            </div>
          </div>
        </div>
      </div>
    </section>);

};

const V1Insight = () =>
<section className="insight">
    <div className="container">
      <div className="insight-inner">
        <div className="insight-label">
          Pourquoi tes limitations reviennent toujours
        </div>
        <div>
          <h2 className="insight-headline">
            Le problème n'est<br />presque jamais <em>là où tu as mal.</em>
          </h2>
          <p className="insight-body">Ton corps compense. Il s'adapte. Pendant des mois, parfois des années. Puis il atteint ses limites — et la douleur réapparaît, souvent au même endroit, parfois ailleurs. La plupart des approches traitent le symptôme là où il se manifeste. 

        </p>
          <p className="insight-body" style={{ marginBottom: 0 }}>
            Le muscle, c'est l'exécutant. Ce qui dirige, c'est le système nerveux. Ce qui compense, c'est le patron de mouvement. Ce qui maintient le problème, c'est rarement ce qu'on traite en premier.
          </p>
          <div className="insight-conclusion">
            La Méthode Athletik<sup className="tm">MC</sup> remonte jusqu'à l'origine. Tu passes de « je gère » à « je vis ».
          </div>
        </div>
      </div>
    </div>
  </section>;


const V1Services = () => {
  const services = [
  {
    n: "01",
    tag: "Thérapie du sport",
    title: "Évaluer, traiter, réadapter — vraiment.",
    desc: "Pour les blessures et douleurs musculosquelettiques. Un retour sécuritaire et durable à tes activités.",
    cta: "Prendre rendez-vous",
    photo: "assets/therapie-exercice.png"
  },
  {
    n: "02",
    tag: <>Méthode Athletik<sup className="tm">MC</sup></>,
    title: "L'accompagnement signature de 12 mois.",
    desc: "12 piliers complémentaires, une seule professionnelle. Pour comprendre ton corps et obtenir des résultats qui tiennent.",
    cta: "Découvrir la Méthode",
    feature: true,
    photo: "assets/methode-cyclist.jpg"
  },
  {
    n: "03",
    tag: "Massothérapie sportive",
    title: "Récupérer entre les entraînements.",
    desc: "Travail manuel précis et adapté. Pour diminuer les tensions et retrouver une fluidité de mouvement.",
    cta: "Réserver un massage",
    photo: "assets/massage-clinique-zoom.png"
  }];

  return (
    <section className="services" id="methode">
      <div className="container">
        <div className="services-hd services-hd--center">
          <div>
            <div className="ey ey--blue">Comment je peux t'aider</div>
            <h2>La Méthode Athletik<sup className="tm">MC</sup> <em>au cœur de tout.</em></h2>
          </div>
        </div>
        <div className="services-feature-grid">
          {/* Méthode — pièce maîtresse, grande à gauche */}
          <article className="svc svc--feature svc--hero">
            <div className="svc-photo">
              <span className="svc-badge">Le cœur de mon travail</span>
              <img src="assets/methode-cyclist.jpg" alt="" />
            </div>
            <div className="svc-body">
              <div className="svc-tag">Méthode Athletik<sup className="tm">MC</sup> · accompagnement 12 mois</div>
              <h3>Comprendre ton corps. Régler la cause. Pour de bon.</h3>
              <p>12 piliers complémentaires, une seule professionnelle. Pour comprendre ton corps et obtenir des résultats qui tiennent — pour de bon.</p>
              <a href="methode-vitalite.html" className="svc-cta">
                Découvre la Méthode
                {Icon.arrow(13)}
              </a>
            </div>
          </article>

          {/* Portes d'entrée — empilées à droite */}
          <div className="svc-feeders">
            <article className="svc">
              <div className="svc-photo">
                <img src="assets/therapie-exercice.png" alt="" />
              </div>
              <div className="svc-body">
                <div className="svc-tag">THÉRAPIE DU SPORT</div>
                <h3>Évaluer, traiter, réadapter.</h3>
                <a href="therapie-sport.html" className="svc-cta">
                  Prendre rendez-vous
                  {Icon.arrow(13)}
                </a>
              </div>
            </article>
            <article className="svc">
              <div className="svc-photo">
                <img src="assets/massage-clinique-zoom.png" alt="" />
              </div>
              <div className="svc-body">
                <div className="svc-tag">MASSOTHÉRAPIE</div>
                <h3>Récupérer entre les entraînements.</h3>
                <a href="massotherapie.html" className="svc-cta">
                  Réserve un massage
                  {Icon.arrow(13)}
                </a>
              </div>
            </article>
          </div>
        </div>
      </div>
    </section>);

};

const V1Etapes = () => {
  const steps = [
  { n: "01", title: "L'appel découverte", desc: "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." },
  { n: "02", title: "Consultation individuelle", desc: "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." },
  { n: "03", title: <>L'accompagnement<br />Méthode Athletik<sup className="tm">MC</sup></>, desc: "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." }];

  return (
    <section className="etapes">
      <div className="container">
        <div className="etapes-hd">
          <div className="ey">TROIS ÉTAPES SIMPLES POUR LA MÉTHODE ATHLETIK</div>
          <h2>Tu n'as pas à tout comprendre tout de suite. <em>Tu as juste à commencer.</em></h2>
        </div>
        <div className="etapes-grid">
          {steps.map((s) =>
          <div className="etape" key={s.n}>
              <div className="etape-num">{s.n}</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const V1Catherine = ({ tweaks = { frame: 'A' } }) => {
  return (
    <section className="catherine" data-lineopt="0">
    <div className="container">
      <div className="cath-grid">
        <div className="cath-photo-wrap">
          <div className="cath-decor"></div>
          <div className="cath-photo">
            <img src="assets/about-catherine-new.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">À propos</div>
          <h2>Catherine Martin,<br /><em>thérapeute du sport CAT(C).</em></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>Je suis thérapeute du sport — et je suis aussi coureuse, cycliste, skieuse.      Je comprends ton mode de vie parce que c'est le mien aussi.

            </p>
          <div className="cath-quote">
            « Mon travail intègre quatre niveaux que peu de thérapeutes combinent : le corps physique, les fascias et la respiration, le contrôle moteur et les compensations, et le système nerveux. »
          </div>
          <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>
          <a href="#" className="cath-cta">
            En savoir plus sur Catherine →
          </a>
        </div>
      </div>
    </div>
  </section>);
};


const V1CTA = () =>
<section className="cta" id="cta">
    <div className="container">
      <div className="cta-inner">
        <div>
          <div className="ey" style={{ color: 'var(--orange-soft, #f4956e)' }}>Prêt à commencer ?</div>
          <h2>Réserve ton appel découverte. <em>15 minutes pour voir si on est fait pour travailler ensemble.</em></h2>
          <p>
            On regarde ta situation, je te dis honnêtement si la Méthode Athletik<sup className="tm">MC</sup> est faite pour toi — ou si autre chose serait plus pertinent. Sans pression. Sans engagement.
          </p>
        </div>
        <div className="cta-card">
          <h3>L'appel découverte</h3>
          <ul>
            <li>{Icon.check(16)}<span>15 minutes, par téléphone </span></li>
            <li>{Icon.check(16)}<span>On clarifie ta situation et tes objectifs</span></li>
            <li>{Icon.check(16)}<span>Tu repars avec une direction claire</span></li>
            <li>{Icon.check(16)}<span>100 % gratuit, sans engagement</span></li>
          </ul>
          <a href="rendez-vous.html" className="btn btn--orange">
            Réserve ton appel découverte
            {Icon.arrow(14)}
          </a>
        </div>
      </div>
    </div>
  </section>;


const V1Footer = () =>
<footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div className="footer-brand">
          <img src="assets/logo-white.png" alt="Académie Athletik" />
          <p>Une approche globale et structurée pour les personnes actives qui veulent arrêter de gérer leurs douleurs et recommencer à bouger avec confiance.</p>
        </div>
        <div>
          <h4>Navigation</h4>
          <ul>
            <li><a href="index.html">Accueil</a></li>
            <li><a href="methode-vitalite.html">La Méthode Athletik<sup className="tm">MC</sup></a></li>
            <li><a href="therapie-sport.html">Thérapie du sport</a></li>
            <li><a href="massotherapie.html">Massothérapie</a></li>
            <li><a href="a-propos.html">À propos</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div>
        <div className="footer-contact">
          <h4>Coordonnées</h4>
          <p>570 boulevard des Laurentides<br />Piedmont (Qc) J0R 1K0</p>
          <p><a href="tel:+14507120001">450 712-0001</a><br /><a href="mailto:info@academieathletik.com">info@academieathletik.com</a></p>
        </div>
        <div>
          <h4>Certifications</h4>
          <ul>
            <li>CTSQ</li>
            <li>ACTS</li>
            <li>APMSQ</li>
            <li>ESL</li>
            <li></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 Académie Athletik. Tous droits réservés.</div>
        <div className="links">
          <a href="confidentialite.html">Politique de confidentialité</a>
        </div>
      </div>
    </div>
  </footer>;


const V1Home = ({ tweaks }) =>
<div className="v1">
    <style dangerouslySetInnerHTML={{ __html: V1_CSS + V1_CSS_PART2 + V1_CSS_PART3 + PAGE_CSS }}></style>
    <V1Nav />
    <section className="page-hero-split">
      <div className="phs-txt">
        <div className="ey">La Méthode Athletik<sup className="tm">MC</sup></div>
        <h1>Un corps sur lequel<br />tu peux <em>vraiment</em> compter.</h1>
        <p>La Méthode Athletik<sup className="tm">MC</sup> 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 MC" />
      </div>
    </section>
    <V1Reconnais />
    <Wave from="#faf7f2" to="#2B72B5" variant={2} height={100} />
    <V1Insight />
    <Wave from="#2B72B5" to="#faf7f2" variant={3} height={100} />
    <V1Services />
    <Wave from="#faf7f2" to="#f5f0e8" variant={1} />
    <V1Etapes />
    <Wave from="#f5f0e8" to="#faf7f2" variant={2} />
    <V1Catherine tweaks={tweaks} />
    <Wave from="#faf7f2" to="#2B72B5" variant={0} height={100} />
    <V1CTA />
    <V1Footer />
  </div>;


window.V1Home = V1Home;
Object.assign(window, { V1Nav, V1Footer, Wave, Icon });