// Trainin Center — Page « Modules à la carte » (catalogue)
// Deux familles : Naturopathie (390 €) et Fréquences énergétiques (260 €).
// Chaque carte → page de détail du module (Hygiène vitale construite ; autres à venir).

const isMob = (d) => d === 'mobile';
const PAIEMENT_URL = '#paiement';
const PAIEMENT_NATURO_CARTE = 'https://espace.trainin-center.com/page-inscription-naturopathie-carte/';
const PAIEMENT_FREQ_CARTE = 'https://espace.trainin-center.com/page-inscription-frequences-energetiques-carte/';

function InscriptionCTA({ size = 'sm', 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 : 22;
  const fs = size === 'lg' ? 16 : 14.5;
  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: 8,
      width: fullWidth ? '100%' : 'auto', boxSizing: 'border-box', flexShrink: 0,
      boxShadow: dark ? '0 1px 2px rgba(0,0,0,0.08)' : '0 1px 2px rgba(0,0,0,0.06), 0 6px 16px rgba(90,145,105,0.24)',
    }}>
      {children}
      <svg width="14" height="14" 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>
  );
}

// ── Carte module ────────────────────────────────────────────
function ModuleCard({ theme, name, desc, price, detailHref = '#', paiementHref = PAIEMENT_URL, inscriptionHref, tone = 'sage', img, device }) {
  const m = isMob(device);
  const inscHref = inscriptionHref || paiementHref;
  return (
    <div style={{
      background: TC.white, borderRadius: 22, border: `1px solid ${TC.hair}`,
      overflow: 'hidden', display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ position: 'relative', aspectRatio: '16 / 10', width: '100%' }}>
        {img ? (
          <img src={img} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 55%', display: 'block' }} />
        ) : (
          <div style={{ position: 'absolute', inset: 0 }}>
            <PhotoPlaceholder caption={`visuel · ${name.toLowerCase()}`} tone={tone} radius={0} height="100%" />
          </div>
        )}
        <div style={{
          position: 'absolute', top: 14, right: 14,
          background: 'rgba(255,255,255,0.94)', backdropFilter: 'blur(8px)',
          padding: '6px 12px', borderRadius: 999,
          fontFamily: fontSans, fontSize: 14, fontWeight: 600, color: TC.ink,
          border: `1px solid ${TC.sageHair}`,
        }}>{price}</div>
      </div>
      <div style={{ padding: m ? '20px 20px 22px' : '24px 24px 24px', display: 'flex', flexDirection: 'column', gap: 11, flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <ThemeMark theme={theme} size={36} />
          <div style={{ fontFamily: fontSans, fontSize: 18.5, fontWeight: 600, color: TC.ink, letterSpacing: -0.4, lineHeight: 1.2 }}>{name}</div>
        </div>
        <div style={{ fontFamily: fontSans, fontSize: 14.5, lineHeight: 1.5, color: TC.ink2, letterSpacing: -0.05, flex: 1 }}>{desc}</div>
        <div style={{
          display: 'flex', flexDirection: 'column', gap: 10,
          marginTop: 6, paddingTop: 16, borderTop: `1px solid ${TC.hair}`,
        }}>
          <InscriptionCTA size="sm" fullWidth href={inscHref}>Je m'inscris</InscriptionCTA>
          <a href={detailHref} style={{
            height: 44, borderRadius: 999, boxSizing: 'border-box',
            background: TC.white, border: `1px solid ${TC.sageHair}`, color: TC.sageDeep,
            textDecoration: 'none', fontFamily: fontSans, fontSize: 14, fontWeight: 600, letterSpacing: -0.1,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7,
          }}>
            Voir le détail
            <svg width="13" height="13" 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>
          </a>
        </div>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// HERO
// ════════════════════════════════════════════════════════════
function CatalogueHero({ device }) {
  const m = isMob(device);
  const pad = m ? '40px 22px 36px' : '75px 80px 32px';
  const meta = ['À votre rythme', 'Devoir QCM + attestation', 'Dès 260 € / module'];
  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 }}>
          <div style={{ marginBottom: m ? 18 : 24 }}>
            <Eyebrow variant="gold" size={m ? 'sm' : 'md'}>Modules à la carte</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',
          }}>
            Composez votre{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,
            }}>parcours.</span>
          </h1>
          <p style={{
            fontFamily: fontSans, fontSize: m ? 16.5 : 19, lineHeight: 1.58,
            color: TC.ink2, margin: '0 0 26px', maxWidth: m ? '100%' : 530, letterSpacing: -0.1,
          }}>
            Nos modules à la carte s'adressent à celles et ceux qui désirent se perfectionner
            dans un domaine, acquérir des compétences supplémentaires et élargir leurs connaissances.
          </p>
          <div style={{ marginBottom: m ? 24 : 30 }}>
            <BtnPrimary size="md" onClick={() => window.dispatchEvent(new Event('tc-open-programme'))}>Recevoir le programme</BtnPrimary>
          </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 badge) et
            descend jusqu'au bas de la ligne des arguments, via le stretch de la
            colonne (alignItems:'stretch') + un marginTop égal à la hauteur du badge. */}
        <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: 54, 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={ASSET.modules} alt=""
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 50%', display: 'block' }} />
          </div>
        </div>
      </div>
      <WhatsAppFAB />
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// COMMENT ÇA MARCHE
// ════════════════════════════════════════════════════════════
function CommentCaMarche({ device }) {
  const m = isMob(device);
  const items = [
    { theme: 'online', t: 'À votre rythme',        b: "Suivez chaque module quand vous voulez, où vous voulez." },
    { theme: 'book',   t: 'Un devoir en fin de module', b: "Validez vos acquis avec un QCM à la fin du parcours." },
    { theme: 'iris',   t: 'Attestation de suivi',   b: "Une attestation vous est délivrée à la fin de chaque module." },
  ];
  return (
    <Section tone="white" padY={m ? [56, 56] : [88, 88]} padX={m ? 22 : 80}>
      <SectionHead eyebrow="Comment ça marche" title="Apprenez à votre rythme." align="left" maxWidth={m ? '100%' : 640} />
      <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)', gap: m ? 14 : 20 }}>
        {items.map((it) => (
          <div key={it.t} style={{
            display: 'flex', flexDirection: 'column', gap: 14,
            padding: m ? '22px 20px' : '26px 24px',
            background: TC.off, borderRadius: 18, border: `1px solid ${TC.hair}`,
          }}>
            <ThemeMark theme={it.theme} size={m ? 46 : 50} />
            <div style={{ fontFamily: fontSans, fontSize: m ? 17 : 18, fontWeight: 600, color: TC.ink, letterSpacing: -0.3, lineHeight: 1.25 }}>{it.t}</div>
            <div style={{ fontFamily: fontSans, fontSize: 14.5, lineHeight: 1.55, color: TC.ink2, letterSpacing: -0.05 }}>{it.b}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// CATALOGUE
// ════════════════════════════════════════════════════════════
const MODULES_NATURO = [
  { theme: 'leaf',         name: 'Hygiène vitale',                 desc: "Les 5 piliers de la santé et les cures naturopathiques selon Hippocrate.", tone: 'sage',  img: 'assets/module-hygiene-vitale.png', detailHref: 'module-hygiene-vitale.html',       paiementHref: 'LEARNYBOX_PAIEMENT_HYGIENE_VITALE', inscriptionHref: PAIEMENT_NATURO_CARTE },
  { theme: 'holistic',     name: 'Anatomie & physiologie',         desc: "Comprendre le corps humain, socle de toute pratique de naturopathe.",       tone: 'cream', img: 'assets/module-anatomie.png',        detailHref: 'module-anatomie-physiologie.html', paiementHref: 'LEARNYBOX_PAIEMENT_ANATOMIE_PHYSIOLOGIE', inscriptionHref: PAIEMENT_NATURO_CARTE },
  { theme: 'bowl',         name: 'Bio-nutrition',                  desc: "L'alimentation comme pilier central de la santé au naturel.",               tone: 'warm',  img: 'assets/module-bio-nutrition.jpg',   detailHref: 'module-bio-nutrition.html',        paiementHref: 'LEARNYBOX_PAIEMENT_BIO_NUTRITION', inscriptionHref: PAIEMENT_NATURO_CARTE },
  { theme: 'drop',         name: 'Phytothérapie',                  desc: "Les plantes médicinales et leurs bienfaits, mis en pratique.",              tone: 'sage',  img: 'assets/module-phytotherapie.jpg',   detailHref: 'module-phytotherapie.html',        paiementHref: 'LEARNYBOX_PAIEMENT_PHYTOTHERAPIE', inscriptionHref: PAIEMENT_NATURO_CARTE },
  { theme: 'iris',         name: 'Iridologie',                     desc: "Lire dans l'iris les signes de terrain pour affiner vos bilans.",           tone: 'cream', img: 'assets/module-iridologie.jpg',      detailHref: 'module-iridologie.html',           paiementHref: 'LEARNYBOX_PAIEMENT_IRIDOLOGIE', inscriptionHref: PAIEMENT_NATURO_CARTE },
  { theme: 'reconversion', name: 'Ouvrir son cabinet',             desc: "Création du business plan et lancement de votre activité de naturopathe.",  tone: 'warm',  img: 'https://images.unsplash.com/photo-1666214277657-e60f05c40b04?crop=entropy&cs=tinysrgb&fm=jpg&ixid=Mnw5ODc5NHwxfDF8YWxsfDExfHx8fHx8MXx8MTY3MDcxODcxMA&ixlib=rb-4.0.3&q=80&w=800', detailHref: 'module-ouvrir-son-cabinet.html', paiementHref: 'LEARNYBOX_PAIEMENT_OUVRIR_CABINET', inscriptionHref: PAIEMENT_NATURO_CARTE },
];

const MODULES_FREQ = [
  { theme: 'reconversion', name: 'Mind switch',     desc: "Le déclic qui rend libre.", tone: 'sage', img: 'assets/module-freq-1.png',  detailHref: 'module-mind-switch.html',     paiementHref: 'LEARNYBOX_PAIEMENT_MIND_SWITCH', inscriptionHref: PAIEMENT_FREQ_CARTE },
  { theme: 'wave',         name: 'Mind increase',   desc: "Devenez un être augmenté en développant votre pouvoir psychique.", tone: 'cream', img: 'assets/module-freq-2.png',  detailHref: 'module-mind-increase.html',   paiementHref: 'LEARNYBOX_PAIEMENT_MIND_INCREASE', inscriptionHref: PAIEMENT_FREQ_CARTE },
  { theme: 'iris',         name: 'Connexion infinie', desc: "Connectez-vous à la puissance infinie de l'esprit qui permet de tout atteindre.", tone: 'warm', img: 'assets/module-freq-3.png', detailHref: 'module-connexion-infinie.html', paiementHref: 'LEARNYBOX_PAIEMENT_CONNEXION_INFINIE', inscriptionHref: PAIEMENT_FREQ_CARTE },
];

function CatalogueSection({ device, tone, eyebrow, title, sub, price, modules }) {
  const m = isMob(device);
  return (
    <Section tone={tone} padY={m ? [56, 56] : [80, 80]} padX={m ? 22 : 80}>
      <SectionHead eyebrow={eyebrow} title={title} sub={sub} align="left" maxWidth={m ? '100%' : 680} />
      <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)', gap: m ? 16 : 22 }}>
        {modules.map((mod) => (
          <ModuleCard key={mod.name} {...mod} price={mod.price || price} device={device} />
        ))}
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// PAGE
// ════════════════════════════════════════════════════════════
function ModulesCatalogue({ device }) {
  return (
    <div style={{ background: TC.white, width: '100%', fontFamily: fontSans, color: TC.ink }}>
      <NavBar device={device} />
      <CatalogueHero device={device} />
      <CommentCaMarche device={device} />
      <CatalogueSection
        device={device} tone="off"
        eyebrow="Catalogue · Naturopathie"
        title="Modules Naturopathie."
        sub="Six modules pour vous perfectionner, à composer librement. 390 € par module."
        price="390 €"
        modules={MODULES_NATURO}
      />
      <CatalogueSection
        device={device} tone="white"
        eyebrow="Catalogue · Fréquences énergétiques"
        title="Modules Fréquences énergétiques."
        sub="Trois modules pour développer votre pouvoir psychique. 260 € par module."
        price="260 €"
        modules={MODULES_FREQ}
      />
      <Footer device={device} />
    </div>
  );
}

Object.assign(window, { ModulesCatalogue });