const DS = window.InstituteCanTBeCountedDesignSystem_69f83b;
const { SiteHeader, SiteFooter, Button } = DS;

const NAV = [
  { id: "home", label: "Home" },
  { id: "about", label: "About" },
  { id: "research", label: "Research" },
  { id: "reports", label: "Reports" },
  { id: "contact", label: "Contact" }
];

const PAGES = { home: window.Home, about: window.About, research: window.Research, reports: window.Reports, contact: window.Contact };

function App() {
  const [page, setPage] = React.useState("home");
  const Page = PAGES[page];
  React.useEffect(() => { window.scrollTo(0, 0); }, [page]);
  return (
    <div>
      <SiteHeader items={NAV} active={page} onNavigate={setPage}
        action={<Button size="sm" variant="secondary" onClick={() => setPage("contact")}>Get in touch</Button>} />
      <main><Page go={setPage} /></main>
      <SiteFooter columns={[
        { title: "The Institute", links: NAV.slice(1).map(n => ({ label: n.label, href: "#" + n.id })) },
        { title: "Partners", links: [
          { label: "Arts Council England", href: "https://www.artscouncil.org.uk/" },
          { label: "TJ Culture", href: "https://tjculture.co.uk/" },
          { label: "Bureau of Silly Ideas", href: "https://bureauofsillyideas.com/" }
        ] }
      ]} />
    </div>
  );
}

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