// Main App — wires up Tweaks, theme, sections, and easter eggs

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": "mint",
  "fontFamily": "Plus Jakarta Sans",
  "showGrid": true,
  "showBlobs": true
}/*EDITMODE-END*/;

const ACCENTS = {
  mint:   { name: "Mint (default)", c300: "#A0EEC0", c400: "#8AE9C1", c500: "#86CD82", c600: "#72A276" },
  teal:   { name: "Teal",           c300: "#9DECDC", c400: "#7BD6C4", c500: "#4FB3A3", c600: "#2E8478" },
  blue:   { name: "Sky",            c300: "#B4DCFE", c400: "#8EC5FB", c500: "#5BA5F0", c600: "#3B7AC4" },
  amber:  { name: "Amber",          c300: "#FBE2A1", c400: "#F5C97D", c500: "#E0A95B", c600: "#A87B3F" },
  rose:   { name: "Rose",           c300: "#F8CFD8", c400: "#F0A8B6", c500: "#D87D8E", c600: "#A95766" },
};

const FONTS = [
  "Plus Jakarta Sans",
  "DM Sans",
  "Outfit",
  "Manrope",
  "Quicksand",
];

const applyTweaks = (t) => {
  const root = document.documentElement;
  const a = ACCENTS[t.accentHue] || ACCENTS.mint;
  root.style.setProperty("--mint-300", a.c300);
  root.style.setProperty("--mint-400", a.c400);
  root.style.setProperty("--green-500", a.c500);
  root.style.setProperty("--green-600", a.c600);
  // derived
  const lightTint = a.c300 + "22";
  root.style.setProperty("--mint-100", lightTint);
  root.style.setProperty("--mint-200", a.c300 + "55");
  root.style.setProperty("--font-body", `"${t.fontFamily}", system-ui, sans-serif`);
  root.style.setProperty("--font-display", `"${t.fontFamily}", system-ui, sans-serif`);
  document.body.classList.toggle("no-grid", !t.showGrid);
  document.body.classList.toggle("no-blobs", !t.showBlobs);
};

const App = () => {
  const [theme, setThemeState] = React.useState(() => {
    return localStorage.getItem("devnoah-theme") || "light";
  });
  const setTheme = (t) => {
    setThemeState(t);
    localStorage.setItem("devnoah-theme", t);
  };
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
  }, [theme]);

  const [paletteOpen, setPaletteOpen] = React.useState(false);
  const [rave, setRave] = React.useState(false);
  const fireKonami = React.useCallback(() => setRave(true), []);
  useKonami(fireKonami);
  useSlashShortcut(paletteOpen, setPaletteOpen);

  // Tweaks
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(tweaks); }, [tweaks]);

  return (
    <>
      <Background />
      {rave && <KonamiRave onDone={() => setRave(false)} />}
      <CommandPalette
        open={paletteOpen}
        onClose={() => setPaletteOpen(false)}
        setTheme={setTheme}
        fireKonami={fireKonami}
      />
      <div className="site">
        <Nav theme={theme} setTheme={setTheme} openPalette={() => setPaletteOpen(true)} />
        <Hero />
        <About />
        <Experience />
        <Skills />
        <Contact />
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio
          label="Mode"
          value={theme}
          onChange={setTheme}
          options={["light", "dark"]}
        />
        <TweakSelect
          label="Accent"
          value={tweaks.accentHue}
          onChange={(v) => setTweak("accentHue", v)}
          options={Object.entries(ACCENTS).map(([k, v]) => ({ value: k, label: v.name }))}
        />

        <TweakSection label="Typography" />
        <TweakSelect
          label="Font"
          value={tweaks.fontFamily}
          onChange={(v) => setTweak("fontFamily", v)}
          options={FONTS}
        />

        <TweakSection label="Background" />
        <TweakToggle
          label="Drifting blobs"
          value={tweaks.showBlobs}
          onChange={(v) => setTweak("showBlobs", v)}
        />
        <TweakToggle
          label="Dotted grid"
          value={tweaks.showGrid}
          onChange={(v) => setTweak("showGrid", v)}
        />

        <TweakSection label="Secret" />
        <TweakButton label="Activate rave 🎉" onClick={fireKonami} />
      </TweaksPanel>
    </>
  );
};

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