// Main app composition — ordem nova do funil (§2 do doc de design):
// Hero → A Onda (102x) → Espelho da dor → Como funciona → Educação → Marcas →
// Jogo & Prêmios → FAQ → CTA final, com o Ato 3 dark até o fim.
// ("Creators reais" só entra com depoimento real autorizado — copy §2.9.)

const App = () => (
  <>
    <ScrollProgress />
    <Nav />
    <Hero />
    <FaixaMarcas />
    <Onda />
    <EspelhoDaDor />
    <HowItWorks />
    <Education />
    <Comunidade />
    <Brands />
    <Premios />
    <Faq />
    <FinalCta />
    <Footer />
  </>
);

// Thin scroll progress bar at top, blue→lime gradient
const ScrollProgress = () => {
  const [pct, setPct] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        const h = document.documentElement;
        const total = h.scrollHeight - h.clientHeight;
        setPct(total > 0 ? Math.min(1, h.scrollTop / total) : 0);
        raf = null;
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div style={{
      position: "fixed", top: 0, left: 0, right: 0, height: 2, zIndex: 100,
      pointerEvents: "none",
    }}>
      <div style={{
        height: "100%",
        width: "100%",
        transform: `scaleX(${pct})`,
        transformOrigin: "left center",
        background: "linear-gradient(90deg, var(--gc-blue) 0%, var(--gc-lime) 100%)",
        transition: "transform .08s linear",
        opacity: pct > 0.01 ? 1 : 0,
      }}/>
    </div>
  );
};

// O sticky CTA mobile foi removido a pedido do Pedro (02/07): o botão
// "Criar conta" da nav sticky é suficiente como CTA persistente.

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);