// Trainin Center — Landing de conversion « Devenir praticien·ne naturopathe »
// URL cible : /devenir-praticien-naturopathe
// Réutilise le design system (tc-system) + Testimonials / LeadMagnet / FAQ / Footer (tc-sections).
// Orientation conversion : nav réduite, hero fort, CTA visibles, preuves, réassurance.

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

// Liens / ancres
const LN_PAIEMENT_URL = 'https://espace.trainin-center.com/page-inscription-1/';

// ── CTA inscription (ancre stylée comme bouton plein) ───────
function LNInscription({ size = 'lg', dark = false, fullWidth = false, children = "M'inscrire", href = LN_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', 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 (ancre stylée comme BtnPrimary/Ghost) ──
function LNLinkBtn({ 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 — logo + 1 CTA (peu d'échappatoires)
// ════════════════════════════════════════════════════════════
function LNNav({ device }) {
  const m = isMobLN(device);
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      height: m ? 76 : 96, padding: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'rgba(255,255,255,0.9)',
      backdropFilter: 'saturate(160%) blur(14px)',
      WebkitBackdropFilter: 'saturate(160%) blur(14px)',
      borderBottom: `1px solid ${TC.hair}`,
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        width: '100%', height: '100%',
        ...(m ? { padding: '0 16px 0 4px' } : { 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', lineHeight: 0 }}>
          <TCLogo height={m ? 53 : 72} />
        </a>
        <div style={{ display: 'flex', alignItems: 'center', gap: m ? 8 : 14 }}>
          {!m && (
            <span style={{ fontFamily: fontSans, fontSize: 13, color: TC.ink2, letterSpacing: -0.05, marginRight: 4 }}>
              École française de bien-être
            </span>
          )}
          <LNLinkBtn href="#form-contact" size="sm" cta="goto:contact">Contact</LNLinkBtn>
        </div>
      </div>
    </nav>
  );
}

// ════════════════════════════════════════════════════════════
// HERO — promesse forte
// ════════════════════════════════════════════════════════════


function LNHero({ device }) {
  const m = isMobLN(device);
  const pad = m ? '24px 22px 40px' : '28px 80px 32px';
  const meta = ['100% en ligne', 'Accompagnement humain', 'Certificat en fin de parcours'];
  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: 14 }
        : {
            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 ? 12 : 22 }}>
            <Eyebrow variant="gold" size={m ? 'sm' : 'md'}>Formation certifiante</Eyebrow>
          </div>
          <h1 style={{
            fontFamily: fontSans, fontSize: m ? 30 : 58, fontWeight: 500,
            letterSpacing: m ? -1 : -2, lineHeight: m ? 1.1 : 1.04,
            margin: m ? '0 0 14px' : '0 0 22px', color: TC.ink, textWrap: 'balance',
          }}>
            Devenez praticien·ne naturopathe avec une formation{' '}
            <span style={{ fontFamily: fontSerif, fontWeight: 400, fontStyle: 'italic', color: TC.sageDeep }}>
              complète, structurée et accessible en ligne.
            </span>
          </h1>
          {!m && (
            <p style={{
              fontFamily: fontSans, fontSize: 19, lineHeight: 1.58,
              color: TC.ink2, margin: '0 0 26px', maxWidth: 560, letterSpacing: -0.1,
            }}>
              Apprenez les fondamentaux de la naturopathie, développez votre posture
              professionnelle et préparez votre installation avec un parcours complet
              en 17 modules.
            </p>
          )}
          <div style={{
            display: m ? 'none' : 'flex', flexDirection: m ? 'column' : 'row',
            gap: m ? 10 : 12, alignItems: m ? 'stretch' : 'center', marginBottom: m ? 24 : 30,
          }}>
            <LNLinkBtn href="#apprendre" size="lg" fullWidth={m} cta="goto:apprendre" onClick={(e) => { e.preventDefault(); const t = document.getElementById('apprendre'); if (t) window.scrollTo({ top: t.getBoundingClientRect().top + window.scrollY - 72, behavior: 'smooth' }); }}>Découvrir la formation</LNLinkBtn>
          </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é (même disposition que formation-praticien-naturopathe) */}
        <div style={m
          ? { position: 'relative', display: 'flex', flexDirection: 'column' }
          : { position: 'relative', display: 'flex', flexDirection: 'column', width: '100%', maxWidth: 556, marginLeft: 'auto' }}>
          {m && (
            <div style={{ marginBottom: 18 }}>
              <ThreeVideosForm 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-naturopathie.jpg" alt=""
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 38%', display: 'block' }} />
          </div>
          {!m && (
            <div style={{ position: 'relative', zIndex: 2, width: 'calc(100% - 48px)', margin: '-68px auto 0' }}>
              <ThreeVideosForm m={m} />
            </div>
          )}
        </div>
      </div>
      <WhatsAppFAB />
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// POINTS CLÉS — bande de réassurance
// ════════════════════════════════════════════════════════════
function LNPointsCles({ device }) {
  const m = isMobLN(device);
  const items = [
    { theme: 'online',         t: 'Formation 100% en ligne', b: 'À votre rythme, où que vous soyez.' },
    { theme: 'book',           t: '17 modules structurés',   b: 'Des fondamentaux à l\u2019installation.' },
    { theme: 'holistic',       t: 'Formation qualifiante',  b: 'Certificat délivré en fin de formation.' },
    { theme: 'accompagnement', t: '5 formatrices spécialisées', b: 'Des praticiennes en exercice.' },
    { theme: 'reconversion',   t: 'Accompagnement installation', b: 'Statut, offre, visibilité, gestion.' },
  ];
  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: m ? 15.5 : 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>
  );
}

// ════════════════════════════════════════════════════════════
// POUR QUI
// ════════════════════════════════════════════════════════════
function LNPourQui({ device }) {
  const m = isMobLN(device);
  const points = [
    'Vous envisagez une reconversion professionnelle qui a du sens.',
    'Vous voulez accompagner les autres vers un mieux-être durable.',
    'Vous souhaitez créer votre cabinet et en vivre sereinement.',
    'Vous aimez apprendre à votre rythme, en ligne, bien entouré·e.',
  ];
  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="Pour qui ?" title="Pensée pour votre reconversion." 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,
          }}>
            Notre équipe accompagne celles et ceux qui désirent se reconvertir et
            ramener leurs futurs clients vers un mode de vie plus équilibré, pour
            retrouver leurs pleins pouvoirs d'auto-guérison.
          </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 }}>
            <LNInscription size="lg" fullWidth={m}>Je rejoins le cursus</LNInscription>
          </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/pourqui-naturopathie.png" alt=""
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 50%', display: 'block' }} />
          </div>
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// CE QUE VOUS ALLEZ APPRENDRE — Partie 1 + Partie 2
// ════════════════════════════════════════════════════════════
function LNApprendre({ device }) {
  const m = isMobLN(device);
  const parts = [
    {
      kicker: 'Partie 1 · Modules 1 à 6', theme: 'leaf',
      t: 'Les fondamentaux du praticien naturopathe',
      b: "Acquérir les bases théoriques, pratiques et professionnelles de l'approche naturopathique.",
      tags: ['Cures & tempéraments', 'Anatomie & physiologie', 'Alimentation', 'Phytothérapie', 'Iridologie', 'Déontologie', 'Aromathérapie', 'Huiles végétales & essentielles', 'Gemmothérapie', 'Fleurs de Bach'],
    },
    {
      kicker: 'Partie 2 · Modules 7 à 17', theme: 'reconversion',
      t: 'Installation & développement professionnel',
      b: 'Structurer son activité, clarifier son offre, développer sa visibilité et préparer son installation avec méthode.',
      tags: ['Statut & fiscalité', 'Offre & positionnement', 'Site & visibilité', 'Meta & Google Ads', 'Gestion & facturation', 'Plan d\u2019action'],
    },
  ];
  return (
    <Section id="apprendre" tone="white" padY={m ? [56, 56] : [88, 88]} padX={m ? 22 : 80}>
      <SectionHead
        eyebrow="Le programme"
        title="Ce que vous allez apprendre."
        sub="Un parcours organisé en deux grandes parties : d'abord les fondamentaux du métier, puis tout ce qu'il faut pour vous installer et vivre de votre activité."
        align="left"
        maxWidth={m ? '100%' : 720}
      />
      <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: m ? 16 : 22 }}>
        {parts.map((p) => (
          <div key={p.kicker} style={{
            background: TC.off, borderRadius: 22, border: `1px solid ${TC.hair}`,
            padding: m ? '26px 22px' : '34px 34px', display: 'flex', flexDirection: 'column', gap: 16,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <ThemeMark theme={p.theme} size={m ? 46 : 52} />
              <div style={{ fontFamily: fontMono, fontSize: 11.5, letterSpacing: 0.6, textTransform: 'uppercase', color: TC.sageDeep }}>{p.kicker}</div>
            </div>
            <div style={{ fontFamily: fontSans, fontSize: m ? 21 : 24, fontWeight: 600, color: TC.ink, letterSpacing: -0.5, lineHeight: 1.2 }}>{p.t}</div>
            <div style={{ fontFamily: fontSans, fontSize: m ? 14.5 : 15.5, lineHeight: 1.6, color: TC.ink2, letterSpacing: -0.05 }}>{p.b}</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 2 }}>
              {p.tags.map((tg) => (
                <span key={tg} style={{
                  fontFamily: fontSans, fontSize: 13, fontWeight: 500, color: TC.sageDeep,
                  background: TC.white, border: `1px solid ${TC.sageHair}`,
                  padding: '7px 13px', borderRadius: 999, letterSpacing: -0.05,
                }}>{tg}</span>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: m ? 24 : 32 }}>
        <LNLinkBtn href="#form-contact" size="lg" fullWidth={m}>En savoir plus</LNLinkBtn>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// PROGRAMME RÉSUMÉ — encart + téléchargement
// ════════════════════════════════════════════════════════════
const LN_PROGRAMME_URL = 'Programme complet - Trainin Center.html';

function LNProgramme({ device }) {
  const m = isMobLN(device);
  const stats = [
    { n: '17', l: 'modules' },
    { n: '2', l: 'parties' },
    { n: '5', l: 'formatrices' },
  ];
  return (
    <Section tone="off" padY={m ? [56, 56] : [88, 88]} padX={m ? 22 : 80}>
      <SectionHead
        eyebrow="Programme détaillé"
        title="Votre parcours, module par module."
        sub="17 modules pensés comme une progression : on construit d'abord le praticien, puis l'activité."
        align={m ? 'left' : 'center'}
        maxWidth={720}
      />

      <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 programme */}
        <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 }}>Programme complet · PDF</div>
            {[
              { k: 'Partie 1 · Modules 1 à 6', v: 'Fondamentaux du praticien' },
              { k: 'Partie 2 · Modules 7 à 17', v: 'Installation & développement' },
            ].map((p, i) => (
              <div key={p.k} style={{
                paddingTop: i ? 14 : 0, marginTop: i ? 14 : 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: 5, 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 }}>Certificat en fin de parcours</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 de chaque module.
          </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 reprend, module par module, l'intégralité des contenus
            abordés ainsi que les modalités d'inscription et de financement.
          </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>
          <LNLinkBtn href="#" size="lg" fullWidth={m} cta="goto:programme" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event('tc-open-programme')); }}>Télécharger le programme complet</LNLinkBtn>
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// VOS FORMATRICES
// ════════════════════════════════════════════════════════════
function LNFormatrices({ device }) {
  const m = isMobLN(device);
  const team = [
    { photo: 'assets/prof-andrea.jpg',     name: 'Andrea Fiedermutz',    role: 'Naturopathe certifiée',            line: 'Cures, tempéraments et techniques naturopathiques.' },
    { photo: 'assets/prof-maeva.jpg',      name: 'Maeva Mène',           role: 'Naturopathe-iridologue certifiée', line: 'L\u2019étude du corps humain, de l\u2019anatomie à la physiologie.' },
    { photo: 'assets/prof-antoinette.jpg', name: 'Antoinette Guépratte', role: 'Naturopathe certifiée',            line: 'L\u2019alimentation comme véritable outil de santé.' },
    { photo: 'assets/prof-oceane.jpg',     name: 'Océane Ruggiu',        role: 'Herboriste diplômée',              line: 'L\u2019art des plantes, de la phytothérapie à l\u2019aromathérapie.' },
    { photo: 'assets/prof-patricia.jpg',   name: 'Patricia Nourissat',   role: 'Naturopathe-iridologue certifiée', line: 'L\u2019iridologie et la posture professionnelle du praticien.' },
  ];
  return (
    <Section tone="white" padY={m ? [56, 56] : [88, 88]} padX={m ? 22 : 80}>
      <SectionHead
        eyebrow="Vos formatrices"
        title="Des praticiennes en exercice à vos côtés."
        sub="Chaque axe de la formation est porté par une intervenante spécialisée, avec qui vous échangez tout au long de votre apprentissage."
        align={m ? 'left' : 'center'}
        maxWidth={760}
      />
      <div style={{
        display: 'grid',
        gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)',
        gap: m ? 14 : 20, marginTop: m ? 6 : 16,
      }}>
        {team.map((t) => (
          <article key={t.name} style={{
            background: TC.off, border: `1px solid ${TC.hair}`, borderRadius: 20,
            padding: m ? '22px 22px' : '28px 26px',
            display: 'flex', flexDirection: m ? 'row' : 'column',
            alignItems: 'center', textAlign: m ? 'left' : 'center', gap: m ? 18 : 14,
          }}>
            <div style={{
              flexShrink: 0, width: m ? 92 : 110, height: m ? 92 : 110, borderRadius: '50%',
              overflow: 'hidden', border: `1px solid ${TC.hair}`, background: TC.sageSoft,
              boxShadow: '0 10px 28px -12px rgba(26,31,28,0.28)',
            }}>
              <img src={t.photo} alt={t.name}
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 18%', display: 'block' }} />
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: m ? 'flex-start' : 'center' }}>
              <h3 style={{ fontFamily: fontSans, fontSize: m ? 17 : 18.5, fontWeight: 600, color: TC.ink, letterSpacing: -0.3, margin: 0, lineHeight: 1.2 }}>{t.name}</h3>
              <div style={{ fontFamily: fontSans, fontSize: 12.5, fontWeight: 500, color: TC.sageDeep, marginTop: 5, letterSpacing: -0.05 }}>{t.role}</div>
              <p style={{ fontFamily: fontSans, fontSize: 13.5, lineHeight: 1.5, color: TC.ink2, margin: '10px 0 0', letterSpacing: -0.05, maxWidth: 260 }}>{t.line}</p>
            </div>
          </article>
        ))}
        {/* encart aligné sur la dernière colonne — CTA */}
        {!m && (
          <article style={{
            background: `linear-gradient(135deg, ${TC.sageMist} 0%, ${TC.sageSoft} 100%)`,
            border: `1px solid ${TC.sageHair}`, borderRadius: 20,
            padding: '28px 26px', display: 'flex', flexDirection: 'column',
            alignItems: 'flex-start', justifyContent: 'center', gap: 16,
          }}>
            <div style={{ fontFamily: fontSans, fontSize: 21, fontWeight: 600, color: TC.ink, letterSpacing: -0.4, lineHeight: 1.25 }}>
              Une équipe disponible tout au long du parcours.
            </div>
            <LNLinkBtn href="#" size="md" cta="goto:programme" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event('tc-open-programme')); }}>Recevoir le programme</LNLinkBtn>
          </article>
        )}
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: m ? 28 : 40 }}>
        <LNLinkBtn href="#form-contact" size="lg" fullWidth={m} cta="goto:contact">Réserver un entretien</LNLinkBtn>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// CTA FINAL — texte + formulaire intégré
// ════════════════════════════════════════════════════════════
function LNField({ 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 LNFinalCTA({ device }) {
  const m = isMobLN(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">Inscriptions ouvertes</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',
            }}>
              Votre nouvelle vocation{' '}
              <span style={{ fontFamily: fontSerif, fontStyle: 'italic', fontWeight: 400 }}>commence ici.</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 répondre à
              vos questions et vous accompagner vers l'inscription. 1 980 €,
              paiement en plusieurs fois possible.
            </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-naturopathie/"
              title="Formulaire de contact — Devenir praticien naturopathe"
              frameBorder="0"
              width="100%"
              height={m ? 590 : 550}
              className="tc-learnybox-frame tc-learnybox-frame-contact-naturopathie"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// TARIF
// ════════════════════════════════════════════════════════════
function LNTarif({ device }) {
  const m = isMobLN(device);
  const includes = [
    'Accès complet au cursus de naturopathie',
    'Certificat délivré en fin de parcours',
  ];

  const head = (
    <SectionHead
      eyebrow="Tarifs & inscription"
      title="Choisissez la formule qui correspond à votre projet."
      sub="Un tarif clair et des facilités de paiement pour vous lancer sereinement."
      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 }}>Formation Praticien naturopathe</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 }}>1 980 €</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: 13 }}>
          <div style={{ fontFamily: fontMono, fontSize: 11, letterSpacing: 0.7, textTransform: 'uppercase', color: TC.ink3, marginBottom: 1 }}>Inclus dans la formation</div>
          {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: 18, padding: m ? '20px 18px' : '24px 24px',
          background: TC.sageMist, borderRadius: 16, border: `1px solid ${TC.sageHair}`,
        }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 14 }}>
            <span style={{ fontFamily: fontSans, fontSize: m ? 15 : 16, fontWeight: 500, color: TC.ink, letterSpacing: -0.15 }}>Formation complète en ligne</span>
            <span style={{ fontFamily: fontSans, fontSize: m ? 19 : 21, fontWeight: 600, color: TC.ink, letterSpacing: -0.6, whiteSpace: 'nowrap' }}>1 980 €</span>
          </div>
          <div style={{ height: 1, background: TC.sageHair, margin: m ? '15px 0' : '17px 0' }} />
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 14 }}>
            <span style={{ fontFamily: fontSans, fontSize: m ? 14.5 : 15.5, fontWeight: 500, color: TC.ink2, letterSpacing: -0.15 }}>Accompagnement au lancement de votre activité <span style={{ color: TC.ink3, fontWeight: 400 }}>· en option</span></span>
            <span style={{ fontFamily: fontSans, fontSize: m ? 16 : 17.5, fontWeight: 600, color: TC.sageDeep, letterSpacing: -0.4, whiteSpace: 'nowrap' }}>+500 €</span>
          </div>
          <p style={{ fontFamily: fontSans, fontSize: m ? 13.5 : 14, lineHeight: 1.6, color: TC.ink3, letterSpacing: -0.05, margin: m ? '16px 0 0' : '18px 0 0' }}>
            Vous pouvez suivre la formation seule, à votre rythme, ou choisir l'accompagnement en fin de parcours pour lancer votre projet professionnel : création de vos premières campagnes marketing et, si besoin, votre site internet et mise en place des outils pour développer votre clientèle.
          </p>
        </div>

        <div style={{ marginTop: m ? 26 : 32 }}>
          <LNInscription size="lg" fullWidth href="https://espace.trainin-center.com/page-inscription-1/">Je m'inscris</LNInscription>
        </div>

        <div style={{
          marginTop: 18, display: 'flex', flexDirection: m ? 'column' : 'row',
          gap: m ? 10 : 18, justifyContent: 'center', alignItems: m ? 'flex-start' : 'center',
        }}>
          <div style={{ display: 'inline-flex', 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</span>
          </div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <IconCheck size={16} color={TC.sage} />
            <span style={{ fontFamily: fontSans, fontSize: 13, color: TC.ink2 }}>Garantie satisfait ou remboursé 30 jours</span>
          </div>
        </div>
      </div>
  );

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

  return (
    <section id="tarif" style={{ background: TC.white, padding: '64px 32px' }}>
      <div style={{
        position: 'relative', maxWidth: 1100, margin: '0 auto', width: '100%',
        background: TC.sageDeep, borderRadius: 36,
        padding: '64px 60px', overflow: 'hidden',
      }}>
        {head}
        {priceCard}
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// PAGE
// ════════════════════════════════════════════════════════════
function LandingNaturopathe({ device }) {
  return (
    <div style={{ background: TC.white, width: '100%', fontFamily: fontSans, color: TC.ink }}>
      <LNNav device={device} />
      <LNHero device={device} />
      <LNPointsCles device={device} />
      <LNApprendre device={device} />
      <LNProgramme device={device} />
      <LNPourQui device={device} />
      <LNFormatrices device={device} />
      <Testimonials device={device} footCtaLabel="Je démarre la formation" footCtaHref="https://espace.trainin-center.com/page-inscription-1/" footCta="learnybox:purchase" footCtaPrimary />
      <LeadMagnet device={device} emailCapture={false} ctaOnClick={() => window.dispatchEvent(new Event('tc-open-programme'))} ctaLabel="Recevoir le PDF" />
      <FAQ device={device} moreLabel="En savoir plus" moreOnClick={() => window.location.href='#form-contact'} morePrimary />
      <LNTarif device={device} />
      <LNFinalCTA device={device} />
      <ContactEncart device={device} contactHref="#form-contact" />
      <Footer device={device} />
    </div>
  );
}

Object.assign(window, { LandingNaturopathe });
