// App router + Tweaks.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#EC0C1C",
  "scheme": "light"
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  root.style.setProperty("--red", t.accent);

  const schemes = {
    light:  { black: "#ffffff", ink: "#f4f3f1", ink2: "#f7f6f4", white: "#16161a" },
    carbon: { black: "#0a0a0b", ink: "#141417", ink2: "#0d0d0f", white: "#fafafa" },
    navy:   { black: "#070b1a", ink: "#0c1426", ink2: "#091022", white: "#fafafa" },
  };
  const s = schemes[t.scheme] || schemes.light;
  root.style.setProperty("--black", s.black);
  root.style.setProperty("--ink", s.ink);
  root.style.setProperty("--ink-2", s.ink2);
  root.style.setProperty("--white", s.white);
  if (t.scheme === "light") {
    document.body.style.background = s.black;
    document.body.style.color = s.white;
    root.style.setProperty("--gray", "#8a8a90");
    root.style.setProperty("--gray-2", "#57575d");
    root.style.setProperty("--gray-3", "#3a3a40");
    root.style.setProperty("--line", "rgba(20,20,26,.10)");
    root.style.setProperty("--line-strong", "rgba(20,20,26,.17)");
  } else {
    document.body.style.background = s.black;
    document.body.style.color = "#fafafa";
    root.style.setProperty("--gray", "#8c8a82");
    root.style.setProperty("--gray-2", "#a8a7a1");
    root.style.setProperty("--gray-3", "#cfcfcf");
    root.style.setProperty("--line", "rgba(255,255,255,.10)");
    root.style.setProperty("--line-strong", "rgba(255,255,255,.20)");
  }
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState("home");
  const [openId, setOpenId] = useState(null);
  const [pendingFilter, setPendingFilter] = useState(null);

  useEffect(() => { applyTweaks(t); }, [t]);

  const navigate = (key, filter) => {
    setRoute(key);
    setOpenId(null);
    setPendingFilter(filter || null);
    window.scrollTo({ top: 0, behavior: "instant" });
  };
  const openProject = (id) => setOpenId(id);
  const closeProject = () => setOpenId(null);

  let page;
  switch (route) {
    case "portfolio": page = <PortfolioPage openProject={openProject} initialFilter={pendingFilter} />; break;
    case "about":     page = <AboutPage navigate={navigate} />; break;
    case "services":  page = <ServicesPage navigate={navigate} />; break;
    case "contact":   page = <ContactPage navigate={navigate} />; break;
    case "brief":     page = <BriefPage navigate={navigate} />; break;
    case "strategy":  page = <StrategyPage navigate={navigate} />; break;
    case "home":
    default:          page = <HomePage navigate={navigate} openProject={openProject} />; break;
  }

  const activeProject = openId ? PROJECTS.find(p => p.id === openId) : null;

  return (
    <>
      <NavBar route={route} navigate={navigate} />
      <div key={route}>{page}</div>
      <Footer navigate={navigate} />

      {activeProject && (
        <ProjectDetail project={activeProject} onClose={closeProject} openProject={openProject} />
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakColor
          label="Accent color"
          value={t.accent}
          options={["#EC0C1C", "#FF5722", "#FFB000", "#3A5D8B", "#5A6B4F"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakRadio
          label="Scheme"
          value={t.scheme}
          options={["light", "carbon", "navy"]}
          onChange={(v) => setTweak("scheme", v)}
        />
      </TweaksPanel>
    </>
  );
}

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