/* App + hash router */

function parseHash() {
  const h = (window.location.hash || "").replace(/^#\/?/, "").trim();
  if (!h || h === "home" || h === "/") return { route: "home", param: null };
  if (h === "about") return { route: "about", param: null };
  if (h.startsWith("case/")) return { route: "case", param: h.slice(5) };
  // Anchor links (e.g. #work, #contact) — treat as home
  return { route: "home", param: null, anchor: h };
}

function App() {
  const [state, setState] = React.useState(parseHash());

  React.useEffect(() => {
    const onHash = () => setState(parseHash());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const navigate = (target) => {
    // target like "home", "about", "case/<id>"
    window.location.hash = "/" + target;
  };

  let page;
  if (state.route === "about") {
    page = <window.About navigate={navigate} />;
  } else if (state.route === "case") {
    // fall back to home if id doesn't exist
    const found = ["morpara", "stablex", "algora"].includes(state.param) || window.PROJECTS.find(p => p.id === state.param);
    page = found
      ? <window.CaseStudy projectId={state.param} navigate={navigate} />
      : <window.Home navigate={navigate} />;
  } else {
    page = <window.Home navigate={navigate} />;
  }

  return (
    <>
      <window.Navbar route={state.route} param={state.param} navigate={navigate} />
      <div key={state.route + (state.param || "")}>{page}</div>
      <window.Footer />
    </>
  );
}

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