// n-app.jsx — root

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0F1011",
  "bg": "#F5F5F5"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const bookRef = React.useRef(null);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--bg', t.bg);
    document.body.style.background = t.bg;
  }, [t.bg]);

  function onBook() {
    window.open('https://calendar.app.google/KS4b9peJhiikgHwH9', '_blank', 'noopener,noreferrer');
  }

  return (
    <React.Fragment>
      <Nav onBook={onBook} />
      <Hero onBook={onBook} />
      <AwardsStrip />
      <About onBook={onBook} />
      <Problem onBook={onBook} />
      <How onBook={onBook} />
      <Team />
      <Deliver />
      <MathSection />
      <Pricing onBook={onBook} />
      <Why />
      <Cases />
      <FAQ />
      <FinalCTA bookRef={bookRef} />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor
          label="Page"
          value={t.bg}
          options={["#F5F5F5", "#FAFAFA", "#EFEDE9", "#F1EFE7"]}
          onChange={(v) => setTweak('bg', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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