const HASH_PAGES = ['home','product','changing','faq','team','newsletters'];
function initialPage() {
  const h = (location.hash || '').replace('#','');
  return HASH_PAGES.indexOf(h) > -1 ? h : 'home';
}
function Site() {
  const [page, setPage] = React.useState(initialPage);
  const [shown, setShown] = React.useState(initialPage);
  const [op, setOp] = React.useState(1);
  const [seedEmail, setSeedEmail] = React.useState('');
  const go = (p, email) => {
    if (typeof email === 'string') setSeedEmail(email);
    if (p === page) return;
    setPage(p);
    setOp(0);
    setTimeout(() => { setShown(p); window.scrollTo(0, 0); setOp(1); }, 240);
  };
  const dark = page === 'team' || page === 'product';
  const page5 = shown;
  return (
    <div style={{
      minHeight: '100vh',
      backgroundColor: dark ? 'var(--syn-navy)' : 'var(--syn-paper)',
      transition: 'background-color 520ms cubic-bezier(0.2,0.7,0.2,1)',
    }}>
      <Nav dark={dark} page={page} onNav={go} />
      <div style={{ opacity: op, transition: 'opacity 240ms cubic-bezier(0.2,0.7,0.2,1)' }}>
        {page5 === 'home' ? (
          <React.Fragment>
            <Hero onStart={email => go('onboarding', email)} />
            <SubscribeCTA onStart={email => go('onboarding', email)} />
          </React.Fragment>
        ) : page5 === 'product' ? (
          <ProductPage onNav={go} />
        ) : page5 === 'changing' ? (
          <ChangingPage onNav={go} />
        ) : page5 === 'faq' ? (
          <FAQPage onNav={go} />
        ) : page5 === 'onboarding' ? (
          <OnboardingPage seedEmail={seedEmail} onNav={go} />
        ) : page5 === 'newsletters' ? (
          <NewslettersPage onNav={go} />
        ) : (
          <TeamPage />
        )}
        {page5 === 'onboarding' ? null : <SiteFooter onNav={go} page={page5} />}
      </div>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<Site />);