// Trainin Center — Page « Recevoir le programme » (/recevoir-le-programme)
// Page de capture : formulaire + encart « Programme complet ».
// Réutilise le design system (tc-system) + NavBar/Footer (tc-sections).
// Liens placeholders — formulaires NON branchés (cf. data-cta).

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

// ── Liens / placeholders ────────────────────────────────────
const RP = {
  naturo: 'formation-praticien-naturopathe.html',
  freq:   'formation-frequences-energetiques.html',
  modules:'modules-a-la-carte.html',
  merci:  'merci-programme.html',
};

const RP_FORMATIONS = [
  'Praticien·ne naturopathe',
  'Fréquences énergétiques',
  'Modules à la carte',
  'Je ne sais pas encore',
];

const RP_INCLUS = [
  { t: 'Formation principale', s: 'Praticien·ne naturopathe', theme: 'leaf' },
  { t: 'Autres parcours', s: 'Fréquences énergétiques & Modules à la carte', theme: 'wave' },
  { t: 'Formations en ligne', s: 'À votre rythme, où que vous soyez', theme: 'online' },
  { t: 'Accompagnement', s: 'Un suivi tout au long du parcours', theme: 'accompagnement' },
  { t: 'Certifications', s: 'Pour les parcours complets', theme: 'holistic' },
];

// ── Champ de formulaire ─────────────────────────────────────
function RpField({ label, type = 'text', placeholder, name, id, required }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <label style={{ fontFamily: fontSans, fontSize: 12.5, fontWeight: 500, color: TC.ink2, letterSpacing: 0.1 }}>
        {label}
      </label>
      <input type={type} name={name} id={id} placeholder={placeholder} required={required} 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>
  );
}

const RP_ACTION = 'https://www.trainin-center.com/form/6a3ae6226ba38wcp4cujwohmg2iu5ach32/';
const RP_RGPD_NOTICE = "En indiquant votre adresse mail, vous acceptez de recevoir des informations et offres de formation de la part de Trainin Center. Vous pouvez vous désinscrire à tout moment via les liens de désinscription présents dans nos emails.";

// ── Sélecteur « formation qui vous intéresse » (chips radio) ─
function RpFormationPicker() {
  const [sel, setSel] = React.useState(null);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <label style={{ fontFamily: fontSans, fontSize: 12.5, fontWeight: 500, color: TC.ink2, letterSpacing: 0.1 }}>
        Formation qui vous intéresse
      </label>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
        {RP_FORMATIONS.map((f) => {
          const active = sel === f;
          return (
            <button key={f} type="button" onClick={() => setSel(f)} style={{
              height: 42, padding: '0 16px', cursor: 'pointer',
              borderRadius: 999, fontFamily: fontSans, fontSize: 13.5, fontWeight: 500, letterSpacing: -0.1,
              border: `1px solid ${active ? TC.sage : TC.hairStrong}`,
              background: active ? TC.sage : TC.white,
              color: active ? TC.white : TC.ink2,
              display: 'inline-flex', alignItems: 'center', gap: 8,
              transition: 'all .14s',
            }}>
              <span style={{
                width: 14, height: 14, borderRadius: 7, flexShrink: 0,
                border: `1.5px solid ${active ? 'rgba(255,255,255,0.9)' : TC.hairStrong}`,
                background: active ? TC.white : 'transparent',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                {active && <span style={{ width: 6, height: 6, borderRadius: 3, background: TC.sage }} />}
              </span>
              {f}
            </button>
          );
        })}
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// HERO
// ════════════════════════════════════════════════════════════
function RpHero({ device }) {
  const m = isMobRp(device);
  return (
    <section style={{ background: TC.off, position: 'relative', overflow: 'hidden' }} data-screen-label="Recevoir le programme · hero">
      <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: '44px 22px 12px' }
        : { position: 'relative', maxWidth: TC_CONTAINER, margin: '0 auto', width: '100%', padding: '60px 80px 28px' }}>
        <div style={{ maxWidth: 900 }}>
          <div style={{ marginBottom: m ? 18 : 22 }}>
            <Eyebrow variant="sage" size={m ? 'sm' : 'md'}>Programme gratuit</Eyebrow>
          </div>
          <h1 style={{
            fontFamily: fontSans, fontSize: m ? 36 : 58, fontWeight: 500,
            letterSpacing: m ? -1.3 : -2, lineHeight: m ? 1.08 : 1.04,
            margin: '0 0 22px', color: TC.ink, textWrap: 'balance',
          }}>
            Recevoir le programme{m ? ' ' : <br />}
            <span style={{
              fontFamily: fontSerif, fontWeight: 400, fontStyle: 'italic',
              color: TC.sageDeep, fontSize: m ? 40 : 66, letterSpacing: m ? -1.3 : -1.8,
            }}>complet des formations.</span>
          </h1>
          <p style={{
            fontFamily: fontSans, fontSize: m ? 16.5 : 19, lineHeight: 1.6,
            color: TC.ink2, margin: 0, maxWidth: 680, letterSpacing: -0.1,
          }}>
            Indiquez vos informations pour recevoir le programme Trainin Center et
            découvrir les parcours disponibles : Praticien·ne naturopathe,
            Fréquences énergétiques et modules à la carte.
          </p>
        </div>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// FORMULAIRE + ENCART PROGRAMME
// ════════════════════════════════════════════════════════════
function RpMain({ device }) {
  const m = isMobRp(device);
  return (
    <Section tone="off" padY={m ? [28, 56] : [44, 88]} padX={m ? 22 : 80}>
      <div style={{
        display: m ? 'flex' : 'grid',
        flexDirection: m ? 'column' : undefined,
        gridTemplateColumns: m ? undefined : '1.08fr 0.92fr',
        gap: m ? 22 : 40, alignItems: 'stretch',
        maxWidth: 1180, margin: '0 auto',
      }}>
        {/* FORMULAIRE LEARNYBOX */}
        <div style={{
          background: TC.white, borderRadius: 24, border: `1px solid ${TC.hair}`,
          padding: m ? '24px 22px' : '40px 40px',
          boxShadow: '0 1px 2px rgba(0,0,0,0.03), 0 18px 50px -24px rgba(26,31,28,0.18)',
          display: 'flex', flexDirection: 'column',
        }}>
          <iframe
            src="https://trainin-center.learnybox.com/formulaire-programme-pdf/"
            title="Recevoir le programme complet Trainin Center"
            frameBorder="0"
            width="100%"
            height={m ? 720 : 620}
            className="tc-learnybox-frame tc-learnybox-frame-programme"
          />
        </div>

        {/* ENCART — Programme complet (vert profond) */}
        <div style={{
          position: 'relative', overflow: 'hidden', borderRadius: 24,
          background: `linear-gradient(155deg, ${TC.sage} 0%, ${TC.sageInk} 100%)`,
          padding: m ? '28px 24px' : '40px 38px',
          display: 'flex', flexDirection: 'column',
        }}>
          <div style={{ position: 'absolute', top: -90, right: -90, width: 240, height: 240, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%)' }} />
          <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', height: '100%' }}>
            <div style={{ fontFamily: fontMono, fontSize: 11, letterSpacing: 1.4, textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)', marginBottom: 14 }}>
              Ce que vous recevez
            </div>
            <h2 style={{
              fontFamily: fontSans, fontSize: m ? 22 : 26, fontWeight: 600,
              color: TC.white, letterSpacing: -0.5, lineHeight: 1.2, margin: '0 0 8px',
            }}>Programme complet Trainin Center</h2>
            <p style={{ fontFamily: fontSans, fontSize: m ? 14.5 : 15, lineHeight: 1.55, color: 'rgba(255,255,255,0.8)', margin: '0 0 22px', letterSpacing: -0.05 }}>
              Un document clair présentant l'ensemble des parcours, leur contenu et
              les modalités d'accompagnement.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              {RP_INCLUS.map((it, i) => (
                <div key={it.t} style={{
                  display: 'flex', alignItems: 'center', gap: 14,
                  padding: m ? '13px 0' : '14px 0',
                  borderTop: i ? '1px solid rgba(255,255,255,0.14)' : 'none',
                }}>
                  <span style={{
                    flexShrink: 0, width: 40, height: 40, borderRadius: 12,
                    background: 'rgba(255,255,255,0.12)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <ThemeMark theme={it.theme} size={40} color={TC.white} bg="transparent" />
                  </span>
                  <span style={{ minWidth: 0 }}>
                    <span style={{ display: 'block', fontFamily: fontSans, fontSize: m ? 15 : 15.5, fontWeight: 600, color: TC.white, letterSpacing: -0.2, lineHeight: 1.25 }}>{it.t}</span>
                    <span style={{ display: 'block', fontFamily: fontSans, fontSize: 12.5, color: 'rgba(255,255,255,0.72)', marginTop: 2, lineHeight: 1.35 }}>{it.s}</span>
                  </span>
                </div>
              ))}
            </div>

            <div style={{ flex: 1, minHeight: m ? 18 : 24 }} />
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '9px 14px', background: 'rgba(255,255,255,0.12)', borderRadius: 999, alignSelf: 'flex-start' }}>
              <span style={{ width: 7, height: 7, borderRadius: 4, background: '#8fe0a3', display: 'inline-block' }} />
              <span style={{ fontFamily: fontSans, fontSize: 12.5, color: TC.white, fontWeight: 500 }}>Envoi immédiat · 100 % gratuit</span>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}

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

Object.assign(window, { RecevoirProgrammePage });