// app.jsx — root composition

const App = () => {
  const onBegin = () => {
    const el = document.getElementById("books");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <div className="app">
      <Header onCta={onBegin} />
      <Hero onStart={onBegin} onLearn={() => {
        const el = document.getElementById("about");
        if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
      }}/>

      <SignatureStrip />

      <About />

      <Books onBuy={() => {}}/>

      <MidCTA onClick={onBegin}/>

      <Courses />

      <Journey />

      <QuoteSlab />

      <Testimonials />

      <FAQ />

      <Newsletter />

      <Footer />
    </div>
  );
};

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