// Trainin Center — Page formation « Fréquences énergétiques »
// Réutilise le design system (tc-system) + NavBar/Footer (tc-sections).
// Sections : Hero · Ce que ce programme vous apporte · La promesse · Tarifs.

const isMob = (d) => d === 'mobile';

// Lien d'inscription → page de paiement Learnybox (à brancher plus tard).
const PAIEMENT_URL_FREQ = 'https://espace.trainin-center.com/page-inscription-frequences-energetiques/';

const PRIX = '770€'; // ← à confirmer

function InscriptionCTA({ size = 'lg', dark = false, fullWidth = false, children = "Je m'inscris", href = PAIEMENT_URL_FREQ }) {
  const h = size === 'lg' ? 56 : size === 'sm' ? 44 : 50;
  const px = size === 'lg' ? 32 : 24;
  const fs = size === 'lg' ? 16 : 15;
  return (
    <a href={href} data-cta="learnybox:purchase" style={{
      height: h, padding: `0 ${px}px`,
      background: dark ? TC.white : TC.sage,
      color: dark ? TC.ink : TC.white,
      borderRadius: 999, textDecoration: 'none',
      fontFamily: fontSans, fontSize: fs, fontWeight: 600, letterSpacing: -0.15,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
      width: fullWidth ? '100%' : 'auto', boxSizing: 'border-box',
      boxShadow: dark ? '0 1px 2px rgba(0,0,0,0.08)' : '0 1px 2px rgba(0,0,0,0.06), 0 8px 22px rgba(90,145,105,0.28)',
    }}>
      {children}
      <svg width="15" height="15" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
        <path d="M3 7h8M8 4l3 3-3 3" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </a>
  );
}

// ── Lien-bouton générique (repris tel quel de tc-landing-frequences.jsx
// pour la section "Programme détaillé" importée depuis la landing) ──
function LFLinkBtn({ href, children, variant = 'primary', size = 'lg', dark = false, fullWidth = false, cta, onClick }) {
  const h = size === 'lg' ? 56 : 50;
  const px = size === 'lg' ? 30 : 22;
  const fs = size === 'lg' ? 16 : 15;
  const ghost = variant === 'ghost';
  return (
    <a href={href} data-cta={cta} onClick={onClick} style={{
      height: h, padding: `0 ${px}px`, boxSizing: 'border-box',
      background: ghost ? 'transparent' : (dark ? TC.white : TC.sage),
      color: ghost ? (dark ? TC.white : TC.ink) : (dark ? TC.ink : TC.white),
      border: ghost ? `1px solid ${dark ? 'rgba(255,255,255,0.30)' : TC.hairStrong}` : 'none',
      borderRadius: 999, textDecoration: 'none',
      fontFamily: fontSans, fontSize: fs, fontWeight: ghost ? 500 : 600, letterSpacing: -0.15,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
      width: fullWidth ? '100%' : 'auto',
      boxShadow: ghost ? 'none' : (dark ? '0 1px 2px rgba(0,0,0,0.08)' : '0 1px 2px rgba(0,0,0,0.06), 0 8px 22px rgba(90,145,105,0.28)'),
    }}>
      {children}
      {!ghost && (
        <svg width="15" height="15" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
          <path d="M3 7h8M8 4l3 3-3 3" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      )}
    </a>
  );
}

// ════════════════════════════════════════════════════════════
// HERO
// ════════════════════════════════════════════════════════════
function FormationHero({ device }) {
  const m = isMob(device);
  const pad = m ? '40px 22px 36px' : '75px 80px 32px';
  const meta = ['Dispensé par un médecin psychiatre', 'Respiration & méditation', '100% en ligne'];
  return (
    <section style={{ background: TC.off, position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', top: m ? -130 : -260, right: m ? -170 : -180,
        width: m ? 400 : 740, height: m ? 400 : 740, borderRadius: '50%',
        background: `radial-gradient(circle, ${TC.sageSoft} 0%, ${TC.off} 65%)`,
        pointerEvents: 'none',
      }} />
      <div style={m
        ? { position: 'relative', padding: pad, display: 'flex', flexDirection: 'column', gap: 30 }
        : {
            position: 'relative', maxWidth: TC_CONTAINER, margin: '0 auto', width: '100%', padding: pad,
            display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 48, alignItems: 'stretch',
          }}>
        {/* text */}
        <div style={{ maxWidth: m ? '100%' : 595 }}>
          <div style={{ marginBottom: m ? 18 : 16 }}>
            <Eyebrow variant="gold" size={m ? 'sm' : 'md'}>Fréquences énergétiques · Programme</Eyebrow>
          </div>
          <h1 style={{
            fontFamily: fontSans, fontSize: m ? 42 : 'clamp(48px, 3.7vw, 60px)', fontWeight: 500,
            letterSpacing: m ? -1.4 : -2.2, lineHeight: m ? 1.12 : 1.06,
            margin: m ? '0 0 22px' : '0 0 14px', color: TC.ink, textWrap: 'balance',
          }}>
            Retrouvez votre{m ? ' ' : <br />}
            <span style={{
              fontFamily: fontSerif, fontWeight: 400, fontStyle: 'italic',
              color: TC.sageDeep, fontSize: m ? 46 : 'clamp(52px, 4.3vw, 67px)', letterSpacing: m ? -1.4 : -2,
              lineHeight: 1.05,
            }}>liberté psychique.</span>
          </h1>
          <p style={{
            fontFamily: fontSans, fontSize: m ? 16.5 : 19, lineHeight: 1.58,
            color: TC.ink2, margin: m ? '0 0 26px' : '0 0 18px', maxWidth: m ? '100%' : 530, letterSpacing: -0.1,
          }}>
            Un programme pour apaiser la peur, l'angoisse, le stress, les phobies
            et les traumatismes grâce à des techniques issues des dernières recherches
            en neuro-psychisme et de traditions millénaires longtemps tenues secrètes.
          </p>
          <div style={{
            display: 'flex', flexDirection: m ? 'column' : 'row',
            gap: m ? 10 : 12, alignItems: m ? 'stretch' : 'center', marginBottom: m ? 24 : 30,
          }}>
            <InscriptionCTA size="lg" fullWidth={m}>Je m'inscris</InscriptionCTA>
            <BtnGhost size="lg" fullWidth={m} onClick={() => window.dispatchEvent(new Event('tc-open-programme'))}>Recevoir le programme</BtnGhost>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: m ? '10px 16px' : '10px 22px' }}>
            {meta.map((x) => (
              <div key={x} style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <IconCheck size={16} color={TC.sage} />
                <span style={{ fontFamily: fontSans, fontSize: 13.5, color: TC.ink2, letterSpacing: -0.05 }}>{x}</span>
              </div>
            ))}
          </div>
        </div>

        {/* photo — desktop : le cadre démarre à la hauteur du H1 (sous le badge) et
            descend jusqu'au bas de la ligne "100% en ligne", via le stretch de la
            colonne (alignItems:'stretch') + un marginTop égal à la hauteur du badge. */}
        <div style={m ? { position: 'relative' } : { position: 'relative', height: '100%' }}>
          <div style={m
            ? {
                position: 'relative', width: '100%', aspectRatio: '4 / 5',
                borderRadius: 24, overflow: 'hidden',
                boxShadow: '0 30px 80px -20px rgba(26,31,28,0.25), 0 1px 2px rgba(0,0,0,0.06)',
              }
            : {
                position: 'absolute', top: 46, left: 0, right: 0, bottom: 0,
                borderRadius: 28, overflow: 'hidden',
                boxShadow: '0 30px 80px -20px rgba(26,31,28,0.25), 0 1px 2px rgba(0,0,0,0.06)',
              }}>
            <img src={ASSET.frequences} alt=""
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '60% 45%', display: 'block' }} />
          </div>
          <div style={{
            position: 'absolute', left: m ? '50%' : 20, transform: m ? 'translateX(-50%)' : 'none',
            bottom: m ? -26 : 20, width: m ? 'calc(100% - 44px)' : 227,
            background: TC.white, borderRadius: 16, padding: '16px 18px',
            boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 14px 36px rgba(26,31,28,0.10)',
            border: `1px solid ${TC.hair}`,
          }}>
            <div style={{ fontFamily: fontMono, fontSize: 11, letterSpacing: 0.6, textTransform: 'uppercase', color: TC.ink3 }}>Programme complet</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 4 }}>
              <span style={{ fontFamily: fontSans, fontSize: 34, fontWeight: 600, color: TC.ink, letterSpacing: -1.2 }}>{PRIX}</span>
              <span style={{ fontFamily: fontSans, fontSize: 13, color: TC.ink2 }}>Facilités de paiement</span>
            </div>
          </div>
        </div>
      </div>
      <WhatsAppFAB />
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// CE QUE CE PROGRAMME VOUS APPORTE
// ════════════════════════════════════════════════════════════
function Apports({ device }) {
  const m = isMob(device);
  const items = [
    { theme: 'drop',          t: 'Apaiser la peur',            b: "Angoisse, anxiété, stress, phobies, TOC : revenir durablement au calme." },
    { theme: 'reconversion',  t: 'Libérer les blocages',       b: "Se défaire des traumatismes, chocs émotionnels et addictions." },
    { theme: 'wave',          t: 'Fréquences & respiration',   b: "Des fréquences puissantes et des exercices de respiration, au cœur du parcours." },
    { theme: 'accompagnement',t: 'Charisme & liens',           b: "Développer votre charisme et des connexions sociales solides." },
    { theme: 'iris',          t: 'Intuition & connexion',      b: "Aller au-delà du raisonnement, vers un esprit profondément intuitif." },
    { theme: 'holistic',      t: 'Méditation & repos',         b: "Plusieurs formes de méditation pour goûter au repos de l'esprit." },
  ];
  return (
    <Section tone="white" padY={m ? [60, 60] : [96, 96]} padX={m ? 22 : 80}>
      <SectionHead
        eyebrow="Ce que ce programme vous apporte"
        title="Des outils concrets pour retrouver votre équilibre."
        align="left"
        maxWidth={m ? '100%' : 700}
      />
      <div style={{
        display: 'grid',
        gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)',
        gap: m ? 14 : 20, marginTop: m ? 8 : 16,
      }}>
        {items.map((it) => (
          <div key={it.t} style={{
            display: 'flex', flexDirection: 'column', gap: 14,
            padding: m ? '22px 20px' : '26px 24px',
            background: TC.off, borderRadius: 18, border: `1px solid ${TC.hair}`,
          }}>
            <ThemeMark theme={it.theme} size={m ? 46 : 50} />
            <div style={{ fontFamily: fontSans, fontSize: m ? 17 : 18, fontWeight: 600, color: TC.ink, letterSpacing: -0.3, lineHeight: 1.25 }}>{it.t}</div>
            <div style={{ fontFamily: fontSans, fontSize: 14.5, lineHeight: 1.55, color: TC.ink2, letterSpacing: -0.05 }}>{it.b}</div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', justifyContent: m ? 'stretch' : 'flex-start', marginTop: m ? 28 : 36 }}>
        <BtnPrimary size="lg" fullWidth={m} onClick={() => window.dispatchEvent(new Event('tc-open-programme'))}>Recevoir le programme</BtnPrimary>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// LE PROGRAMME — repris tel quel de tc-landing-frequences.jsx (LFModules)
// ════════════════════════════════════════════════════════════
function LFModules({ device }) {
  const m = isMob(device);
  const mods = [
    {
      n: 'Module 01', img: 'assets/module-freq-1.png',
      t: 'Mind Switch', s: 'Le déclic qui rend libre',
      b: "Retrouver de la mobilité intérieure, observer ses automatismes et ouvrir un nouvel espace de liberté mentale. Relâcher certaines tensions psychiques, apaiser le mental et amorcer une transition vers un état plus stable et plus disponible.",
    },
    {
      n: 'Module 02', img: 'assets/module-freq-2.png',
      t: 'Mind Increase', s: 'Développer ses ressources psychiques',
      b: "Approfondir la concentration, l'intuition, la respiration, les fréquences cérébrales et la capacité à mobiliser son énergie intérieure. Des exercices simples et progressifs pour renforcer la clarté mentale, la présence et la puissance d'attention.",
    },
    {
      n: 'Module 03', img: 'assets/module-freq-3.png',
      t: 'Connexion infinie', s: "S'ouvrir à une dimension plus vaste de l'esprit",
      b: "Explorer des états de conscience plus profonds, affiner sa perception intérieure et développer une relation plus intuitive avec son environnement. Un voyage de connexion, de présence et d'expansion personnelle.",
    },
  ];
  return (
    <Section id="modules" tone="off" padY={m ? [56, 56] : [88, 88]} padX={m ? 22 : 80}>
      <SectionHead
        eyebrow="Le programme"
        title="Le parcours en 3 modules."
        sub="Une progression pensée comme une traversée : du premier déclic intérieur à l'ouverture, chaque module prolonge le précédent."
        align="left"
        maxWidth={m ? '100%' : 720}
      />
      <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)', gap: m ? 16 : 22 }}>
        {mods.map((mod) => (
          <div key={mod.t} style={{
            background: TC.white, borderRadius: 22, border: `1px solid ${TC.hair}`,
            overflow: 'hidden', display: 'flex', flexDirection: 'column',
          }}>
            <div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 11' }}>
              <img src={mod.img} alt=""
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              <div style={{ position: 'absolute', top: 14, left: 14 }}>
                <Eyebrow variant="sage" size="sm">{mod.n}</Eyebrow>
              </div>
            </div>
            <div style={{ padding: m ? '22px 22px 24px' : '26px 26px 28px', display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
              <div style={{ fontFamily: fontSans, fontSize: m ? 21 : 23, fontWeight: 600, color: TC.ink, letterSpacing: -0.5, lineHeight: 1.15 }}>{mod.t}</div>
              <div style={{ fontFamily: fontSerif, fontStyle: 'italic', fontSize: m ? 16 : 17, color: TC.sageDeep, lineHeight: 1.3 }}>{mod.s}</div>
              <div style={{ fontFamily: fontSans, fontSize: 14.5, lineHeight: 1.6, color: TC.ink2, letterSpacing: -0.05, marginTop: 2 }}>{mod.b}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: m ? 24 : 32 }}>
        <InscriptionCTA size="lg" fullWidth={m} href="https://espace.trainin-center.com/page-inscription-frequences-energetiques/">Je m'inscris</InscriptionCTA>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// PROGRAMME DÉTAILLÉ — repris tel quel de tc-landing-frequences.jsx (LFProgramme)
// ════════════════════════════════════════════════════════════
function LFProgramme({ device }) {
  const m = isMob(device);
  const stats = [
    { n: '3', l: 'modules' },
    { n: '20+', l: 'thèmes explorés' },
    { n: '100%', l: 'en ligne' },
  ];
  return (
    <Section tone="white" padY={m ? [56, 56] : [88, 88]} padX={m ? 22 : 80}>
      <SectionHead
        eyebrow="Programme détaillé"
        title="Un ensemble de techniques unique."
        sub="Voici certaines des techniques enseignées dans la formation :"
        align={m ? 'left' : 'center'}
        maxWidth={720}
      />

      <div style={{
        maxWidth: 1000, margin: m ? '6px auto 34px' : '14px auto 48px',
        display: 'grid', gap: m ? 10 : 12,
        gridTemplateColumns: m ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
      }}>
        {[
          'ASMR', 'Auriculothérapie', 'Brainwaves', 'Chakra',
          'EFT', 'EMDR', { t: 'Fréquences', note: 'Un programme de fréquences bien précises à suivre.' },
          'Hypnose', 'Lithothérapie', 'Magnétisme',
          'Mantras', 'Méditation', 'Mudras', 'PNL',
          'Relaxation', 'Respiration', 'Sophrologie', 'Suggestopédie',
          'Yoga', 'Art thérapie', 'Calligraphie spirituelle', 'Méthode Tomatis',
          'Healing frequencies',
        ].map((it) => {
          const obj = typeof it === 'string' ? { t: it } : it;
          return (
            <div key={obj.t} style={{
              gridColumn: obj.note ? 'span 2' : undefined,
              display: 'flex', alignItems: obj.note ? 'flex-start' : 'center', gap: 10,
              background: TC.white, border: `1px solid ${TC.hair}`, borderRadius: 14,
              padding: m ? '12px 13px' : '14px 16px',
              boxShadow: '0 1px 2px rgba(26,31,28,0.04)',
            }}>
              <span style={{
                flex: 'none', marginTop: obj.note ? 2 : 0,
                width: 22, height: 22, borderRadius: '50%',
                background: TC.sage, display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <IconCheck size={13} color={TC.white} />
              </span>
              <span>
                <span style={{
                  fontFamily: fontSans, fontSize: m ? 14 : 15, fontWeight: 600,
                  color: TC.ink, letterSpacing: -0.2, lineHeight: 1.25,
                }}>{obj.t}</span>
                {obj.note && (
                  <span style={{
                    display: 'block', fontFamily: fontSans, fontSize: m ? 12.5 : 13,
                    fontWeight: 400, color: TC.ink2, marginTop: 3, lineHeight: 1.45, letterSpacing: -0.05,
                  }}>{obj.note}</span>
                )}
              </span>
            </div>
          );
        })}
      </div>
      <div style={{
        maxWidth: 1000, margin: '0 auto',
        background: TC.white, borderRadius: 24, border: `1px solid ${TC.hair}`,
        boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 24px 60px -28px rgba(26,31,28,0.22)',
        overflow: 'hidden',
        display: m ? 'flex' : 'grid', flexDirection: m ? 'column' : undefined,
        gridTemplateColumns: m ? undefined : '0.92fr 1.08fr',
      }}>
        {/* Visuel — couverture parcours */}
        <div style={{
          position: 'relative', overflow: 'hidden',
          background: `linear-gradient(155deg, ${TC.sage} 0%, ${TC.sageInk} 100%)`,
          padding: m ? '30px 26px' : '40px 38px',
          display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 16,
        }}>
          <div style={{ position: 'absolute', top: -80, right: -80, width: 220, height: 220, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%)' }} />
          <div style={{ position: 'relative' }}>
            <div style={{ fontFamily: fontMono, fontSize: 11, letterSpacing: 1, textTransform: 'uppercase', color: 'rgba(255,255,255,0.78)', marginBottom: 14 }}>Connexion infinie · PDF</div>
            {[
              { k: 'Module 01', v: 'Mind Switch' },
              { k: 'Module 02', v: 'Mind Increase' },
              { k: 'Module 03', v: 'Connexion infinie' },
            ].map((p, i) => (
              <div key={p.k} style={{
                paddingTop: i ? 12 : 0, marginTop: i ? 12 : 0,
                borderTop: i ? '1px solid rgba(255,255,255,0.16)' : 'none',
              }}>
                <div style={{ fontFamily: fontMono, fontSize: 10.5, letterSpacing: 0.6, textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)' }}>{p.k}</div>
                <div style={{ fontFamily: fontSans, fontSize: m ? 16 : 17.5, fontWeight: 600, color: TC.white, letterSpacing: -0.3, marginTop: 4, lineHeight: 1.25 }}>{p.v}</div>
              </div>
            ))}
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 18, padding: '7px 12px', background: 'rgba(255,255,255,0.12)', borderRadius: 999 }}>
              <IconCheck size={15} color={TC.white} />
              <span style={{ fontFamily: fontSans, fontSize: 12.5, color: TC.white, fontWeight: 500 }}>Accessible sans prérequis</span>
            </div>
          </div>
        </div>

        {/* Téléchargement */}
        <div style={{ padding: m ? '28px 24px' : '40px 44px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <h3 style={{ fontFamily: fontSans, fontSize: m ? 22 : 26, fontWeight: 600, color: TC.ink, letterSpacing: -0.5, lineHeight: 1.2, margin: 0 }}>
            Recevez le détail du parcours.
          </h3>
          <p style={{ fontFamily: fontSans, fontSize: m ? 14.5 : 15.5, lineHeight: 1.6, color: TC.ink2, margin: '12px 0 0', letterSpacing: -0.05, maxWidth: 420 }}>
            Le programme complet présente, module par module, les pratiques de respiration,
            méditation, attention et fréquences cérébrales ainsi que les modalités d'accès.
          </p>
          <div style={{ display: 'flex', gap: m ? 18 : 28, margin: m ? '22px 0' : '26px 0' }}>
            {stats.map((s) => (
              <div key={s.l}>
                <div style={{ fontFamily: fontSans, fontSize: m ? 28 : 32, fontWeight: 600, color: TC.ink, letterSpacing: -1.2, lineHeight: 1 }}>{s.n}</div>
                <div style={{ fontFamily: fontSans, fontSize: 13, color: TC.ink2, marginTop: 5, letterSpacing: -0.05 }}>{s.l}</div>
              </div>
            ))}
          </div>
          <LFLinkBtn href="#" size="lg" fullWidth={m} cta="goto:programme" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event('tc-open-programme')); }}>Recevoir le programme complet</LFLinkBtn>
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// LA PROMESSE
// ════════════════════════════════════════════════════════════
function Promesse({ device }) {
  const m = isMob(device);
  const points = [
    "Vous voulez vous libérer de la peur et des blocages émotionnels.",
    "Vous menez des projets et avez besoin d'un psychisme stable et puissant.",
    "Vous souhaitez développer votre charisme et vos liens sociaux.",
    "Vous désirez une intuition forte, connectée à plus grand que vous.",
  ];
  return (
    <Section tone="off" padY={m ? [60, 60] : [96, 96]} padX={m ? 22 : 80}>
      <div style={{
        display: m ? 'flex' : 'grid',
        flexDirection: m ? 'column-reverse' : undefined,
        gridTemplateColumns: m ? undefined : '1.15fr 0.85fr',
        gap: m ? 28 : 72, alignItems: 'center',
      }}>
        <div>
          <SectionHead
            eyebrow="La promesse"
            title="Une véritable liberté mentale."
            align="left"
            maxWidth={m ? '100%' : 520}
          />
          <p style={{
            fontFamily: fontSans, fontSize: m ? 16 : 17, lineHeight: 1.65,
            color: TC.ink2, margin: '-18px 0 24px', maxWidth: 540, letterSpacing: -0.05,
          }}>
            Imaginez être libre de toute addiction, phobie, tristesse ou trouble du
            comportement. Cette liberté mentale entraîne une amélioration sensible
            et puissante de votre état physique et la stabilité nécessaire pour
            mener vos projets à bien.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {points.map((p) => (
              <div key={p} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <span style={{ marginTop: 1, flexShrink: 0 }}><IconCheck size={20} color={TC.sage} /></span>
                <span style={{ fontFamily: fontSans, fontSize: m ? 15 : 16, color: TC.ink, lineHeight: 1.5, letterSpacing: -0.05 }}>{p}</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{ position: 'relative' }}>
          <div style={{
            position: 'relative', width: '100%',
            aspectRatio: m ? '4 / 3' : '4 / 5',
            borderRadius: 24, overflow: 'hidden',
          }}>
            <img src="assets/promesse-frequences.png" alt=""
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 28%', display: 'block' }} />
          </div>
        </div>
      </div>

      {/* Closing line — kept verbatim per request */}
      <div style={{
        marginTop: m ? 44 : 72, paddingTop: m ? 36 : 56,
        borderTop: `1px solid ${TC.hair}`,
        maxWidth: 860, marginLeft: 'auto', marginRight: 'auto', textAlign: 'center',
      }}>
        <p style={{
          fontFamily: fontSerif, fontStyle: 'italic', fontWeight: 400,
          fontSize: m ? 26 : 38, lineHeight: 1.25, letterSpacing: -0.6,
          color: TC.sageDeep, margin: 0, textWrap: 'balance',
        }}>
          Devenir un être augmenté est un des plus grands voyages qu'il vous sera donné de faire.
        </p>
        <p style={{
          fontFamily: fontSans, fontSize: m ? 16 : 18, fontWeight: 500,
          color: TC.ink, margin: '18px 0 0', letterSpacing: -0.1,
        }}>
          Bienvenue dans ce voyage.
        </p>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// TARIFS & INSCRIPTION
// ════════════════════════════════════════════════════════════
function Tarifs({ device }) {
  const m = isMob(device);
  const includes = [
    'Accès complet au programme Fréquences énergétiques',
    'Exercices de respiration, fréquences & méditations guidées',
    'Techniques issues de la recherche en neuro-psychisme',
    'Conçu et dispensé par un médecin psychiatre',
  ];

  const head = (
    <SectionHead
      eyebrow="Tarifs & inscription"
      title="Commencez votre voyage."
      sub="Un tarif clair et des facilités de paiement pour vous lancer dès aujourd'hui."
      align="center"
      dark
      maxWidth={680}
    />
  );

  const priceCard = (
      <div style={{
        maxWidth: 560, margin: '0 auto',
        background: TC.white, borderRadius: 28,
        border: `1px solid ${TC.hair}`,
        boxShadow: '0 30px 80px -20px rgba(0,0,0,0.35)',
        padding: m ? '28px 24px' : '40px 44px',
      }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontFamily: fontMono, fontSize: 11.5, letterSpacing: 0.6, textTransform: 'uppercase', color: TC.ink3 }}>Programme Fréquences énergétiques</div>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 8, marginTop: 8 }}>
            <span style={{ fontFamily: fontSans, fontSize: m ? 56 : 68, fontWeight: 600, color: TC.ink, letterSpacing: -2.4, lineHeight: 1 }}>{PRIX}</span>
          </div>
          <div style={{ fontFamily: fontSans, fontSize: 14.5, color: TC.ink2, marginTop: 8 }}>ou en plusieurs mensualités</div>
        </div>

        <div style={{ height: 1, background: TC.hair, margin: m ? '24px 0' : '28px 0' }} />

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {includes.map((p) => (
            <div key={p} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
              <span style={{ marginTop: 1, flexShrink: 0 }}><IconCheck size={20} color={TC.sage} /></span>
              <span style={{ fontFamily: fontSans, fontSize: m ? 15 : 15.5, color: TC.ink, lineHeight: 1.5, letterSpacing: -0.05 }}>{p}</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: m ? 26 : 32 }}>
          <InscriptionCTA size="lg" fullWidth>Je m'inscris</InscriptionCTA>
        </div>

        <div style={{ marginTop: 18, display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 8 }}>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <rect x="2" y="6" width="12" height="8" rx="2" stroke={TC.sageDeep} strokeWidth="1.4"/>
            <path d="M5 6V4.5a3 3 0 016 0V6" stroke={TC.sageDeep} strokeWidth="1.4"/>
          </svg>
          <span style={{ fontFamily: fontSans, fontSize: 13, color: TC.ink2 }}>Paiement en plusieurs fois possible</span>
        </div>
      </div>
  );

  if (m) {
    return (
      <Section tone="sage" padY={[60, 60]} padX={22}>
        {head}
        {priceCard}
      </Section>
    );
  }

  // Desktop — bloc contenu (même logique que la section Tarifs validée
  // de formation-praticien-naturopathe.html) au lieu de la bande pleine largeur.
  return (
    <section style={{ background: TC.white, padding: '64px 32px' }}>
      <div style={{
        position: 'relative', maxWidth: 1280, margin: '0 auto', width: '100%',
        background: TC.sageDeep, borderRadius: 36,
        padding: '64px 60px', overflow: 'hidden',
      }}>
        {head}
        {priceCard}
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// PAGE
// ════════════════════════════════════════════════════════════
function FormationFrequences({ device }) {
  return (
    <div style={{ background: TC.white, width: '100%', fontFamily: fontSans, color: TC.ink }}>
      <NavBar device={device} />
      <FormationHero device={device} />
      <Apports device={device} />
      <LFModules device={device} />
      <LFProgramme device={device} />
      <Promesse device={device} />
      <Tarifs device={device} />
      <Footer device={device} />
    </div>
  );
}

Object.assign(window, { FormationFrequences });