import React, { useEffect } from "react";
import Layout from "@theme/Layout";
import { MainComp } from "@site/src/components/parts/MainComp";
import { useColorMode } from "@docusaurus/theme-common";

const ThemeColor = () => {
  const { colorMode, setColorMode } = useColorMode();

  useEffect(function () {
    if (window.location.pathname === "/") {
      if (colorMode !== "dark") {
        //force dark theme to home page without overriding user settings
        setColorMode("dark", { persist: false });
      }
    } else {
      setColorMode(localStorage.getItem("theme"));
    }
  });

  return null;
};

export default function Home() {
  return (
    <Layout
      title="Free, Secure, and Open-Source Backup for Microsoft 365"
      description="Intro, docs, and blog for Corso, an open-source tool, that protects Microsoft 365 data by securely and efficiently backing up all business-critical data to object storage."
    >
      <ThemeColor />
      <MainComp />
    </Layout>
  );
}