/* global React, ReactDOM, Nav, Hero, Differentiator, Services, WhoFor, HowItWorks, RequestForm, FAQ, BigMarkSection, Footer, TweaksPanel, useTweaks, TweakSection, TweakRadio, I18nProvider, useT */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "yellow",
  "density": "roomy"
}/*EDITMODE-END*/;

function Tweaks() {
  const { t } = useT();
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.setAttribute("data-accent", tw.accent);
    document.documentElement.setAttribute("data-density", tw.density);
  }, [tw.accent, tw.density]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label={t("tw.accent")}>
        <TweakRadio
          value={tw.accent}
          onChange={(v) => setTweak("accent", v)}
          options={[
            { value: "yellow", label: t("tw.color.yellow") },
            { value: "indigo", label: t("tw.color.blue") },
            { value: "orange", label: t("tw.color.orange") },
            { value: "green",  label: t("tw.color.green") },
          ]}
        />
      </TweakSection>
      <TweakSection label={t("tw.density")}>
        <TweakRadio
          value={tw.density}
          onChange={(v) => setTweak("density", v)}
          options={[
            { value: "roomy", label: t("tw.density.roomy") },
            { value: "compact", label: t("tw.density.compact") },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

function App() {
  return (
    <I18nProvider>
      <Nav />
      <main>
        <Hero />
        <Differentiator />
        <Services />
        <WhoFor />
        <HowItWorks />
        <RequestForm />
        <BigMarkSection />
        <FAQ />
      </main>
      <Footer />
      <Tweaks />
    </I18nProvider>
  );
}

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