function SiteApp() {
  const [page, setPage] = React.useState("home");
  const [lang, setLang] = React.useState("tr");
  const scrollRef = React.useRef(null);

  const onNav = (id) => {
    setPage(id);
    window.scrollTo(0, 0);
  };

  const Screen = { home: window.HomeScreen, solutions: window.SolutionsScreen, services: window.ServicesScreen, contact: window.ContactScreen, legal: window.LegalScreen }[page];

  return (
    <div style={{ background: "var(--surface-page)" }} lang={lang}>
      <window.SiteHeader page={page} onNav={onNav} lang={lang} setLang={setLang} />
      <main key={page + lang} style={{ animation: "fx-page .32s cubic-bezier(.16,1,.3,1) both" }}>
        <Screen lang={lang} onNav={onNav} />
      </main>
      <window.SiteFooter lang={lang} onNav={onNav} />
    </div>
  );
}

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