/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakToggle, useReveal, TopNav, Footer, Hero, Selection, Principles, Stats, Process, FinalCTA, LangProvider */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#000000",
  "accentHover": "#1B1C1E",
  "hoverAccent": "#0066FF",
  "showLangSwitch": true
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty("--accent-hover", t.accentHover);
    document.documentElement.style.setProperty("--hover-accent", t.hoverAccent);
  }, [t.accent, t.accentHover, t.hoverAccent]);

  const ACCENTS = [
    ["#000000", "#1B1C1E"],
    ["#0066FF", "#005EEB"],
    ["#1B2A4E", "#0F1B36"],
    ["#3A5B8A", "#284270"],
  ];

  const HOVER_ACCENTS = ["#0066FF", "#3A5B8A", "#1B2A4E", "#000000"];

  return (
    <>
      <a id="top"></a>
      <TopNav active="home" showLang={t.showLangSwitch} onHero={true} />
      <main>
        <Hero />
        <div className="content-stack">
          <Selection />
          <Principles />
          <Stats />
          <Process />
          <FinalCTA />
        </div>
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Brand accent" />
        <TweakColor
          label="Primary"
          value={t.accent}
          options={ACCENTS.map((p) => p[0])}
          onChange={(v) => {
            const idx = ACCENTS.findIndex((p) => p[0] === v);
            setTweak({ accent: v, accentHover: ACCENTS[idx >= 0 ? idx : 0][1] });
          }}
        />
        <TweakColor
          label="Hover tint"
          value={t.hoverAccent}
          options={HOVER_ACCENTS}
          onChange={(v) => setTweak("hoverAccent", v)}
        />
        <TweakSection label="Interface" />
        <TweakToggle label="Language switch" value={t.showLangSwitch} onChange={(v) => setTweak("showLangSwitch", v)} />
      </TweaksPanel>
    </>
  );
}

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