/* App router */

function App() {
  const [page, setPage] = React.useState("home");
  const [studyId, setStudyId] = React.useState(null);
  const [leadOpen, setLeadOpen] = React.useState(false);

  const navigate = (p) => {
    setPage(p);
    if (p !== "detalle") setStudyId(null);
    window.scrollTo({ top: 0, behavior: "instant" });
  };
  const openStudy = (id) => {
    setStudyId(id);
    setPage("detalle");
    window.scrollTo({ top: 0, behavior: "instant" });
  };
  const onOpenLead = () => setLeadOpen(true);

  // Sync screen label on body for verifier/comment context
  React.useEffect(() => {
    document.body.setAttribute("data-current-page", page);
  }, [page]);

  return (
    <>
      <Header page={page} navigate={navigate} onOpenLead={onOpenLead} />
      {page === "home" && <HomeNavy navigate={navigate} />}
      {page === "pacientes" && <PacientesPage navigate={navigate} onOpenLead={onOpenLead} />}
      {page === "medicos" && <MedicosNavy navigate={navigate} />}
      {page === "lealtad" && <LealtadPage navigate={navigate} />}
      {page === "clinicas" && <ClinicasPage navigate={navigate} onOpenLead={onOpenLead} />}
      {page === "empresas" && <EmpresasPage navigate={navigate} onOpenLead={onOpenLead} />}
      {page === "catalogo" && <CatalogPage navigate={navigate} openStudy={openStudy} onOpenLead={onOpenLead} />}
      {page === "detalle" && <StudyDetailPage studyId={studyId} navigate={navigate} openStudy={openStudy} onOpenLead={onOpenLead} />}
      {page === "vacunacion" && <VacunacionPage navigate={navigate} onOpenLead={onOpenLead} />}
      {page === "sucursales" && <SucursalesPage navigate={navigate} onOpenLead={onOpenLead} />}
      {page === "resultados" && <ResultadosPage navigate={navigate} onOpenLead={onOpenLead} />}
      {page === "contacto" && <ContactoPage navigate={navigate} onOpenLead={onOpenLead} />}
      {page === "mobile" && <MobilePage navigate={navigate} onOpenLead={onOpenLead} />}

      <Footer navigate={navigate} />

      <button className="wa-fab" aria-label="WhatsApp" onClick={onOpenLead}>
        <Icon name="whatsapp" size={26} />
      </button>

      {leadOpen && <LeadModal onClose={() => setLeadOpen(false)} />}
    </>
  );
}


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