/* global React */
const { useState, useEffect } = React;
/*
PlatformModulesSection — v3
─────────────────────────────
Same UX/UI pattern as the rest of the Platform page:
· pp-platform-section / pp-split / pp-tag / pp-section-title / pp-modules
· device mock on one side, FeatureModule list on the other
· alternating mist / white backgrounds, --flip alternates the side
5 modules + AI custom section with 3 case studies (Litter live · Demand pilot · Pavement proposed).
Cases 3 (PPE) and 4 (electrical) removed — out of scope for vehicle ops.
*/
// ── Local FeatureModule (mirrors the one in platform-page.jsx) ───────────────
function PMFeature({ num, title, body, chips }) {
return (
{num}
{title}
{body}
{chips && (
{chips.map((c, i) => (
{c}
))}
)}
);
}
// ── Browser frame (mirrors PPBrowser styling) ───────────────────────────────
function PMBrowser({ url = "flow.gropp.tech", children }) {
return (
{isEs ? "Bandeja de trabajo emergente" : "Emergent work inbox"}
4 / 12
{items.map((it, i) => (
{it.id}
{it.t.toUpperCase()}
{it.txt}
{it.state}
))}
);
}
function RulesMock({ isEs }) {
return (
);
}
// ── AI case visuals (kept compact, browser-framed) ───────────────────────────
function LitterMock() {
return (
AI-DETECTED · 100.0%
VEH 2285·TAB · POINT Z23D-138REC ●
);
}
function DemandMock({ isEs }) {
const grid = [
[3, 5, 4, 2, 1, 3], [4, 7, 8, 5, 2, 2], [3, 6, 9, 7, 3, 1], [2, 4, 7, 6, 4, 2], [1, 2, 3, 4, 3, 2],
];
const colorFor = v => `oklch(${0.95 - (v / 9) * 0.45} ${0.04 + (v / 9) * 0.18} ${250 - (v / 9) * 100})`;
return (
);
}
function PavementMock({ isEs }) {
return (
);
}
// ── Sección principal ────────────────────────────────────────────────────────
function PlatformModulesSection({ isEs }) {
// 5 módulos, alineados al patrón pp-split del resto de la página
const modules = isEs ? [
{
tag: "CATÁLOGO",
title_a: "Definí los ", title_b: "servicios", title_c: " que ofrecés.",
sub: "Cada servicio es la unidad mínima de oferta. Tipo de operación, frecuencia, ventana, recursos asignados y formularios — todo configurable por cliente, sin tocar código.",
mock: ,
flip: false, mist: false,
modules: [
{ num: "01", title: "Tipo de servicio", body: "Recolección, barrido, riego, mantenimiento, pedidos B2B. Con frecuencia, ventana horaria y SLA propios.", chips: ["frecuencia", "SLA", "ventana"] },
{ num: "02", title: "Recursos por servicio", body: "Cantidad de asistentes, tipo de vehículo y equipamiento requerido. El sistema bloquea asignaciones inválidas en planificación.", chips: ["validación", "equipos", "cuadrilla"] },
{ num: "03", title: "Cámaras con IA y métricas", body: "Cámaras a bordo con inteligencia artificial detectan anomalías y servicios a realizar en tiempo real. Alimentan métricas multi-industria: kg recolectados, m² barridos, m³ regados, tiempo de servicio, km productivos.", chips: ["cámaras IA", "anomalías", "multi-industria"] },
{ num: "04", title: "Formularios configurables", body: "Adjuntás un formulario al servicio. El chofer lo completa en cabina al cierre — firmado, georreferenciado, exportable a PDF.", chips: ["en cabina", "firma", "PDF"] },
],
},
{
tag: "PLANIFICACIÓN",
title_a: "Planes operativos ", title_b: "recurrentes", title_c: ".",
sub: "El despachador no arma el día desde cero. Definís plantillas semanales o mensuales y el sistema instancia el plan diario automáticamente, con choferes, vehículos y rutas reales.",
mock: ,
flip: true, mist: true,
modules: [
{ num: "01", title: "Plantilla recurrente", body: "Definís el patrón una vez ('Lun a Vie, 06:00, R-12, cuadrilla A'). El sistema genera el plan diario y lo deja editable.", chips: ["semanal", "mensual", "editable"] },
{ num: "02", title: "Plan diario en ejecución", body: "Turnos, conductores, asistentes, vehículos, rutas. Drag-and-drop entre filas; el sistema re-balancea en vivo.", chips: ["drag & drop", "live", "validación"] },
{ num: "03", title: "Pronóstico de fin de turno", body: "El motor predice cuándo termina cada ruta del plan, comparando con el histórico. Desviaciones detectadas antes de que afecten al cliente.", chips: ["IA", "ETA", "histórico"] },
{ num: "04", title: "Historial confiable", body: "Cada plan ejecutado se firma al cierre de turno. Fundamento para reclamos, facturación y disputas con el cliente.", chips: ["firmado", "auditoría", "facturación"] },
],
},
{
tag: "GEOGRAFÍA",
title_a: "Cargá, configurá y manejá tu ", title_b: "mapa operativo", title_c: ".",
sub: "Rutas, secciones de calle, zonas y geocercas — todo dado de alta y editado desde el sistema, sin depender de planos en Excel ni KMLs sueltos. El cliente carga su geografía una vez y opera sobre ella.",
mock: ,
flip: false, mist: false,
modules: [
{ num: "01", title: "Rutas con paradas", body: "Secuencia ordenada de paradas o secciones, asociada a turno, periodicidad, total de paradas y próxima ejecución. Visible para chofer en cabina.", chips: ["paradas", "turno", "cabina"] },
{ num: "02", title: "Secciones de calle", body: "Tramos configurables — cuadras, manzanas, segmentos de avenida. Ideal para barrido, riego o limpieza, donde la unidad de trabajo es geográfica y no un punto.", chips: ["cuadras", "manzanas", "avenidas"] },
{ num: "03", title: "Zonas y geocercas", body: "Zonas agrupan paradas; geocercas disparan reglas (entrada, salida, tiempo dentro). Base para alertas, cobertura y municipios.", chips: ["polígonos", "reglas", "alertas"] },
],
},
{
tag: "EMERGENTE",
title_a: "Lo que ", title_b: "no estaba en el plan", title_c: ".",
sub: "Reclamos del ciudadano, órdenes variables del cliente, eventos no programados. El sistema los absorbe en la operación del día sin romper la planificación.",
mock: ,
flip: true, mist: true,
modules: [
{ num: "01", title: "Reclamos en pipeline", body: "Cuatro estados: gestión activa, agenda futura, pre-autorización y cierre. Cada reclamo se cierra con evento georreferenciado y opcionalmente foto.", chips: ["pipeline", "georef", "foto"] },
{ num: "02", title: "Reclamo → parada en ruta", body: "El despachador inserta un reclamo como parada en la ruta más cercana con un clic. El sistema recalcula ETA y notifica al chofer.", chips: ["1-clic", "re-ETA", "notificación"] },
{ num: "03", title: "Órdenes de trabajo variables", body: "Pedidos puntuales que no encajan en un servicio recurrente. Asignables a cuadrilla, con SLA propio y facturación independiente.", chips: ["B2B", "SLA propio", "facturación"] },
{ num: "04", title: "Eventos no planificados", body: "Retrasos, desvíos, paradas no agendadas, pérdida de tiempo justificada. Catalogados por tipo, fundamentan el análisis post-turno.", chips: ["pérdida tiempo", "justificación", "post-turno"] },
],
},
{
tag: "REGLAS",
title_a: "Reglas ", title_b: "customizables", title_c: " sin código.",
sub: "El motor de eventos complejos empaquetado como recetario configurable por el cliente. Disparador, condiciones, ventana y acción — sin tocar Esper crudo.",
mock: ,
flip: false, mist: false,
modules: [
{ num: "01", title: "Catálogo de recetas", body: "Recetas pre-armadas: frenada brusca, exceso de velocidad, salida de geocerca, sin descarga, parada prolongada. Toggle por cliente.", chips: ["pre-armadas", "toggle", "rápido"] },
{ num: "02", title: "Builder visual", body: "Constructor tipo Zapier para reglas custom. Disparador (telemetría, evento, geocerca) + condiciones + ventana temporal + acción.", chips: ["zapier-style", "no-code", "ventana"] },
{ num: "03", title: "Bandeja de alarmas", body: "Cada regla disparada genera alarma con vehículo, tipo, condición y motivo legible. Estados: nueva, vista, resuelta. Asignable a usuario.", chips: ["alarmas", "asignable", "estados"] },
{ num: "04", title: "Scope granular", body: "Reglas aplicables por vehículo, por tipo de servicio, por turno o por geocerca. Una regla con scope correcto reemplaza decenas duplicadas.", chips: ["por vehículo", "por turno", "por geocerca"] },
],
},
] : [
{
tag: "CATALOG",
title_a: "Define the ", title_b: "services", title_c: " you offer.",
sub: "Every service is the minimum unit of offer. Operation type, frequency, time window, assigned resources and forms — all configurable per customer, no code.",
mock: ,
flip: false, mist: false,
modules: [
{ num: "01", title: "Service type", body: "Collection, sweeping, irrigation, maintenance, B2B orders. With own frequency, time window and SLA.", chips: ["frequency", "SLA", "window"] },
{ num: "02", title: "Resources per service", body: "Number of assistants, vehicle type and required equipment. The system blocks invalid assignments at plan time.", chips: ["validation", "equipment", "crew"] },
{ num: "03", title: "AI cameras and metrics", body: "On-board AI cameras detect anomalies and services to perform in real time. They feed multi-industry metrics: kg collected, m² swept, m³ irrigated, service time, productive km.", chips: ["AI cameras", "anomalies", "multi-industry"] },
{ num: "04", title: "Configurable forms", body: "Attach a form to the service. Driver fills in-cabin at close — signed, georeferenced, exportable to PDF.", chips: ["in-cabin", "signature", "PDF"] },
],
},
{
tag: "PLANNING",
title_a: "Recurring ", title_b: "operative plans", title_c: ".",
sub: "Dispatchers don't build the day from scratch. Define weekly or monthly templates and the system instantiates the daily plan with real drivers, vehicles and routes.",
mock: ,
flip: true, mist: true,
modules: [
{ num: "01", title: "Recurring template", body: "Define the pattern once ('Mon–Fri, 06:00, R-12, crew A'). The system generates the daily plan and leaves it editable.", chips: ["weekly", "monthly", "editable"] },
{ num: "02", title: "Live daily plan", body: "Shifts, drivers, assistants, vehicles, routes. Drag-and-drop between rows; the system re-balances live.", chips: ["drag & drop", "live", "validation"] },
{ num: "03", title: "Shift-end forecast", body: "The engine predicts each route's finish time, benchmarked against history. Catch deviations before they hit the customer.", chips: ["AI", "ETA", "history"] },
{ num: "04", title: "Reliable history", body: "Every executed plan is signed at shift close. Foundation for complaints, billing and customer disputes.", chips: ["signed", "audit", "billing"] },
],
},
{
tag: "GEOGRAPHY",
title_a: "Load, configure and manage your ", title_b: "operational map", title_c: ".",
sub: "Routes, street sections, zones and geofences — all defined and edited from the system, no Excel maps or loose KMLs. The customer loads their geography once and operates on top of it.",
mock: ,
flip: false, mist: false,
modules: [
{ num: "01", title: "Routes with stops", body: "Ordered sequence of stops or sections, tied to shift, periodicity, total stops and next execution. Visible to driver in-cabin.", chips: ["stops", "shift", "in-cabin"] },
{ num: "02", title: "Street sections", body: "Configurable segments — city blocks, lots, avenue sub-stretches. Ideal for sweeping, irrigation or cleaning, where the unit of work is geographic, not a single point.", chips: ["blocks", "lots", "avenues"] },
{ num: "03", title: "Zones & geofences", body: "Zones group stops; geofences trigger rules (enter, exit, dwell). Foundation for alerts, coverage and municipalities.", chips: ["polygons", "rules", "alerts"] },
],
},
{
tag: "EMERGENT",
title_a: "What ", title_b: "wasn't in the plan", title_c: ".",
sub: "Citizen complaints, variable customer orders, unscheduled events. The system absorbs them into the day's operation without breaking planning.",
mock: ,
flip: true, mist: true,
modules: [
{ num: "01", title: "Complaint pipeline", body: "Four states: active management, future agenda, pre-authorization and close. Each closes with a georeferenced event and optional photo.", chips: ["pipeline", "geo", "photo"] },
{ num: "02", title: "Complaint → route stop", body: "Dispatcher inserts a complaint as a stop in the nearest route with one click. The system recalculates ETA and notifies the driver.", chips: ["1-click", "re-ETA", "notify"] },
{ num: "03", title: "Variable work orders", body: "One-off orders that don't fit a recurring service. Assignable to crew, with own SLA and independent billing.", chips: ["B2B", "own SLA", "billing"] },
{ num: "04", title: "Unplanned events", body: "Delays, deviations, off-agenda stops, justified loss-time. Cataloged by type, foundation for post-shift analysis.", chips: ["loss-time", "justify", "post-shift"] },
],
},
{
tag: "RULES",
title_a: "Customizable ", title_b: "rules", title_c: ", no code.",
sub: "The complex-event engine packaged as a customer-configurable recipe book. Trigger, conditions, time window and action — no raw Esper.",
mock: ,
flip: false, mist: false,
modules: [
{ num: "01", title: "Recipe catalog", body: "Pre-built recipes: hard braking, speeding, geofence breach, no dump, prolonged idle. Per-customer toggle.", chips: ["pre-built", "toggle", "fast"] },
{ num: "02", title: "Visual builder", body: "Zapier-style builder for custom rules. Trigger (telemetry, event, geofence) + conditions + time window + action.", chips: ["zapier-style", "no-code", "window"] },
{ num: "03", title: "Alarm inbox", body: "Each fired rule generates an alarm with vehicle, type, condition and human-readable reason. States: new, seen, resolved. Assignable.", chips: ["alarms", "assignable", "states"] },
{ num: "04", title: "Granular scope", body: "Rules per vehicle, per service type, per shift or per geofence. One rule with the right scope replaces dozens of duplicates.", chips: ["per vehicle", "per shift", "per geofence"] },
],
},
];
// ── 3 AI cases (live + pilot + proposed, all vehicle-mounted)
const aiCases = isEs ? [
{
caseNum: "01", industry: "RESIDUOS · MUNICIPAL",
title: "Detección automática de basura en vía pública",
problem: "El supervisor dependía de denuncias y rondas manuales para detectar acumulación de basura, restos de poda, escombros o microbasurales. Cobertura espacial baja, latencia alta, evidencia frágil.",
solution: "Modelo de visión sobre la cámara frontal del camión de recolección. Clasifica y localiza basura por tipo (orgánica, voluminosa, escombros, microbasural). Bounding boxes con score, asociados a ruta y kilómetro.",
metrics: [{ num: "0.91", label: "PRECISIÓN MEDIA" }, { num: "+340 km", label: "MONITOREADOS / DÍA" }, { num: "−47%", label: "TIEMPO RESPUESTA" }],
status: "live", mock: , flip: false, mist: false,
},
{
caseNum: "02", industry: "RESIDUOS · MUNICIPAL",
title: "Predicción de demanda de servicios",
problem: "Picos de reclamos en zonas y días específicos generaban sobrecarga puntual y rutas sub-dimensionadas. El plan operativo se ajustaba reactivamente, no anticipadamente.",
solution: "Modelo de series temporales que combina histórico de reclamos, calendario (feriados, lluvia, recolección retrasada) y características de zona. Predice volumen por zona/día y sugiere refuerzo de cuadrilla en el plan.",
metrics: [{ num: "0.89", label: "CONF. MEDIA" }, { num: "−31%", label: "RECLAMOS NO ATENDIDOS" }, { num: "+22%", label: "USO DE FLOTA" }],
status: "pilot", mock: , flip: true, mist: true,
},
{
caseNum: "03", industry: "VIALIDAD · INFRAESTRUCTURA",
title: "Detección de daño en pavimento",
problem: "Inventario de daños (baches, fisuras, hundimientos) hecho con relevamientos manuales semestrales. Inversión de mantenimiento mal asignada por datos desactualizados.",
solution: "Modelo de visión sobre cámaras de vehículos institucionales (basura, transporte, control). Cada paso registra y clasifica daños por severidad (S1–S3). El mapa de pavimento se actualiza solo, sin recorridos dedicados.",
metrics: [{ num: "0.88", label: "F1 SCORE" }, { num: "12×", label: "FRECUENCIA RELEVAMIENTO" }, { num: "−54%", label: "COSTO INVENTARIO" }],
status: "proposed", mock: , flip: false, mist: false,
},
] : [
{
caseNum: "01", industry: "WASTE · MUNICIPAL",
title: "Automatic litter detection on public roads",
problem: "Supervisors relied on citizen reports and manual patrols to detect litter, pruning waste, debris or illegal dumps. Low spatial coverage, high latency, fragile evidence.",
solution: "Vision model on collection-truck dashcam. Classifies and localizes litter by type (organic, bulk, debris, dump). Bounding boxes with confidence score, tied to route and kilometer.",
metrics: [{ num: "0.91", label: "MEAN PRECISION" }, { num: "+340 km", label: "MONITORED / DAY" }, { num: "−47%", label: "RESPONSE TIME" }],
status: "live", mock: , flip: false, mist: false,
},
{
caseNum: "02", industry: "WASTE · MUNICIPAL",
title: "Service demand forecasting",
problem: "Complaint spikes in specific zones and days created localized overload and under-sized routes. The plan was adjusted reactively, never anticipated.",
solution: "Time-series model combining complaint history, calendar features (holidays, rain, delayed collection) and zone characteristics. Predicts volume per zone/day and suggests crew reinforcement in the plan.",
metrics: [{ num: "0.89", label: "MEAN CONF" }, { num: "−31%", label: "UNRESOLVED" }, { num: "+22%", label: "FLEET USE" }],
status: "pilot", mock: , flip: true, mist: true,
},
{
caseNum: "03", industry: "ROADS · INFRASTRUCTURE",
title: "Pavement damage detection",
problem: "Damage inventory (potholes, cracks, sinkholes) built from semi-annual manual surveys. Maintenance investment misallocated by outdated data.",
solution: "Vision model on cameras of institutional vehicles (waste, transit, monitoring). Every pass logs and classifies damage by severity (S1–S3). The pavement map updates itself, no dedicated surveys.",
metrics: [{ num: "0.88", label: "F1 SCORE" }, { num: "12×", label: "SURVEY FREQ" }, { num: "−54%", label: "INVENTORY COST" }],
status: "proposed", mock: , flip: false, mist: false,
},
];
const aiHead = isEs ? {
eyebrow: "// 05 · IA CUSTOMIZADA",
title_a: "Modelos entrenados ", title_b: "para tu industria", title_c: ".",
sub: "Gropp Flow es la plataforma; los modelos de IA son verticales. Cada cliente entrena modelos sobre sus propios datos — cámaras de su flota, telemetría, geometría — y los conecta a sus rutas, planes y reglas. Tres casos en operación de vehículos.",
} : {
eyebrow: "// 05 · CUSTOM AI",
title_a: "Models trained ", title_b: "for your industry", title_c: ".",
sub: "Gropp Flow is the platform; AI models are vertical. Each customer trains models on their own data — fleet cameras, telemetry, geometry — and wires them to routes, plans and rules. Three cases in vehicle operations.",
};
const statusLabel = (s, isEs) => s === "live" ? (isEs ? "EN PRODUCCIÓN" : "LIVE") : s === "pilot" ? (isEs ? "PILOTO" : "PILOT") : (isEs ? "PROPUESTO" : "PROPOSED");
const statusColor = s => s === "live" ? "oklch(0.55 0.14 145)" : s === "pilot" ? "var(--accent)" : "oklch(0.65 0.18 35)";
return (
<>
{/* SECCIÓN 04 — Módulos (sin head, arrancan directo) */}
{modules.map((m, i) => (
||"assets/rules-real.png"})
||"assets/detection-litter.png"})