/* App shell — simple state router for the ArchDaily Business kit. */

function App() {
  const [route, setRoute] = React.useState("home");
  const [caseId, setCaseId] = React.useState(null);
  const [solutionTopic, setSolutionTopic] = React.useState(null);

  const nav = (r) => { setRoute(r); window.scrollTo({ top: 0 }); requestAnimationFrame(refreshIcons); };
  const open = (id) => { setCaseId(id); setRoute("case"); window.scrollTo({ top: 0 }); requestAnimationFrame(refreshIcons); };
  const openSolution = (topic) => { setSolutionTopic(topic); setRoute("solutionDetail"); window.scrollTo({ top: 0 }); requestAnimationFrame(refreshIcons); };

  function refreshIcons() { if (window.lucide) window.lucide.createIcons(); }
  React.useEffect(() => {
    refreshIcons();
    const t = setTimeout(refreshIcons, 120);
    return () => clearTimeout(t);
  });

  let view;
  if (route === "work") view = <Work onOpen={open} />;
  else if (route === "case") view = <CaseStudy id={caseId} onNav={nav} onOpen={open} />;
  else if (route === "why") view = <WhyPage onNav={nav} />;
  else if (route === "audience") view = <AudiencePage onNav={nav} />;
  else if (route === "standard") view = <StandardSolutionsPage onNav={nav} onOpen={openSolution} />;
  else if (route === "solutionDetail") view = <SolutionDetailPage topic={solutionTopic} onNav={nav} />;
  else if (route === "custom") view = <CustomSolutionsPage onNav={nav} onOpen={open} />;
  else if (route === "awards") view = <AwardsPage onNav={nav} onOpen={open} />;
  else if (route === "live") view = <LivePage onNav={nav} onOpen={openSolution} />;
  else if (route === "mediakit") view = <MediaKitPage onNav={nav} />;
  else if (route === "about") view = <About onNav={nav} />;
  else if (route === "contact") view = <Contact />;
  else view = <Home onNav={nav} onOpen={open} />;

  return (
    <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
      <Header route={route === "case" ? "work" : route} onNav={nav} />
      <main style={{ flex: 1 }}>{view}</main>
      <Footer onNav={nav} />
    </div>
  );
}

/* Non-stateful twin of App, used by the static-site generator: route/caseId/
   solutionTopic come in as props instead of state, so one render == one page. */
function StaticApp({ route = "home", caseId = null, solutionTopic = null }) {
  const noop = () => {};
  let view;
  if (route === "work") view = <Work onOpen={noop} />;
  else if (route === "case") view = <CaseStudy id={caseId} onNav={noop} onOpen={noop} />;
  else if (route === "why") view = <WhyPage onNav={noop} />;
  else if (route === "audience") view = <AudiencePage onNav={noop} />;
  else if (route === "standard") view = <StandardSolutionsPage onNav={noop} onOpen={noop} />;
  else if (route === "solutionDetail") view = <SolutionDetailPage topic={solutionTopic} onNav={noop} />;
  else if (route === "custom") view = <CustomSolutionsPage onNav={noop} onOpen={noop} />;
  else if (route === "awards") view = <AwardsPage onNav={noop} onOpen={noop} />;
  else if (route === "live") view = <LivePage onNav={noop} onOpen={noop} />;
  else if (route === "mediakit") view = <MediaKitPage onNav={noop} />;
  else if (route === "about") view = <About onNav={noop} />;
  else if (route === "contact") view = <Contact />;
  else view = <Home onNav={noop} onOpen={noop} />;

  return (
    <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
      <Header route={route === "case" ? "work" : route} onNav={noop} />
      <main style={{ flex: 1 }}>{view}</main>
      <Footer onNav={noop} />
    </div>
  );
}
Object.assign(window, { StaticApp });

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