/* 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)} />}

      {/* Bottom "more pages" tray for prototype navigation */}
      <PrototypeNav page={page} navigate={navigate} />
    </>
  );
}

function PrototypeNav({ page, navigate }) {
  const [open, setOpen] = React.useState(false);
  const pages = [
    ["home", "Home"],
    ["pacientes", "Pacientes"],
    ["medicos", "Médicos"],
    ["lealtad", "Programa Lealtad"],
    ["clinicas", "Clínicas"],
    ["empresas", "Empresas"],
    ["catalogo", "Catálogo"],
    ["detalle", "Detalle"],
    ["vacunacion", "Vacunación"],
    ["sucursales", "Sucursales"],
    ["resultados", "Resultados"],
    ["contacto", "Contacto"],
    ["mobile", "Mobile"],
  ];
  return (
    <div style={{
      position:"fixed", left:24, bottom:24, zIndex:35,
    }}>
      {open && (
        <div style={{
          background:"#fff",
          padding: 8,
          borderRadius: 14,
          boxShadow: "var(--shadow-lg)",
          border:"1px solid var(--ink-200)",
          marginBottom: 8,
          display:"flex", flexDirection:"column", gap: 2,
          maxHeight: 360, overflow:"auto",
          minWidth: 200,
        }}>
          <div style={{fontSize:10.5, fontWeight:700, color:"var(--ink-500)", letterSpacing:".1em", textTransform:"uppercase", padding:"8px 10px 4px"}}>Prototipo · Pages</div>
          {pages.map(([k, l]) => (
            <button key={k}
              onClick={() => { navigate(k); setOpen(false); }}
              style={{
                textAlign:"left",
                padding:"8px 10px",
                background: page === k ? "var(--ink-50)" : "transparent",
                border:"none",
                borderRadius:8,
                fontSize:13,
                fontWeight: page === k ? 600 : 500,
                color: page === k ? "var(--brand-primary)" : "var(--ink-700)",
                cursor:"pointer",
              }}>{l}</button>
          ))}
        </div>
      )}
      <button onClick={() => setOpen(!open)}
        style={{
          background: "var(--ink-900)",
          color:"#fff",
          padding:"10px 16px",
          borderRadius:999,
          border:"none",
          fontSize:13,
          fontWeight:600,
          display:"flex", alignItems:"center", gap:8,
          boxShadow:"var(--shadow-lg)",
          cursor:"pointer",
        }}>
        <span style={{width:8, height:8, borderRadius:999, background:"var(--brand-yellow)"}}></span>
        Prototipo
        <Icon name={open ? "close" : "arrowDown"} size={14} style={{transform: open ? "none" : "rotate(180deg)"}}/>
      </button>
    </div>
  );
}

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