/* global React, ReactDOM */
const { useEffect } = React;
const { Nav, Hero, Proof, Services, FeaturedMtgOS, Process, Industries, QuoteSection, Contact, Footer } = window.Guroo;
const { TweaksPanel, useTweaks, TweakSection, TweakRadio } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "steel",
  "hero": "split",
  "theme": "light"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-accent", t.accent);
    root.setAttribute("data-hero", t.hero);
    root.setAttribute("data-theme", t.theme);
  }, [t]);

  return (
    <>
      <Nav/>
      <main>
        <Hero/>
        <Proof/>
        <Services/>
        <FeaturedMtgOS/>
        <Process/>
        <Industries/>
        <QuoteSection/>
        <Contact/>
      </main>
      <Footer/>
      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent color">
          <TweakRadio label="Family" value={t.accent}
            options={["steel", "terracotta", "mono"]}
            onChange={(v) => setTweak("accent", v)} />
        </TweakSection>
        <TweakSection title="Hero layout">
          <TweakRadio label="Composition" value={t.hero}
            options={["split", "centered", "editorial"]}
            onChange={(v) => setTweak("hero", v)} />
        </TweakSection>
        <TweakSection title="Theme">
          <TweakRadio label="Palette" value={t.theme}
            options={["light", "dark"]}
            onChange={(v) => setTweak("theme", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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