/* global React */
const { useEffect, useRef, useState, useMemo } = React;

// Shared data
const FEATURES = [
  { icon: 'pin',     title: 'Localización en tiempo real', desc: 'Ubica tu vehículo al instante, las 24 horas, desde cualquier dispositivo.' },
  { icon: 'engine',  title: 'Paro de motor a distancia',   desc: 'Detén el vehículo de forma remota cuando algo no encaje.' },
  { icon: 'route',   title: 'Almacén de rutas',            desc: 'Historial completo de los últimos 30 días, exportable.' },
  { icon: 'panic',   title: 'Botón de pánico en cabina',   desc: 'Activa una alerta inmediata al centro de monitoreo.' },
  { icon: 'speed',   title: 'Alerta de exceso de velocidad', desc: 'Notificaciones cuando se rebasa el umbral configurado.' },
  { icon: 'ignition',title: 'Alerta de encendido',         desc: 'Avisa cada vez que el motor arranca, día o noche.' },
  { icon: 'fence',   title: 'Geo-cerca',                   desc: 'Define zonas seguras y recibe avisos al entrar o salir.' },
  { icon: 'mirror',  title: 'Cuenta espejo',               desc: 'Comparte el monitoreo con un familiar o gestor de flotilla.' },
];

const EXTRAS = [
  { tag: 'Botón',     title: 'Botón de pánico',     desc: 'Discreto y de respuesta inmediata.' },
  { tag: 'Audio',     title: 'Micrófono en cabina', desc: 'Escucha el entorno desde la app.' },
  { tag: 'Video',     title: 'Dash cam',            desc: 'Video frontal y de cabina sincronizado.' },
  { tag: 'Solar',     title: 'GPS de carga solar',  desc: 'Ideal para cajas y contenedores sin batería.' },
  { tag: 'Magnético', title: 'GPS portátil magnético', desc: 'Oculto, recolocable, perfecto para carga.' },
  { tag: '4G',        title: 'Antijammer 4G',       desc: 'Resistente a inhibidores de señal.' },
];

const VEHICLES = [
  { name: 'Carros',     hint: 'Auto familiar' },
  { name: 'Camionetas', hint: 'SUV / Pick-up' },
  { name: 'Motos',      hint: 'Trabajo / personal' },
  { name: 'Camiones',   hint: 'Carga ligera y pesada' },
  { name: 'Tráilers',   hint: 'Logística nacional' },
];

// Alerts catalog
const ALERTS = [
  { cat: 'Estado',    name: 'Baja batería' },
  { cat: 'Estado',    name: 'Vibración' },
  { cat: 'Estado',    name: 'Movimiento' },
  { cat: 'Estado',    name: 'Luz' },
  { cat: 'Estado',    name: 'Corte de alimentación' },
  { cat: 'Estado',    name: 'Motor encendido / apagado' },
  { cat: 'Estado',    name: 'Exceso de motor encendido y estacionado' },
  { cat: 'Estado',    name: 'Exceso de motor apagado y estacionado' },
  { cat: 'Estado',    name: 'Entrada 2 encendida' },

  { cat: 'Conducción', name: 'Excesiva velocidad' },
  { cat: 'Conducción', name: 'Rápida aceleración' },
  { cat: 'Conducción', name: 'Rápida desaceleración' },
  { cat: 'Conducción', name: 'Curva forzada' },
  { cat: 'Conducción', name: 'Baches en la carretera' },
  { cat: 'Conducción', name: 'Correr' },

  { cat: 'Geolocalización', name: 'Fuera de cerca / En cerca' },
  { cat: 'Geolocalización', name: 'Fuera de área / En área' },
  { cat: 'Geolocalización', name: 'Fuera de línea' },
  { cat: 'Geolocalización', name: 'SOS' },

  { cat: 'ADAS', name: 'Advertencia de colisión frontal' },
  { cat: 'ADAS', name: 'Advertencia de cambio de carril' },
  { cat: 'ADAS', name: 'Colisión de peatones' },
  { cat: 'ADAS', name: 'Distancia del vehículo' },
  { cat: 'ADAS', name: 'Desviación de camino' },

  { cat: 'DMS', name: 'Conducción por fatiga' },
  { cat: 'DMS', name: 'Conducción distraída' },
  { cat: 'DMS', name: 'Uso de teléfono al conducir' },
  { cat: 'DMS', name: 'Fumar y conducir' },
  { cat: 'DMS', name: 'Conductor anormal (oclusión)' },
  { cat: 'DMS', name: 'Bloqueo de lente' },

  { cat: 'Eventos', name: 'Colisión' },
  { cat: 'Eventos', name: 'Volcadura' },
  { cat: 'Eventos', name: 'Fuga de aceite' },
  { cat: 'Eventos', name: 'Recordatorio de repostaje' },
  { cat: 'Eventos', name: 'Puerta abierta / cerrada' },
  { cat: 'Eventos', name: 'Persona detectada' },
  { cat: 'Eventos', name: 'Movimiento detectado' },
];
const ALERT_CATS = ['Todas', 'Estado', 'Conducción', 'Geolocalización', 'ADAS', 'DMS', 'Eventos'];

const CLIENTS = ['TPT', 'Agrilombardia', 'DHL', 'Traxion', 'Shacman', 'Fotón'];
const PAYMENTS = ['Transferencia', 'Depósito', 'Tarjeta de crédito', 'Pago referenciado'];

// Mexican cities for hero map (relative coords inside hero map viewBox 1000x600)
const CITIES = [
  { name: 'Tijuana',    x:  85, y: 110, status: 'on'   },
  { name: 'Hermosillo', x: 220, y: 215, status: 'on'   },
  { name: 'Chihuahua',  x: 360, y: 195, status: 'on'   },
  { name: 'Monterrey',  x: 540, y: 250, status: 'on'   },
  { name: 'Guadalajara',x: 410, y: 360, status: 'on'   },
  { name: 'CDMX',       x: 530, y: 405, status: 'on'   },
  { name: 'Puebla',     x: 580, y: 425, status: 'on'   },
  { name: 'Veracruz',   x: 640, y: 415, status: 'alert'},
  { name: 'Mérida',     x: 830, y: 380, status: 'on'   },
  { name: 'Cancún',     x: 905, y: 360, status: 'on'   },
  { name: 'Acapulco',   x: 510, y: 480, status: 'on'   },
  { name: 'Mazatlán',   x: 320, y: 320, status: 'on'   },
  { name: 'León',       x: 470, y: 380, status: 'alert'},
  { name: 'Oaxaca',     x: 620, y: 470, status: 'on'   },
  { name: 'La Paz',     x: 235, y: 305, status: 'on'   },
];

// Approximate Mexico path (mainland + Baja). Stylized, not cartographic.
// viewBox 1000 600
const MEXICO_MAINLAND_PATH = "M 290,180 L 320,135 L 380,118 L 460,128 L 520,160 L 555,205 L 615,240 L 680,265 L 720,295 L 730,325 L 720,360 L 760,355 L 825,355 L 890,355 L 940,360 L 935,395 L 905,425 L 870,455 L 830,475 L 790,490 L 740,510 L 695,520 L 660,510 L 625,490 L 600,475 L 575,485 L 540,495 L 510,490 L 475,455 L 440,420 L 405,395 L 365,375 L 320,345 L 285,310 L 260,275 L 250,240 L 270,205 Z";
const MEXICO_BAJA_PATH = "M 80,105 L 105,105 L 130,135 L 155,170 L 180,210 L 210,255 L 235,295 L 255,320 L 245,330 L 220,310 L 190,275 L 160,235 L 130,195 L 105,155 L 85,125 Z";