{/* Home */}

{/* Categories — desktop */}

{NAV_ITEMS.map(item => { const cat = CATEGORIAS[item.id]; const active = activeSection === item.id; return ( ); })}

{/* Hamburger — mobile only */} {/* Right: search + social + theme */}

{searchOpen ? ( setQuery(e.target.value)} onKeyDown={handleSearch} onBlur={() => { if (!query) setSearchOpen(false); }} placeholder="Buscar… (Enter)" style={{ background: 'var(--surface)', border: '1px solid var(--accent)', borderRadius: 6, padding: '5px 12px', color: 'var(--text)', fontSize: 12, outline: 'none', width: 180, fontFamily: 'DM Sans, sans-serif' }} /> ) : ( )}

𝕏

{/* Menú móvil desplegable */} {mobileOpen && (

{NAV_ITEMS.map(item => { const cat = CATEGORIAS[item.id]; const active = activeSection === item.id; return ( ); })}

)}

); } const navBtnBase = { border: 'none', background: 'transparent', cursor: 'pointer', fontSize: 12, fontFamily: 'Space Grotesk, sans-serif', padding: '0 10px', height: 48, transition: 'all 0.15s', letterSpacing: '0.02em', color: 'var(--text-2)', }; const iconBtn = { background: 'transparent', border: 'none', width: 34, height: 34, borderRadius: 7, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: 'var(--text-2)', transition: 'background 0.15s, color 0.15s', fontSize: 14, }; // ── FOOTER ───────────────────────────────────────────────────────── function Footer() { return ( ); } // ── TWEAKS PANEL ─────────────────────────────────────────────────── const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accentColor": "#2563eb", "fontSize": 16, "borderRadius": 12, "theme": "dark" }/*EDITMODE-END*/; function TweaksPanel({ visible, tweaks, setTweaks }) { if (!visible) return null; const update = (key, val) => { setTweaks(t => ({ ...t, [key]: val })); window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: val } }, '*'); }; return (

Tweaks

Color acento

{['#2563eb','#1d9bf0','#e8003d','#22c55e','#a855f7'].map(c => (

Fuente base: {tweaks.fontSize}px

update('fontSize', Number(e.target.value))} style={{ width: '100%' }} />

Esquinas: {tweaks.borderRadius}px

update('borderRadius', Number(e.target.value))} style={{ width: '100%' }} />

); } // ── APP ROOT ─────────────────────────────────────────────────────── function App() { const [theme, setTheme] = useState(() => localStorage.getItem('dn-theme') || 'dark'); const [view, setView] = useState('home'); const [activeSection, setActiveSection] = useState('home'); const [activeArticle, setActiveArticle] = useState(null); const [searchQuery, setSearchQuery] = useState(null); const [contactOpen, setContactOpen] = useState(false); const [tweaksVisible, setTweaksVisible] = useState(false); const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS); const [dataReady, setDataReady] = useState(false); // Apply tweaks to CSS vars useEffect(() => { document.documentElement.style.setProperty('--accent', tweaks.accentColor); document.documentElement.style.setProperty('--accent-border', tweaks.accentColor + '66'); document.documentElement.style.setProperty('--card-radius', tweaks.borderRadius + 'px'); document.documentElement.style.fontSize = tweaks.fontSize + 'px'; }, [tweaks]); // Apply theme useEffect(() => { document.documentElement.setAttribute('data-theme', theme); localStorage.setItem('dn-theme', theme); }, [theme]); // Escuchar cuando el backend termina de cargar useEffect(() => { const handler = () => setDataReady(true); window.addEventListener('backendDataReady', handler); return () => window.removeEventListener('backendDataReady', handler); }, []); // Helper: busca una noticia por id (tolera string vs number) const findArticle = (id) => NOTICIAS.find(n => String(n.id) === String(id)); // Deep-link: cuando los datos están listos, leer el hash de la URL useEffect(() => { if (!dataReady) return; const hash = window.location.hash.replace(/^#/, ''); if (hash.startsWith('noticia/')) { const id = hash.slice('noticia/'.length); const art = findArticle(id); if (art) { setActiveArticle(art); setView('article'); window.scrollTo(0, 0); } } }, [dataReady]); // Popstate: botón atrás/adelante del navegador useEffect(() => { const handlePop = () => { const hash = window.location.hash.replace(/^#/, ''); if (hash.startsWith('noticia/')) { const id = hash.slice('noticia/'.length); const art = findArticle(id); if (art) { setActiveArticle(art); setView('article'); window.scrollTo(0, 0); return; } } setActiveArticle(null); setView('home'); setActiveSection('home'); window.scrollTo(0, 0); }; window.addEventListener('popstate', handlePop); return () => window.removeEventListener('popstate', handlePop); }, []); // Contact event useEffect(() => { const handler = () => setContactOpen(true); window.addEventListener('openContact', handler); return () => window.removeEventListener('openContact', handler); }, []); // Tweaks protocol useEffect(() => { const handler = (e) => { if (e.data?.type === '__activate_edit_mode') setTweaksVisible(true); if (e.data?.type === '__deactivate_edit_mode') setTweaksVisible(false); }; window.addEventListener('message', handler); window.parent.postMessage({ type: '__edit_mode_available' }, '*'); return () => window.removeEventListener('message', handler); }, []); const clearHash = () => history.pushState(null, '', window.location.pathname + window.location.search); const toggleTheme = () => setTheme(t => t === 'dark' ? 'light' : 'dark'); const goHome = () => { setView('home'); setActiveSection('home'); setActiveArticle(null); setSearchQuery(null); clearHash(); window.scrollTo(0,0); }; const goSection = (id) => { setView('category'); setActiveSection(id); setActiveArticle(null); setSearchQuery(null); clearHash(); window.scrollTo(0,0); }; const goArticle = (art) => { setActiveArticle(art); setView('article'); history.pushState(null, '', '#noticia/' + art.id); window.scrollTo(0,0); }; const goBack = () => { setActiveArticle(null); setView(activeSection === 'home' ? 'home' : 'category'); clearHash(); window.scrollTo(0,0); }; const goSearch = (q) => { setSearchQuery(q); setView('search'); setActiveSection('search'); clearHash(); window.scrollTo(0,0); }; return (

{!dataReady ? (

Cargando noticias…

) : ( <> {view === 'home' && } {view === 'category' && } {view === 'article' && activeArticle && } {view === 'search' && searchQuery && } )}

); } ReactDOM.createRoot(document.getElementById('root')).render();