// ── Top-level app ──

function App() {
  const [tab, setTab] = React.useState('hub');

  // Quiz takes over the full page — WeeklyQuizApp has its own TopBar and shell
  if (tab === 'quiz' && window.WeeklyQuizApp) {
    return React.createElement(window.WeeklyQuizApp);
  }

  return (
    <div className="wc-scope" style={{ height: '100vh', overflowY: 'auto' }}>
      <TopBar subtitle="Weekly Challenge"/>
      <div style={{ display: 'flex', gap: 8, padding: '12px 20px', borderBottom: '1px solid var(--adv-rule)' }}>
        {['hub','quiz','rewards'].map(t => (
          <button key={t} onClick={() => setTab(t)}
            style={{ padding: '8px 16px', borderRadius: 8, border: 'none', cursor: 'pointer', fontFamily: 'inherit', fontWeight: 700, fontSize: 13,
              background: tab === t ? 'var(--adv-ink)' : 'var(--adv-soft)',
              color: tab === t ? '#fff' : 'var(--adv-ink)' }}>
            {t.charAt(0).toUpperCase() + t.slice(1)}
          </button>
        ))}
      </div>
      {tab === 'hub'     && <HubV1 onPlay={() => setTab('quiz')}/>}
      {tab === 'quiz'    && <QuizLobby/>}
      {tab === 'rewards' && <RewardGallery/>}
    </div>
  );
}

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