/* global React */ const { useState, useEffect, useRef } = React; const { MarqueeIcon } = window.GroppFlowComponents; // ── Rugged Tablet Illustration ──────────────────────────────────────────────── function TabletIllustration({ lang }) { const [camFeed, setCamFeed] = useState(0); const feeds = lang === "es" ? ["CAM-01 · FRONTAL", "CAM-02 · CABINA", "CAM-03 · LATERAL IZQ", "CAM-04 · LATERAL DER"] : ["CAM-01 · ROAD", "CAM-02 · CABIN", "CAM-03 · LEFT SIDE", "CAM-04 · RIGHT SIDE"]; useEffect(() => { const id = setInterval(() => setCamFeed(f => (f + 1) % 4), 2200); return () => clearInterval(id); }, []); const isEs = lang === "es"; return (
{/* Ambient glow */}
{/* Tablet body */}
{/* Rubber corner guards */} {[{top:0,left:0},{top:0,right:0},{bottom:0,left:0},{bottom:0,right:0}].map((s,i) => (
))} {/* Status bar */}
● GROPP FLOW · {isEs ? "EN VIVO" : "LIVE"} {feeds[camFeed]} LTE ● 14:42
{/* Screen content — split: map left, camera feed right */}
{/* Left: Navigation */}
{/* Map grid */} {/* Grid lines */} {Array.from({length:12}).map((_,i) => ( ))} {Array.from({length:11}).map((_,i) => ( ))} {/* Route line */} {/* Streets */} {/* Vehicle dot */} {/* Next stops */} {[[200,110],[240,70]].map(([x,y],i)=>( #{i+2} ))} {/* ETA chip */}
4.2 km
ETA · 12 {isEs?"min":"min"}
{/* Right: Camera + stats */}
{/* Camera feed */}
{/* Scanlines effect */}
{/* Camera label */}
{feeds[camFeed]}
{/* REC indicator */}
● REC
{/* AI overlay bounding box for cabin cam */} {camFeed === 1 && (
FACE · 0.97
)} {/* Road cam: ADAS overlay */} {camFeed === 0 && ( <>
LANE · OK
)}
{/* Mini stats */}
{[ { label: isEs?"VEL":"SPD", val:"54 km/h", ok:true }, { label: isEs?"ATEN":"ATTN", val:"0.91", ok:true }, { label: isEs?"TURNO":"SHIFT", val:"5h 24m", ok:true }, ].map((s,i) => (
{s.label} {s.val}
))}
{isEs ? "PARADA · #7 / 24" : "STOP · #7 / 24"}
{/* Cam selector */}
{[0,1,2,3].map(i => ( ))}
{/* Bottom bar */}
VT-10 PRO · GROPP EDGE OS 2.1 ● GPS · FIX ● LTE · −82dBm TEMP · 42°C
); } // ── Spec Table ──────────────────────────────────────────────────────────────── function SpecTable({ specs }) { return (
{specs.map((s,i) => (
{s.k}
{s.v}
))}
); } // ── Camera Card ─────────────────────────────────────────────────────────────── function CameraCard({ icon, title, body, badge }) { return (
{icon}
{title}
{badge && ( {badge} )}

{body}

); } // ── Camera Ecosystem Animation ──────────────────────────────────────────────── function CameraEcosystemViz({ isEs }) { const [tick, setTick] = useState(0); const [active, setActive] = useState(0); useEffect(() => { const id = setInterval(() => setTick(t => t + 1), 80); return () => clearInterval(id); }, []); useEffect(() => { const id = setInterval(() => setActive(a => (a + 1) % 4), 2000); return () => clearInterval(id); }, []); // Camera positions around a central vehicle (top-down) const cameras = [ { id:"road", x:300, y:60, badge:"ADAS", label: isEs?"FRONTAL":"ROAD", color:"var(--accent)", angle:0 }, { id:"cabin", x:490, y:200, badge:"DMS", label: isEs?"CABINA":"CABIN", color:"oklch(0.60 0.16 280)", angle:90 }, { id:"left", x:110, y:200, badge:"LADO IZQ",label: isEs?"LATERAL":"SIDE L", color:"oklch(0.60 0.14 200)", angle:270 }, { id:"cargo", x:300, y:340, badge:"POD", label: isEs?"BODEGA":"CARGO", color:"oklch(0.62 0.18 145)", angle:180 }, ]; // Center tablet const cx = 300, cy = 200; // Animate a pulse dot along path from camera to center const pulseProgress = (tick % 30) / 30; // 0→1 per 2.4s return (
{/* Background grid */} {Array.from({length:10}).map((_,i) => ( ))} {Array.from({length:14}).map((_,i) => ( ))} {/* Vehicle silhouette (top-down) */} {/* Body */} {/* Cab */} {/* Cargo area */} {/* Wheels */} {[[248,138],[336,138],[248,262],[336,262]].map(([wx,wy],i) => ( ))} {/* Windshield */} {/* Connection lines: cameras → center */} {cameras.map((cam, i) => { const isActiveCam = i === active; return ( {/* Animated pulse dot */} {isActiveCam && ( )} ); })} {/* Central tablet */} {/* Screen */} {/* 4-quad camera view */} {[[cx-34,cy-22],[cx-1,cy-22],[cx-34,cy],[cx-1,cy]].map(([qx,qy],i) => ( ))} {/* REC dot */} GROPP EDGE {/* Camera nodes */} {cameras.map((cam, i) => { const isActiveCam = i === active; return ( setActive(i)}> {/* Ping ring on active */} {isActiveCam && ( )} {/* Camera body */} {/* Camera icon */} {/* Badge */} {cam.badge} {/* AI detection label on active */} {isActiveCam && ( {cam.label} · {isEs ? "EN VIVO" : "LIVE"} )} ); })} {/* AI result chips floating near center */} {active === 0 && ( LANE · OK · 0.97 )} {active === 1 && ( {isEs ? "ATEN · 0.91 · OK" : "ATTN · 0.91 · OK"} )} {active === 2 && ( {isEs ? "PUNTO CIEGO · OK" : "BLIND SPOT · OK"} )} {active === 3 && ( {isEs ? "ENTREGA · GRABANDO" : "DELIVERY · REC"} )} {/* Click hint */}
{isEs ? "clic en cámara para activar" : "click camera to activate"}
); } function DockIllustration() { return (
{/* Dock base */} {/* Dock slots */} {/* Connector pins */} {Array.from({length:8}).map((_,i) => ( ))} {/* Labels */} GROPP DOCK V2 · CAN / LTE / PWR {/* Tablet sitting in dock */} {/* Screen content — route preview */} {/* Mini map */} {/* Right panel */} {/* DMS face box */} FACE · OK {/* Stats rows */} {[0,1,2].map(i => ( ))} {/* Connection cable */} {/* Power indicator */} PWR {/* Side ports */} {[{x:60,label:"CAN"},{x:340,label:"LTE"}].map((p,i) => ( {p.label} ))}
); } // ── Architecture Diagram ────────────────────────────────────────────────────── function ArchDiagram({ isEs }) { const nodes = [ { x:200, y:40, w:140, label: isEs?"Tablet · Cabina":"Tablet · In-Cab", color:"var(--accent)", sub:"Edge AI" }, { x:40, y:150, w:110, label:"CAN-Bus", color:"oklch(0.60 0.10 200)", sub:isEs?"Velocidad / RPM":"Speed / RPM" }, { x:170, y:150, w:110, label:isEs?"Cámaras AHD":"AHD Cameras", color:"oklch(0.60 0.12 280)", sub:"4-ch · 1080p" }, { x:300, y:150, w:110, label:"GPS + IMU", color:"oklch(0.60 0.10 150)", sub:"10 Hz" }, { x:200, y:260, w:140, label:"Gropp Flow Cloud", color:"var(--accent-2)", sub:isEs?"Agentes IA":"AI Agents" }, ]; const edges = [ [200+70, 40+28, 40+55, 150+14], [200+70, 40+28, 170+55, 150+14], [200+70, 40+28, 300+55, 150+14], [200+70, 40+28+28, 200+70, 260], ]; return (
{edges.map(([x1,y1,x2,y2],i) => ( ))} {nodes.map((n,i) => ( {n.label} {n.sub} ))} {/* LTE uplink arrow */} LTE · {isEs?"cifrado":"encrypted"}
); } // ── Image Carousel ──────────────────────────────────────────────────────────── function HwCarousel({ isEs }) { const slides = isEs ? [ { src:"assets/hw-tablet-front.png", caption:"VT-10 Pro AHD · vista frontal", bg:"var(--ink-3)" }, { src:"assets/hw-tablet-dock.png", caption:"Tablet + docking station", bg:"white" }, { src:"assets/hw-dock-cables.png", caption:"Conexiones del dock · CAN · AHD · LTE", bg:"white" }, ] : [ { src:"assets/hw-tablet-front.png", caption:"VT-10 Pro AHD · front view", bg:"var(--ink-3)" }, { src:"assets/hw-tablet-dock.png", caption:"Tablet + docking station", bg:"white" }, { src:"assets/hw-dock-cables.png", caption:"Dock connections · CAN · AHD · LTE", bg:"white" }, ]; const [idx, setIdx] = useState(0); const [animating, setAnimating] = useState(false); const go = (next) => { if (animating) return; setAnimating(true); setTimeout(() => { setIdx((next + slides.length) % slides.length); setAnimating(false); }, 200); }; useEffect(() => { const id = setInterval(() => go(idx + 1), 3500); return () => clearInterval(id); }, [idx]); return (
{/* Main image frame */}
{slides[idx].caption} {/* Prev / Next arrows */} {[{dir:-1,pos:{left:10}},{dir:1,pos:{right:10}}].map(({dir,pos},i) => ( ))} {/* Caption */}
{slides[idx].caption}
{/* Dot indicators */}
{slides.map((_, i) => (
); } // ── Main Hardware Page ──────────────────────────────────────────────────────── function HardwarePage({ lang, onBack }) { const isEs = lang === "es"; const tabletSpecs = isEs ? [ { k:"PANTALLA", v:'10.1" IPS · 1920×1200 · 800 nits' }, { k:"PROCESO.", v:"Octa-core ARM · 4 GB RAM · 64 GB eMMC" }, { k:"CÁMARAS", v:"4 canales AHD simultáneos · 1080p / 30fps" }, { k:"IA", v:"NPU integrada · ADAS + DMS en tiempo real" }, { k:"CONECT.", v:"LTE Cat.6 · WiFi 6 · BT 5.0 · GPS L1+L5" }, { k:"RUGGED", v:"IP65 · MIL-STD-810H · −20°C a +70°C" }, { k:"ALIMENT.", v:"9–36V DC · Ignition sense · UPS 30 min" }, { k:"CAN-BUS", v:"SAE J1939 / OBD-II · ISO 15765" }, ] : [ { k:"DISPLAY", v:'10.1" IPS · 1920×1200 · 800 nits' }, { k:"CPU", v:"Octa-core ARM · 4 GB RAM · 64 GB eMMC" }, { k:"CAMERAS", v:"4-ch AHD simultaneous · 1080p / 30fps" }, { k:"AI", v:"On-board NPU · Real-time ADAS + DMS" }, { k:"CONNECT.", v:"LTE Cat.6 · WiFi 6 · BT 5.0 · GPS L1+L5" }, { k:"RUGGED", v:"IP65 · MIL-STD-810H · −20°C to +70°C" }, { k:"POWER", v:"9–36V DC · Ignition sense · 30 min UPS" }, { k:"CAN-BUS", v:"SAE J1939 / OBD-II · ISO 15765" }, ]; const cameras = isEs ? [ { title:"Cámara frontal de ruta", badge:"ADAS", body:"1080p apuntando al frente. Detecta semáforos, señales de pare, peatones y vehículos. Alimenta el motor ADAS para alertas de carril y distancia de seguimiento.", icon: , }, { title:"Cámara de cabina (DMS)", badge:"DMS", body:"Infrarrojo de onda corta. Detecta fatiga, bostezos, cierre de ojos, desvío de atención y uso de celular. Funciona de noche sin iluminación adicional.", icon: , }, { title:"Cámaras laterales (×2)", badge:"LATERAL", body:"Punto ciego izquierdo y derecho. Grabación continua, activación por señalero o acercamiento. Prueba de maniobra para reclamos de seguro.", icon: , }, { title:"Cámara de bodega / entrega", badge:"POD", body:"Apunta a la puerta trasera. Captura automática al abrir y cerrar. Prueba de entrega irrefutable, sincronizada con timestamp GPS en el clip.", icon: , }, ] : [ { title:"Road-facing camera", badge:"ADAS", body:"1080p forward-facing. Detects traffic lights, stop signs, pedestrians, and vehicles. Feeds the ADAS engine for lane-departure and following-distance alerts.", icon: , }, { title:"Cabin camera (DMS)", badge:"DMS", body:"Short-wave infrared. Detects fatigue, yawning, eye-closure, head position, and phone use. Operates at night with no extra lighting.", icon: , }, { title:"Side cameras (×2)", badge:"SIDE", body:"Left and right blind-spot coverage. Continuous recording, triggered on turn-signal or proximity event. Maneuver evidence for insurance claims.", icon: , }, { title:"Cargo door / delivery camera", badge:"POD", body:"Rear-facing. Auto-captures on door open/close events. Irrefutable proof of delivery, synced with GPS timestamp on the clip.", icon: , }, ]; const installSteps = isEs ? [ { n:"01", t:"Montaje en tablero", b:"Base magnética anti-vibración con brazo ajustable. Sin taladrar. Instalación en 20 minutos." }, { n:"02", t:"Conexión al dock", b:"Un cable: alimentación + CAN-Bus + cámaras. El dock se fija detrás del tablero." }, { n:"03", t:"Activación en Gropp", b:"Escaneás el QR del dispositivo en la app de despacho. La tablet se registra sola en la flota." }, { n:"04", t:"Listo para el turno", b:"Al girar la llave, la tablet arranca, obtiene fix GPS y conecta a los agentes de Gropp Flow." }, ] : [ { n:"01", t:"Dashboard mount", b:"Anti-vibration magnetic base with adjustable arm. No drilling. 20-minute install." }, { n:"02", t:"Dock connection", b:"One cable: power + CAN-Bus + cameras. The dock mounts behind the dashboard." }, { n:"03", t:"Gropp activation", b:"Scan the device QR from the dispatch app. The tablet self-registers into the fleet." }, { n:"04", t:"Ready for shift", b:"On ignition, the tablet boots, acquires GPS fix, and connects to Gropp Flow agents." }, ]; return (
{/* ── HERO ── */}

{isEs ? <>La computadora
del camión. : <>The computer
inside the cab.}

{isEs ? "Una tablet robusta de 10\" montada sobre el tablero que funde navegación, IA visual en tiempo real, cuatro cámaras AHD y CAN-Bus del vehículo en un único dispositivo — conectado permanentemente a Gropp Flow." : "A 10\" rugged tablet mounted above the driver that fuses navigation, real-time vision AI, four AHD cameras, and vehicle CAN-Bus into a single device — permanently connected to Gropp Flow."}

{(isEs ? [ { num:"4", unit:"canales", label:"cámara AHD simultáneos" }, { num:"IP65", unit:"", label:"sellado polvo y agua" }, { num:"<200", unit:"ms", label:"latencia de inferencia IA" }, ] : [ { num:"4", unit:"ch", label:"simultaneous AHD camera" }, { num:"IP65", unit:"", label:"dust & water sealed" }, { num:"<200", unit:"ms", label:"AI inference latency" }, ] ).map((m,i) => (
{m.num}{m.unit}
{m.label}
))}
{/* Hero visual: in-cab photo */}
{isEs {/* Live overlay — same style as home map-overlay */}
{isEs ? "EN VIVO · GROPP FLOW" : "LIVE · GROPP FLOW"}
{isEs ? "VEL" : "SPD"} 54 km/h
{isEs ? "ATEN" : "ATTN"} 0.91
{isEs ? "FATIGA" : "FATIGUE"} {isEs ? "BAJA" : "LOW"}
{/* AI events feed — bottom-left */}
{isEs ? "IA · EVENTOS" : "AI · EVENTS"}
{(isEs ? [ { t:"14:42:01", k:"DETECTA", label:"Señal de pare · cumple", tone:"ok" }, { t:"14:41:38", k:"ATEN", label:"Chofer · 0.91 · activo", tone:"ok" }, { t:"14:39:11", k:"ALERTA", label:"4 canales AHD · activos", tone:"warn" }, ] : [ { t:"14:42:01", k:"DETECT", label:"Stop sign · driver compliant", tone:"ok" }, { t:"14:41:38", k:"ATTN", label:"Driver · 0.91 · active", tone:"ok" }, { t:"14:39:11", k:"ALERT", label:"4 AHD channels · live", tone:"warn" }, ] ).map((e,i) => (
{e.t} {e.k} {e.label}
))}
{/* Marquee strip */}
{[...Array(3)].flatMap(() => ( (isEs ? [ { icon:"shield", label:"ADAS · Carril · Distancia · Pare" }, { icon:"brain", label:"DMS · Fatiga · Bostezos · Celular" }, { icon:"bolt", label:"Edge AI · inferencia < 200ms" }, { icon:"steering",label:"CAN-Bus · SAE J1939 · OBD-II" }, { icon:"layers", label:"4 canales AHD · 1080p / 30fps" }, { icon:"sparkle", label:"IP65 · MIL-STD-810H · −20°C a +70°C" }, ] : [ { icon:"shield", label:"ADAS · Lane · Distance · Stop sign" }, { icon:"brain", label:"DMS · Fatigue · Yawn · Phone" }, { icon:"bolt", label:"Edge AI · inference < 200ms" }, { icon:"steering",label:"CAN-Bus · SAE J1939 · OBD-II" }, { icon:"layers", label:"4-ch AHD · 1080p / 30fps" }, { icon:"sparkle", label:"IP65 · MIL-STD-810H · −20°C to +70°C" }, ]) )).map((m, i) => ( {m.label} ))}
{/* ── IMAGE CAROUSEL ── */}
{/* Left: copy */}

{isEs ? <>Grado vehicular.
Sin compromisos. : <>Vehicle grade.
No compromises.}

{isEs ? "Diseñada para operar 12 horas diarias en un vehículo de reparto: vibración constante, rangos de temperatura extremos y alimentación irregular. La misma plataforma que usan sistemas ADAS de flotas de transporte pesado." : "Built to run 12 hours a day inside a delivery vehicle: constant vibration, extreme temperature swings, and irregular power. The same platform used by heavy-fleet ADAS systems worldwide."}

{/* Feature bullets */}
{(isEs ? [ "10.1\" IPS · 1000 nits · luz solar", "IP65 · MIL-STD-810H · −20°C a +70°C", "4 canales AHD · ADAS + DMS en NPU", "CAN-Bus · LTE Cat.6 · GPS L1+L5", ] : [ "10.1\" IPS · 1000 nits · sunlight readable", "IP65 · MIL-STD-810H · −20°C to +70°C", "4-ch AHD · ADAS + DMS on-device NPU", "CAN-Bus · LTE Cat.6 · GPS L1+L5", ]).map((f, i) => (
{f}
))}
{/* Right: carousel */}
{/* ── CAMERAS ── */}

{isEs ? <>Cuatro ojos.
Un solo flujo. : <>Four eyes.
One stream.}

{isEs ? "Las cuatro cámaras graban y procesan simultáneamente. La IA ve todo — el chofer, la ruta, los puntos ciegos y la carga. Los clips críticos se sincronizan a la nube en segundos." : "All four cameras record and process simultaneously. AI sees everything — the driver, the road, the blind spots, and the cargo. Critical clips sync to the cloud within seconds."}

{/* Camera ecosystem animation */}
{/* Camera cards + product photo */}
{isEs
{isEs ? "CÁMARA AHD · 1080p" : "AHD CAMERA · 1080p"}
{cameras.map((c,i) => )}
{/* ── ARCHITECTURE ── */}

{isEs ? <>Borde + nube,
sin puntos de falla. : <>Edge + cloud,
no single point of failure.}

{isEs ? "La IA de seguridad corre 100% en el dispositivo — sin latencia de red, sin interrupciones por cobertura. La telemetría y los clips suben cifrados en cuanto hay LTE. Si no hay señal, el tablet bufferea hasta 72 horas en almacenamiento local." : "Safety AI runs 100% on-device — no network latency, no coverage gaps. Telemetry and clips upload encrypted as soon as LTE is available. No signal? The tablet buffers up to 72 hours locally."}

{(isEs ? [ "Inferencia ADAS + DMS en el NPU del dispositivo", "Subida cifrada AES-256 cuando hay LTE", "Buffer local de 72 hs sin cobertura", "Actualización OTA de modelos sin parar la flota", ] : [ "ADAS + DMS inference on the on-device NPU", "AES-256 encrypted upload on LTE", "72-hour local buffer with no coverage", "OTA model updates without stopping the fleet", ] ).map((t,i) => (
{t}
))}
{/* ── INSTALL ── */}

{isEs ? <>20 minutos por vehículo.
Sin parar la operación. : <>20 minutes per vehicle.
Without stopping the operation.}

{isEs ? "Nuestro equipo de instalación certifica el vehículo y lo deja operativo. Sin obra, sin electricistas, sin downtime del vehículo." : "Our install team certifies each vehicle and leaves it fully operational. No construction, no electricians, no vehicle downtime."}

{installSteps.map((s,i) => (
{s.n}

{s.t}

{s.b}

))}
{/* ── CTA ── */}

{isEs ? <>{" "}La flota que ve,
aprende. : <>{" "}The fleet that sees,
learns.}

{isEs ? "Coordinamos una visita técnica, relevamos tu flota y te entregamos un presupuesto de hardware + software en 48 hs." : "We schedule a technical visit, survey your fleet, and deliver a hardware + software quote within 48 hours."}

); } Object.assign(window, { HardwarePage });