/* eslint-disable */
/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio */
/* global Nav, Hero, Numbers, Timeline, NightmareXI, Kitabey, EXPM, Skills, Education, Footer */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "midnight"
}/*EDITMODE-END*/;

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

  useEffect(() => {
    // "midnight" is the :root default — no attribute needed; just set the alts
    if (t.palette === "midnight") {
      document.documentElement.removeAttribute("data-palette");
    } else {
      document.documentElement.setAttribute("data-palette", t.palette);
    }
  }, [t.palette]);

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Numbers />
        <Timeline />
        <NightmareXI />
        <Kitabey />
        <EXPM />
        <Skills />
        <Education />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Color palette">
          <TweakRadio
            value={t.palette}
            onChange={(v) => setTweak("palette", v)}
            options={[
              { value: "midnight", label: "Midnight" },
              { value: "terminal", label: "Terminal" },
              { value: "riso",     label: "Risograph" },
            ]}
          />
          <p style={{fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.08em", color: "var(--ink-3)", textTransform: "uppercase", marginTop: 12}}>
            Midnight is the house style. Terminal and Risograph are alternates.
          </p>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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