/* global React, ReactDOM, Intro, Nav, Hero, ParaQuem, ComoAjuda, Produtos, Designacao, Produto, Precificacao, Cases, Filosofia, Sobre, FAQ, Atendimento, Conviver, Footer, ParallaxEngine, useRoute */
// Cada item do menu é uma TELA. Clicar troca a view (sem scrollar a página longa).
const VIEWS = {
  top:           ['Hero'],
  'para-quem':   ['ParaQuem', 'ComoAjuda'],
  produtos:      ['Produtos'],
  designacao:    ['Designacao'],
  produto:       ['Produto', 'Cases'],
  precificacao:  ['Precificacao', 'Filosofia'],
  sobre:         ['Sobre', 'FAQ'],
  contato:       ['Atendimento'],
  conviver:      ['Conviver'],
};

function App() {
  const route = useRoute();
  const REG = { Hero, ParaQuem, ComoAjuda, Produtos, Designacao, Produto, Precificacao, Filosofia, Cases, Sobre, FAQ, Atendimento, Conviver };
  const sections = VIEWS[route] || VIEWS.top;
  const isHome = route === 'top';

  return (
    <React.Fragment>
      <Intro />
      <ParallaxEngine />
      <Nav />
      {/* view container — fade between screens */}
      <main key={route} className="view-fade" style={{ minHeight: isHome ? undefined : '100vh', paddingTop: isHome ? undefined : 'clamp(96px, 11vh, 120px)' }}>
        {sections.map(name => {
          const Comp = REG[name];
          return Comp ? <Comp key={name} /> : null;
        })}
      </main>
      {!isHome && <Footer />}
      <style>{`
        .view-fade { animation: viewIn .42s cubic-bezier(.2,.7,.2,1); }
        @keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
        @media (prefers-reduced-motion: reduce) { .view-fade { animation: none; } }
      `}</style>
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);