/* App - assembles the portfolio, tracks active section, wires Tweaks */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "grain": true,
  "accent": "mono"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = React.useState("top");
  const [open, setOpen] = React.useState(null);

  const onNav = (id) => {
    if (id === "top") {
      window.scrollTo({ top: 0, behavior: "smooth" });
      return;
    }

    const el = document.getElementById(id);
    if (el) {
      window.scrollTo({
        top: el.getBoundingClientRect().top + window.scrollY - 68,
        behavior: "smooth",
      });
    }
  };

  React.useEffect(() => {
    document.body.classList.toggle("no-grain", !t.grain);
  }, [t.grain]);

  React.useEffect(() => {
    const map = {
      mono: { white: "#fafafa", paper: "#fafafa" },
      warm: { white: "#f7f2ea", paper: "#f7f2ea" },
      cool: { white: "#eef2f7", paper: "#eef2f7" },
    };
    const c = map[t.accent] || map.mono;
    document.documentElement.style.setProperty("--white", c.white);
    document.documentElement.style.setProperty("--paper", c.paper);
  }, [t.accent]);

  React.useEffect(() => {
    const ids = ["gpt", "work", "resume"];
    const onScroll = () => {
      if (window.scrollY < 200) {
        setActive("top");
        return;
      }

      const mid = window.scrollY + window.innerHeight * 0.4;
      let cur = "top";
      ids.forEach((id) => {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= mid) cur = id;
      });
      setActive(cur);
    };

    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <React.Fragment>
      <Nav active={active} onNav={onNav} />
      <main>
        <Hero onNav={onNav} />
        <ChatGPTSection />
        <Work onOpen={setOpen} />
        <Footer />
      </main>
      <CaseStudy p={open} onClose={() => setOpen(null)} />

      <TweaksPanel>
        <TweakSection label="Surface" />
        <TweakRadio label="Ink tint" value={t.accent}
          options={["mono", "warm", "cool"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakToggle label="Film grain" value={t.grain}
          onChange={(v) => setTweak("grain", v)} />
      </TweaksPanel>

      <style>{`body.no-grain::after{display:none}`}</style>
    </React.Fragment>
  );
}

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