// Trainin Center — homepage compositions for mobile + desktop

function Homepage({ device }) {
  // Le contenu est rendu côté client (Babel in-browser) : au chargement direct
  // de index.html#temoignages depuis une autre page, l'ancre native du
  // navigateur se déclenche avant que #temoignages n'existe dans le DOM et
  // échoue silencieusement. On rejoue le scroll une fois le composant monté.
  React.useEffect(() => {
    if (!location.hash) return;
    const el = document.getElementById(location.hash.slice(1));
    if (el) el.scrollIntoView({ block: 'start' });
  }, []);
  return (
    <div style={{
      background: TC.white,
      width: '100%',
      fontFamily: fontSans,
      color: TC.ink,
    }}>
      <NavBar device={device} />
      <Hero device={device} />
      <Benefits device={device} />
      <Formations device={device} />
      <LeadMagnet device={device} emailCapture={false} ctaOnClick={() => window.dispatchEvent(new Event('tc-open-programme'))} ctaLabel="Recevoir le programme" />
      <WhyTC device={device} />
      <Parcours device={device} />
      <Testimonials device={device} footCtaLabel="Réserver un entretien" footCtaHref="#etre-rappele" footCta="goto:contact" footCtaPrimary />
      <Contact device={device} />
      <FAQ device={device} moreLabel="En savoir plus" moreOnClick={() => window.dispatchEvent(new Event('tc-open-programme'))} morePrimary />
      <FinalCTA device={device} />
      <Footer device={device} />
    </div>
  );
}

Object.assign(window, { Homepage });