const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#4ADE80",
  "dotGrid": true,
  "dotSpacing": 36
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  "#4ADE80", // green
  "#7AA2FF", // blue
  "#F2C66B", // amber
  "#E879F9", // magenta
];

const hexToRgbArr = (hex) => {
  const rgb = hex.replace("#", "").match(/.{2}/g).map(x => parseInt(x, 16));
  return [rgb[0], rgb[1], rgb[2], 0.65];
};

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

  React.useEffect(() => {
    const r = document.documentElement;
    const a = t.accent;
    r.style.setProperty("--accent", a);
    // derive soft + line from hex
    const rgb = a.replace("#", "").match(/.{2}/g).map(x => parseInt(x, 16));
    r.style.setProperty("--accent-soft", `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.12)`);
    r.style.setProperty("--accent-line", `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.35)`);
  }, [t.accent]);

  return (
    <>
      {t.dotGrid && (
        <DotGrid
          spacing={t.dotSpacing}
          baseRadius={0.85}
          hoverRadius={2.1}
          influence={150}
          baseColor={[135, 150, 145, 0.32]}
          hoverColor={hexToRgbArr(t.accent)}
        />
      )}
      <Nav />
      <Hero />
      <Highlights />
      <TaskShowcase />
      <Leaderboard />
      <About />
      <Sponsors />
      <Faq />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent">
          <TweakColor
            label="Accent"
            value={t.accent}
            options={ACCENT_OPTIONS}
            onChange={v => setTweak("accent", v)}
          />
        </TweakSection>
        <TweakSection title="Dot Grid">
          <TweakToggle
            label="Interactive dot grid"
            value={t.dotGrid}
            onChange={v => setTweak("dotGrid", v)}
          />
          <TweakSlider
            label="Spacing"
            value={t.dotSpacing}
            min={24}
            max={64}
            step={2}
            onChange={v => setTweak("dotSpacing", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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