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

function HelpArticleAppInner() {
  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 />
      <HelpArticle />
      <Footer />
    </div>
  );
}

function HelpArticleApp() {
  return (
    <I18nProvider>
      <ThemeProvider>
        <HelpArticleAppInner />
      </ThemeProvider>
    </I18nProvider>
  );
}

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