// Trainin Center — Page formation « Praticien naturopathe »
// Réutilise le design system (tc-system) + NavBar/Footer (tc-sections).
// Sections : Hero · Ce que vous apprendrez · Pour qui · Tarifs & inscription.

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

// Lien d'inscription (ancre stylée comme BtnPrimary) — href vers la page
// de paiement Learnybox (à brancher plus tard).
const PAIEMENT_URL_NATURO = 'https://espace.trainin-center.com/page-inscription-1/';

function InscriptionCTA({ size = 'lg', dark = false, fullWidth = false, children = "Je m'inscris", href = PAIEMENT_URL_NATURO }) {
  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>
  );
}

// FORMULAIRE « 3 VIDÉOS OFFERTES » (vrai POST natif Learnybox)
// Formulaire : Formulaire page Formation Naturopathie - 3 vidéos - 2026
// Tag : TC - lead naturopathie page formation 2026 · Séquence : Séquence 3 vidéos naturopathie 2026
const FV_ACTION = 'https://trainin-center.learnybox.com/form/6a4ab543434983dhxjestzom2pnqhxp8un/';
const FV_NOTICE = "J’accepte de recevoir par e-mail le programme et les informations de Trainin Center. Je peux me désinscrire à tout moment.";

function FVField({ placeholder, type = 'text', name, id }) {
  return (
    <input type={type} name={name} id={id} required 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 FVForm({ m }) {
  return (
    <form method="post" acceptCharset="UTF-8" action={FV_ACTION} data-cta="contact:submit" 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,
    }}>
      <input type="hidden" name="form_name" value="Formulaire page Formation Naturopathie - 3 vidéos - 2026" />
      <div style={{ fontFamily: fontSans, fontSize: m ? 16 : 17, fontWeight: 600, color: TC.ink, letterSpacing: -0.3, lineHeight: 1.25 }}>
        Recevez 3 vidéos offertes pour découvrir la formation praticien·ne naturopathe
      </div>
      <p style={{ fontFamily: fontSans, fontSize: 12.5, lineHeight: 1.5, color: TC.ink3, margin: '-2px 0 2px', letterSpacing: -0.02 }}>
        Découvrez le contenu du parcours, l’approche Trainin Center et les premières clés pour mieux comprendre le métier de naturopathe.
      </p>
      <FVField name="fname" id="form_input572525" placeholder="Votre nom et prénom *" />
      <FVField name="tel" id="form_input572530" type="text" placeholder="Votre numéro de téléphone *" />
      <FVField name="email" id="form_input572526" type="email" placeholder="Votre adresse email *" />
      <label htmlFor="rgpd572527" style={{ display: 'flex', alignItems: 'flex-start', gap: 8, cursor: 'pointer' }}>
        <input type="checkbox" value="1" name="rgpd" id="rgpd572527" data-no-uniform="true" required style={{ marginTop: 2, width: 15, height: 15, accentColor: TC.sage, flexShrink: 0 }} />
        <span style={{ fontFamily: fontSans, fontSize: 11, lineHeight: 1.45, color: TC.ink3, letterSpacing: -0.02 }}>
          J’accepte de recevoir par e-mail le programme et les informations de Trainin Center. Je peux me désinscrire à tout moment.
        </span>
        <input type="hidden" name="rgpd_notice" value={FV_NOTICE} />
      </label>
      <button type="submit" id="btn_submit_572528" data-cta="contact:submit" style={{
        height: 50, marginTop: 2, border: 'none', borderRadius: 999,
        background: TC.sage, color: TC.white, cursor: 'pointer',
        fontFamily: fontSans, fontSize: 15, fontWeight: 600, letterSpacing: -0.15,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9,
        boxShadow: '0 1px 2px rgba(0,0,0,0.06), 0 8px 22px rgba(90,145,105,0.28)',
      }}>
        Recevoir les 3 vidéos
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <path d="M3 7h8M8 4l3 3-3 3" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>
      <p style={{ fontFamily: fontSans, fontSize: 11, color: TC.ink3, textAlign: 'center', margin: 0, letterSpacing: -0.02 }}>
        Vos informations sont protégées.
      </p>
    </form>
  );
}

// ════════════════════════════════════════════════════════════
// HERO
// ════════════════════════════════════════════════════════════
function FormationHero({ device }) {
  const m = isMob(device);
  const pad = m ? '40px 22px 36px' : '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 : 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: '28px 80px 32px',
            display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 48, alignItems: 'center',
          }}>
        {/* text */}
        <div style={{ maxWidth: m ? '100%' : 500 }}>
          <div style={{ marginBottom: m ? 18 : 16 }}>
            <Eyebrow variant="gold" size={m ? 'sm' : 'md'}>Formation phare · Cursus certifiant</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',
          }}>
            Devenez{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,
            }}>praticien-ne naturopathe.</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%' : 520, letterSpacing: -0.1,
          }}>
            Un cursus complet, conçu par des naturopathes en exercice et des experts
            du développement d'entreprise pour pratiquer en confiance et vivre
            pleinement de votre métier.
          </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 + formulaire intégré (même disposition que la landing) */}
        <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 }}>
              <FVForm m={m} />
            </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={ASSET.naturopathie} alt=""
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 50%', display: 'block' }} />
          </div>
          {!m && (
            <div style={{ position: 'relative', zIndex: 2, width: 'calc(100% - 48px)', margin: '-68px auto 0' }}>
              <FVForm m={m} />
            </div>
          )}
        </div>
      </div>
      <WhatsAppFAB />
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// CE QUE VOUS ALLEZ APPRENDRE
// ════════════════════════════════════════════════════════════
function Apprentissage({ device }) {
  const m = isMob(device);
  const items = [
    { theme: 'leaf',          t: 'Les fondements de la naturopathie', b: "Anatomie, physiologie et hygiène de vie, les bases solides d'une pratique rigoureuse." },
    { theme: 'bowl',          t: 'Nutrition & alimentation saine',     b: "Les dernières avancées scientifiques sur une alimentation qui soutient la santé." },
    { theme: 'drop',          t: "L'action des plantes",               b: "Phytothérapie et bienfaits des plantes, à la lumière des recherches actuelles." },
    { theme: 'iris',          t: 'Iridologie',                         b: "Lire dans l'iris les signes de terrain pour affiner vos accompagnements." },
    { theme: 'holistic',      t: 'Accompagnement holistique',          b: "Ramener vos clients vers un mode de vie équilibré et leurs pleins pouvoirs d'auto-guérison." },
    { theme: 'reconversion',  t: 'Création & gestion d\u2019activité', b: "Créer, gérer et développer votre cabinet, guidé·e par des experts du développement d'entreprise." },
    { theme: 'online',        t: 'Marketing du naturopathe',           b: "Des techniques marketing spécialement adaptées pour assurer votre réussite." },
  ];
  return (
    <Section tone="white" padY={m ? [60, 60] : [96, 96]} padX={m ? 22 : 80}>
      <SectionHead
        eyebrow="Le programme"
        title="Ce que vous allez apprendre."
        sub="Une formation pensée par des professionnels naturopathes et experts en développement d'entreprise avec qui vous échangez et posez vos questions tout au long de votre apprentissage."
        align="left"
        maxWidth={m ? '100%' : 680}
      />
      <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>
        ))}

        {/* Encart d'inscription — comble l'espace libre de la dernière ligne sur desktop */}
        <div style={{
          gridColumn: m ? 'span 1' : 'span 2',
          display: 'flex', flexDirection: 'column',
          alignItems: 'flex-start', justifyContent: 'center', gap: 18,
          padding: m ? '26px 22px' : '30px 34px',
          background: `linear-gradient(135deg, ${TC.sageMist} 0%, ${TC.sageSoft} 100%)`,
          borderRadius: 18, border: `1px solid ${TC.sageHair}`,
        }}>
          <div style={{
            fontFamily: fontSans, fontSize: m ? 19 : 24, fontWeight: 600,
            color: TC.ink, letterSpacing: -0.5, lineHeight: 1.22, maxWidth: 460,
          }}>
            Votre nouvelle vocation commence ici.
          </div>
          <InscriptionCTA size="lg" fullWidth={m}>Je m'inscris</InscriptionCTA>
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// POUR QUI
// ════════════════════════════════════════════════════════════
function PourQui({ device }) {
  const m = isMob(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 ? [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',
      }}>
        {/* text */}
        <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 faire
            revenir leurs futurs clients à un mode de vie plus équilibré, afin de
            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>

        {/* image */}
        <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>
  );
}

// ════════════════════════════════════════════════════════════
// TARIFS & INSCRIPTION
// ════════════════════════════════════════════════════════════
function Tarifs({ device }) {
  const m = isMob(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 }}>
          <InscriptionCTA size="lg" fullWidth>Je m'inscris</InscriptionCTA>
        </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 tone="sage" padY={[60, 60]} padX={22}>
        {head}
        {priceCard}
      </Section>
    );
  }

  // Desktop — bloc contenu (même logique que le CTA vert "Vous en voulez plus ?"
  // de 3-videos-offertes.html) au lieu de la bande "Section" 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>
  );
}

// ════════════════════════════════════════════════════════════
// VOS FORMATRICES
// ════════════════════════════════════════════════════════════
function Formatrices({ device }) {
  const m = isMob(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’étude du corps humain, de l’anatomie à la physiologie.' },
    { photo: 'assets/prof-antoinette.jpg', name: 'Antoinette Guépratte', role: 'Naturopathe certifiée',            line: 'L’alimentation comme véritable outil de santé.' },
    { photo: 'assets/prof-oceane.jpg',     name: 'Océane Ruggiu',        role: 'Herboriste diplômée',              line: 'L’art des plantes, de la phytothérapie à l’aromathérapie.' },
    { photo: 'assets/prof-patricia.jpg',   name: 'Patricia Nourissat',   role: 'Naturopathe-iridologue certifiée', line: 'L’iridologie 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>
          <a href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event('tc-open-programme')); }} style={{ textDecoration: 'none', display: 'inline-block' }}>
              <span data-cta="goto:programme" style={{
                height: 50, padding: '0 22px', boxSizing: 'border-box',
                background: 'transparent', color: TC.ink, border: `1px solid ${TC.hairStrong}`,
                borderRadius: 999, fontFamily: fontSans, fontSize: 15, fontWeight: 500, letterSpacing: -0.15,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              }}>Recevoir le programme</span>
            </a>
          </article>
        )}
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: m ? 28 : 40 }}>
          <a href="contact.html#formulaire" style={{ textDecoration: 'none', display: m ? 'block' : 'inline-block', width: m ? '100%' : 'auto' }}>
            <span data-cta="goto:contact" style={{
              height: 56, padding: '0 32px', boxSizing: 'border-box',
              background: TC.sage, color: TC.white, borderRadius: 999,
              fontFamily: fontSans, fontSize: 16, fontWeight: 600, letterSpacing: -0.15,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              width: m ? '100%' : 'auto',
              boxShadow: '0 1px 2px rgba(0,0,0,0.06), 0 8px 22px rgba(90,145,105,0.28)',
            }}>
              Réserver un entretien
              <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>
            </span>
          </a>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// PAGE
// ════════════════════════════════════════════════════════════
function FormationNaturopathe({ device }) {
  return (
    <div style={{ background: TC.white, width: '100%', fontFamily: fontSans, color: TC.ink }}>
      <NavBar device={device} />
      <FormationHero device={device} />
      <Apprentissage device={device} />
      <Formatrices device={device} />
      <PourQui device={device} />
      <Tarifs device={device} />
      <ContactEncart device={device} contactHref="contact.html#formulaire" />
      <Footer device={device} />
    </div>
  );
}

Object.assign(window, { FormationNaturopathe });