/* App shell — Cruzeiro dos Campeões · Grupo Mirandas */

const { useState: useStateA, useEffect: useEffectA } = React;

function App(){
  const initial = (location.hash || '').replace('#', '') || 'placar';
  const [tab, setTab] = useStateA(['placar','regras','embarque'].includes(initial) ? initial : 'placar');

  useEffectA(() => {
    location.hash = tab;
    window.scrollTo({ top: 0, behavior: 'auto' });
  }, [tab]);

  useEffectA(() => {
    const onHash = () => {
      const h = (location.hash || '').replace('#', '');
      if (['placar','regras','embarque'].includes(h) && h !== tab) setTab(h);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, [tab]);

  return (
    <React.Fragment>
      <CDCComp.Mast tab={tab} setTab={setTab} />
      {tab === 'placar' && <Placar />}
      {tab === 'regras' && <Regras />}
      {tab === 'embarque' && <Embarque />}
      <CDCComp.Foot />
    </React.Fragment>
  );
}

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