/* MIRAI landing — app shell */

function HomePage() {
  return (
    <>
      <Hero />
      <SectionProblema />
      <SectionCambio />
      <Values />
      <Flow />
      <SectionAgenteCampana />
      <Case />
    </>);

}

function ProyectosPage() {
  return (
    <div className="subpage">
      <Proyectos />
    </div>);

}

function SobreNosotrosPage() {
  return (
    <div className="subpage">
      <About />
    </div>);

}

function ContactoPage() {
  return <DashboardPreview />;
}


function OnboardingRoutePage() {
  return <OnboardingPage />;
}

function DashboardPage() {
  const { session, login, logout } = useAuth();
  return session ?
    <DashboardApp user={session.user} onLogout={logout} /> :
    <DashboardLogin onLogin={login} />;
}

function App() {
  const route = useRoute();
  if (route === "/dashboard" || route.indexOf("/dashboard/") === 0) {
    return <DashboardPage />;
  }
  let page;
  let label;
  if (route === "/sobre-nosotros") {
    page = <SobreNosotrosPage />;
    label = "Sobre Nosotros";
  } else if (route === "/contacto") {
    page = <ContactoPage />;
    label = "Dashboard Preview";
  } else if (route === "/onboarding") {
    page = <OnboardingRoutePage />;
    label = "Onboarding";
  } else {
    page = <HomePage />;
    label = "Landing";
  }
  return (
    <>
      <Nav />
      <main data-screen-label={label}>
        {page}
        <Footer />
      </main>
    </>);

}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);