// Trainin Center — Page de détail module « Hygiène vitale » (Naturopathie · 390 €)
// Gabarit réutilisable pour les autres modules.

const isMob = (d) => d === 'mobile';
const PAIEMENT_URL = 'https://espace.trainin-center.com/page-inscription-naturopathie-carte/';
const PRIX = '390 €';

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

// ════════════════════════════════════════════════════════════
// HERO
// ════════════════════════════════════════════════════════════
function ModuleHero({ device }) {
  const m = isMob(device);
  const pad = m ? '32px 22px 36px' : '75px 80px 44px';
  const meta = ['À votre rythme', 'Devoir QCM', 'Attestation délivrée'];
  return (
    <section style={{ background: TC.off, position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', top: m ? -130 : -260, right: m ? -170 : -180,
        width: m ? 400 : 740, height: m ? 400 : 740, borderRadius: '50%',
        background: `radial-gradient(circle, ${TC.sageSoft} 0%, ${TC.off} 65%)`, pointerEvents: 'none',
      }} />
      <div style={m
        ? { position: 'relative', padding: pad, display: 'flex', flexDirection: 'column', gap: 30 }
        : {
            position: 'relative', maxWidth: TC_CONTAINER, margin: '0 auto', width: '100%', padding: pad,
            display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 48, alignItems: 'stretch',
          }}>
        <div style={{ maxWidth: m ? '100%' : 595 }}>
          <a href="modules-a-la-carte.html" style={{
            display: 'inline-flex', alignItems: 'center', gap: 7, textDecoration: 'none',
            fontFamily: fontSans, fontSize: 13.5, fontWeight: 500, color: TC.ink3, marginBottom: 16,
          }}>
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none">
              <path d="M11 7H3M6 4L3 7l3 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            Modules à la carte
          </a>
          <div style={{ marginBottom: m ? 16 : 20 }}>
            <Eyebrow variant="gold" size={m ? 'sm' : 'md'}>Module · Naturopathie</Eyebrow>
          </div>
          <h1 style={{
            fontFamily: fontSans, fontSize: m ? 42 : 65, fontWeight: 500,
            letterSpacing: m ? -1.4 : -2.2, lineHeight: m ? 1.12 : 1.06,
            margin: '0 0 22px', color: TC.ink, textWrap: 'balance',
          }}>
            Hygiène{m ? ' ' : <br />}
            <span style={{
              fontFamily: fontSerif, fontWeight: 400, fontStyle: 'italic',
              color: TC.sageDeep, fontSize: m ? 46 : 74, letterSpacing: m ? -1.4 : -2, lineHeight: 1.05,
            }}>vitale.</span>
          </h1>
          <p style={{
            fontFamily: fontSans, fontSize: m ? 16.5 : 19, lineHeight: 1.58,
            color: TC.ink2, margin: '0 0 26px', maxWidth: m ? '100%' : 520, letterSpacing: -0.1,
          }}>
            Suivez le module à votre rythme. Une méthode de vie pour conserver et
            améliorer votre santé, à découvrir au naturel.
          </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} data-cta="goto:programme" onClick={() => window.dispatchEvent(new Event('tc-open-programme'))}>Recevoir le programme</BtnGhost>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: m ? '10px 16px' : '10px 22px' }}>
            {meta.map((x) => (
              <div key={x} style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <IconCheck size={16} color={TC.sage} />
                <span style={{ fontFamily: fontSans, fontSize: 13.5, color: TC.ink2, letterSpacing: -0.05 }}>{x}</span>
              </div>
            ))}
          </div>
        </div>

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

// ════════════════════════════════════════════════════════════
// À DÉCOUVRIR
// ════════════════════════════════════════════════════════════
function ADecouvrir({ device }) {
  const m = isMob(device);
  return (
    <Section tone="white" padY={m ? [56, 56] : [88, 88]} padX={m ? 22 : 80}>
      <SectionHead eyebrow="Le module" title="Une méthode de santé au naturel." align="left" maxWidth={m ? '100%' : 680} />
      <p style={{
        fontFamily: fontSans, fontSize: m ? 16.5 : 18, lineHeight: 1.65,
        color: TC.ink2, margin: '-18px 0 0', maxWidth: 820, letterSpacing: -0.05,
      }}>
        L'hygiène vitale est une méthode de vie ayant pour but de conserver et
        d'améliorer la santé. Ce module vous propose de découvrir les <strong style={{ color: TC.ink, fontWeight: 600 }}>5 piliers
        de la santé</strong> et les 5 principes de la naturopathie selon Hippocrate, les méthodes
        des cures naturopathiques, de désintoxication, les « 10 techniques naturopathiques »
        et bien plus. Découvrez comment protéger votre santé en réactivant votre système immunitaire.
      </p>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// PLAN DE FORMATION
// ════════════════════════════════════════════════════════════
function PlanFormation({ device }) {
  const m = isMob(device);
  const chapters = [
    { n: '01', t: "Qu'est-ce que la Naturopathie ?", items: ['Aperçu historique', 'Les humeurs', 'Les 5 piliers de la santé selon Hippocrate', 'Les 5 principes de la naturopathie selon Hippocrate'] },
    { n: '02', t: 'Les cures naturopathiques', items: ['Les trois cures naturopathiques', 'Les causes des maladies', 'Les cures de désintoxication', 'Les cures de revitalisation', 'Les cures de régénération'] },
    { n: '03', t: 'Les 10 techniques naturopathiques', items: [] },
    { n: '04', t: 'Les super-aliments', items: [] },
    { n: '05', t: 'Les bilans constitutionnels et les différents tempéraments', items: [] },
  ];
  return (
    <Section tone="off" padY={m ? [56, 56] : [88, 88]} padX={m ? 22 : 80}>
      <SectionHead eyebrow="Plan de formation" title="Au programme." align="left" maxWidth={m ? '100%' : 680} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: m ? 14 : 16 }}>
        {chapters.map((c) => (
          <div key={c.n} style={{
            background: TC.white, borderRadius: 18, border: `1px solid ${TC.hair}`,
            padding: m ? '20px 20px' : '26px 28px',
            display: 'grid', gridTemplateColumns: m ? '40px 1fr' : '56px 1fr', gap: m ? 14 : 22, alignItems: 'start',
          }}>
            <div style={{
              width: m ? 40 : 48, height: m ? 40 : 48, borderRadius: m ? 20 : 24,
              background: TC.sageDeep, color: TC.white,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: fontMono, fontSize: 13, fontWeight: 500,
            }}>{c.n}</div>
            <div>
              <div style={{
                fontFamily: fontSans, fontSize: m ? 17.5 : 20, fontWeight: 600,
                color: TC.ink, letterSpacing: -0.4, lineHeight: 1.25, paddingTop: m ? 6 : 10,
              }}>{c.t}</div>
              {c.items.length > 0 && (
                <div style={{
                  marginTop: 14, display: 'grid',
                  gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: m ? 8 : '8px 22px',
                }}>
                  {c.items.map((it) => (
                    <div key={it} style={{ display: 'flex', alignItems: 'flex-start', gap: 9 }}>
                      <span style={{ width: 5, height: 5, borderRadius: 3, background: TC.sage, flexShrink: 0, marginTop: 8 }} />
                      <span style={{ fontFamily: fontSans, fontSize: 14.5, color: TC.ink2, lineHeight: 1.45, letterSpacing: -0.05 }}>{it}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// TARIFS & MODALITÉS
// ════════════════════════════════════════════════════════════
function TarifsModule({ device }) {
  const m = isMob(device);
  const includes = [
    '1 module complet sur l\u2019hygiène vitale',
    'Un devoir en fin de module (QCM)',
    'Attestation de suivi délivrée en fin de module',
  ];
  const paiements = [
    'Carte bancaire',
    'PayPal',
    'Virement bancaire',
    'Paiement en plusieurs mensualités possible',
  ];
  const head = (
    <SectionHead
      eyebrow="Tarif & inscription"
      title="Commencez quand vous voulez."
      sub="Un module, un tarif clair et un paiement en ligne sécurisé (possibilité de payer en plusieurs mensualités)."
      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 }}>Module Hygiène vitale</div>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 8, marginTop: 8 }}>
            <span style={{ fontFamily: fontSans, fontSize: m ? 56 : 68, fontWeight: 600, color: TC.ink, letterSpacing: -2.4, lineHeight: 1 }}>{PRIX}</span>
            <span style={{ fontFamily: fontSans, fontSize: 16, color: TC.ink2 }}>TTC</span>
          </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 }}>Le module comprend</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: m ? 26 : 32 }}>
          <InscriptionCTA size="lg" fullWidth>Je m'inscris</InscriptionCTA>
        </div>

        <div style={{
          marginTop: 18, padding: m ? '16px 16px' : '18px 20px',
          background: TC.sageMist, borderRadius: 14, border: `1px solid ${TC.sageHair}`,
        }}>
          <div style={{ fontFamily: fontMono, fontSize: 10.5, letterSpacing: 0.6, textTransform: 'uppercase', color: TC.sageDeep, marginBottom: 10 }}>Paiement sécurisé</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
            {paiements.map((p) => (
              <div key={p} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                <span style={{ width: 5, height: 5, borderRadius: 3, background: TC.sage, flexShrink: 0, marginTop: 7 }} />
                <span style={{ fontFamily: fontSans, fontSize: 13.5, color: TC.ink2, lineHeight: 1.45 }}>{p}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
  );

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

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

// ════════════════════════════════════════════════════════════
// PAGE
// ════════════════════════════════════════════════════════════
function ModuleHygieneVitale({ device }) {
  return (
    <div style={{ background: TC.white, width: '100%', fontFamily: fontSans, color: TC.ink }}>
      <NavBar device={device} />
      <ModuleHero device={device} />
      <ADecouvrir device={device} />
      <PlanFormation device={device} />
      <TarifsModule device={device} />
      <Footer device={device} />
    </div>
  );
}

Object.assign(window, { ModuleHygieneVitale });