/* eslint-disable react/prop-types */ /** * App · Ficha individual de distrito. * Carga el catálogo en window.DISTRITOS_DATA y busca por ?slug=... * * Si el slug no existe (o no se pasó), muestra una página 404 amigable * con link de regreso al listado. */ const { useState: uS_App, useEffect: uE_App } = React; function FichaApp() { const [d, setD] = uS_App(null); const [notFound, setNotFound] = uS_App(false); uE_App(() => { const params = new URLSearchParams(window.location.search); const slug = params.get('slug') || window.location.hash.replace('#', ''); const all = window.DISTRITOS_DATA || []; const match = all.find(x => x.slug === slug); if (match) { setD(match); document.title = `${match.name} · Distritos · Prosperia`; } else { setNotFound(true); document.title = 'Distrito no encontrado · Prosperia'; } }, []); if (notFound) { return (
DISTRITO NO ENCONTRADO

404 ·
Ese distrito no está en el catálogo.

Es posible que el link esté roto o que el distrito todavía no esté publicado. Te llevamos de vuelta al listado completo.

); } if (!d) { return (
); } return (
); } const notFoundStyles = { section: { background: 'var(--color-cream)', minHeight: '85vh', paddingTop: 200, paddingBottom: 120, display: 'flex', alignItems: 'center', }, inner: { maxWidth: 720 }, title: { margin: '20px 0 0', fontWeight: 800, fontSize: 'clamp(28px, 6vw, 80px)', lineHeight: 1.05, color: 'var(--color-navy-deep)', letterSpacing: '-0.01em', }, titleSoft: { color: 'var(--color-navy-medium)', fontWeight: 500 }, lead: { margin: '24px 0 0', fontSize: 17, lineHeight: 1.7, color: 'var(--color-navy-medium)', maxWidth: 560, }, cta: { marginTop: 40, display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap', }, back: { fontSize: 13, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--color-navy-medium)', borderBottom: '1px solid rgba(33,52,64,0.3)', paddingBottom: 3, }, }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render();