/* global React, ReactDOM, Common, Motion, I18n, Nav, HelpHub, FooterCTA, Footer */
const { useReveal } = Common;
const { ThemeProvider, CursorGlow } = Motion;
const { I18nProvider } = I18n;

function HelpHubAppInner() {
  useReveal();
  return (
    <div
      style={{
        minHeight: "100vh",
        background: "var(--bg)",
        color: "var(--fg)",
        fontFamily: "var(--font-sans)",
        position: "relative",
      }}
    >
      <CursorGlow color="var(--cursor-glow, rgba(56,189,248,0.06))" size={220} />
      <Nav />
      <HelpHub />
      <Footer />
    </div>
  );
}

function HelpHubApp() {
  return (
    <I18nProvider>
      <ThemeProvider>
        <HelpHubAppInner />
      </ThemeProvider>
    </I18nProvider>
  );
}

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