// ============================================================================
// app.jsx — root component
//
// Home route renders a fixed full-bleed cover image and hides the footer.
// All other routes use the normal padded layout.
// ============================================================================

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

function App() {
  const route = useRoute();
  const [lang, setLang] = useStateA(() => {
    try { return localStorage.getItem('cl_lang') || 'pt'; }
    catch (e) { return 'pt'; }
  });
  const [menuOpen, setMenuOpen] = useStateA(false);

  useEffectA(() => {
    document.documentElement.lang = lang;
    try { localStorage.setItem('cl_lang', lang); } catch (e) {}
  }, [lang]);

  useEffectA(() => {
    setMenuOpen(false);
  }, [route.name, route.params.category, route.params.id]);

  const isHome = route.name === 'home';

  let body;
  switch (route.name) {
    case 'home':          body = <PageHome lang={lang} />; break;
    case 'sobre':         body = <PageSobre lang={lang} />; break;
    case 'trabalhos':     body = <PageTrabalhos lang={lang} category={null} />; break;
    case 'trabalhosCat':  body = <PageTrabalhos lang={lang} category={route.params.category} />; break;
    case 'obra':          body = <PageObra lang={lang} id={route.params.id} />; break;
    case 'sons':          body = <PageSons lang={lang} />; break;
    case 'som':           body = <PageSom lang={lang} id={route.params.id} />; break;
    case 'exposicoes':    body = <PageExposicoes lang={lang} />; break;
    case 'exposicao':     body = <PageExposicao lang={lang} id={route.params.id} />; break;
    case 'contacto':      body = <PageContacto lang={lang} />; break;
    case 'cv':            body = <PageCV lang={lang} />; break;
    default:              body = <PageHome lang={lang} />;
  }

  const key = route.name + ':' + (route.params.category || route.params.id || '');

  return (
    <div className={`shell ${isHome ? '' : 'with-padding'}`}>
      <CursorSystem />
      <TopNav route={route} lang={lang} setLang={setLang}
              onOpenMenu={() => setMenuOpen(o => !o)} menuOpen={menuOpen}
              transparent={isHome} />
      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)}
                  route={route} lang={lang} setLang={setLang} />
      <BackButton route={route} lang={lang} />
      {isHome ? (
        <div key={key} style={{ flex: 1 }}>{body}</div>
      ) : (
        <main className="content"><div key={key}>{body}</div></main>
      )}
      {!isHome && <Footer lang={lang} />}
    </div>
  );
}

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