/* Willow Creek website — app shell / router. */
const { useState: appUseState, useEffect: appUseEffect } = React;
const { Header: WHeader, Footer: WFooter, CrisisBar: WCrisisBar } = window.WC;

function App() {
  const [route, setRoute] = appUseState(() => {
    try { return localStorage.getItem("wc_route") || "home"; } catch (e) { return "home"; }
  });
  const go = (id) => {
    setRoute(id);
    try { localStorage.setItem("wc_route", id); } catch (e) {}
    window.scrollTo({ top: 0, behavior: "auto" });
  };
  appUseEffect(() => { window.scrollTo({ top: 0, behavior: "auto" }); }, [route]);

  const screens = {
    home: window.WC.HomeScreen,
    about: window.WC.AboutScreen,
    programs: window.WC.ProgramsScreen,
    "home-tour": window.WC.HomeTourScreen,
    faq: window.WC.FaqScreen,
    admissions: window.WC.AdmissionsScreen,
    contact: window.WC.ContactScreen,
  };
  const Screen = screens[route] || window.WC.HomeScreen;

  return (
    <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column", background: "var(--surface-page)" }}>
      <WCrisisBar />
      <WHeader route={route} go={go} />
      <main style={{ flex: 1 }}><Screen go={go} /></main>
      <WFooter go={go} />
    </div>
  );
}

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