/* ============================================================
   app.jsx — root: state, routing, onboarding gate
   ============================================================ */
const { useState: useStateA, useEffect: useEffectA } = React;

function persistState(key, def) {
  const [v, setV] = useStateA(() => {
    try { const s = localStorage.getItem(key); return s !== null ? JSON.parse(s) : def; } catch { return def; }
  });
  useEffectA(() => { try { localStorage.setItem(key, JSON.stringify(v)); } catch {} }, [v]);
  return [v, setV];
}

function Splash({ onDone, lang }) {
  const [leaving, setLeaving] = useStateA(false);
  useEffectA(() => {
    const a = setTimeout(() => setLeaving(true), 2000);
    const b = setTimeout(onDone, 2520);
    return () => { clearTimeout(a); clearTimeout(b); };
  }, []);
  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 60, overflow: 'hidden',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      background: 'radial-gradient(130% 90% at 50% 12%, #2b3768, #0b1026 68%)',
      opacity: leaving ? 0 : 1, transform: leaving ? 'scale(1.05)' : 'none',
      transition: 'opacity .5s ease, transform .5s ease',
    }}>
      {/* ambient aura */}
      <span style={{ position: 'absolute', top: '-12%', left: '-18%', width: 260, height: 260, borderRadius: '50%', background: 'radial-gradient(circle, rgba(245,165,36,.20), transparent 68%)', filter: 'blur(8px)', animation: 'auraFloat 7s ease-in-out infinite' }} />
      <span style={{ position: 'absolute', bottom: '-14%', right: '-20%', width: 300, height: 300, borderRadius: '50%', background: 'radial-gradient(circle, rgba(97,115,173,.28), transparent 68%)', filter: 'blur(10px)', animation: 'auraFloat 9s ease-in-out infinite reverse' }} />

      {/* logo lockup */}
      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <div style={{ position: 'relative', width: 132, height: 132, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 26 }}>
          <span style={{ position: 'absolute', width: 132, height: 132, borderRadius: '50%', background: 'radial-gradient(circle, var(--amber-glow), transparent 62%)', animation: 'breathe 2.8s ease-in-out infinite' }} />
          <span style={{ position: 'absolute', width: 110, height: 110, borderRadius: '50%', border: '1.5px solid rgba(255,255,255,.10)' }} />
          <span style={{ position: 'absolute', width: 110, height: 110, borderRadius: '50%', border: '1.5px solid transparent', borderTopColor: 'var(--amber)', borderRightColor: 'rgba(245,165,36,.4)', animation: 'ringRotate 2.4s linear infinite' }} />
          <div style={{ animation: 'popIn .7s var(--spring) both' }}><BrandMark size={84} /></div>
        </div>
        <div style={{ fontSize: 29, fontWeight: 800, letterSpacing: '-.5px', color: '#fff', whiteSpace: 'nowrap', animation: 'fadeUp .6s .22s both' }}>{BRAND.name}</div>
        <div style={{ fontSize: 14, fontWeight: 500, color: 'rgba(255,255,255,.58)', marginTop: 7, whiteSpace: 'nowrap', animation: 'fadeUp .6s .36s both' }}>{tr(BRAND.tagline, lang || 'ru')}</div>
      </div>

      {/* load bar */}
      <div style={{ position: 'absolute', bottom: 62, width: 132, height: 3, borderRadius: 99, background: 'rgba(255,255,255,.14)', overflow: 'hidden' }}>
        <span style={{ display: 'block', height: '100%', borderRadius: 99, transformOrigin: 'left', background: 'linear-gradient(90deg, var(--amber-soft), var(--amber))', animation: 'barGrow 1.9s var(--ease-out) forwards' }} />
      </div>
    </div>
  );
}

function App() {
  const [lang, setLang] = persistState('hh_lang', 'ru');
  const [theme, setTheme] = persistState('hh_theme', 'light');
  const [onboarded, setOnboarded] = persistState('hh_onboarded', false);
  const [route, setRoute] = persistState('hh_route', 'stories');
  const [status, setStatus] = persistState('hh_status', 'open');
  const [advisorKey, setAdvisorKey] = useStateA(0);
  const [booting, setBooting] = useStateA(true);

  const t = UI[lang];

  const go = (r) => { if (r === 'advisor') setAdvisorKey(k => k + 1); setRoute(r); };
  const finishOnboarding = () => { setOnboarded(true); setRoute('stories'); };

  const shared = { lang, theme, setLang, setTheme, t };

  let screen = null;
  if (route === 'stories') screen = <StoriesScreen {...shared} go={go} status={status} />;
  else if (route === 'jobs') screen = <JobsScreen {...shared} />;
  else if (route === 'growth') screen = <GrowthScreen {...shared} go={go} />;
  else if (route === 'profile') screen = <ProfileScreen {...shared} status={status} setStatus={setStatus} go={go} />;
  else if (route === 'advisor') screen = <ChatScreen key={advisorKey} {...shared} onFinish={() => go('profile')} />;

  return (
    <Phone theme={theme} overlay={booting ? <Splash onDone={() => setBooting(false)} lang={lang} /> : null}>
      {!onboarded ? (
        <ChatScreen {...shared} onFinish={finishOnboarding} onSkip={finishOnboarding} />
      ) : (
        <>
          <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>
            {screen}
          </div>
          <BottomNav route={route} go={go} t={t} />
        </>
      )}
    </Phone>
  );
}

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