// Trainin Center — Landing de conversion « Fréquences énergétiques · Connexion infinie »
// URL cible : /formation-frequences-energetiques-connexion-infinie
// Calquée sur la landing « Praticien naturopathe » (hero clair, logo visible,
// formulaires intégrés, mêmes dispositions de boutons), avec les contenus
// Fréquences énergétiques (parcours en 3 modules : Mind Switch, Mind Increase, Connexion infinie).

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

const LF_PAIEMENT_URL = '#paiement';
const LF_PROGRAMME_URL = 'Programme complet - Trainin Center.html';
const LF_DETAIL_URL = 'formation-frequences-energetiques.html';

// ── CTA inscription (ancre stylée) ──────────────────────────
function LFInscription({ size = 'lg', dark = false, fullWidth = false, minWidth, children = "Je m'inscris", href = LF_PAIEMENT_URL }) {
  const h = size === 'lg' ? 56 : 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', minWidth: minWidth || undefined, 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 ───────────────────────────────────
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>
  );
}

// ════════════════════════════════════════════════════════════
// NAV RÉDUITE — claire, logo visible + Contact
// ════════════════════════════════════════════════════════════
function LFNav({ device }) {
  const m = isMobLF(device);
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      height: m ? 70 : 96, padding: m ? '0 14px 0 6px' : 0,
      display: 'flex', alignItems: 'center', justifyContent: m ? 'space-between' : 'center',
      background: 'rgba(255,255,255,0.9)',
      backdropFilter: 'saturate(160%) blur(14px)', WebkitBackdropFilter: 'saturate(160%) blur(14px)',
      borderBottom: `1px solid ${TC.hair}`,
    }}>
      {m ? (
        <>
          <a href="#" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }} style={{ display: 'inline-flex', textDecoration: 'none' }}>
            <TCLogo height={48} />
          </a>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <LFLinkBtn href="#form-contact" size="sm" cta="goto:contact">Contact</LFLinkBtn>
          </div>
        </>
      ) : (
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          width: '100%', height: '100%', maxWidth: TC_CONTAINER, margin: '0 auto', padding: '0 32px',
        }}>
          <a href="#" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }} style={{ display: 'inline-flex', textDecoration: 'none' }}>
            <TCLogo height={72} />
          </a>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span style={{ fontFamily: fontSans, fontSize: 13, color: TC.ink2, letterSpacing: -0.05, marginRight: 4 }}>
              École française de bien-être
            </span>
            <LFLinkBtn href="#form-contact" size="sm" cta="goto:contact">Contact</LFLinkBtn>
          </div>
        </div>
      )}
    </nav>
  );
}

// ════════════════════════════════════════════════════════════
// HERO — clair, promesse + formulaire intégré
// ════════════════════════════════════════════════════════════
function LFHeroField({ placeholder, type = 'text' }) {
  return (
    <input type={type} placeholder={placeholder} style={{
      width: '100%', boxSizing: 'border-box', height: 46, padding: '0 15px',
      background: TC.off, border: `1px solid ${TC.hairStrong}`, borderRadius: 11,
      fontFamily: fontSans, fontSize: 14.5, color: TC.ink, outline: 'none',
    }} />
  );
}

function LFHeroForm({ m }) {
  return (
    <div style={{
      background: TC.white, borderRadius: 18, border: `1px solid ${TC.hair}`,
      padding: m ? '18px 18px 20px' : '20px 20px 22px',
      boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 20px 48px -18px rgba(26,31,28,0.32)',
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      <iframe
        src="https://trainin-center.learnybox.com/formulaire-rappel-frequences/"
        title="Demande de rappel — Formation Fréquences énergétiques"
        frameBorder="0"
        scrolling="no"
        width="100%"
        height={m ? 560 : 520}
        className="tc-learnybox-frame tc-learnybox-frame-rappel-frequences"
      />
    </div>
  );
}

function LFHero({ device }) {
  const m = isMobLF(device);
  const pad = m ? '20px 22px 40px' : '28px 80px 32px';
  const meta = ['100% en ligne', 'Respiration & méditation', 'Accessible sans prérequis'];
  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 : 760, height: m ? 400 : 760, 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: 0 }
        : {
            position: 'relative', maxWidth: TC_CONTAINER, margin: '0 auto', width: '100%', padding: pad,
            display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 48, alignItems: 'center',
          }}>
        {/* texte */}
        <div style={{ maxWidth: m ? '100%' : 500 }}>
          <div style={{ marginBottom: m ? 18 : 22 }}>
            <Eyebrow variant="gold" size={m ? 'sm' : 'md'}>Issus des recherches sur le neuro-psychisme</Eyebrow>
          </div>
          <h1 style={{
            fontFamily: fontSans, fontSize: m ? 30 : 56, fontWeight: 500,
            letterSpacing: m ? -1.2 : -2, lineHeight: m ? 1.1 : 1.05,
            margin: m ? '0 0 14px' : '0 0 22px', color: TC.ink, textWrap: 'balance',
          }}>
            Formation fréquences énergétiques.{' '}
            <span style={{ fontFamily: fontSerif, fontWeight: 400, fontStyle: 'italic', color: TC.sageDeep }}>
              Unifiez le mental, le souffle et l'énergie intérieure.
            </span>
          </h1>
          {!m && (
            <p style={{
              fontFamily: fontSans, fontSize: 19, lineHeight: 1.58,
              color: TC.ink2, margin: '0 0 26px', maxWidth: 560, letterSpacing: -0.1,
            }}>
              Découvrez comment devenir libre de toute addiction, phobie, tristesse,
              troubles du comportement et de toute souffrance psychique.
            </p>
          )}
          {!m && (
            <div style={{
              display: 'flex', flexDirection: 'row',
              gap: 12, alignItems: 'center', marginBottom: 30,
            }}>
              <LFLinkBtn href="#form-contact" size="lg" cta="goto:contact">Je veux en savoir plus</LFLinkBtn>
            </div>
          )}
          {!m && (
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '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 + formulaire intégré */}
        <div style={{ position: 'relative', display: 'flex', flexDirection: 'column' }}>
          {m && (
            <div style={{ marginBottom: 18 }}>
              <LFHeroForm m={m} />
            </div>
          )}
          {m && (
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px 16px', marginBottom: 18 }}>
              {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 style={{
            position: 'relative', width: '100%', aspectRatio: m ? '4 / 3' : '1 / 1',
            maxHeight: m ? undefined : 'clamp(260px, 20vw, 360px)',
            borderRadius: m ? 24 : 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="assets/formation-frequences.jpg" alt=""
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '55% 40%', display: 'block' }} />
          </div>
          {!m && (
            <div style={{ position: 'relative', zIndex: 2, width: 'calc(100% - 48px)', margin: '-68px auto 0' }}>
              <LFHeroForm m={m} />
            </div>
          )}
        </div>
      </div>
      <WhatsAppFAB />
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// POINTS CLÉS
// ════════════════════════════════════════════════════════════
function LFPointsCles({ device }) {
  const m = isMobLF(device);
  const items = [
    { theme: 'online',   t: '100% en ligne',         b: 'À votre rythme, où que vous soyez.' },
    { theme: 'book',     t: '3 modules progressifs',  b: 'Mind Switch, Mind Increase, Connexion infinie.' },
    { theme: 'drop',     t: 'Respiration & méditation', b: 'Des pratiques guidées, pas à pas.' },
    { theme: 'wave',     t: 'Fréquences cérébrales',  b: 'Comprendre et explorer les états mentaux.' },
    { theme: 'holistic', t: 'Accessible sans prérequis', b: 'On commence là où on en est.' },
  ];
  return (
    <Section tone="white" padY={m ? [44, 16] : [56, 24]} padX={m ? 22 : 80}>
      <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(5, 1fr)', gap: m ? 12 : 16 }}>
        {items.map((it) => (
          <div key={it.t} style={{
            display: 'flex', flexDirection: m ? 'row' : 'column', alignItems: m ? 'center' : 'flex-start',
            gap: m ? 14 : 12, padding: m ? '16px 18px' : '22px 20px',
            background: TC.off, borderRadius: 16, border: `1px solid ${TC.hair}`,
          }}>
            <ThemeMark theme={it.theme} size={m ? 42 : 46} />
            <div>
              <div style={{ fontFamily: fontSans, fontSize: 15.5, fontWeight: 600, color: TC.ink, letterSpacing: -0.2, lineHeight: 1.25 }}>{it.t}</div>
              <div style={{ fontFamily: fontSans, fontSize: 13, lineHeight: 1.45, color: TC.ink2, letterSpacing: -0.05, marginTop: 4 }}>{it.b}</div>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// LE PARCOURS EN 3 MODULES (textes du programme complet)
// ════════════════════════════════════════════════════════════
function LFModules({ device }) {
  const m = isMobLF(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 }}>
        <LFInscription size="lg" fullWidth={m} href="https://espace.trainin-center.com/page-inscription-frequences-energetiques/">Je m'inscris</LFInscription>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// PROGRAMME — encart + téléchargement
// ════════════════════════════════════════════════════════════
function LFProgramme({ device }) {
  const m = isMobLF(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>
  );
}

// ════════════════════════════════════════════════════════════
// POUR QUI
// ════════════════════════════════════════════════════════════
function LFPourQui({ device }) {
  const m = isMobLF(device);
  const points = [
    'Vous cherchez à mieux vous connaître et à gagner en clarté intérieure.',
    'Vous voulez apaiser le mental et renforcer votre stabilité émotionnelle.',
    'Vous êtes curieux·se de la respiration, de la méditation et de l\u2019attention.',
    'Vous souhaitez compléter une pratique du bien-être par un travail intérieur.',
  ];
  return (
    <Section tone="off" padY={m ? [56, 56] : [88, 88]} 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="Développé par des professionnels de santé" title="Dispensé par un médecin psychiatre." 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,
          }}>
            Ce programme vous permet d'apprendre des techniques pour lutter contre
            le stress, la dépression, les addictions, développer des pensées positives,
            chasser les mauvaises pensées, mettre de la lumière dans sa vie pour
            trouver la joie et la sérénité.
          </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 style={{ marginTop: 28 }}>
            <LFInscription size="lg" fullWidth={m} href="https://espace.trainin-center.com/page-inscription-frequences-energetiques/">Je rejoins le parcours</LFInscription>
          </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% 30%', display: 'block' }} />
          </div>
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// CE QUE LE PARCOURS PERMET D'EXPLORER
// ════════════════════════════════════════════════════════════
function LFExplorer({ device }) {
  const m = isMobLF(device);
  const items = [
    { theme: 'drop',         t: 'La respiration',            b: 'Des exercices de souffle pour revenir au calme et à la présence.' },
    { theme: 'holistic',     t: 'La méditation',             b: "Plusieurs formes de méditation pour goûter au repos de l'esprit." },
    { theme: 'iris',         t: "L'attention",               b: 'Affiner sa concentration et sa qualité de présence au quotidien.' },
    { theme: 'wave',         t: 'Les fréquences cérébrales', b: 'Découvrir le rôle des ondes et des fréquences dans les états mentaux.' },
    { theme: 'reconversion', t: 'La stabilité intérieure',   b: 'Construire un socle émotionnel plus stable et plus disponible.' },
    { theme: 'leaf',         t: "L'intuition",               b: 'Aller au-delà du raisonnement vers un esprit plus intuitif.' },
  ];
  return (
    <Section tone="white" padY={m ? [56, 56] : [88, 88]} padX={m ? 22 : 80}>
      <SectionHead
        eyebrow="Ce que le parcours permet d'explorer"
        title="Un travail intérieur, concret et progressif."
        align="left"
        maxWidth={m ? '100%' : 700}
      />
      <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)', gap: m ? 14 : 20, marginTop: m ? 6 : 12 }}>
        {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: 'center', marginTop: m ? 28 : 40 }}>
        <LFLinkBtn href="#form-contact" size="lg" fullWidth={m} cta="goto:contact">Réserver un entretien</LFLinkBtn>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// NOTE PRUDENTE
// ════════════════════════════════════════════════════════════
function LFNote({ device }) {
  const m = isMobLF(device);
  return (
    <Section tone="off" padY={m ? [8, 56] : [16, 80]} padX={m ? 22 : 80}>
      <div style={{
        maxWidth: 880, margin: '0 auto',
        background: TC.white, border: `1px solid ${TC.sageHair}`, borderRadius: 20,
        padding: m ? '24px 22px' : '30px 36px',
        display: 'flex', flexDirection: m ? 'column' : 'row', alignItems: m ? 'flex-start' : 'center', gap: m ? 16 : 24,
      }}>
        <div style={{
          flexShrink: 0, width: 52, height: 52, borderRadius: 26, background: TC.sageSoft,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="9.2" stroke={TC.sageDeep} strokeWidth="1.5" />
            <path d="M12 7.5v5.5" stroke={TC.sageDeep} strokeWidth="1.6" strokeLinecap="round" />
            <circle cx="12" cy="16.4" r="0.5" fill={TC.sageDeep} stroke={TC.sageDeep} strokeWidth="0.9" />
          </svg>
        </div>
        <div>
          <div style={{ fontFamily: fontSans, fontSize: m ? 15.5 : 16.5, fontWeight: 600, color: TC.ink, letterSpacing: -0.2, marginBottom: 6 }}>
            Une démarche de connaissance de soi
          </div>
          <p style={{ fontFamily: fontSans, fontSize: m ? 14.5 : 15.5, lineHeight: 1.6, color: TC.ink2, margin: 0, letterSpacing: -0.05 }}>
            Ce parcours est une démarche de développement personnel et d'exploration
            intérieure. Il ne remplace pas un accompagnement médical ou psychothérapeutique.
            En cas de difficulté de santé, physique ou psychique, consultez un professionnel de santé.
          </p>
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// FAQ COURTE
// ════════════════════════════════════════════════════════════
function LFFaq({ device }) {
  const m = isMobLF(device);
  const items = [
    { q: 'Faut-il des prérequis pour suivre ce parcours ?', a: "Non. Le parcours est progressif et accessible à toute personne curieuse d'explorer le mental, le souffle et l'attention. On commence là où on en est.", open: true },
    { q: 'Le parcours est-il 100% en ligne ?', a: "Oui. Les modules, exercices guidés et pratiques sont accessibles à distance, à votre rythme, depuis notre plateforme." },
    { q: 'Ce parcours remplace-t-il un suivi médical ?', a: "Non. Il s'agit d'une démarche de développement personnel et de connaissance de soi. Il ne remplace pas un accompagnement médical ou psychothérapeutique." },
    { q: 'Comment se passe l\u2019inscription ?', a: "Demandez d'abord les informations : nous vous envoyons le détail des modules et les modalités d'accès, puis vous pouvez vous inscrire ou échanger avec l'école." },
  ];
  const uid = React.useId();
  const [openIndex, setOpenIndex] = React.useState(() => {
    const i = items.findIndex((it) => it.open);
    return i === -1 ? null : i;
  });
  return (
    <Section tone="white" padY={m ? [56, 56] : [88, 88]} padX={m ? 22 : 80}>
      <div style={{ display: m ? 'flex' : 'grid', flexDirection: m ? 'column' : undefined, gridTemplateColumns: m ? undefined : '0.9fr 1.1fr', gap: m ? 28 : 72 }}>
        <div>
          <SectionHead eyebrow="Questions fréquentes" title="Avant de commencer." align="left" maxWidth={m ? '100%' : 420} />
          {!m && (
            <div style={{ marginTop: 8 }}>
              <LFLinkBtn href="#form-contact" size="md">En savoir plus</LFLinkBtn>
            </div>
          )}
        </div>
        <div style={{ borderTop: `1px solid ${TC.hair}` }}>
          {items.map((it, i) => {
            const isOpen = openIndex === i;
            const panelId = `${uid}-faq-panel-${i}`;
            return (
            <div key={i} style={{ padding: m ? '20px 0' : '24px 0', borderBottom: `1px solid ${TC.hair}` }}>
              <button
                type="button"
                onClick={() => setOpenIndex(isOpen ? null : i)}
                aria-expanded={isOpen}
                aria-controls={panelId}
                style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 18,
                  width: '100%', background: 'none', border: 'none', padding: 0, margin: 0,
                  font: 'inherit', color: 'inherit', textAlign: 'left', cursor: 'pointer',
                }}
              >
                <div style={{ fontFamily: fontSans, fontSize: m ? 16 : 17, fontWeight: 600, color: TC.ink, letterSpacing: -0.2, lineHeight: 1.3 }}>{it.q}</div>
                <div style={{
                  width: 32, height: 32, borderRadius: 16,
                  background: isOpen ? TC.sage : TC.sageMist, color: isOpen ? TC.white : TC.sageDeep,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                  transition: 'transform .2s',
                  transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                }}>
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 2v8M2 6h8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
                </div>
              </button>
              {isOpen && (
                <div id={panelId} role="region" style={{ fontFamily: fontSans, fontSize: 15, lineHeight: 1.6, color: TC.ink2, marginTop: 14, letterSpacing: -0.05, maxWidth: 620 }}>{it.a}</div>
              )}
            </div>
            );
          })}
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// TARIFS & INSCRIPTION
// (bloc repris à l'identique de la section « Tarifs & inscription »
// validée sur formation-frequences-energetiques.html — cf. Tarifs()
// dans tc-formation-frequences.jsx)
// ════════════════════════════════════════════════════════════
function LFTarifs({ device }) {
  const m = isMobLF(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 }}>770€</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 }}>
          <LFInscription size="lg" fullWidth href="https://espace.trainin-center.com/page-inscription-frequences-energetiques/">Je m'inscris</LFInscription>
        </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>
    );
  }

  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>
  );
}

// ════════════════════════════════════════════════════════════
// CTA FINAL — texte + formulaire intégré
// ════════════════════════════════════════════════════════════
function LFField({ label, type = 'text', placeholder, textarea }) {
  const base = {
    width: '100%', boxSizing: 'border-box', padding: textarea ? '12px 15px' : '0 15px',
    height: textarea ? 'auto' : 48,
    background: TC.off, border: `1px solid ${TC.hairStrong}`, borderRadius: textarea ? 14 : 12,
    fontFamily: fontSans, fontSize: 15, color: TC.ink, outline: 'none',
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <label style={{ fontFamily: fontSans, fontSize: 12.5, fontWeight: 500, color: TC.ink2, letterSpacing: 0.1 }}>{label}</label>
      {textarea
        ? <textarea rows={3} placeholder={placeholder} style={{ ...base, resize: 'none' }} />
        : <input type={type} placeholder={placeholder} style={base} />}
    </div>
  );
}

function LFFinalCTA({ device }) {
  const m = isMobLF(device);
  return (
    <section id="form-contact" style={{ padding: m ? '24px 16px' : '32px 48px', background: TC.white, scrollMarginTop: m ? 76 : 96 }}>
      <div style={{
        position: 'relative', maxWidth: 1100, margin: '0 auto', borderRadius: m ? 28 : 36,
        background: `linear-gradient(160deg, ${TC.sage} 0%, ${TC.sageInk} 100%)`,
        padding: m ? '44px 24px' : '72px 72px', overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', top: -120, right: -120, width: 360, height: 360, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 70%)' }} />
        <div style={{ position: 'absolute', bottom: -160, left: -160, width: 420, height: 420, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%)' }} />
        <div style={{
          position: 'relative',
          display: m ? 'flex' : 'grid', flexDirection: m ? 'column' : undefined,
          gridTemplateColumns: m ? undefined : '1fr 1fr',
          gap: m ? 28 : 64, alignItems: 'center',
        }}>
          {/* texte */}
          <div style={{ textAlign: m ? 'center' : 'left' }}>
            <div style={{ display: 'flex', justifyContent: m ? 'center' : 'flex-start' }}>
              <Eyebrow variant="light">Connexion infinie</Eyebrow>
            </div>
            <h2 style={{
              fontFamily: fontSans, fontSize: m ? 34 : 52, fontWeight: 500,
              letterSpacing: m ? -1.2 : -1.8, lineHeight: 1.05,
              color: TC.white, margin: '20px 0 16px', textWrap: 'balance',
            }}>
              Commencez votre{' '}
              <span style={{ fontFamily: fontSerif, fontStyle: 'italic', fontWeight: 400 }}>voyage intérieur.</span>
            </h2>
            <p style={{
              fontFamily: fontSans, fontSize: m ? 16 : 18, lineHeight: 1.55,
              color: 'rgba(255,255,255,0.82)', margin: '0 0 20px', maxWidth: 460, letterSpacing: -0.1,
              marginLeft: m ? 'auto' : 0, marginRight: m ? 'auto' : 0,
            }}>
              Laissez-nous vos coordonnées : l'école vous recontacte pour vous
              présenter le parcours et répondre à vos questions, sans engagement.
            </p>
          </div>

          {/* formulaire intégré */}
          <div style={{
            background: TC.white, borderRadius: 22,
            padding: m ? '24px 20px' : '32px 32px',
            boxShadow: '0 30px 80px -24px rgba(0,0,0,0.35)',
            display: 'flex', flexDirection: 'column', gap: 14,
          }}>
            {!m && (
              <div style={{ fontFamily: fontSans, fontSize: 19, fontWeight: 600, color: TC.ink, letterSpacing: -0.3, marginBottom: 2 }}>
                Être recontacté·e
              </div>
            )}
            <iframe
              src="https://trainin-center.learnybox.com/formulaire-contact-landing-frequences/"
              title="Formulaire de contact — Formation Fréquences énergétiques"
              frameBorder="0"
              scrolling="no"
              width="100%"
              height={m ? 590 : 550}
              className="tc-learnybox-frame tc-learnybox-frame-contact-frequences"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// PAGE
// ════════════════════════════════════════════════════════════
function LandingFrequences({ device }) {
  return (
    <div style={{ background: TC.white, width: '100%', fontFamily: fontSans, color: TC.ink }}>
      <LFNav device={device} />
      <LFHero device={device} />
      <LFPointsCles device={device} />
      <LFModules device={device} />
      <LFProgramme device={device} />
      <LFPourQui device={device} />
      <LFExplorer device={device} />
      <LFNote device={device} />
      <LeadMagnet device={device} emailCapture={false} ctaOnClick={() => window.dispatchEvent(new Event('tc-open-programme'))} ctaLabel="Recevoir le programme" />
      <LFFaq device={device} />
      <LFTarifs device={device} />
      <LFFinalCTA device={device} />
      <ContactEncart device={device} contactHref="#form-contact" />
      <Footer device={device} />
    </div>
  );
}

Object.assign(window, { LandingFrequences });