/* global React, ReactDOM, Header, Hero, QuickInfoBar, OrderSection, FeaturedDishes, About, Gallery, Catering, SiteFooter */
const { useState, useEffect } = React;

function App() {
  const [orderMode, setOrderMode] = useState("pickup");

  function scrollToOrder() {
    const el = document.getElementById("order");
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 70, behavior: "smooth" });
  }

  return (
    <div>
      <Header onOrder={scrollToOrder} />
      <main>
        <Hero onOrder={scrollToOrder} />
        <QuickInfoBar />
        <OrderSection mode={orderMode} setMode={setOrderMode} />
        <FeaturedDishes />
        <About />
        <Gallery />
        <Catering />
      </main>
      <SiteFooter />
    </div>
  );
}

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