// Trainin Center — homepage sections.
// Each section accepts { device: 'mobile' | 'desktop' } and adapts.
// Composition lives in tc-homepage.jsx.
//
// ── CTA MAP (provisionné, à brancher plus tard) ─────────────
// Chaque bouton porte un attribut data-cta déclarant sa destination future.
// Aucune fonctionnalité réelle n'est codée pour l'instant.
//   goto:formations   → section « Nos formations » de la homepage
//   goto:programme     → section « Programme PDF » (lead magnet)
//   goto:contact       → section « Contact »
//   learnybox:login    → connexion Learnybox
//   learnybox:purchase → page d'achat Learnybox de la formation (bouton « Je m'inscris »)
//   whatsapp:direct    → ouverture WhatsApp direct (bouton flottant)

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

// ════════════════════════════════════════════════════════════
// NAVBAR
// ════════════════════════════════════════════════════════════
function NavBar({ device, dark = false }) {
  const m = isM(device);
  const fg = dark ? TC.white : TC.ink;
  const muted = dark ? 'rgba(255,255,255,0.72)' : TC.ink2;
  const border = dark ? 'rgba(255,255,255,0.1)' : TC.hair;
  const [openDrop, setOpenDrop] = React.useState(false);
  const [mobOpen, setMobOpen] = React.useState(false);

  const mobLinks = [
    { l: 'Accueil', href: 'index.html' },
    { l: 'Praticien naturopathe', href: 'formation-praticien-naturopathe.html' },
    { l: 'Fréquences énergétiques', href: 'formation-frequences-energetiques.html' },
    { l: 'Modules à la carte', href: 'modules-a-la-carte.html' },
    { l: 'L\u2019école', href: 'ecole.html' },
    { l: 'Méthode', href: 'methode.html' },
    { l: 'Avis élèves', href: 'index.html#temoignages' },
    { l: 'Blog', href: 'blog.html' },
    { l: 'Contact', href: 'contact.html' },
    { l: 'Se connecter', href: 'https://trainin-center.learnybox.com/formation/home/' },
  ];

  const formationsItems = [
    { t: 'Praticien naturopathe',     s: 'Cursus complet · 24 mois',   href: 'formation-praticien-naturopathe.html' },
    { t: 'Fréquences énergétiques',   s: 'Approche vibratoire · 6 mois', href: 'formation-frequences-energetiques.html' },
    { t: 'Modules à la carte',        s: 'Composez votre parcours',     href: 'modules-a-la-carte.html' },
  ];
  const links = [
    { l: 'Nos formations', dropdown: true },
    { l: 'L\u2019école', href: 'ecole.html' },
    { l: 'Méthode', href: 'methode.html' },
    { l: 'Avis élèves', href: 'index.html#temoignages' },
    { l: 'Blog', href: 'blog.html' },
  ];

  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      height: m ? 76 : 96, padding: m ? '0 16px 0 4px' : 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: dark ? 'rgba(28,37,32,0.85)' : 'rgba(255,255,255,0.9)',
      backdropFilter: 'saturate(160%) blur(14px)',
      WebkitBackdropFilter: 'saturate(160%) blur(14px)',
      borderBottom: `1px solid ${border}`,
    }}>
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      width: '100%', height: '100%',
      ...(m ? {} : { maxWidth: TC_CONTAINER, margin: '0 auto', padding: '0 32px' }),
    }}>
      <a href="index.html" style={{ display: 'inline-flex', lineHeight: 0 }}><TCLogo height={m ? 53 : 72} color={dark ? 'white' : undefined} /></a>

      {!m && (
        <div style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
          {links.map((it) => (
            <div key={it.l}
              onMouseEnter={() => it.dropdown && setOpenDrop(true)}
              onMouseLeave={() => it.dropdown && setOpenDrop(false)}
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 5,
                fontFamily: fontSans, fontSize: 14, fontWeight: 500,
                color: muted, letterSpacing: -0.05, cursor: 'pointer',
                position: 'relative',
                ...(it.l === 'Nos formations' ? { color: fg } : {}),
              }}>
              {it.href ? (
                <a href={it.href} style={{ color: 'inherit', textDecoration: 'none' }}>{it.l}</a>
              ) : it.l}
              {it.dropdown && (
                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" style={{ marginTop: 1, transform: openDrop ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}>
                  <path d="M2 4l3 3 3-3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              )}
              {it.dropdown && openDrop && (
                <div style={{ position: 'absolute', top: '100%', left: '50%', transform: 'translateX(-50%)', paddingTop: 22, zIndex: 60 }}>
                  <div style={{
                    background: TC.white, borderRadius: 18, border: `1px solid ${TC.hair}`,
                    boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 22px 60px rgba(26,31,28,0.16)',
                    padding: 8, width: 320,
                  }}>
                    {formationsItems.map((f) => (
                      <a key={f.t} href={f.href} className="tc-nav-drop-item" style={{
                        display: 'flex', alignItems: 'center', gap: 14,
                        textDecoration: 'none', padding: '12px 14px', borderRadius: 12,
                        transition: 'background .14s',
                      }}>
                        <span style={{
                          width: 8, height: 8, borderRadius: 4, background: TC.sage, flexShrink: 0,
                        }} />
                        <span>
                          <span style={{ display: 'block', fontFamily: fontSans, fontSize: 14.5, fontWeight: 600, color: TC.ink, letterSpacing: -0.2 }}>{f.t}</span>
                          <span style={{ display: 'block', fontFamily: fontSans, fontSize: 12.5, color: TC.ink3, marginTop: 2 }}>{f.s}</span>
                        </span>
                      </a>
                    ))}
                  </div>
                </div>
              )}
            </div>
          ))}
          <style>{`.tc-nav-drop-item:hover{background:${TC.sageMist};}`}</style>
        </div>
      )}

      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        {!m && (
          <a href="https://trainin-center.learnybox.com/formation/home/" rel="noopener noreferrer" data-cta="learnybox:login" style={{ fontFamily: fontSans, fontSize: 14, fontWeight: 500, color: muted, cursor: 'pointer', textDecoration: 'none' }}>Se connecter</a>
        )}
        {m ? (
          <>
            <a href="contact.html#formulaire" style={{ textDecoration: 'none' }}><BtnPrimary size="sm" icon={false} data-cta="goto:contact">Contact</BtnPrimary></a>
            <button aria-label="Menu" onClick={() => setMobOpen((v) => !v)} style={{
              width: 42, height: 42, borderRadius: 21, border: 'none',
              background: mobOpen ? TC.sage : (dark ? 'rgba(255,255,255,0.08)' : TC.sageMist),
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
            }}>
              {mobOpen ? (
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M2 2l12 12M14 2L2 14" stroke={dark ? TC.white : TC.sageDeep} strokeWidth="1.7" strokeLinecap="round"/>
                </svg>
              ) : (
                <svg width="18" height="14" viewBox="0 0 18 14" fill="none">
                  <path d="M1 1h16M1 7h16M1 13h10" stroke={dark ? TC.white : TC.sageDeep} strokeWidth="1.7" strokeLinecap="round"/>
                </svg>
              )}
            </button>
            {mobOpen && (
              <div style={{
                position: 'absolute', top: m ? 76 : 96, left: 0, right: 0, zIndex: 70,
                background: TC.white, borderBottom: `1px solid ${TC.hair}`,
                boxShadow: '0 22px 50px -20px rgba(26,31,28,0.28)',
                padding: '10px 12px 16px',
                display: 'flex', flexDirection: 'column',
              }}>
                {mobLinks.map((it, i) => (
                  <a key={it.l} href={it.href} onClick={() => setMobOpen(false)} className="tc-mob-link" style={{
                    fontFamily: fontSans, fontSize: 16, fontWeight: 500, color: TC.ink,
                    textDecoration: 'none', padding: '15px 14px',
                    borderTop: i === 0 ? 'none' : `1px solid ${TC.hair}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  }}>
                    {it.l}
                    <svg width="13" height="13" viewBox="0 0 14 14" fill="none">
                      <path d="M5 3l4 4-4 4" stroke={TC.ink3} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </a>
                ))}
                <style>{`.tc-mob-link:active{background:${TC.sageMist};color:${TC.sageDeep};}@media (hover:hover){.tc-mob-link:hover{background:${TC.sageMist};}}`}</style>
              </div>
            )}
          </>
        ) : (
          <a href="contact.html#formulaire" style={{ textDecoration: 'none' }}><BtnPrimary size="sm" data-cta="goto:contact">Contactez-nous</BtnPrimary></a>
        )}
      </div>
    </div>
    </nav>
  );
}

// ════════════════════════════════════════════════════════════
// HERO — editorial direction with real photo
// ════════════════════════════════════════════════════════════
function Hero({ device }) {
  const m = isM(device);
  const pad = m ? '36px 22px 28px' : '76px 80px 64px';
  return (
    <section style={{ background: TC.off, position: 'relative', overflow: 'hidden' }}>
      {/* subtle background circle */}
      <div style={{
        position: 'absolute', top: m ? -120 : -260, right: m ? -160 : -160,
        width: m ? 380 : 720, height: m ? 380 : 720,
        borderRadius: '50%',
        background: `radial-gradient(circle, ${TC.sageSoft} 0%, ${TC.off} 65%)`,
        pointerEvents: 'none',
      }} />

      <div style={{
        position: 'relative',
        padding: pad,
        maxWidth: TC_CONTAINER, margin: '0 auto', width: '100%',
        display: m ? 'flex' : 'grid',
        flexDirection: m ? 'column' : undefined,
        gridTemplateColumns: m ? undefined : '1.05fr 1fr',
        gap: m ? 28 : 80,
        alignItems: 'center',
      }}>
        {/* text column */}
        <div style={{ maxWidth: m ? '100%' : 620 }}>
          <div style={{
            fontFamily: fontMono, fontSize: m ? 12 : 13, letterSpacing: 2,
            textTransform: 'uppercase',
            color: TC.sageDeep, marginBottom: m ? 18 : 16,
            display: 'flex', alignItems: 'center', gap: 12,
            marginLeft: m ? 2.5 : 7,
          }}>
            Devenez acteur du bien-être
          </div>
          <h1 style={{
            fontFamily: fontSans,
            fontSize: m ? 44 : 'clamp(52px, 4vw, 64px)',
            fontWeight: 500,
            letterSpacing: m ? -1.4 : -2.4,
            lineHeight: 1.02,
            margin: '0 0 12px',
            color: TC.ink, textWrap: 'balance',
          }}>
            Formez-vous en ligne,{m ? ' ' : <br />}
            <span style={{
              fontFamily: fontSerif, fontWeight: 400, fontStyle: 'italic',
              color: TC.sageDeep,
              fontSize: m ? 52 : 'clamp(56px, 4.6vw, 72px)',
              letterSpacing: m ? -1.6 : -2,
            }}>transmettez le bien-être.</span>
          </h1>
          <p style={{
            fontFamily: fontSans, fontSize: m ? 16.5 : 19,
            lineHeight: 1.55, color: TC.ink2,
            margin: '0 0 18px', maxWidth: m ? '100%' : 500, letterSpacing: -0.1,
          }}>
            Une école française qui forme à la naturopathie, la sophrologie,
            la nutrition et l'énergétique dans une approche holistique,
            rigoureuse et profondément humaine.
          </p>
          <div style={{
            display: 'flex',
            flexDirection: m ? 'column' : 'row',
            gap: m ? 10 : 12,
            alignItems: m ? 'stretch' : 'center',
          }}>
            <a href="#formations" style={{ textDecoration: 'none', display: m ? 'block' : 'inline-block' }}><BtnPrimary size="lg" fullWidth={m} data-cta="goto:formations">Découvrir les formations</BtnPrimary></a>
            <BtnGhost size="lg" fullWidth={m} data-cta="goto:programme" onClick={() => window.dispatchEvent(new Event('tc-open-programme'))}>Recevoir le programme</BtnGhost>
          </div>
        </div>

        {/* photo column */}
        <div style={{ position: 'relative' }}>
          <div style={{
            position: 'relative',
            width: '100%',
            aspectRatio: m ? '4 / 5' : '5 / 6',
            maxHeight: m ? undefined : 'clamp(480px, 34vw, 580px)',
            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.hero} alt=""
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: m ? '72% 35%' : '70% 35%', display: 'block' }} />
          </div>
          {/* floating testimonial card */}
          <div style={{
            position: 'absolute',
            left: m ? '50%' : -32,
            transform: m ? 'translateX(-50%)' : 'none',
            bottom: m ? -28 : 36,
            width: m ? 'calc(100% - 40px)' : 280,
            background: TC.white,
            borderRadius: 16,
            padding: '16px 18px',
            boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 14px 36px rgba(26,31,28,0.10)',
            border: `1px solid ${TC.hair}`,
          }}>
            <StarRow />
            <div style={{
              fontFamily: fontSans, fontSize: 13.5, lineHeight: 1.5,
              color: TC.ink, marginTop: 8, letterSpacing: -0.1,
            }}>
              « Exigeante, humaine, et concrète jusqu'au bout. Je consulte depuis 8 mois. »
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 12 }}>
              <div style={{
                width: 28, height: 28, borderRadius: 14,
                background: TC.sageSoft, color: TC.sageDeep,
                fontSize: 11, fontWeight: 600,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>LB</div>
              <div style={{ fontSize: 12, color: TC.ink3 }}>Laura B.</div>
            </div>
          </div>
        </div>
      </div>
      <WhatsAppFAB />
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// TRUST STRIP — sits between hero and benefits
// ════════════════════════════════════════════════════════════
function TrustStrip({ device }) {
  const m = isM(device);
  const items = [
    { n: '2 400+', l: 'élèves formés' },
    { n: '4,9/5',  l: 'note moyenne', sub: 'sur 800+ avis' },
    { n: '15 ans', l: "d'expertise" },
  ];
  return (
    <section style={{
      background: TC.white, padding: m ? '52px 0 36px' : '64px 0 36px',
      borderBottom: `1px solid ${TC.hair}`,
    }}>
      <div style={containerBox(m ? 22 : 80)}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)',
        gap: m ? 24 : 0,
      }}>
        {items.map((it, i) => (
          <div key={it.n} style={{
            paddingLeft: !m && i > 0 ? 32 : 0,
            borderLeft: !m && i > 0 ? `1px solid ${TC.hair}` : 'none',
            paddingBottom: m && i < items.length - 1 ? 24 : 0,
            borderBottom: m && i < items.length - 1 ? `1px solid ${TC.hair}` : 'none',
            textAlign: 'left',
          }}>
            <div style={{
              fontFamily: fontSans, fontSize: m ? 36 : 44, fontWeight: 600,
              color: TC.ink, letterSpacing: -1.4, lineHeight: 1,
            }}>{it.n}</div>
            <div style={{
              fontFamily: fontSans, fontSize: 14, color: TC.ink2,
              marginTop: 8, letterSpacing: -0.05,
            }}>{it.l}{it.sub && <span style={{ color: TC.ink3 }}> · {it.sub}</span>}</div>
          </div>
        ))}
      </div>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// BÉNÉFICES — 4 items en strip horizontal (desktop) / 2×2 (mobile)
// ════════════════════════════════════════════════════════════
function BenefitIcon({ type, size = 36, color = TC.sage }) {
  const sw = 1.4;
  const inner = {
    online: (
      <g fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
        <rect x="4" y="6" width="24" height="16" rx="2" />
        <path d="M12 26h8M16 22v4" />
      </g>
    ),
    holistic: (
      <g fill="none" stroke={color} strokeWidth={sw}>
        <circle cx="12" cy="12" r="7" />
        <circle cx="20" cy="12" r="7" />
        <circle cx="16" cy="20" r="7" />
      </g>
    ),
    certif: (
      <g fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
        <circle cx="16" cy="13" r="7" />
        <path d="M12 18l-2 10 6-3 6 3-2-10" />
        <path d="M13 13l2 2 4-4" />
      </g>
    ),
    human: (
      <g fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
        <circle cx="11" cy="11" r="4" />
        <circle cx="21" cy="11" r="4" />
        <path d="M4 24c1-3.5 4-5 7-5s6 1.5 7 5" />
        <path d="M17 24c1-3.5 4-5 7-5s6 1.5 7 5" />
      </g>
    ),
  }[type];
  return (
    <svg width={size} height={size} viewBox="0 0 32 32">{inner}</svg>
  );
}

function Benefits({ device }) {
  const m = isM(device);
  const items = [
    { icon: 'online',   title: 'Formations 100% en ligne',  body: 'Apprenez à votre rythme, où que vous soyez.' },
    { icon: 'holistic', title: 'Approche holistique',       body: 'Des méthodes naturelles et complètes pour le bien-être.' },
    { icon: 'certif',   title: 'Formations qualifiantes',  body: 'Valorisez vos compétences et votre activité.' },
    { icon: 'human',    title: 'Accompagnement humain',     body: 'Une équipe et des formateurs à vos côtés.' },
  ];

  const cardPad = m ? '20px 18px' : '24px 22px';
  const iconSize = m ? 30 : 34;
  const titleSize = m ? 15 : 16.5;
  const bodySize = m ? 13 : 14;

  return (
    <Section tone="white" padY={m ? [44, 44] : [44, 56]} padX={m ? 22 : 80}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: m ? '1fr 1fr' : 'repeat(4, 1fr)',
        gap: m ? 16 : 20,
      }}>
        {items.map((it) => (
          <div key={it.title} style={{
            display: 'flex', flexDirection: 'column', gap: 12,
            padding: cardPad,
            background: TC.off, borderRadius: 16,
            border: `1px solid ${TC.hair}`,
          }}>
            <BenefitIcon type={it.icon} size={iconSize} />
            <div style={{
              fontFamily: fontSans, fontSize: titleSize, fontWeight: 600,
              color: TC.ink, letterSpacing: -0.25, lineHeight: 1.22,
            }}>{it.title}</div>
            <div style={{
              fontFamily: fontSans, fontSize: bodySize, lineHeight: 1.5,
              color: TC.ink2, letterSpacing: -0.05,
            }}>{it.body}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// FORMATIONS
// ════════════════════════════════════════════════════════════
function Formations({ device }) {
  const m = isM(device);

  // Fills its parent — real photo if `img`, styled placeholder otherwise.
  const FillImg = ({ img, caption, tone, pos }) => (
    img ? (
      <img src={img} alt="" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        objectFit: 'cover', objectPosition: pos || 'center', display: 'block',
      }} />
    ) : (
      <div style={{ position: 'absolute', inset: 0 }}>
        <PhotoPlaceholder caption={caption} tone={tone} radius={0} height="100%" />
      </div>
    )
  );

  const DurChip = ({ children }) => (
    <div style={{
      position: 'absolute', bottom: 14, right: 14,
      background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(8px)',
      padding: '5px 10px', borderRadius: 999,
      fontFamily: fontMono, fontSize: 11, color: TC.sageDeep,
      border: `1px solid ${TC.sageHair}`,
    }}>{children}</div>
  );

  const openProg = () => window.dispatchEvent(new Event('tc-open-programme'));
  const CardLink = ({ children = 'Découvrir le programme', href, onClick }) => {
    const inner = (<>{children}<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M8 4l3 3-3 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg></>);
    const base = { marginTop: 4, display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: fontSans, fontSize: 14, fontWeight: 500, color: TC.sageDeep };
    if (href) return <a href={href} style={{ ...base, textDecoration: 'none' }}>{inner}</a>;
    return <div onClick={onClick} style={{ ...base, cursor: 'pointer' }}>{inner}</div>;
  };

  // Compact card used for the two right-column entries (and stacked on mobile).
  const MiniCard = ({ theme, tag, name, duration, body, img, caption, tone, pos, visual }) => (
    <div style={{
      flex: 1, background: TC.white, borderRadius: 22,
      border: `1px solid ${TC.hair}`, overflow: 'hidden',
      display: 'flex', flexDirection: m ? 'column' : 'row',
      minHeight: m ? undefined : 0,
    }}>
      <div style={{
        position: 'relative', flexShrink: 0,
        width: m ? '100%' : '40%',
        aspectRatio: m ? '16 / 10' : 'auto',
      }}>
        {visual ? visual : <FillImg img={img} caption={caption} tone={tone} pos={pos} />}
        {tag && (
          <div style={{ position: 'absolute', top: 14, left: 14 }}>
            <Eyebrow variant="sage" size="sm">{tag}</Eyebrow>
          </div>
        )}
        {duration && <DurChip>{duration}</DurChip>}
      </div>
      <div style={{
        padding: m ? '18px 18px 20px' : '22px 24px',
        display: 'flex', flexDirection: 'column', gap: 9, flex: 1,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <ThemeMark theme={theme} size={34} />
          <div style={{ fontFamily: fontSans, fontSize: 19, fontWeight: 600, color: TC.ink, letterSpacing: -0.5 }}>{name}</div>
        </div>
        <div style={{ fontFamily: fontSans, fontSize: 14, lineHeight: 1.5, color: TC.ink2, letterSpacing: -0.05, flex: 1 }}>{body}</div>
        <CardLink href={theme === 'book' ? 'modules-a-la-carte.html' : undefined} onClick={theme !== 'book' ? openProg : undefined}>{theme === 'book' ? 'Composer mon parcours' : 'Découvrir le programme'}</CardLink>
      </div>
    </div>
  );

  // "Au menu" tile for the Modules à la carte card — composed, not a photo.
  const ModulesMenu = () => {
    const mods = ['Iridologie', 'Phytothérapie', 'Aromathérapie', 'Fleurs de Bach', 'Réflexologie'];
    return (
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(150deg, ${TC.sageMist} 0%, ${TC.sageSoft} 100%)`,
        padding: m ? '20px 22px' : '20px 20px',
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
      }}>
        <div style={{
          fontFamily: fontMono, fontSize: 9.5, letterSpacing: 1.4,
          textTransform: 'uppercase', color: TC.sageDeep, opacity: 0.85, marginBottom: 10,
        }}>Au menu · au choix</div>
        {mods.map((md, i) => (
          <div key={md} style={{
            display: 'flex', alignItems: 'center', gap: 9,
            padding: '6.5px 0',
            borderTop: i ? `1px solid ${TC.sageHair}` : 'none',
          }}>
            <span style={{ width: 5, height: 5, borderRadius: 3, background: TC.sage, flexShrink: 0 }} />
            <span style={{ fontFamily: fontSans, fontSize: 12.5, color: TC.ink, letterSpacing: -0.1, fontWeight: 500 }}>{md}</span>
          </div>
        ))}
      </div>
    );
  };

  return (
    <Section id="formations" tone="off" padY={m ? [64, 64] : [96, 96]} padX={m ? 22 : 80}>
      <div style={{
        display: 'flex', flexDirection: m ? 'column' : 'row',
        alignItems: m ? 'flex-start' : 'flex-end', justifyContent: 'space-between',
        gap: m ? 16 : 32, marginBottom: m ? 28 : 40,
      }}>
        <SectionHead
          eyebrow="Nos formations"
          title="Deux voies, une même exigence."
          sub="Deux cursus qui préparent à un métier et des modules à la carte pour composer votre parcours. Tous pensés pour pratiquer, avec un accompagnement à la création d'activité."
          align="left"
          maxWidth={m ? '100%' : 600}
        />
        {!m && <BtnPrimary size="md" onClick={() => window.dispatchEvent(new Event('tc-open-programme'))}>Recevez le programme</BtnPrimary>}
      </div>

      <div style={{
        display: m ? 'flex' : 'grid',
        flexDirection: m ? 'column' : undefined,
        gridTemplateColumns: m ? undefined : '1.18fr 1fr',
        gap: m ? 16 : 22,
        alignItems: 'stretch',
      }}>
        {/* PHARE — Naturopathie */}
        <div style={{
          background: TC.white, borderRadius: 22,
          border: `1px solid ${TC.hair}`, overflow: 'hidden',
          display: 'flex', flexDirection: 'column',
        }}>
          <div style={{ position: 'relative', aspectRatio: m ? '4 / 3' : '16 / 11', width: '100%' }}>
            <FillImg img={ASSET.naturopathie} pos="50% 64%" />
            <div style={{ position: 'absolute', top: 14, left: 14 }}>
              <Eyebrow variant="gold" size="sm">Formation phare</Eyebrow>
            </div>
          </div>
          <div style={{ padding: m ? '20px 20px 22px' : '26px 28px 28px', display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
              <ThemeMark theme="leaf" size={40} />
              <div style={{ fontFamily: fontSans, fontSize: m ? 22 : 25, fontWeight: 600, color: TC.ink, letterSpacing: -0.6 }}>Naturopathie</div>
            </div>
            <div style={{ fontFamily: fontSans, fontSize: 15, lineHeight: 1.6, color: TC.ink2, letterSpacing: -0.05, flex: 1, maxWidth: 480 }}>
              Maîtriser les fondements de la santé naturelle phytothérapie, nutrition,
              hygiène de vie et accompagner durablement vers un mieux-être global.
            </div>
            <CardLink onClick={openProg} />
          </div>
        </div>

        {/* RIGHT — Fréquences énergétiques + Modules */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: m ? 16 : 22 }}>
          <MiniCard
            theme="wave"
            name="Fréquences énergétiques"
            body="Découvrir les approches vibratoires et leur intégration en consultation."
            img={ASSET.frequences}
            pos="62% 42%"
          />
          <MiniCard
            theme="book"
            tag="Sur mesure"
            name="Modules à la carte"
            body="Iridologie, phytothérapie, aromathérapie… des modules à composer librement, selon vos besoins."
            img={ASSET.modules}
            pos="50% 50%"
          />
        </div>
      </div>

      {m && (
        <div style={{ marginTop: 24 }}>
          <BtnPrimary size="md" fullWidth onClick={() => window.dispatchEvent(new Event('tc-open-programme'))}>Recevez le programme</BtnPrimary>
        </div>
      )}
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// LEAD MAGNET — dark sage section with PDF download
// ════════════════════════════════════════════════════════════
function LeadMagnet({ device, emailCapture = true, ctaHref, ctaOnClick, ctaLabel = 'Recevoir le PDF' }) {
  const m = isM(device);
  return (
    <Section id="programme" tone="sage" padY={m ? [64, 64] : [96, 96]} padX={m ? 22 : 80}>
      <div style={{
        display: m ? 'flex' : 'grid',
        flexDirection: m ? 'column' : undefined,
        gridTemplateColumns: m ? undefined : '1.1fr 0.9fr',
        gap: m ? 32 : 72, alignItems: 'center',
      }}>
        <div>
          <Eyebrow variant="light">Programme complet · PDF gratuit</Eyebrow>
          <h2 style={{
            fontFamily: fontSans, fontSize: m ? 34 : 52, fontWeight: 500,
            letterSpacing: m ? -1.2 : -1.8, lineHeight: 1.06,
            color: TC.white, margin: '18px 0 16px', textWrap: 'balance',
          }}>
            Recevez le programme détaillé de l'école <span style={{ fontFamily: fontSerif, fontStyle: 'italic', fontWeight: 400 }}>en quelques secondes.</span>
          </h2>
          <p style={{
            fontFamily: fontSans, fontSize: 16.5, lineHeight: 1.6,
            color: 'rgba(255,255,255,0.78)', margin: '0 0 28px', letterSpacing: -0.1,
            maxWidth: 480,
          }}>
            Programmes complets, durées, modalités d'inscription, financements, certifications. Tout pour faire le bon choix, sereinement.
          </p>
          <div style={{
            display: 'flex', flexDirection: m ? 'column' : 'row',
            gap: 10, maxWidth: m ? '100%' : 460, alignItems: 'stretch',
          }}>
            {emailCapture && (
              <>
                <input
                  type="email" placeholder="votre@email.com" className="tc-pdf-email"
                  style={{
                    flex: 1, height: 54, padding: '0 18px',
                    background: 'rgba(255,255,255,0.08)', color: TC.white,
                    border: '1px solid rgba(255,255,255,0.2)', borderRadius: 999,
                    fontFamily: fontSans, fontSize: 15, outline: 'none',
                  }}
                />
                <style>{`.tc-pdf-email::placeholder{color:rgba(255,255,255,0.92);opacity:1;}`}</style>
              </>
            )}
            {ctaHref
              ? <a href={ctaHref} style={{ textDecoration: 'none', display: m ? 'block' : 'inline-block' }}><BtnPrimary size="lg" dark fullWidth={m} data-cta="goto:programme">{ctaLabel}</BtnPrimary></a>
              : <BtnPrimary size="lg" dark fullWidth={m} data-cta="goto:programme" onClick={ctaOnClick}>{ctaLabel}</BtnPrimary>}
          </div>
          <div style={{
            marginTop: 16, display: 'flex', alignItems: 'center', gap: 8,
            color: 'rgba(255,255,255,0.6)', fontSize: 12.5,
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <rect x="2" y="6" width="10" height="6" rx="1.5" stroke="currentColor" strokeWidth="1.4"/>
              <path d="M4.5 6V4a2.5 2.5 0 015 0v2" stroke="currentColor" strokeWidth="1.4"/>
            </svg>
            Vos données restent confidentielles. Demande sans engagement.
          </div>
        </div>

        {/* PDF mockup */}
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
          {/* back card */}
          <div style={{
            position: 'absolute', top: 12, right: m ? '50%' : -8,
            transform: m ? 'translateX(50%) rotate(-4deg)' : 'rotate(-6deg)',
            width: m ? 220 : 240, height: m ? 300 : 330,
            background: '#fbf9f3', borderRadius: 6,
            boxShadow: '0 20px 60px rgba(0,0,0,0.25)',
          }} />
          {/* front card */}
          <div style={{
            position: 'relative',
            width: m ? 240 : 280, height: m ? 320 : 380,
            background: TC.off, borderRadius: 6,
            boxShadow: '0 30px 80px rgba(0,0,0,0.35)',
            padding: m ? '28px 24px' : '36px 32px',
            display: 'flex', flexDirection: 'column',
            transform: 'rotate(3deg)',
          }}>
            <img src={ASSET.logoFull} alt="Trainin Center" style={{ height: m ? 26 : 30, width: 'auto', objectFit: 'contain', alignSelf: 'flex-start' }} />
            <div style={{
              fontFamily: fontSans, fontSize: m ? 22 : 26, fontWeight: 500,
              color: TC.ink, letterSpacing: -0.7, lineHeight: 1.1, marginTop: 20,
            }}>
              Toutes nos formations <span style={{ fontFamily: fontSerif, fontStyle: 'italic', fontWeight: 400 }}>en détail</span>.
            </div>
            <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {['Naturopathie', 'Fréquences énergétiques', 'Phytothérapie', 'Iridologie', 'Modules à la carte'].map((t, i) => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: TC.ink2 }}>
                  <span style={{ fontFamily: fontMono, color: TC.sageDeep, width: 18 }}>{String(i + 1).padStart(2, '0')}</span>
                  <span style={{ fontFamily: fontSans }}>{t}</span>
                  <span style={{ flex: 1, height: 1, background: TC.hair }} />
                </div>
              ))}
            </div>
            <div style={{ flex: 1 }} />
            <div style={{ fontFamily: fontMono, fontSize: 9, color: TC.ink3, letterSpacing: 0.5, textTransform: 'uppercase' }}>12 pages · PDF</div>
          </div>
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// POURQUOI TRAININ CENTER — supporting image + reasons list
// ════════════════════════════════════════════════════════════
function WhyTC({ device }) {
  const m = isM(device);
  const reasons = [
    { n: '01', t: 'Une école reconnue',  b: 'Une pédagogie qui a fait ses preuves, certifications délivrées, suivi à long terme.' },
    { n: '02', t: 'Des formateurs experts et praticiens',  b: 'Naturopathes, iridologues, phytothérapeutes en exercice, pas que des théoriciens.' },
    { n: '03', t: 'Une approche réellement holistique', b: 'Corps, mental, énergétique, alimentation : tout est relié et enseigné comme tel.' },
    { n: '04', t: 'Un accompagnement vers le métier',  b: 'Création d\'activité, posture professionnelle, posture éthique : on prépare aussi l\'après.' },
  ];
  return (
    <Section tone="white" padY={m ? [64, 64] : [96, 96]} padX={m ? 22 : 80}>
      <div style={{
        display: m ? 'flex' : 'grid',
        flexDirection: m ? 'column' : undefined,
        gridTemplateColumns: m ? undefined : '0.85fr 1.15fr',
        gap: m ? 28 : 72, alignItems: 'stretch',
      }}>
        {/* image / quote */}
        <div style={{ position: 'relative' }}>
          <div style={{
            position: 'relative',
            width: '100%',
            aspectRatio: m ? '4 / 3' : '4 / 5',
            borderRadius: 24, overflow: 'hidden',
          }}>
            <img
              src={ASSET.whyTc} alt=""
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 40%' }}
            />
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(26,31,28,0.55) 100%)',
            }} />
            <div style={{ position: 'absolute', left: 20, right: 20, bottom: 20, color: TC.white }}>
              <div style={{
                fontFamily: fontSerif, fontStyle: 'italic', fontSize: m ? 22 : 26,
                lineHeight: 1.3, letterSpacing: -0.4,
              }}>
                « Des engagements tenus et une totale transparence. »
              </div>
              <div style={{
                fontFamily: fontMono, fontSize: 11, marginTop: 10,
                letterSpacing: 0.8, textTransform: 'uppercase', opacity: 0.8,
              }}>— Marie Claire.fr</div>
            </div>
          </div>
        </div>

        {/* reasons */}
        <div>
          <SectionHead
            eyebrow="Pourquoi Trainin Center"
            title="Une école pensée pour votre réussite."
            sub="Quatre raisons concrètes qui font la différence au-delà des promesses."
            align="left"
            maxWidth={m ? '100%' : 540}
          />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {reasons.map((r, i) => (
              <div key={r.n} style={{
                display: 'grid', gridTemplateColumns: '52px 1fr',
                gap: m ? 14 : 22,
                padding: '20px 0',
                borderTop: i === 0 ? 'none' : `1px solid ${TC.hair}`,
                alignItems: 'start',
              }}>
                <div style={{
                  fontFamily: fontMono, fontSize: 13, color: TC.sage,
                  fontWeight: 500, letterSpacing: 0.4,
                  paddingTop: 4,
                }}>{r.n}</div>
                <div>
                  <div style={{
                    fontFamily: fontSans, fontSize: m ? 17 : 18, fontWeight: 600,
                    color: TC.ink, letterSpacing: -0.3, lineHeight: 1.25,
                  }}>{r.t}</div>
                  <div style={{
                    fontFamily: fontSans, fontSize: 14.5, color: TC.ink2,
                    lineHeight: 1.55, marginTop: 6, letterSpacing: -0.05,
                  }}>{r.b}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// PARCOURS 3 ÉTAPES
// ════════════════════════════════════════════════════════════
function Parcours({ device }) {
  const m = isM(device);
  const steps = [
    { n: '01', t: 'Vous demandez le programme', b: 'Recevez le PDF complet en quelques secondes et explorez nos formations à tête reposée.' },
    { n: '02', t: 'Un conseiller vous accompagne', b: "Un échange humain, pas un script de vente, pour clarifier la formation la plus juste pour vous." },
    { n: '03', t: 'Vous démarrez votre formation',  b: "Plateforme, mentor, communauté, sessions live. Vous êtes accompagné·e du premier au dernier jour." },
  ];
  return (
    <Section tone="off" padY={m ? [64, 64] : [96, 96]} padX={m ? 22 : 80}>
      <SectionHead
        eyebrow="Votre parcours, étape par étape"
        title="Un parcours simple, humain et limpide."
        sub="De la première demande au lancement de votre activité, vous savez à chaque étape où vous allez."
        align={m ? 'left' : 'center'}
        maxWidth={780}
      />
      <div style={{
        position: 'relative',
        display: 'grid',
        gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)',
        gap: m ? 18 : 24,
        marginTop: m ? 8 : 24,
      }}>
        {/* connection line on desktop */}
        {!m && (
          <div style={{
            position: 'absolute', top: 36, left: '16%', right: '16%', height: 1,
            background: `linear-gradient(90deg, transparent, ${TC.sageHair}, transparent)`,
            pointerEvents: 'none',
          }} />
        )}
        {steps.map((s, i) => (
          <div key={s.n} style={{
            background: TC.white, borderRadius: 22,
            border: `1px solid ${TC.hair}`,
            padding: m ? '22px 22px' : '30px 28px',
            position: 'relative',
          }}>
            <div style={{
              width: 56, height: 56, borderRadius: 28,
              background: TC.sageDeep, color: TC.white,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: fontMono, fontSize: 14, fontWeight: 500, letterSpacing: 0.4,
              marginBottom: 18,
            }}>{s.n}</div>
            <div style={{
              fontFamily: fontSans, fontSize: m ? 19 : 20, fontWeight: 600,
              color: TC.ink, letterSpacing: -0.4, lineHeight: 1.2, marginBottom: 8,
            }}>{s.t}</div>
            <div style={{
              fontFamily: fontSans, fontSize: 14.5, color: TC.ink2,
              lineHeight: 1.6, letterSpacing: -0.05,
            }}>{s.b}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// VIDEO CARD — réutilisable
// ════════════════════════════════════════════════════════════
function VideoCard({ name, role, formation, duration, tone = 'sage', size = 'md', caption, aspect, video }) {
  const ratio = video ? '9 / 16' : (aspect || (size === 'lg' ? '4 / 5' : '3 / 2'));
  const padding = size === 'lg' ? 22 : 16;
  const titleSize = size === 'lg' ? 20 : 15.5;
  const playSize = size === 'lg' ? 64 : 48;
  const [playing, setPlaying] = React.useState(false);
  const [poster, setPoster] = React.useState(null);
  React.useEffect(() => {
    if (!video) return;
    let alive = true;
    fetch('https://vimeo.com/api/oembed.json?url=https://vimeo.com/' + video + '&width=640')
      .then((r) => r.json())
      .then((j) => { if (alive && j && j.thumbnail_url) setPoster(j.thumbnail_url); })
      .catch(() => {});
    return () => { alive = false; };
  }, [video]);

  return (
    <div
      onClick={() => video && setPlaying(true)}
      style={{
      position: 'relative',
      width: '100%',
      aspectRatio: ratio,
      borderRadius: 22, overflow: 'hidden',
      cursor: 'pointer',
      background: '#000',
      boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 18px 40px rgba(26,31,28,0.10)',
    }}>
      {playing ? (
        <iframe
          src={`https://player.vimeo.com/video/${video}?autoplay=1&title=0&byline=0&portrait=0`}
          allow="autoplay; fullscreen; picture-in-picture"
          allowFullScreen
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
        />
      ) : (
      <React.Fragment>
      {video ? (
        <img
          src={poster || `https://vumbnail.com/${video}.jpg`}
          alt={name}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 30%' }}
        />
      ) : (
        <PhotoPlaceholder caption={caption || `portrait · ${name.split(' ')[0].toLowerCase()}`} tone={tone} radius={0} height="100%" />
      )}

      {/* tint */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%)',
      }} />

      {/* duration chip */}
      {duration && (
        <div style={{
          position: 'absolute', top: 14, right: 14,
          padding: '5px 10px', borderRadius: 999,
          background: 'rgba(0,0,0,0.55)', color: TC.white,
          fontFamily: fontMono, fontSize: 11,
          backdropFilter: 'blur(8px)',
        }}>{duration}</div>
      )}

      {/* play */}
      <div style={{
        position: 'absolute', top: '50%', left: '50%',
        transform: 'translate(-50%, -50%)',
        width: playSize, height: playSize, borderRadius: playSize / 2,
        background: 'rgba(255,255,255,0.94)', backdropFilter: 'blur(10px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 8px 24px rgba(0,0,0,0.25)',
      }}>
        <svg width={playSize * 0.32} height={playSize * 0.32} viewBox="0 0 24 24" fill={TC.sageDeep}>
          <path d="M8 5v14l11-7z" />
        </svg>
      </div>

      {/* caption */}
      <div style={{
        position: 'absolute', left: padding, right: padding, bottom: padding,
        color: TC.white,
      }}>
        {formation && !video && (
          <div style={{
            fontFamily: fontMono, fontSize: 10.5, letterSpacing: 0.6,
            textTransform: 'uppercase', opacity: 0.78, marginBottom: 6,
          }}>{formation}</div>
        )}
        <div style={{
          fontFamily: fontSans, fontSize: titleSize, fontWeight: 600,
          letterSpacing: -0.3, lineHeight: 1.2,
        }}>{name}</div>
        {role && (
          <div style={{
            fontFamily: fontSans, fontSize: size === 'lg' ? 13.5 : 12.5,
            opacity: 0.8, marginTop: 4,
          }}>{role}</div>
        )}
      </div>
      </React.Fragment>
      )}
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// TÉMOIGNAGES — vidéos au coeur, quotes en bas
// ════════════════════════════════════════════════════════════
function Testimonials({ device, footCtaLabel = 'Recevoir le programme', footCtaHref, footCtaOnClick, footCta = 'goto:programme', footCtaPrimary = false }) {
  const m = isM(device);
  const FootBtn = footCtaPrimary ? BtnPrimary : BtnGhost;

  const featured = {
    name: 'Claire C.',
    role: 'Naturopathe en cabinet · Bordeaux',
    formation: 'Naturopathie · promo 2022',
    duration: '3:42',
    tone: 'sage',
    caption: 'portrait · Claire · cabinet',
    video: '1198159195',
    quote: "J'ai trouvé une vraie école, exigeante et bienveillante. Aujourd'hui, j'ai monté mon cabinet à Bordeaux et je vis pleinement de ma passion.",
  };

  const others = [
    { name: 'Céline D.',    role: 'Naturopathe · Rogerville',          formation: 'Naturopathie', duration: '2:18', tone: 'warm',  caption: 'portrait · Céline', video: '1198159194' },
    { name: 'Audrey H.',    role: 'Naturopathe · Colmar',            formation: 'Naturopathie', duration: '1:54', tone: 'cream', caption: 'portrait · Audrey', video: '1198159197' },
  ];

  const shortQuotes = [
    { q: "La pédagogie est vivante, les formatrices sont des praticiennes. J'ai compris ce que voulait dire « accompagner ».", name: 'Léa M.', role: 'Promo 2023 · Naturopathie' },
    { q: "Un suivi humain du premier au dernier jour — et même après l'installation en cabinet.", name: 'Sarah K.', role: 'Promo 2024 · Naturopathie' },
    { q: "Le bon équilibre entre exigence et profondeur du vivant. Rare.", name: 'Julien T.', role: 'Promo 2022 · Énergétique' },
    { q: "J'ai pu suivre à mon rythme tout en travaillant. Les sessions live font toute la différence.", name: 'Nadia B.', role: 'Promo 2023 · Naturopathie' },
    { q: "Des contenus solides, sourcés, jamais dogmatiques. On apprend à penser, pas à réciter.", name: 'Thomas R.', role: 'Promo 2022 · Iridologie' },
    { q: "Je suis arrivée curieuse, je repars praticienne installée. Merci pour l'accompagnement.", name: 'Camille V.', role: 'Promo 2024 · Naturopathie' },
    { q: "La partie sur l'installation est précieuse. On apprends bien au-delà des cours théoriques.", name: 'Hugo L.', role: 'Promo 2023 · Phytothérapie' },
    { q: "J'ai été aiguillée à chaque étape. Un vrai accompagnement, pas un catalogue.", name: 'Inès F.', role: 'Promo 2024 · Naturopathie' },
    { q: "Formation exigeante mais profondément humaine. Exactement ce que je cherchais.", name: 'Marc D.', role: 'Promo 2022 · Naturopathie' },
    { q: "Les modules à la carte m'ont permis de compléter ma pratique sans tout recommencer.", name: 'Sophie A.', role: 'Module · Iridologie' },
    { q: "Un cap clair du premier cours à l'ouverture de mon cabinet. Je recommande les yeux fermés.", name: 'Élodie P.', role: 'Promo 2023 · Naturopathie' },
    { q: "On sent que les formatrices exercent vraiment. Les cas concrets changent tout.", name: 'Karim S.', role: 'Promo 2024 · Phytothérapie' },
    { q: "Une reconversion réussie à 42 ans grâce à un cadre rassurant et structuré.", name: 'Valérie N.', role: 'Promo 2022 · Naturopathie' },
    { q: "Le suivi post-formation est ce qui m'a le plus surprise. On n'est jamais lâché.", name: 'Manon G.', role: 'Promo 2023 · Énergétique' },
    { q: "Sérieux, bienveillant, concret. Trois mots pour résumer ces deux années.", name: 'Antoine C.', role: 'Promo 2022 · Naturopathie' },
  ];

  return (
    <Section id="temoignages" tone="white" padY={m ? [64, 64] : [96, 96]} padX={m ? 22 : 80} style={{ scrollMarginTop: m ? 32 : 80 }}>
      <div style={{
        display: 'flex', flexDirection: m ? 'column' : 'row',
        alignItems: m ? 'flex-start' : 'flex-end', justifyContent: 'space-between',
        gap: m ? 12 : 32, marginBottom: m ? 28 : 44,
      }}>
        <SectionHead
          eyebrow="Témoignages"
          title="Nos élèves prennent la parole."
          sub="Cinq minutes pour entendre, dans leurs mots, ce qu'apporte une formation Trainin Center."
          align="left"
          maxWidth={m ? '100%' : 600}
        />
      </div>

      {/* video testimonials — portrait (vertical videos) */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)',
        gap: m ? 18 : 24,
        maxWidth: m ? 360 : 1040,
        margin: '0 auto',
      }}>
        {[featured, ...others].map((v, i) => (
          <VideoCard
            key={v.name}
            name={v.name}
            role={v.role}
            formation={v.formation}
            duration={v.duration}
            tone={v.tone}
            caption={v.caption}
            video={v.video}
            size={i === 0 ? 'lg' : 'md'}
          />
        ))}
      </div>

      {/* highlighted quote */}
      <div style={{
        marginTop: m ? 28 : 44,
        background: TC.sageMist, borderRadius: 18,
        padding: m ? '20px 22px' : '28px 32px',
        border: `1px solid ${TC.hair}`,
        maxWidth: m ? '100%' : 760,
      }}>
        <StarRow color={TC.gold} />
        <div style={{
          fontFamily: fontSerif, fontStyle: 'italic',
          fontSize: m ? 18 : 22, lineHeight: 1.4, color: TC.ink,
          marginTop: 10, letterSpacing: -0.2,
        }}>« {featured.quote} »</div>
        <div style={{
          fontFamily: fontSans, fontSize: 13, color: TC.ink3, marginTop: 12,
        }}><strong style={{ color: TC.ink, fontWeight: 600 }}>{featured.name}</strong> · {featured.role}</div>
      </div>

      {/* short quotes — auto-scrolling marquee */}
      <div
        className="tc-marquee-mask"
        style={{
          marginTop: m ? 32 : 56,
          overflow: 'hidden',
          WebkitMaskImage: 'linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%)',
          maskImage: 'linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%)',
        }}
      >
        <div
          className="tc-marquee-track"
          style={{
            display: 'flex', gap: m ? 14 : 20, width: 'max-content',
            animation: `tc-marquee ${m ? 70 : 95}s linear infinite`,
          }}
        >
          {[...shortQuotes, ...shortQuotes].map((t, i) => (
            <div key={i} style={{
              flex: '0 0 auto', width: m ? 264 : 344,
              background: TC.off, borderRadius: 18,
              padding: m ? '20px 22px' : '24px 26px',
              border: `1px solid ${TC.hair}`,
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <StarRow color={TC.gold} size={12} />
              <div style={{
                fontFamily: fontSans, fontSize: 15.5, lineHeight: 1.55,
                color: TC.ink, letterSpacing: -0.1,
              }}>« {t.q} »</div>
              <div style={{
                fontFamily: fontSans, fontSize: 13, color: TC.ink3,
                marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{ color: TC.ink, fontWeight: 600 }}>{t.name}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @keyframes tc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        .tc-marquee-mask:hover .tc-marquee-track { animation-play-state: paused; }
        @media (prefers-reduced-motion: reduce) { .tc-marquee-track { animation: none !important; } }
      `}</style>

      {/* foot row */}
      <div style={{
        marginTop: m ? 28 : 40,
        display: 'flex', flexDirection: m ? 'column' : 'row',
        alignItems: m ? 'stretch' : 'center', justifyContent: m ? 'stretch' : 'flex-end',
        gap: 16,
        paddingTop: m ? 24 : 32,
        borderTop: `1px solid ${TC.hair}`,
      }}>
        {footCtaHref
          ? <a href={footCtaHref} style={{ textDecoration: 'none', display: m ? 'block' : 'inline-block' }}><FootBtn size="md" fullWidth={m} data-cta={footCta}>{footCtaLabel}</FootBtn></a>
          : <FootBtn size="md" fullWidth={m} data-cta={footCta} onClick={footCtaOnClick}>{footCtaLabel}</FootBtn>}
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// CONTACT FORM
// ════════════════════════════════════════════════════════════
function Contact({ device }) {
  const m = isM(device);
  const Field = ({ label, type = 'text', placeholder, textarea, halfWidth, options }) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, gridColumn: m ? 'span 1' : (halfWidth ? 'span 1' : 'span 2') }}>
      <label style={{ fontFamily: fontSans, fontSize: 12.5, fontWeight: 500, color: TC.ink2, letterSpacing: 0.1 }}>{label}</label>
      {textarea ? (
        <textarea placeholder={placeholder} rows={4} style={{
          padding: '14px 16px', background: TC.white,
          border: `1px solid ${TC.hairStrong}`, borderRadius: 14,
          fontFamily: fontSans, fontSize: 15, color: TC.ink, outline: 'none', resize: 'none',
        }} />
      ) : options ? (
        <select defaultValue="" style={{
          height: 50, padding: '0 16px', background: TC.white,
          border: `1px solid ${TC.hairStrong}`, borderRadius: 999,
          fontFamily: fontSans, fontSize: 15, color: TC.ink, outline: 'none',
          appearance: 'none', WebkitAppearance: 'none', cursor: 'pointer',
          backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23556' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")`,
          backgroundRepeat: 'no-repeat', backgroundPosition: 'right 18px center',
        }}>
          <option value="" disabled>{placeholder}</option>
          {options.map((o) => <option key={o} value={o}>{o}</option>)}
        </select>
      ) : (
        <input type={type} placeholder={placeholder} style={{
          height: 50, padding: '0 16px', background: TC.white,
          border: `1px solid ${TC.hairStrong}`, borderRadius: 999,
          fontFamily: fontSans, fontSize: 15, color: TC.ink, outline: 'none',
        }} />
      )}
    </div>
  );

  return (
    <Section tone="off" padY={m ? [64, 64] : [96, 96]} padX={m ? 22 : 80}>
      <div style={{
        display: m ? 'flex' : 'grid',
        flexDirection: m ? 'column' : undefined,
        gridTemplateColumns: m ? undefined : '0.85fr 1.15fr',
        gap: m ? 28 : 72, alignItems: 'start',
      }}>
        <div id="etre-rappele" style={{ scrollMarginTop: m ? 76 : 96 }}>
          <SectionHead
            eyebrow="Un échange humain"
            title="Parlons de votre projet."
            sub="Une question, un doute, une envie d'en savoir plus ? Notre équipe vous répond dans les plus brefs délais."
            align="left"
            maxWidth={m ? '100%' : 460}
          />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 8 }}>
            {[
              { i: '✉', l: 'Par email', v: 'contact@trainin-center.com' },
              { i: '☏', l: 'Par téléphone', v: '01 86 26 19 48 · 9h–18h' },
              { i: '◷', l: 'Réponse', v: 'Rapide et personnalisée.' },
            ].map((c) => (
              <div key={c.l} style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
                <div style={{
                  width: 38, height: 38, borderRadius: 19,
                  background: TC.sageSoft, color: TC.sageDeep,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 16,
                }}>{c.i}</div>
                <div>
                  <div style={{ fontFamily: fontSans, fontSize: 13, color: TC.ink3, letterSpacing: 0.1 }}>{c.l}</div>
                  <div style={{ fontFamily: fontSans, fontSize: 15, color: TC.ink, fontWeight: 500, marginTop: 2 }}>{c.v}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{
          background: TC.white, borderRadius: 24,
          border: `1px solid ${TC.hair}`,
          padding: m ? '24px 22px' : '36px 36px',
          boxShadow: '0 1px 2px rgba(0,0,0,0.03), 0 12px 40px rgba(26,31,28,0.04)',
          minWidth: 0, maxWidth: '100%',
        }}>
          <iframe
            src="https://trainin-center.learnybox.com/formulaire-contact-homepage/"
            title="Formulaire de contact Trainin Center"
            frameBorder="0"
            width="100%"
            height={m ? 560 : 540}
            className="tc-learnybox-frame tc-learnybox-frame-contact-homepage"
          />
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// FAQ — accordion (visual only)
// ════════════════════════════════════════════════════════════
function FAQ({ device, moreLabel = 'Voir toutes les questions', moreHref, moreOnClick, morePrimary = false }) {
  const m = isM(device);
  const MoreBtn = morePrimary ? BtnPrimary : BtnGhost;
  const items = [
    { q: 'Les formations sont-elles vraiment 100% en ligne ?', a: "Oui. Toute la pédagogie se fait à distance : votre cursus de formation est accessible sur notre plateforme en ligne et via une application mobile, vidéos HD, ressources téléchargeables, sessions live, mentor dédié. Vous pouvez suivre votre formation depuis n'importe où, à votre rythme.", open: true },
    { q: "Comment s'inscrire aux formations ?", a: "Il vous suffit de vous inscrire directement sur notre site, de choisir les formations et de régler par carte de crédit, Paypal ou virement bancaire et vous recevrez immédiatement vos identifiants par email pour vous connecter à votre espace formation." },
    { q: 'Est-il possible de communiquer avec les professeurs ?', a: "Tout à fait, vous pouvez communiquer avec notre support tout au long de votre formation par téléphone ou par email et vous pouvez prendre des séances de coaching avec les professeurs de votre choix." },
    { q: 'Peut-on régler en plusieurs fois ?', a: "Oui vous pouvez payer en plusieurs mensualités par carte bancaire, Paypal ou virement bancaire. Pour plus de détails, consultez la page d'inscription de la formation qui vous intéresse." },
    { q: 'Y a-t-il des prérequis pour suivre les formations ?', a: "Il n'y a aucun prérequis pour suivre nos formations, il vous suffit d'une connexion internet pour accéder à tous vos cours et documents dans vos formations. Vous pouvez suivre vos cours avec un ordinateur, une tablette ou un smartphone et vous pouvez télécharger vos manuels et supports de cours si vous le souhaitez." },
  ];
  const uid = React.useId();
  const [openIndex, setOpenIndex] = React.useState(() => {
    const i = items.findIndex((it) => it.open);
    return i === -1 ? null : i;
  });
  return (
    <Section id="faq" tone="white" padY={m ? [64, 64] : [96, 96]} 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="Tout ce que vous voulez savoir, avant de vous lancer."
            sub="Nos réponses sont aussi détaillées que possible et nous restons disponibles pour le reste."
            align="left"
            maxWidth={m ? '100%' : 420}
          />
          {!m && (
            <div style={{ marginTop: 8 }}>
              {moreHref
                ? <a href={moreHref} style={{ textDecoration: 'none' }}><MoreBtn size="md">{moreLabel}</MoreBtn></a>
                : <MoreBtn size="md" onClick={moreOnClick}>{moreLabel}</MoreBtn>}
            </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, cursor: 'pointer',
                  width: '100%', background: 'none', border: 'none', padding: 0, margin: 0,
                  font: 'inherit', color: 'inherit', textAlign: 'left',
                }}
              >
                <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>
  );
}

// ════════════════════════════════════════════════════════════
// FINAL CTA — big sage block
// ════════════════════════════════════════════════════════════
function FinalCTA({ device }) {
  const m = isM(device);
  return (
    <section style={{
      padding: m ? '24px 16px' : '32px 48px',
      background: TC.white,
    }}>
      <div style={{
        position: 'relative',
        borderRadius: m ? 28 : 36,
        background: `linear-gradient(160deg, ${TC.sage} 0%, ${TC.sageInk} 100%)`,
        padding: m ? '48px 28px' : '80px 80px',
        overflow: 'hidden',
        textAlign: 'center',
        ...(m ? {} : { maxWidth: TC_CONTAINER, marginLeft: 'auto', marginRight: 'auto' }),
      }}>
        {/* soft motifs */}
        <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' }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <Eyebrow variant="light">Rentrée 2026 · inscriptions ouvertes</Eyebrow>
          </div>
          <h2 style={{
            fontFamily: fontSans, fontSize: m ? 38 : 64, fontWeight: 500,
            letterSpacing: m ? -1.4 : -2.4, lineHeight: 1.04,
            color: TC.white, margin: '20px auto 16px', textWrap: 'balance', maxWidth: 820,
          }}>
            Prenez le temps d'un échange.{m ? ' ' : <br />}
            <span style={{ fontFamily: fontSerif, fontStyle: 'italic', fontWeight: 400 }}>Votre voie vous attend.</span>
          </h2>
          <p style={{
            fontFamily: fontSans, fontSize: m ? 16 : 18, lineHeight: 1.55,
            color: 'rgba(255,255,255,0.78)', margin: '0 auto 28px',
            maxWidth: 540, letterSpacing: -0.1,
          }}>
            Demandez le programme et discutez avec un conseiller sans engagement, sans script de vente, simplement un vrai dialogue.
          </p>
          <div style={{
            display: 'flex', flexDirection: m ? 'column' : 'row',
            gap: 12, justifyContent: 'center', alignItems: 'center',
          }}>
            <div style={{ width: m ? '100%' : 'auto', minWidth: m ? 'auto' : 230 }}>
              <BtnPrimary size="lg" dark fullWidth data-cta="goto:programme" onClick={() => window.dispatchEvent(new Event('tc-open-programme'))}>Recevoir le programme</BtnPrimary>
            </div>
            <div style={{ width: m ? '100%' : 'auto', minWidth: m ? 'auto' : 230 }}>
              <a href="#etre-rappele" style={{ textDecoration: 'none', display: 'block' }}><BtnGhost size="lg" dark fullWidth data-cta="goto:contact">Être rappelé·e</BtnGhost></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// FOOTER
// ════════════════════════════════════════════════════════════
const SOCIALS = [
  { name: 'Facebook',  href: 'https://www.facebook.com/TraininCenter/', svg: '<svg viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%"><path d="M14 8.5V6.8c0-.8.2-1.3 1.4-1.3H17V2.7c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.5-4 4.1v1.8H8.2v3h2.4V21H14v-9.5h2.5l.4-3H14z"/></svg>' },
  { name: 'Instagram', href: 'https://www.instagram.com/trainincenter/', svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="100%" height="100%"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" stroke="none"/></svg>' },
  { name: 'YouTube',   href: '#', svg: '<svg viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%"><path d="M22.5 7.2c-.25-1-1-1.7-2-2C18.7 4.8 12 4.8 12 4.8s-6.7 0-8.5.4c-1 .3-1.75 1-2 2C1.1 9 1.1 12 1.1 12s0 3 .4 4.8c.25 1 1 1.7 2 2 1.8.4 8.5.4 8.5.4s6.7 0 8.5-.4c1-.3 1.75-1 2-2 .4-1.8.4-4.8.4-4.8s0-3-.4-4.8zM9.9 15.3V8.7l5.7 3.3-5.7 3.3z"/></svg>' },
  { name: 'TikTok',    href: '#', svg: '<svg viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%"><path d="M16.5 2h-3v13.2a2.7 2.7 0 1 1-2.2-2.65V9.5a5.85 5.85 0 1 0 5.2 5.8V8.65a6.7 6.7 0 0 0 4 1.3V6.9a3.85 3.85 0 0 1-4-3.9V2z"/></svg>' },
];

function ProgrammeModal({ device }) {
  const m = isM(device);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const openFn = () => setOpen(true);
    window.__openProgrammeModal = openFn;
    window.addEventListener('tc-open-programme', openFn);
    return () => window.removeEventListener('tc-open-programme', openFn);
  }, []);
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);
  if (!open) return null;
  return (
    <div
      onClick={() => setOpen(false)}
      style={{
        position: 'fixed', inset: 0, zIndex: 1000,
        background: 'rgba(20,24,26,0.55)', backdropFilter: 'blur(3px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: m ? 18 : 32, fontFamily: fontSans,
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          position: 'relative', width: '100%', maxWidth: m ? 360 : 460,
          background: TC.white, borderRadius: 20, padding: m ? '32px 22px' : '40px 38px',
          boxShadow: '0 40px 120px rgba(0,0,0,0.4)', color: '#1a2a22', textAlign: 'left',
          overflowY: 'auto', maxHeight: '92vh',
        }}
      >
        <button
          onClick={() => setOpen(false)}
          aria-label="Fermer"
          style={{
            position: 'absolute', top: 16, right: 16, width: 34, height: 34,
            borderRadius: 17, border: 'none', cursor: 'pointer',
            background: 'rgba(0,0,0,0.06)', color: TC.ink2,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}
        >
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
            <path d="M2 2l10 10M12 2L2 12" />
          </svg>
        </button>
        <iframe
          src="https://trainin-center.learnybox.com/formulaire-programme-pdf/"
          title="Recevoir le programme complet Trainin Center"
          frameBorder="0"
          width="100%"
          height={m ? 720 : 680}
          style={{ marginTop: 28 }}
          className="tc-learnybox-frame tc-learnybox-frame-programme"
        />
      </div>
    </div>
  );
}

function Footer({ device }) {
  const m = isM(device);
  const cols = [
    { t: 'Formations', l: [
      { label: 'Naturopathie', href: 'formation-praticien-naturopathe.html' },
      { label: 'Fréquences énergétiques', href: 'formation-frequences-energetiques.html' },
      { label: 'Phytothérapie', href: 'module-phytotherapie.html' },
      { label: 'Iridologie', href: 'module-iridologie.html' },
      { label: 'Modules à la carte', href: 'modules-a-la-carte.html' },
    ] },
    { t: 'L\u2019école', l: [
      { label: 'Notre histoire', href: 'ecole.html' },
      { label: 'Méthode', href: 'methode.html' },
      { label: 'Formateurs', href: 'ecole.html#equipe' },
      { label: 'Témoignages', href: 'index.html#temoignages' },
      { label: 'Presse', href: 'contact.html' },
    ] },
    { t: 'Ressources', l: [
      { label: 'Programme PDF', onClick: () => window.dispatchEvent(new Event('tc-open-programme')) },
      { label: 'Blog', href: 'blog.html' },
      { label: 'Webinaires', href: 'webinaires.html' },
      { label: 'FAQ', href: 'index.html#faq' },
      { label: 'Financements', href: 'financements.html' },
    ] },
    { t: 'Contact',    l: [
      { label: 'Nous écrire', href: 'contact.html#formulaire' },
      { label: 'Être rappelé·e', href: 'contact.html#formulaire' },
      { label: 'Parrainage', href: 'parrainage.html' },
      { label: 'Centre d’aide', href: 'contact.html#formulaire' },
      { label: 'Mentions légales', href: 'mentions-legales.html' },
      { label: 'CGV · CGU', href: 'cgv-cgu.html' },
      { label: 'Politique de confidentialité', href: 'politique-confidentialite.html' },
    ] },
  ];
  return (
    <footer style={{
      background: '#14181a', color: 'rgba(255,255,255,0.7)',
      padding: m ? '52px 0 28px' : '72px 0 36px',
      fontFamily: fontSans,
    }}>
      <ProgrammeModal device={device} />
      <style>{`
        .tc-learnybox-frame {
          display: block;
          width: 100%;
          max-width: 100%;
          border: 0;
          margin: 0;
          padding: 0;
          background: #fff;
        }
        .tc-learnybox-frame-programme {}
        .tc-learnybox-frame-contact-homepage {}
        .tc-learnybox-frame-contact-naturopathie {}
        .tc-learnybox-frame-rappel-frequences {}
        .tc-learnybox-frame-contact-frequences {}
      `}</style>
      <div style={containerBox(m ? 22 : 80)}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: m ? '1fr' : '1.2fr repeat(4, 1fr)',
        gap: m ? 32 : 48,
        marginBottom: m ? 32 : 56,
      }}>
        <div>
          <div style={{
            display: 'inline-flex', background: TC.white, borderRadius: 14,
            padding: '14px 18px', alignItems: 'center',
          }}>
            <img src={ASSET.logoFull} alt="Trainin Center" style={{ height: 40, width: 'auto', objectFit: 'contain', display: 'block' }} />
          </div>
          <p style={{
            fontSize: 14, lineHeight: 1.6, marginTop: 18, maxWidth: 340,
            color: 'rgba(255,255,255,0.55)', letterSpacing: -0.05,
          }}>
            École française de formation en bien-être. Naturopathie, fréquences énergétiques, phytothérapie, iridologie, EMDR, réflexologie.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
            {SOCIALS.map((s) => {
              const real = s.href && s.href !== '#';
              return (
              <a key={s.name} href={s.href} target={real ? '_blank' : undefined} rel={real ? 'noopener noreferrer' : undefined} aria-label={s.name} style={{
                width: 38, height: 38, borderRadius: 19,
                background: 'rgba(255,255,255,0.08)', color: TC.white,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                textDecoration: 'none',
              }}>
                <span style={{ width: 17, height: 17, display: 'block' }} dangerouslySetInnerHTML={{ __html: s.svg }} />
              </a>
            );})}
          </div>
        </div>
        {cols.map((c) => (
          <div key={c.t}>
            <div style={{
              fontSize: 12.5, fontWeight: 600, color: TC.white,
              letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 16,
            }}>{c.t}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.l.map((it) => {
                const label = typeof it === 'string' ? it : it.label;
                const href = typeof it === 'string' ? null : it.href;
                const onClick = typeof it === 'string' ? null : it.onClick;
                if (onClick) {
                  return (
                    <a key={label} href="#" onClick={(e) => { e.preventDefault(); onClick(); }}
                      style={{ fontSize: 14, cursor: 'pointer', color: 'inherit', textDecoration: 'none' }}>{label}</a>
                  );
                }
                return href ? (
                  <a key={label} href={href} style={{ fontSize: 14, cursor: 'pointer', color: 'inherit', textDecoration: 'none' }}>{label}</a>
                ) : (
                  <span key={label} style={{ fontSize: 14, cursor: 'pointer' }}>{label}</span>
                );
              })}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        paddingTop: m ? 8 : 10,
        borderTop: '1px solid rgba(255,255,255,0.08)',
        fontSize: 12.5, color: 'rgba(255,255,255,0.4)',
      }}>
        <p style={{
          margin: '0 0 14px', maxWidth: 760, lineHeight: 1.55,
          color: 'rgba(255,255,255,0.55)',
        }}>
          Centre de formation enregistré auprès de la DRIEETS Île-de-France (Département du contrôle de la formation professionnelle d'Île-de-France). Déclaration d'activité enregistrée sous le numéro 1756571875 auprès du préfet de région d'Île-de-France.
        </p>
        <div style={{
          display: 'flex', flexDirection: m ? 'column' : 'row',
          alignItems: m ? 'flex-start' : 'center', justifyContent: 'space-between',
          gap: 12,
        }}>
          <div>© {new Date().getFullYear()} Trainin Center — Tous droits réservés.</div>
          <div style={{ display: 'flex', gap: 18 }}>
            <a href="politique-confidentialite.html" style={{ color: 'inherit', textDecoration: 'none' }}>Confidentialité</a>
            <a href="cookies.html" style={{ color: 'inherit', textDecoration: 'none' }}>Cookies</a>
            <a href="mentions-legales.html" style={{ color: 'inherit', textDecoration: 'none' }}>Mentions légales</a>
            <a href="cgv-cgu.html" style={{ color: 'inherit', textDecoration: 'none' }}>CGV · CGU</a>
          </div>
        </div>
      </div>
      </div>
    </footer>
  );
}

// ════════════════════════════════════════════════════════════
// CONTACT ENCART — bloc léger réutilisable (landing pages)
// Fond clair, bordure fine vert clair, coins arrondis — PAS de fond vert
// foncé (les landings ont déjà un encart vert en fin de page).
// ════════════════════════════════════════════════════════════
const ENCART_COORDS = [
  { k: 'Téléphone', v: '01 86 26 19 48', href: 'tel:0186261948', icon: 'phone' },
  { k: 'WhatsApp',  v: '06 44 64 35 37', href: 'https://wa.me/33644643537', icon: 'whatsapp' },
  { k: 'Email',     v: 'contact@trainin-center.com', href: 'mailto:contact@trainin-center.com', icon: 'mail' },
];

function EncartIcon({ name, size = 18 }) {
  const c = TC.sageDeep;
  const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none' };
  if (name === 'phone') return (
    <svg {...common}><path d="M6.5 3.5h3l1.4 4-2 1.4a12 12 0 005.2 5.2l1.4-2 4 1.4v3a2 2 0 01-2.2 2A16 16 0 014.5 5.7a2 2 0 012-2.2z" stroke={c} strokeWidth="1.5" strokeLinejoin="round"/></svg>
  );
  if (name === 'whatsapp') return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={c}><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 004.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91A9.83 9.83 0 0019.07 4.9 9.83 9.83 0 0012.04 2zm4.5 11.98c-.25-.12-1.46-.72-1.69-.8-.23-.08-.39-.12-.56.12-.16.25-.64.8-.79.97-.14.16-.29.18-.54.06-.25-.12-1.04-.38-1.98-1.22-.73-.65-1.23-1.46-1.37-1.71-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.56-1.35-.77-1.85-.2-.49-.41-.42-.56-.43-.14-.01-.31-.01-.48-.01-.16 0-.43.06-.66.31-.23.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.16 1.74 2.66 4.22 3.74.59.25 1.05.41 1.41.52.59.19 1.13.16 1.56.1.47-.07 1.46-.6 1.66-1.17.21-.58.21-1.07.14-1.18-.06-.1-.22-.16-.47-.28z"/></svg>
  );
  if (name === 'mail') return (
    <svg {...common}><rect x="3" y="5" width="18" height="14" rx="2.5" stroke={c} strokeWidth="1.5"/><path d="M4 7l8 5.5L20 7" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
  );
  return (
    <svg {...common}><circle cx="12" cy="12" r="9" stroke={c} strokeWidth="1.5"/><path d="M3 12h18M12 3c2.6 2.4 2.6 15.6 0 18M12 3c-2.6 2.4-2.6 15.6 0 18" stroke={c} strokeWidth="1.5"/></svg>
  );
}

function ContactEncart({ device, contactHref = 'contact.html' }) {
  const m = isM(device);
  return (
    <Section tone="white" padY={m ? [12, 56] : [24, 88]} padX={m ? 22 : 80}>
      <div style={{
        maxWidth: 1100, margin: '0 auto',
        background: TC.white, borderRadius: 24,
        border: `1px solid ${TC.sageHair}`,
        boxShadow: '0 1px 2px rgba(26,31,28,0.03), 0 16px 44px -26px rgba(90,145,105,0.30)',
        padding: m ? '28px 22px' : '44px 48px',
        display: m ? 'flex' : 'grid',
        flexDirection: m ? 'column' : undefined,
        gridTemplateColumns: m ? undefined : '1fr 1px 0.95fr',
        gap: m ? 24 : 44, alignItems: 'center',
      }}>
        {/* texte + CTA */}
        <div>
          <div style={{ marginBottom: 16 }}>
            <Eyebrow variant="sage" size="sm">Un conseil personnalisé</Eyebrow>
          </div>
          <h2 style={{
            fontFamily: fontSans, fontSize: m ? 23 : 29, fontWeight: 600,
            color: TC.ink, letterSpacing: -0.6, lineHeight: 1.18, margin: '0 0 12px', textWrap: 'balance',
          }}>Vous souhaitez un conseil sur le parcours le plus adapté ?</h2>
          <p style={{ fontFamily: fontSans, fontSize: m ? 15 : 16, lineHeight: 1.6, color: TC.ink2, margin: '0 0 22px', letterSpacing: -0.05, maxWidth: 520 }}>
            Chaque projet est différent. Contactez l'équipe Trainin Center pour
            obtenir des informations complémentaires, être orienté·e vers le
            parcours le plus adapté ou poser vos questions sur les formations.
          </p>
          <a href={contactHref} style={{ textDecoration: 'none', display: m ? 'block' : 'inline-block' }}>
            <span data-cta="goto:contact" style={{
              height: 52, padding: '0 26px', boxSizing: 'border-box',
              background: TC.sage, color: TC.white, borderRadius: 999,
              fontFamily: fontSans, fontSize: 15, fontWeight: 600, letterSpacing: -0.15,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9,
              width: m ? '100%' : 'auto',
              boxShadow: '0 1px 2px rgba(0,0,0,0.06), 0 8px 22px rgba(90,145,105,0.28)',
            }}>
              Contacter l'école
              <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>

        {!m && <div style={{ width: 1, alignSelf: 'stretch', background: TC.hair }} />}

        {/* coordonnées */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: m ? 2 : 4 }}>
          {ENCART_COORDS.map((c, i) => (
            <a key={c.k} href={c.href} style={{
              display: 'flex', alignItems: 'center', gap: 13,
              padding: m ? '12px 0' : '12px 0',
              borderTop: i ? `1px solid ${TC.hair}` : 'none',
              textDecoration: 'none',
            }}>
              <span style={{
                flexShrink: 0, width: 40, height: 40, borderRadius: 11,
                background: TC.sageMist,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <EncartIcon name={c.icon} size={18} />
              </span>
              <span style={{ minWidth: 0 }}>
                <span style={{ display: 'block', fontFamily: fontMono, fontSize: 10, letterSpacing: 0.8, textTransform: 'uppercase', color: TC.ink3 }}>{c.k}</span>
                <span style={{ display: 'block', fontFamily: fontSans, fontSize: m ? 15 : 16, fontWeight: 600, color: TC.ink, letterSpacing: -0.2, marginTop: 2, lineHeight: 1.2, wordBreak: 'break-word' }}>{c.v}</span>
              </span>
            </a>
          ))}
        </div>
      </div>
    </Section>
  );
}

Object.assign(window, {
  LeadMagnet, WhyTC, Parcours, Testimonials, VideoCard,
  Contact, FAQ, FinalCTA, Footer, ContactEncart,
});