/* global React, ReactDOM, Nav, Footer, HomePage, HandbookPage, MethodPage, FAQPage, PrivacyPage, TermsPage, RefundPage */
const { useState, useEffect } = React;

const CTA_TEXT = "Buy the ebook";
const HEADLINE = "v1";
const LULU_URL = "https://www.lulu.com/shop/melissa-brown/idiot-proof-diet/ebook/product-1mk7kqvd.html";

function App() {
  const [page, setPage] = useState(() => {
    const h = (location.hash || "#home").replace("#", "");
    return ["home","handbook","method","faq","privacy","terms","refund"].includes(h) ? h : "home";
  });

  useEffect(() => {
    location.hash = page;
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [page]);

  const onBuy = () => window.open(LULU_URL, "_blank", "noopener,noreferrer");
  const common = { ctaText: CTA_TEXT, onBuy, setPage };

  let pageEl = null;
  if (page === "home") pageEl = <HomePage {...common} headline={HEADLINE} />;
  else if (page === "handbook") pageEl = <HandbookPage {...common} />;
  else if (page === "method") pageEl = <MethodPage {...common} />;
  else if (page === "faq") pageEl = <FAQPage {...common} />;
  else if (page === "privacy") pageEl = <PrivacyPage {...common} />;
  else if (page === "terms") pageEl = <TermsPage {...common} />;
  else if (page === "refund") pageEl = <RefundPage {...common} />;

  return (
    <>
      <Nav page={page} setPage={setPage} buyText={CTA_TEXT} />
      {pageEl}
      <Footer setPage={setPage} />
    </>
  );
}

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