// Trainin Center — Page « Méthode »
// Réutilise le design system (tc-system) + NavBar/Footer (tc-sections).
// Sections : Hero · Déroulé (timeline) · Ce que vous recevez · Pédagogie adultes
//            · Lien humain · CTA final.

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

// ════════════════════════════════════════════════════════════
// HERO
// ════════════════════════════════════════════════════════════
function MethodeHero({ device }) {
  const m = isMobMe(device);
  const pad = m ? '40px 22px 36px' : '75px 80px 44px';
  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: '1fr 1.04fr', gap: 64, alignItems: 'stretch',
          }}>
        {/* text */}
        <div style={{ maxWidth: m ? '100%' : 520 }}>
          <div style={{ marginBottom: m ? 18 : 22 }}>
            <Eyebrow variant="sage" size={m ? 'sm' : 'md'}>Notre méthode</Eyebrow>
          </div>
          <h1 style={{
            fontFamily: fontSans, fontSize: m ? 42 : 'clamp(44px, 3.6vw, 56px)', fontWeight: 500,
            letterSpacing: m ? -1.4 : -1.8, lineHeight: m ? 1.1 : 1.08,
            margin: '0 0 20px', color: TC.ink, textWrap: 'balance',
          }}>
            Une méthode claire pour{m ? ' ' : <br />}
            <span style={{
              fontFamily: fontSerif, fontWeight: 400, fontStyle: 'italic',
              color: TC.sageDeep, fontSize: m ? 46 : 'clamp(48px, 4vw, 62px)', letterSpacing: m ? -1.4 : -1.6,
              lineHeight: 1.06,
            }}>apprendre à votre rythme.</span>
          </h1>
          <p style={{
            fontFamily: fontSans, fontSize: m ? 16.5 : 17.5, lineHeight: 1.58,
            color: TC.ink2, margin: '0 0 26px', maxWidth: m ? '100%' : 480, letterSpacing: -0.1,
          }}>
            Nos formations en ligne combinent cours structurés, supports
            pédagogiques, progression par modules et accompagnement humain, pour
            vous permettre d'avancer sereinement.
          </p>
          <div style={{
            display: 'flex', flexDirection: m ? 'column' : 'row',
            gap: m ? 10 : 12, alignItems: m ? 'stretch' : 'center',
          }}>
            <BtnPrimary size="lg" fullWidth={m} data-cta="goto:formations" onClick={() => window.dispatchEvent(new Event('tc-open-programme'))}>Voir les formations</BtnPrimary>
            <a href="recevoir-le-programme.html" style={{ textDecoration: 'none', display: m ? 'block' : 'inline-block' }}><BtnGhost size="lg" fullWidth={m} data-cta="goto:programme">Recevoir le programme</BtnGhost></a>
          </div>
        </div>

        {/* photo — desktop : le cadre démarre à la hauteur du H1 (sous le badge) et
            descend jusqu'au bas de la rangée de boutons, via le stretch de la
            colonne (alignItems:'stretch') + un décalage égal à la hauteur du badge. */}
        <div style={m ? { position: 'relative' } : { position: 'relative', height: '100%' }}>
          <div style={m
            ? {
                position: 'relative', width: '100%', aspectRatio: '4 / 5',
                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: 52, 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/methode-ecriture.png" alt=""
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '60% 42%', display: 'block' }} />
          </div>
          <div style={{
            position: 'absolute', left: m ? '50%' : 20, transform: m ? 'translateX(-50%)' : 'none',
            bottom: m ? -26 : 20, width: m ? 'calc(100% - 44px)' : 234,
            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 }}>Progression par modules</div>
            <div style={{ fontFamily: fontSans, fontSize: 14.5, lineHeight: 1.45, color: TC.ink, marginTop: 6, letterSpacing: -0.1 }}>
              Étape par étape, sans surcharge, à votre rythme.
            </div>
          </div>
        </div>
      </div>
      <WhatsAppFAB />
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// COMMENT SE DÉROULE VOTRE FORMATION — timeline 4 étapes
// ════════════════════════════════════════════════════════════
function Deroule({ device }) {
  const m = isMobMe(device);
  const steps = [
    { n: '01', t: 'Vous choisissez votre parcours',      b: "Vous sélectionnez la formation adaptée à votre projet et à votre niveau." },
    { n: '02', t: 'Vous avancez module par module',      b: "Les contenus sont organisés pour vous guider progressivement, sans surcharge." },
    { n: '03', t: 'Vous consolidez vos connaissances',   b: "Supports, exercices, devoirs ou QCM permettent d'ancrer les apprentissages." },
    { n: '04', t: 'Vous êtes accompagné',                b: "L'équipe pédagogique reste disponible pour répondre aux questions et soutenir votre progression." },
  ];
  return (
    <Section tone="white" padY={m ? [60, 60] : [96, 96]} padX={m ? 22 : 80}>
      <SectionHead
        eyebrow="Comment se déroule votre formation ?"
        title="Quatre étapes, un parcours limpide."
        sub="De l'inscription à la validation, vous savez toujours où vous en êtes."
        align={m ? 'left' : 'center'}
        maxWidth={760}
      />
      <div style={{
        position: 'relative',
        display: 'grid',
        gridTemplateColumns: m ? '1fr' : 'repeat(4, 1fr)',
        gap: m ? 16 : 22, marginTop: m ? 4 : 20,
      }}>
        {!m && (
          <div style={{
            position: 'absolute', top: 36, left: '12%', right: '12%', height: 1,
            background: `linear-gradient(90deg, transparent, ${TC.sageHair}, transparent)`,
            pointerEvents: 'none',
          }} />
        )}
        {steps.map((s) => (
          <div key={s.n} style={{
            background: TC.off, borderRadius: 22, border: `1px solid ${TC.hair}`,
            padding: m ? '22px 22px' : '28px 24px', 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 ? 18 : 18.5, fontWeight: 600, color: TC.ink, letterSpacing: -0.3, lineHeight: 1.25, 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>
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: m ? 28 : 36 }}>
        <BtnPrimary size="lg" fullWidth={m} onClick={() => window.dispatchEvent(new Event('tc-open-programme'))}>Recevoir le programme</BtnPrimary>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// CE QUE VOUS RECEVEZ — grille
// ════════════════════════════════════════════════════════════
function CeQueVousRecevez({ device }) {
  const m = isMobMe(device);
  const items = [
    { theme: 'online',         t: 'Vidéos de cours',            b: 'Des cours filmés, clairs et accessibles à tout moment.' },
    { theme: 'book',           t: 'Supports PDF',               b: 'Des documents à télécharger pour réviser et approfondir.' },
    { theme: 'reconversion',   t: 'Modules structurés',         b: 'Un parcours organisé pour progresser sans vous disperser.' },
    { theme: 'wave',           t: 'Accès en ligne',             b: 'Votre formation disponible 24h/24, où que vous soyez.' },
    { theme: 'iris',           t: 'Devoirs / QCM',              b: 'Des exercices d\'évaluation selon la formation choisie.' },
    { theme: 'holistic',       t: 'Attestation / certification', b: 'Une reconnaissance de votre parcours selon la formation.' },
    { theme: 'accompagnement', t: 'Accompagnement pédagogique', b: 'Une équipe disponible pour répondre à vos questions.' },
    { theme: 'drop',           t: 'Avancer à son rythme',       b: 'Aucune contrainte d\'horaire : vous gérez votre progression.' },
  ];
  return (
    <Section tone="off" padY={m ? [60, 60] : [96, 96]} padX={m ? 22 : 80}>
      <SectionHead
        eyebrow="Ce que vous recevez"
        title="Tout ce qu'il faut pour réussir."
        sub="Un ensemble complet de ressources et d'accompagnement, inclus dans votre formation."
        align="left"
        maxWidth={m ? '100%' : 640}
      />
      <div style={{
        display: 'grid',
        gridTemplateColumns: m ? '1fr' : 'repeat(4, 1fr)',
        gap: m ? 14 : 18, marginTop: m ? 4 : 12,
      }}>
        {items.map((it) => (
          <div key={it.t} style={{
            background: TC.white, borderRadius: 18, border: `1px solid ${TC.hair}`,
            padding: m ? '22px 20px' : '24px 22px',
            display: 'flex', flexDirection: 'column', gap: 12,
          }}>
            <ThemeMark theme={it.theme} size={m ? 46 : 48} />
            <div style={{ fontFamily: fontSans, fontSize: m ? 16.5 : 16.5, fontWeight: 600, color: TC.ink, letterSpacing: -0.25, lineHeight: 1.25 }}>{it.t}</div>
            <div style={{ fontFamily: fontSans, fontSize: 13.5, lineHeight: 1.55, color: TC.ink2, letterSpacing: -0.05 }}>{it.b}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// UNE PÉDAGOGIE PENSÉE POUR LES ADULTES
// ════════════════════════════════════════════════════════════
function PedagogieAdultes({ device }) {
  const m = isMobMe(device);
  return (
    <Section tone="white" padY={m ? [60, 60] : [96, 96]} padX={m ? 22 : 80}>
      <div style={{
        display: m ? 'flex' : 'grid',
        flexDirection: m ? 'column' : undefined,
        gridTemplateColumns: m ? undefined : '0.95fr 1.05fr',
        gap: m ? 22 : 72, alignItems: m ? 'flex-start' : 'center',
      }}>
        <div>
          <Eyebrow variant="sage">Une pédagogie pour adultes</Eyebrow>
          <h2 style={{
            fontFamily: fontSans, fontSize: m ? 30 : 44, fontWeight: 500,
            letterSpacing: m ? -1 : -1.4, lineHeight: 1.1,
            color: TC.ink, margin: '18px 0 0', textWrap: 'balance',
          }}>
            Flexible, progressive et compatible avec
            <span style={{ fontFamily: fontSerif, fontStyle: 'italic', fontWeight: 400, color: TC.sageDeep }}> votre quotidien.</span>
          </h2>
        </div>
        <p style={{
          fontFamily: fontSans, fontSize: m ? 16.5 : 18.5, lineHeight: 1.7,
          color: TC.ink2, margin: 0, letterSpacing: -0.05, maxWidth: 560,
        }}>
          Nos élèves ont souvent une vie professionnelle, familiale ou un projet de
          reconversion. C'est pourquoi nos formations sont conçues pour être
          flexibles, progressives et compatibles avec un emploi du temps chargé.
        </p>
      <div style={{ marginTop: m ? 24 : 28 }}>
          <a href="contact.html#formulaire" style={{ textDecoration: 'none', display: m ? 'block' : 'inline-block' }}><BtnPrimary size="lg" fullWidth={m} data-cta="goto:contact">Réserver un entretien</BtnPrimary></a>
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
function LienHumain({ device }) {
  const m = isMobMe(device);
  return (
    <Section tone="off" padY={m ? [60, 60] : [96, 96]} padX={m ? 22 : 80}>
      <div style={{
        display: m ? 'flex' : 'grid',
        flexDirection: m ? 'column-reverse' : undefined,
        gridTemplateColumns: m ? undefined : '1.05fr 0.95fr',
        gap: m ? 28 : 72, alignItems: 'center',
      }}>
        <div>
          <SectionHead
            eyebrow="Un accompagnement humain, à chaque étape"
            title="À distance, jamais seul·e."
            align="left"
            maxWidth={m ? '100%' : 520}
          />
          <p style={{
            fontFamily: fontSans, fontSize: m ? 16 : 17.5, lineHeight: 1.7,
            color: TC.ink2, margin: '-8px 0 24px', maxWidth: 540, letterSpacing: -0.05,
          }}>
            L'un des points forts de Trainin Center est de garder un lien humain tout
            au long du parcours. Vous pouvez poser vos questions, être guidé et
            avancer avec un cadre rassurant.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              'Des réponses à vos questions tout au long de la formation.',
              'Un cadre rassurant, jamais une simple bibliothèque de vidéos.',
              'Un accompagnement qui respecte votre rythme et votre projet.',
            ].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 : 16, color: TC.ink, lineHeight: 1.5, letterSpacing: -0.05 }}>{p}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: m ? 24 : 28 }}>
            <BtnPrimary size="lg" fullWidth={m} onClick={() => window.dispatchEvent(new Event('tc-open-programme'))}>Recevoir le programme</BtnPrimary>
          </div>
        </div>

        <div style={{ position: 'relative' }}>
          <div style={{
            position: 'relative', width: '100%',
            aspectRatio: m ? '4 / 3' : '4 / 5',
            borderRadius: 24, overflow: 'hidden',
            boxShadow: '0 30px 80px -28px rgba(26,31,28,0.28)',
          }}>
            <img src="assets/methode-hero.png" alt=""
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '55% 45%', display: 'block' }} />
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(26,31,28,0.5) 100%)',
            }} />
            <div style={{ position: 'absolute', left: 20, right: 20, bottom: 20, color: TC.white }}>
              <div style={{ fontFamily: fontSerif, fontStyle: 'italic', fontSize: m ? 21 : 25, lineHeight: 1.3, letterSpacing: -0.4 }}>
                « Un parcours individuel, un soutien collectif. »
              </div>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// CTA FINAL
// ════════════════════════════════════════════════════════════
function MethodeCTA({ device }) {
  const m = isMobMe(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' : '76px 80px', overflow: 'hidden', textAlign: 'center',
        ...(m ? {} : { maxWidth: 1100, marginLeft: 'auto', marginRight: 'auto' }),
      }}>
        <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">Démarrez sereinement</Eyebrow>
          </div>
          <h2 style={{
            fontFamily: fontSans, fontSize: m ? 34 : 56, fontWeight: 500,
            letterSpacing: m ? -1.2 : -2, lineHeight: 1.05,
            color: TC.white, margin: '20px auto 16px', textWrap: 'balance', maxWidth: 760,
          }}>
            Prêt à avancer dans{m ? ' ' : <br />}
            <span style={{ fontFamily: fontSerif, fontStyle: 'italic', fontWeight: 400 }}>votre projet&nbsp;?</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: 520, letterSpacing: -0.1,
          }}>
            Découvrez nos formations ou recevez le programme détaillé pour démarrer
            sereinement.
          </p>
          <div style={{ display: 'flex', flexDirection: m ? 'column' : 'row', gap: 12, justifyContent: 'center', alignItems: 'center' }}>
            <BtnPrimary size="lg" dark fullWidth={m} data-cta="goto:formations" onClick={() => window.dispatchEvent(new Event('tc-open-programme'))}>Découvrir les formations</BtnPrimary>
            <a href="recevoir-le-programme.html" style={{ textDecoration: 'none', display: m ? 'block' : 'inline-block', width: m ? '100%' : 'auto' }}><BtnGhost size="lg" dark fullWidth={m} data-cta="goto:programme">Recevoir le programme</BtnGhost></a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// PAGE
// ════════════════════════════════════════════════════════════
function MethodePage({ device }) {
  return (
    <div style={{ background: TC.white, width: '100%', fontFamily: fontSans, color: TC.ink }}>
      <NavBar device={device} />
      <MethodeHero device={device} />
      <Deroule device={device} />
      <CeQueVousRecevez device={device} />
      <PedagogieAdultes device={device} />
      <LienHumain device={device} />
      <MethodeCTA device={device} />
      <Footer device={device} />
    </div>
  );
}

Object.assign(window, { MethodePage });