// app.jsx — new narrative order
const { useState: useStA, useEffect: useEffA } = React;

// ---- Deploy marker (auto-injected by claude-ops) ----
// Verify a fresh deploy by opening DevTools or: curl -s https://useworkroom.com | grep build
window.__WORKROOM_BUILD__ = {
  id: "claude-20260421T213951Z",
  time: "2026-04-21T21:39:51Z",
  deployer: "claude-ops@apo-workroom",
};
console.log(
  "%cWorkroom %cbuild " + window.__WORKROOM_BUILD__.id + " · " + window.__WORKROOM_BUILD__.time,
  "color:#E8623D;font-weight:600",
  "color:inherit;font-family:monospace"
);

function parseJoinHash() {
  const m = (typeof window !== "undefined" ? window.location.hash : "").match(/^#join\/(.+)$/);
  return m ? m[1] : null;
}

function Root() {
  const [joinId, setJoinId] = useStA(() => parseJoinHash());
  useEffA(() => {
    const onHash = () => setJoinId(parseJoinHash());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  useEffA(() => {
    if (joinId) {
      document.body.setAttribute("data-theme", "light");
    }
  }, [joinId]);
  return joinId ? <JoinPage workspaceId={joinId}/> : <App/>;
}

function App() {
  const [config, setConfig] = useStA(() => ({
    heroTagline: window.WORKROOM_CONFIG?.heroTagline || "headline_primary",
    heroVisuals: window.WORKROOM_CONFIG?.heroVisuals || ["noise", "beforeafter", "map"],
    accent: window.WORKROOM_CONFIG?.accent || "#E8623D",
    theme: window.WORKROOM_CONFIG?.theme || "dark",
  }));

  useEffA(() => {
    document.body.setAttribute("data-theme", config.theme);
    document.documentElement.style.setProperty("--accent", config.accent);
    document.documentElement.style.setProperty("--accent-glow", config.accent + "2e");
  }, [config.theme, config.accent]);

  return (
    <>
      <Nav/>
      <Hero config={config}/>
      <Now/>
      <Shift/>
      <How/>
      <Start/>
      <FAQ/>
      <CTA/>
      <Footer/>
      <Tweaks config={config} setConfig={setConfig}/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<Root/>);