const WB_RT = window.WhitebirdDesignSystem_7d8137;

function SiteApp() {
  const { Spinner } = WB_RT;
  const [route, setRoute] = React.useState('home');
  const [email, setEmail] = React.useState('');
  const [booting, setBooting] = React.useState(true);

  React.useEffect(() => {
    const t = window.setTimeout(() => setBooting(false), 150);
    return () => window.clearTimeout(t);
  }, []);
  React.useEffect(() => { window.scrollTo(0, 0); }, [route]);

  // синяя шапка Telegram на главной, белая на остальных экранах
  React.useEffect(() => {
    document.body.setAttribute('data-tg-surface', route === 'home' ? 'blue' : 'light');
    if (window.wbTelegramPaint) window.wbTelegramPaint();
  }, [route]);

  if (booting) return null;

  if (route === 'signin') return <SigninPage onHome={() => setRoute('home')} onSubmit={(v) => { setEmail(v); setRoute('2fa'); }} />;
  if (route === '2fa') return <TwoFactorPage onHome={() => setRoute('signin')} onDone={() => setRoute('account')} />;
  if (route === 'account') return <AccountPage email={email} onExit={() => setRoute('home')} />;
  return <HomePage onSignin={() => setRoute('signin')} />;
}

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