/* CUPA Inspira — router, navegación, sesión y modales */ const { useState, useEffect, useRef } = React; const GOAL = 250; /* ---------- hooks de persistencia ---------- */ function useLocal(key, init) { const [val, setVal] = useState(() => { try { const s = localStorage.getItem(key); return s ? JSON.parse(s) : init; } catch (e) { return init; } }); useEffect(() => { localStorage.setItem(key, JSON.stringify(val)); }, [key, val]); return [val, setVal]; } /* ====================================================== */ /* NAV */ /* ====================================================== */ function Nav({ route, go, user, onRegister, onLogout }) { const [scrolled, setScrolled] = useState(false); const [openCom, setOpenCom] = useState(false); const [narrow, setNarrow] = useState(false); const [openMenu, setOpenMenu] = useState(false); const comRef = useRef(null); const onHome = route === "#/" || route === "" || route === "#"; useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener("scroll", onScroll); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { const onResize = () => setNarrow(window.innerWidth < 1060); onResize(); window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, []); useEffect(() => { setOpenMenu(false); }, [route]); useEffect(() => { const close = (e) => { if (comRef.current && !comRef.current.contains(e.target)) setOpenCom(false); }; document.addEventListener("click", close); return () => document.removeEventListener("click", close); }, []); // sobre el hero (home, sin scroll, menú cerrado) el nav es claro const overHero = onHome && !scrolled && !openMenu; const fg = overHero ? "#fbf3dc" : C.brown; const isActive = (h) => route.startsWith(h); const navItem = (label, href, opts = {}) => { const active = isActive(href); return ( ); }; return (
{!narrow && ( )} {/* sesión + menú — pinned, fuera del scroll */}
{user ? (
{user.name[0]} {user.name.split(" ")[0]}
) : ( Registrarme )} {narrow && ( )}
{/* drawer móvil */} {narrow && openMenu && (
Comunidad
{[["Ecología", "#/comunidad/ecologia"], ["Emprendimiento", "#/comunidad/emprendimiento"], ["Comercio", "#/comunidad/comercio"]].map(([t, h]) => ( ))}
{[["Proyectos", "#/proyectos"], ["Iniciativas", "#/iniciativas"], ["Gaceta", "#/gaceta"]].map(([t, h]) => ( ))}
Votación PRÓXIMAMENTE
Fotos · Instagram
)}
); } /* ====================================================== */ /* FOOTER */ /* ====================================================== */ function Footer({ go }) { return ( ); } /* ====================================================== */ /* MODALES */ /* ====================================================== */ function Overlay({ children, onClose }) { return (
e.stopPropagation()} style={{ background: C.cream, borderRadius: 22, width: "100%", maxWidth: 460, padding: "34px 34px 30px", boxShadow: "0 40px 90px -30px rgba(0,0,0,.6)", border: "1px solid var(--line)", margin: "auto" }}> {children}
); } function Field({ label, value, onChange, placeholder, type = "text" }) { const [focus, setFocus] = useState(false); return ( ); } function SelectField({ label, value, onChange, options, placeholder }) { return ( ); } /* registro vecinal — pide teléfono si requirePhone */ function RegisterModal({ open, onClose, onDone, requirePhone, intro }) { const [name, setName] = useState(""); const [building, setBuilding] = useState(""); const [apt, setApt] = useState(""); const [phone, setPhone] = useState(""); useEffect(() => { if (open) { setName(""); setBuilding(""); setApt(""); setPhone(""); } }, [open]); if (!open) return null; const valid = name.trim() && building && apt.trim() && (!requirePhone || phone.trim().length >= 8); const submit = (e) => { e.preventDefault(); if (!valid) return; onDone({ name, building, apt, phone: phone || undefined }); }; return (

Confírmanos que eres del CUPA

{intro || "Con tu nombre, edificio y departamento validamos que vives en el conjunto. Si los datos no corresponden a un vecino, el acceso se retira."}

{requirePhone && (

Lo pedimos solo para coordinar la participación por WhatsApp. No se publica.

)}
{requirePhone ? "Registrarme y participar" : "Entrar"}
); } /* pedir teléfono a quien ya está registrado pero quiere participar */ function PhoneModal({ open, onClose, onDone, actionLabel }) { const [phone, setPhone] = useState(""); useEffect(() => { if (open) setPhone(""); }, [open]); if (!open) return null; const valid = phone.trim().length >= 8; const submit = (e) => { e.preventDefault(); if (!valid) return; onDone(phone); }; return (

Un paso más para participar

Para {actionLabel || "participar activamente"} necesitamos un teléfono de contacto. Lo usamos solo para coordinar por WhatsApp.

Confirmar
); } function MessageModal({ data, onClose }) { if (!data) return null; return (

{data.title}

{data.body}

Listo
); } /* ====================================================== */ /* APP */ /* ====================================================== */ function App() { const [route, setRoute] = useState(window.location.hash || "#/"); const [user, setUser] = useLocal("cupa_user", null); const [signCount, setSignCount] = useLocal("cupa_signs", 184); const [projVotes, setProjVotes] = useLocal("cupa_projvotes", {}); const [initVotes, setInitVotes] = useLocal("cupa_initvotes", {}); const [comments, setComments] = useLocal("cupa_comments", {}); // modales const [reg, setReg] = useState(null); // { requirePhone, intro } const [phoneAsk, setPhoneAsk] = useState(null); // { actionLabel } const [msg, setMsg] = useState(null); const pending = useRef(null); useEffect(() => { const onHash = () => { setRoute(window.location.hash || "#/"); window.scrollTo(0, 0); }; window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); const go = (h) => { if (window.location.hash === h) { window.scrollTo({ top: 0, behavior: "smooth" }); } else { window.location.hash = h; } }; // registro simple (solo acceso a páginas) const openRegister = (opts = {}) => setReg({ requirePhone: false, ...opts }); // garantiza sesión válida; luego corre fn const ensureAccess = (fn) => { if (user) { fn && fn(); } else { pending.current = fn; setReg({ requirePhone: false, intro: "Regístrate para ver esta sección. Solo confirmamos que vives en el CUPA." }); } }; // garantiza sesión + teléfono (participación activa); luego corre fn const ensureParticipation = (actionLabel, fn) => { if (user && user.phone) { fn && fn(); return; } pending.current = fn; if (!user) setReg({ requirePhone: true, intro: `Para ${actionLabel} confirma que eres del CUPA y déjanos un teléfono de contacto.` }); else setPhoneAsk({ actionLabel }); }; const finishReg = (data) => { setUser(data); setReg(null); const fn = pending.current; pending.current = null; setTimeout(() => fn && fn(), 50); }; const finishPhone = (phone) => { setUser((u) => ({ ...u, phone })); setPhoneAsk(null); const fn = pending.current; pending.current = null; setTimeout(() => fn && fn(), 50); }; const logout = () => { setUser(null); }; // acciones const sign = () => ensureParticipation("firmar por la composta", () => { setSignCount((c) => c + 1); setMsg({ title: "¡Gracias por firmar!", body: "Tu firma ya cuenta para instalar la composta vecinal. Nos vemos en la próxima jornada." }); }); const joinOrg = (orgName) => ensureParticipation("unirte a esta organización", () => setMsg({ title: "¡Bienvenida al equipo!", body: `Te sumaste a "${orgName}". Te escribiremos por WhatsApp para los próximos pasos.` })); const contact = (vecino) => ensureParticipation("contactar a este vecino", () => setMsg({ title: "Contacto enviado", body: `Le avisamos a ${vecino} que quieres contactarle. Te conectará por WhatsApp.` })); const subscribe = () => ensureParticipation("suscribirte a La Gaceta", () => setMsg({ title: "¡Suscripción lista!", body: "Recibirás La Gaceta cada quincena. Gracias por apoyar la cuota de recuperación." })); const projVote = (id, v) => ensureParticipation("votar este proyecto", () => setProjVotes((s) => ({ ...s, [id]: s[id] === v ? undefined : v }))); const initVote = (id, v) => ensureParticipation("votar esta iniciativa", () => setInitVotes((s) => ({ ...s, [id]: s[id] === v ? undefined : v }))); const addComment = (id, c) => ensureParticipation("comentar", () => setComments((s) => ({ ...s, [id]: [...(s[id] || []), c] }))); /* ---- render de página por ruta ---- */ let page; if (route.startsWith("#/comunidad/emprendimiento")) page = ; else if (route.startsWith("#/comunidad/comercio")) page = ; else if (route.startsWith("#/comunidad")) page = ; else if (route.startsWith("#/proyectos")) page = user ? : ensureAccess(() => go("#/proyectos"))} />; else if (route.startsWith("#/iniciativas")) page = user ? : ensureAccess(() => go("#/iniciativas"))} />; else if (route.startsWith("#/gaceta")) page = ; else page = ; const isHome = route === "#/" || route === "" || route === "#"; return (