/* global React, ReactDOM, HW */
const { useEffect } = React;
const {
  useHashRoute, Header, Footer,
  PageHome, PageAbout, PageSolutions,
  PageCareers, PageJob, PageContact,
  PagePortal, PagePrivacy, PageTerms, PageNotFound,
} = window.HW;

function App() {
  const route = useHashRoute();

  // Scroll to anchor if hash route includes one — must run before any conditional return
  useEffect(() => {
    const hashIdx = route.indexOf('#');
    if (hashIdx >= 0) {
      const id = route.slice(hashIdx + 1);
      const el = document.getElementById(id);
      if (el) setTimeout(() => el.scrollIntoView({ behavior: 'auto', block: 'start' }), 50);
    }
  }, [route]);

  // Portal is its own full-bleed view (no nav/footer)
  if (route === '/portal' || route === '/employee-portal' || route === '/cadence') {
    return <PagePortal />;
  }

  let page;
  if (route === '/' || route === '') page = <PageHome />;
  else if (route === '/about' || route.startsWith('/about#')) page = <PageAbout />;
  else if (route === '/solutions' || route.startsWith('/solutions#')) page = <PageSolutions />;
  else if (route === '/careers') page = <PageCareers />;
  else if (route.startsWith('/careers/')) {
    const id = route.replace('/careers/', '');
    page = <PageJob id={id} />;
  }
  else if (route === '/contact') page = <PageContact />;
  else if (route === '/privacy') page = <PagePrivacy />;
  else if (route === '/terms') page = <PageTerms />;
  else page = <PageNotFound />;

  return (
    <div>
      <Header route={route} />
      {page}
      <Footer />
    </div>
  );
}

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