/* 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 Vitalité™' },
{ 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 className="sub">Méthode Vitalité™</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-login" href="#">Mon espace</a>
          <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-login" href="#">Mon espace</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 Vitalité™</span>
        <span className="sep"></span>
        <span></span>
      </div>
      <h1>
        Retrouve un corps solide<br />
        <em>sur lequel tu peux<br />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 gratuit
          {Icon.arrow(14)}
        </a>
        <a href="#methode" className="btn btn--secondary">DÉCOUVRE LA MÉTHODE →

          </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 Vitalité™ 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 Vitalité™",
    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 Vitalité™ <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 Vitalité™ · 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 Méthode Vitalité™", 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 VITALITÉ</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 Vitalité™ 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 gratuit
            {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 Vitalité™</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 }}></style>
    <V1Nav />
    <V1Hero tweaks={tweaks} />
    <Wave from="#faf7f2" to="#f5f0e8" variant={0} />
    <V1Stats />
    <Wave from="#f5f0e8" to="#faf7f2" variant={1} />
    <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 });