// Trainin Center — Page « Webinaires » (/webinaires)
// Réutilise tc-system + NavBar/Footer (tc-sections).
// Sections : Hero · Réservation (formulaire + encart « Pourquoi participer ? »).

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

const WB_MERCI_URL = 'merci-contact.html';

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

const WB_RAISONS = [
  'Comprendre les formations disponibles',
  'Poser vos questions avant de vous inscrire',
  'Être orienté·e vers le bon parcours',
  'Découvrir la méthode Trainin Center',
  'Recevoir les prochaines dates de webinaire',
];

// ── Champ de formulaire ─────────────────────────────────────
function WbField({ label, type = 'text', placeholder, textarea, options }) {
  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>
      {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>
  );
}

// ════════════════════════════════════════════════════════════
// HERO
// ════════════════════════════════════════════════════════════
function WbHero({ device }) {
  const m = isMobWb(device);
  return (
    <section style={{ background: TC.off, position: 'relative', overflow: 'hidden' }} data-screen-label="Webinaires · 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 36px' }
        : { position: 'relative', maxWidth: TC_CONTAINER, margin: '0 auto', width: '100%', padding: '48px 80px 40px' }}>
        <div style={{ maxWidth: 920 }}>
        <div style={{ marginBottom: m ? 18 : 24 }}>
          <Eyebrow variant="sage" size={m ? 'sm' : 'md'}>Webinaires</Eyebrow>
        </div>
        <h1 style={{
          fontFamily: fontSans, fontSize: m ? 38 : 60, fontWeight: 500,
          letterSpacing: m ? -1.3 : -2.1, lineHeight: m ? 1.08 : 1.05,
          margin: '0 0 22px', color: TC.ink, textWrap: 'balance',
        }}>
          Participez à notre{m ? ' ' : <br />}
          <span style={{
            fontFamily: fontSerif, fontWeight: 400, fontStyle: 'italic',
            color: TC.sageDeep, fontSize: m ? 42 : 68, letterSpacing: m ? -1.3 : -2,
          }}>prochain webinaire.</span>
        </h1>
        <p style={{
          fontFamily: fontSans, fontSize: m ? 16.5 : 19, lineHeight: 1.6,
          color: TC.ink2, margin: '0 0 18px', maxWidth: 680, letterSpacing: -0.1,
        }}>
          Découvrez nos formations, posez vos questions et recevez des conseils pour
          choisir le parcours le plus adapté à votre projet.
        </p>
        <p style={{
          fontFamily: fontSans, fontSize: m ? 15 : 16.5, lineHeight: 1.65,
          color: TC.ink3, margin: 0, maxWidth: 680, letterSpacing: -0.05,
        }}>
          Trainin Center organise régulièrement des webinaires pour présenter ses
          formations, expliquer les parcours disponibles et accompagner les personnes
          qui souhaitent se former aux métiers du bien-être.
        </p>
        </div>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// RÉSERVATION — formulaire + encart « Pourquoi participer ? »
// ════════════════════════════════════════════════════════════
function WbReservation({ device }) {
  const m = isMobWb(device);
  return (
    <Section tone="off" padY={m ? [16, 56] : [24, 96]} padX={m ? 22 : 80}>
      <div style={{
        display: m ? 'flex' : 'grid',
        flexDirection: m ? 'column' : undefined,
        gridTemplateColumns: m ? undefined : '1.1fr 0.9fr',
        gap: m ? 22 : 40, alignItems: 'stretch',
        maxWidth: 1180, margin: '0 auto',
      }}>
        {/* FORMULAIRE */}
        <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',
          }}>
          <div style={{ padding: '0 40px' }}>
            <h2 style={{
              fontFamily: fontSans, fontSize: m ? 22 : 26, fontWeight: 600,
              color: TC.ink, letterSpacing: -0.5, lineHeight: 1.2, margin: m ? '0 -24px 6px 0' : '0 0 6px',
            }}>Réservez votre place</h2>
            <p style={{ fontFamily: fontSans, fontSize: m ? 14.5 : 15, lineHeight: 1.55, color: TC.ink2, margin: '0 0 2px', paddingBottom: 4, letterSpacing: -0.05 }}>
              Nous vous enverrons les informations pratiques dès que la prochaine session sera programmée.
            </p>
          </div>
          <iframe
            src="https://trainin-center.learnybox.com/formulaire-reservation-webinaire/"
            title="Formulaire Réservation webinaire"
            frameBorder="0"
            width="100%"
            height={m ? 720 : 660}
            className="tc-learnybox-frame tc-learnybox-frame-reservation-webinaire"
          />
        </div>

        {/* ENCART — Pourquoi participer ? (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 }}>
              Le webinaire
            </div>
            <h2 style={{
              fontFamily: fontSans, fontSize: m ? 22 : 26, fontWeight: 600,
              color: TC.white, letterSpacing: -0.5, lineHeight: 1.2, margin: '0 0 8px',
            }}>Pourquoi participer ?</h2>
            <p style={{ fontFamily: fontSans, fontSize: m ? 14.5 : 15, lineHeight: 1.55, color: 'rgba(255,255,255,0.8)', margin: '0 0 24px', letterSpacing: -0.05 }}>
              Un moment d'échange pour avancer sereinement dans votre projet de formation.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: m ? 12 : 13 }}>
              {WB_RAISONS.map((r) => (
                <div key={r} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <span style={{
                    marginTop: 1, flexShrink: 0, width: 24, height: 24, borderRadius: 12,
                    background: 'rgba(255,255,255,0.14)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <svg width="13" height="13" viewBox="0 0 18 18" fill="none">
                      <path d="M4 9.4l3 2.9 7-7.6" stroke={TC.white} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </span>
                  <span style={{ fontFamily: fontSans, fontSize: m ? 15 : 16, color: TC.white, letterSpacing: -0.1, lineHeight: 1.45 }}>{r}</span>
                </div>
              ))}
            </div>
            <div style={{ flex: 1, minHeight: m ? 18 : 24 }} />
            <div style={{ marginBottom: 16 }}>
              <BtnPrimary size="lg" dark fullWidth={m} onClick={() => window.dispatchEvent(new Event('tc-open-programme'))}>Recevoir le programme</BtnPrimary>
            </div>
            <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 }}>Sessions en ligne · 100 % à distance</span>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}

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

Object.assign(window, { WebinairesPage });