/* global React, Icon */ const { useState, useEffect, useMemo } = React; function Hero({ audience }) { const tagline = audience === 'fleet' ? 'Tu patrimonio en tus manos.' : 'Protege lo que más amas.'; const sub = audience === 'fleet' ? 'Rastreo satelital y monitoreo profesional para flotillas, transporte y logística. Cobertura nacional.' : 'Rastreo satelital con cobertura nacional, monitoreo 24/7 y respuesta inmediata cuando algo no encaja.'; return (

Cobertura nacional · Monitoreo 24/7

{tagline}

{sub}

Cotiza tu GPS Conoce el sistema

); } function HeroStats() { const stats = [ { k: '32 estados', v: 'cobertura nacional' }, { k: '1,200+', v: 'unidades monitoreadas' }, { k: '24/7', v: 'monitoreo y soporte' }, ]; return (

{stats.map((s, i) => (

{s.k}

{s.v}

))}

); } /* ============================================================ A — NavigatorMap: dark zoomed-in street map (Mapbox-style) ============================================================ */ function NavigatorMap() { const [tick, setTick] = useState(0); const [feed, setFeed] = useState([]); // Vehicle moves along a polyline 0..1 const [t, setT] = useState(0); useEffect(() => { const id = setInterval(() => setTick(x => (x + 1) % 1000), 700); return () => clearInterval(id); }, []); useEffect(() => { let raf; let last = performance.now(); const loop = (now) => { const dt = (now - last) / 1000; last = now; setT(v => (v + dt * 0.08) % 1); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); // Live feed useEffect(() => { const events = [ { t: 'Geo-cerca confirmada', city: 'Insurgentes Sur', kind: 'good' }, { t: 'Encendido de motor', city: 'Polanco', kind: 'info' }, { t: 'Exceso de velocidad', city: 'Periférico', kind: 'alert' }, { t: 'Botón de pánico', city: 'Tlalpan', kind: 'urgent' }, { t: 'Ruta completada', city: 'Reforma', kind: 'good' }, ]; let i = 0; const id = setInterval(() => { const ev = events[i % events.length]; setFeed(prev => [{ ...ev, ts: Date.now(), id: Math.random() }, ...prev].slice(0, 4)); i++; }, 2200); return () => clearInterval(id); }, []); // Main route — a curving polyline through the "city" const route = useMemo(() => { return [ [60, 480], [110, 460], [165, 430], [210, 405], [260, 380], [310, 360], [360, 340], [420, 320], [470, 280], [520, 240], [560, 215], [610, 200], [660, 175], [710, 150], [760, 130], [810, 115], [870, 100], [930, 90], ]; }, []); const routePath = 'M ' + route.map(p => p.join(' ')).join(' L '); const routeLen = useMemo(() => { let total = 0; for (let i = 1; i < route.length; i++) { const dx = route[i][0] - route[i - 1][0]; const dy = route[i][1] - route[i - 1][1]; total += Math.sqrt(dx * dx + dy * dy); } return total; }, [route]); // Vehicle position along route const veh = useMemo(() => { let dist = t * routeLen; for (let i = 1; i < route.length; i++) { const dx = route[i][0] - route[i - 1][0]; const dy = route[i][1] - route[i - 1][1]; const seg = Math.sqrt(dx * dx + dy * dy); if (dist <= seg) { const f = dist / seg; return { x: route[i - 1][0] + dx * f, y: route[i - 1][1] + dy * f, angle: Math.atan2(dy, dx) * 180 / Math.PI, }; } dist -= seg; } return { x: route[route.length - 1][0], y: route[route.length - 1][1], angle: 0 }; }, [t, route, routeLen]); return (

{/* HUD overlay */}

EN VIVO · CDMX

19.4326°N · 99.1332°O

Velocidad

{Math.round(40 + Math.sin(t * 6.28) * 18 + 25)} km/h

ETA

{Math.max(1, Math.round((1 - t) * 14))} min

Distancia

{((1 - t) * 6.4).toFixed(1)} km

{feed.slice(0, 3).map((f, i) => (

{f.t} {f.city}

))}

); } function CityBlocks() { // Static block layout — flat dark polygons for "buildings" const blocks = []; const seed = (i) => Math.abs(Math.sin(i * 12.9898) * 43758.5453 % 1); for (let i = 0; i < 48; i++) { const x = (i * 137) % 1000; const y = ((i * 89) % 600); const w = 30 + seed(i) * 70; const h = 30 + seed(i + 7) * 90; blocks.push({ x, y, w, h, k: seed(i + 13) }); } return ( {blocks.map((b, i) => ( 0.7 ? '#0c2229' : '#0a1c22'} stroke="#142f37" strokeWidth="0.6" /> ))} ); } function StreetGrid() { // dense thin grid of streets const lines = []; for (let x = 0; x <= 1000; x += 60) { lines.push(); } for (let y = 0; y <= 600; y += 60) { lines.push(); } return {lines}; } function StreetLabels() { return ( Av. Insurgentes Reforma Anillo Periférico Eje 1 Tlalpan ); } function Marker({ x, y, label, kind }) { const color = kind === 'origin' ? '#f2c792' : '#58c79e'; return ( {label} ); } /* ============================================================ B — IsoCity: 2.5D isometric block of city ============================================================ */ function IsoCity() { const [t, setT] = useState(0); const [feed, setFeed] = useState([]); useEffect(() => { let raf, last = performance.now(); const loop = (now) => { const dt = (now - last) / 1000; last = now; setT(v => (v + dt * 0.06) % 1); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); useEffect(() => { const events = [ { t: 'En ruta', city: 'Bloque 4-A', kind: 'good' }, { t: 'Geo-cerca', city: 'Patio Norte', kind: 'info' }, { t: 'Aceleración', city: 'Av. Central', kind: 'alert' }, { t: 'Parada confirmada', city: 'Bloque 7-B', kind: 'good' }, ]; let i = 0; const id = setInterval(() => { setFeed(prev => [{ ...events[i % events.length], id: Math.random() }, ...prev].slice(0, 3)); i++; }, 2400); return () => clearInterval(id); }, []); // iso projection: world (x, y, z) -> screen const ISO = (x, y, z = 0) => ({ sx: 500 + (x - y) * 0.866 * 28, sy: 320 + (x + y) * 0.5 * 28 - z * 28, }); // Build a grid of buildings const buildings = useMemo(() => { const arr = []; const hSeed = (a, b) => { const v = Math.sin(a * 23.45 + b * 91.7) * 43758.5453; return Math.abs(v - Math.floor(v)); }; for (let i = -4; i <= 4; i++) { for (let j = -4; j <= 4; j++) { // Avoid placing buildings on the road tiles (j=0 row, i=0 col) if (j === 0 || i === 0) continue; const h = 0.6 + hSeed(i, j) * 2.4; const accent = hSeed(i, j) > 0.85; arr.push({ i, j, h, accent }); } } // sort back-to-front for painter's algorithm arr.sort((a, b) => (a.i + a.j) - (b.i + b.j)); return arr; }, []); // Vehicle path along the cross roads (j=0 then i=0) // 0 → 0.5 along j=0 from i=-4 to i=4. 0.5 → 1 along i=0 from j=-4 to j=4 const vehPos = useMemo(() => { if (t < 0.5) { const u = t / 0.5; const i = -4 + u * 8; return { i, j: 0, dir: 'i' }; } else { const u = (t - 0.5) / 0.5; const j = -4 + u * 8; return { i: 0, j, dir: 'j' }; } }, [t]); const vehScreen = ISO(vehPos.i, vehPos.j, 0.05); return (

VISTA ISO · 3D

SECTOR 04 · ZONA URBANA

Unidad

MX-2294

Estado

En ruta

Velocidad

{Math.round(35 + Math.sin(t * 6.28) * 12 + 20)} km/h

{feed.slice(0, 3).map((f, i) => (

{f.t} {f.city}

))}

); } function IsoGround({ ISO }) { const a = ISO(-4.6, -4.6, 0); const b = ISO(4.6, -4.6, 0); const c = ISO(4.6, 4.6, 0); const d = ISO(-4.6, 4.6, 0); return ( ); } function IsoRoads({ ISO }) { // Cross roads at j=0 and i=0 const roadStripe = (a1, b1, c1, d1) => ( ); const horiz = roadStripe( ISO(-4.5, -0.4, 0), ISO(4.5, -0.4, 0), ISO(4.5, 0.4, 0), ISO(-4.5, 0.4, 0), ); const vert = roadStripe( ISO(-0.4, -4.5, 0), ISO(0.4, -4.5, 0), ISO(0.4, 4.5, 0), ISO(-0.4, 4.5, 0), ); // dashed center lines const dashes = []; for (let k = -4; k < 4; k += 0.6) { const a = ISO(k, 0, 0.01); const b = ISO(k + 0.3, 0, 0.01); dashes.push(); const c = ISO(0, k, 0.01); const d = ISO(0, k + 0.3, 0.01); dashes.push(); } return {horiz}{vert}{dashes}; } function IsoBuilding({ i, j, h, accent, ISO }) { const sz = 0.42; const top = ISO(i + sz, j + sz, h); const topL = ISO(i - sz, j + sz, h); const topR = ISO(i + sz, j - sz, h); const topF = ISO(i - sz, j - sz, h); const botL = ISO(i - sz, j + sz, 0); const botR = ISO(i + sz, j - sz, 0); const botF = ISO(i - sz, j - sz, 0); // Faces const left = `${botL.sx},${botL.sy} ${topL.sx},${topL.sy} ${topF.sx},${topF.sy} ${botF.sx},${botF.sy}`; const right = `${botR.sx},${botR.sy} ${topR.sx},${topR.sy} ${topF.sx},${topF.sy} ${botF.sx},${botF.sy}`; const topFace = `${top.sx},${top.sy} ${topL.sx},${topL.sy} ${topF.sx},${topF.sy} ${topR.sx},${topR.sy}`; const baseTop = accent ? '#1f7a8c' : '#143842'; const baseLeft = accent ? '#13525e' : '#0e2a32'; const baseRight = accent ? '#0d3a44' : '#0a2026'; // Window pattern using nested rects on left/right faces (approx via stripes) return ( {/* simple window stripes — small dashed lines along the face */} ); } function WindowStripes({ face, botL, topL, topR, botR, topF, botF, accent }) { const stripes = []; const steps = 3; for (let k = 1; k <= steps; k++) { const f = k / (steps + 1); if (face === 'left') { const a = { x: botL.sx + (topL.sx - botL.sx) * f, y: botL.sy + (topL.sy - botL.sy) * f }; const b = { x: botF.sx + (topF.sx - botF.sx) * f, y: botF.sy + (topF.sy - botF.sy) * f }; stripes.push(); } else if (face === 'right') { const a = { x: botR.sx + (topR.sx - botR.sx) * f, y: botR.sy + (topR.sy - botR.sy) * f }; const b = { x: botF.sx + (topF.sx - botF.sx) * f, y: botF.sy + (topF.sy - botF.sy) * f }; stripes.push(); } } return {stripes}; } function IsoTrail({ t, ISO }) { // Trail is along the path the truck has already traveled const segs = []; const N = 60; for (let k = 0; k < N; k++) { const tt = (k / N) * t; let i, j; if (tt < 0.5) { i = -4 + (tt / 0.5) * 8; j = 0; } else { i = 0; j = -4 + ((tt - 0.5) / 0.5) * 8; } const s = ISO(i, j, 0.02); segs.push(s); } if (segs.length < 2) return null; const path = 'M ' + segs.map(s => `${s.sx} ${s.sy}`).join(' L '); return ( ); } function IsoTruck({ dir }) { // Simple isometric truck/pickup // dir 'i' means truck moves along i axis; rotate body accordingly return ( {/* cab */} {/* bed */} {/* shadow bottom edge */} ); } function IsoPin({ pos, color, label }) { return ( {label} ); } window.Hero = Hero;