// Nav + Hero + Ticker — SIMCII Bitácora Territorial // Paleta: azul-gris · hueso · altiplano · fósforo · ámbar · óxido function GlobeMark({ size = 28 }) { return ( ); } // -------- Nav -------- function Nav() { const [scrolled, setScrolled] = React.useState(false); const [active, setActive] = React.useState(''); React.useEffect(() => { const handler = () => { setScrolled(window.scrollY > 40); const sections = ['platform', 'modules', 'sectors', 'casestudy']; for (const s of sections) { const el = document.getElementById(s); if (el) { const r = el.getBoundingClientRect(); if (r.top < 200 && r.bottom > 200) { setActive(s); return; } } } setActive(''); }; window.addEventListener('scroll', handler, { passive: true }); return () => window.removeEventListener('scroll', handler); }, []); const links = [ { label: 'Plataforma', href: '#platform', id: 'platform' }, { label: 'Módulos', href: '#modules', id: 'modules' }, { label: 'Sectores', href: '#sectors', id: 'sectors' }, { label: 'Casos', href: '#casestudy', id: 'casestudy' }, ]; return ( ); } // -------- Ticker -------- const TICKER_ITEMS = [ { label: 'PM2.5', value: '23 µg/m³', delta: '-2 vs 24h', deltaColor: 'var(--fosforo)' }, { label: 'AQI', value: '47', status: 'BUENO' }, { label: 'pH 7.4', extra: 'TURB 1.1 NTU' }, { label: 'COV', value: '0.18 ppm' }, { label: 'RUIDO', value: '52 dB' }, { label: 'VIENTO', value: 'SO 4.2 m/s' }, { label: 'TEMP', value: '18.3 °C' }, { label: 'H. RELATIVA', value: '64%' }, { label: 'SO2', value: '0.012 ppm' }, { label: 'NO2', value: '21 ppb' }, ]; function Ticker() { const items = [...TICKER_ITEMS, ...TICKER_ITEMS]; return (
{items.map((item, i) => ( {item.label} {item.value && <>·{item.value}} {item.extra && <>·{item.extra}} {item.delta && <>·{item.delta}} {item.status && <>·{item.status}} ))}
); } // -------- Text animation -------- function SplitText({ text, delay = 0, style }) { const [visible, setVisible] = React.useState(false); React.useEffect(() => { const t = setTimeout(() => setVisible(true), delay); return () => clearTimeout(t); }, [delay]); return ( {text.split(' ').map((word, wi) => ( {word} ))} ); } // -------- Chile dot strip canvas -------- function ChileDotStrip() { const ref = React.useRef(null); React.useEffect(() => { const canvas = ref.current; if (!canvas) return; const ctx = canvas.getContext('2d'); const DPR = window.devicePixelRatio || 1; const resize = () => { canvas.width = canvas.offsetWidth * DPR; canvas.height = canvas.offsetHeight * DPR; ctx.setTransform(DPR, 0, 0, DPR, 0, 0); }; resize(); window.addEventListener('resize', resize); const widthAt = (t) => { if (t < 0.04) return 0.18; if (t < 0.25) return 0.24 + Math.sin(t * 10) * 0.06; if (t < 0.45) return 0.22 + Math.sin(t * 8) * 0.05; if (t < 0.62) return 0.26 + Math.sin(t * 6) * 0.05; if (t < 0.80) return 0.34 + Math.sin(t * 5) * 0.08; if (t < 0.95) return 0.44 + Math.sin(t * 14) * 0.16; return 0.26; }; const nodes = [ { y: 0.14, active: true, kind: 'primary' }, { y: 0.28, active: true, kind: 'dot' }, { y: 0.42, active: true, kind: 'dot' }, { y: 0.55, active: true, kind: 'primary' }, { y: 0.70, active: false, kind: 'dot' }, { y: 0.85, active: false, kind: 'dot' }, ]; let raf; const draw = (t) => { const W = canvas.offsetWidth, H = canvas.offsetHeight; ctx.clearRect(0, 0, W, H); const rows = Math.floor(H / 7); const dotSize = 2.0; for (let r = 0; r < rows; r++) { const ny = r / rows; const widthFraction = widthAt(ny); const cols = Math.max(1, Math.floor((W * widthFraction) / 7)); const cx = W / 2; for (let c = 0; c < cols; c++) { const nx = cols === 1 ? 0 : (c / (cols - 1)) - 0.5; const x = cx + nx * W * widthFraction * 0.92; const y = r * 7 + 3; let alpha = 0.12; let rgb = '242, 237, 228'; nodes.forEach(n => { const d = Math.abs(ny - n.y); if (d < 0.04) { const local = 1 - d / 0.04; alpha = Math.max(alpha, 0.20 + local * 0.50); rgb = '110, 240, 255'; } }); const wave = (Math.sin(ny * 14 - t / 900) + 1) / 2; alpha += wave * 0.04; ctx.fillStyle = `rgba(${rgb}, ${alpha})`; ctx.beginPath(); ctx.arc(x, y, dotSize, 0, Math.PI * 2); ctx.fill(); } } nodes.forEach(n => { const y = n.y * H; const cx = W / 2; const pulse = (Math.sin(t / 600) + 1) / 2; const baseR = n.kind === 'primary' ? 5 : 3; ctx.fillStyle = n.active ? '#6EF0FF' : 'rgba(242,237,228,0.35)'; ctx.beginPath(); ctx.arc(cx, y, baseR, 0, Math.PI * 2); ctx.fill(); if (n.active) { ctx.strokeStyle = `rgba(110, 240, 255, ${(1 - pulse) * 0.5})`; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(cx, y, baseR + pulse * 12, 0, Math.PI * 2); ctx.stroke(); } }); raf = requestAnimationFrame(draw); }; raf = requestAnimationFrame(draw); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); }; }, []); return ; } // Metric row — kept for compatibility, no longer rendered in hero function MetricRow({ label, state, color, fill }) { return (
{label}
{state}
); } // -------- Hero -------- function Hero({ introDone }) { const [loaded, setLoaded] = React.useState(false); const [now, setNow] = React.useState(new Date()); const [strikeMode, setStrikeMode] = React.useState(null); const [fills, setFills] = React.useState([62, 78, 34, 88, 54]); React.useEffect(() => { const t = setTimeout(() => setLoaded(true), 60); return () => clearTimeout(t); }, []); React.useEffect(() => { const i = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(i); }, []); React.useEffect(() => { const i = setInterval(() => { setFills(prev => prev.map(v => Math.max(18, Math.min(95, v + (Math.random() - 0.5) * 6)))); }, 2800); return () => clearInterval(i); }, []); return (
{/* Bitácora header bar */}
BITÁCORA TERRITORIAL · § 01 · OBSERVATORIO ACCIONET
● LIVE · 2026
{/* Body grid 60% / 40% */}
{/* LEFT — Titular comunicacional */}
{/* Eyebrow */}
§ 01 · Plataforma SIMCII
{/* Headline */}

Gestión territorial basada en datos.

{/* Subtitle */}

Integración, análisis y visualización de información social, ambiental y contextual en tiempo real.

{/* CTA link */} { e.preventDefault(); document.getElementById('platform')?.scrollIntoView({ behavior: 'smooth' }); }} style={{ fontFamily: 'Geist Mono, monospace', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--hueso)', textDecoration: 'none', paddingBottom: 6, borderBottom: '1px solid var(--altiplano)', display: 'inline-flex', alignItems: 'center', gap: 8, opacity: loaded ? 1 : 0, transition: 'opacity 1s 0.9s', }} onMouseEnter={e => { if (e.currentTarget.lastChild) e.currentTarget.lastChild.style.transform = 'translateX(4px)'; }} onMouseLeave={e => { if (e.currentTarget.lastChild) e.currentTarget.lastChild.style.transform = 'translateX(0)'; }} > REVISA LA PLATAFORMA →
{/* RIGHT — Chile canvas + territorial labels */}
{/* Marginalia corners */}
FOLIO 01 · MMXXVI
SCROLL ↓
); } // -------- IntroLoader -------- function IntroLoader({ onDone }) { const [phase, setPhase] = React.useState(0); React.useEffect(() => { const t1 = setTimeout(() => setPhase(1), 300); const t2 = setTimeout(() => setPhase(2), 1550); const t3 = setTimeout(() => onDone(), 2200); return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); }; }, []); return (
{/* Crosshair SVG */}
= 1 ? 1 : 0, transform: phase >= 1 ? 'scale(1)' : 'scale(0.95)', transition: 'all 0.6s cubic-bezier(0.16,1,0.3,1)' }}>
= 1 ? 1 : 0, transition: 'opacity 0.6s 0.2s' }}>
CALIBRANDO ESTACIÓN · ●●●○○ · LISTO
); } Object.assign(window, { Nav, Hero, Ticker, SplitText, IntroLoader, GlobeMark });