// app.jsx — root wiring, theme, active section, tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "name": "Yash",
  "lastInitial": "S",
  "tagline": "Clean. Fast. Purposeful.",
  "accent": "#CC785C",
  "horizontalAbout": true,
  "horizontalProjects": true,
  "showFloat": true
}/*EDITMODE-END*/;

function useActiveSection() {
  const [active, setActive] = useState("top");
  useEffect(() => {
    const ids = ["top", "about", "skills", "work", "contact"];
    const update = () => {
      const y = window.scrollY + window.innerHeight * 0.4;
      let cur = "top";
      for (const id of ids) {
        const el = document.getElementById(id);
        if (!el) continue;
        const top = el.getBoundingClientRect().top + window.scrollY;
        if (top <= y) cur = id;
      }
      setActive(cur);
    };
    update();
    window.addEventListener("scroll", update, { passive: true });
    window.addEventListener("resize", update);
    return () => {
      window.removeEventListener("scroll", update);
      window.removeEventListener("resize", update);
    };
  }, []);
  return active;
}

function useTheme() {
  const [theme, setTheme] = useState(() => {
    try {
      const saved = localStorage.getItem("portfolio-theme");
      if (saved === "dark" || saved === "light") return saved;
    } catch (e) {}
    if (typeof window !== "undefined" && window.matchMedia
        && window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
    return "light";
  });
  useEffect(() => {
    document.documentElement.classList.toggle("theme-dark", theme === "dark");
    document.documentElement.classList.toggle("theme-light", theme === "light");
    document.body.classList.toggle("theme-dark", theme === "dark");
    document.body.classList.toggle("theme-light", theme === "light");
    try { localStorage.setItem("portfolio-theme", theme); } catch (e) {}
  }, [theme]);
  return [theme, () => setTheme((t) => t === "dark" ? "light" : "dark")];
}

function App() {
  const [theme, toggleTheme] = useTheme();
  const active = useActiveSection();
  const tweaks = useTweaks ? useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];
  const [t, setT] = tweaks;

  // Apply accent color override
  useEffect(() => {
    if (t.accent) document.documentElement.style.setProperty("--accent", t.accent);
  }, [t.accent]);

  return (
    <>
      <Nav theme={theme} onToggleTheme={toggleTheme} active={active}/>
      <main>
        <Hero/>
        <About/>
        <Skills/>
        <Projects/>
        <Contact/>
      </main>
      <Footer/>

      {typeof TweaksPanel !== "undefined" && (
        <TweaksPanel title="Tweaks">
          <TweakSection title="Identity">
            <TweakText label="First name" value={t.name} onChange={(v) => setT({ name: v })}/>
            <TweakText label="Last initial" value={t.lastInitial} onChange={(v) => setT({ lastInitial: v })}/>
            <TweakText label="Tagline" value={t.tagline} onChange={(v) => setT({ tagline: v })}/>
          </TweakSection>
          <TweakSection title="Look">
            <TweakColor label="Accent" value={t.accent} onChange={(v) => setT({ accent: v })}/>
          </TweakSection>
          <TweakSection title="Motion">
            <TweakToggle label="Horizontal about" value={t.horizontalAbout} onChange={(v) => setT({ horizontalAbout: v })}/>
            <TweakToggle label="Horizontal projects" value={t.horizontalProjects} onChange={(v) => setT({ horizontalProjects: v })}/>
            <TweakToggle label="Float stat cards" value={t.showFloat} onChange={(v) => setT({ showFloat: v })}/>
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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