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

const { Icon, useReveal, Navbar, Footer, useSiteTweaks, SiteTweaks, PrivacyBox, Galeria } = window;

const SHOTS = [
  { src: "assets/masys/dashboard.webp", t: "Dashboard", d: "Puntuaciones de seguridad y salud del equipo, cambios desde la última visita y resumen por módulo." },
  { src: "assets/masys/favoritos.webp", t: "Gestor de favoritos", d: "Carga los marcadores de Chrome, Edge o Firefox por perfil, comprueba los enlaces rotos, reorganiza y vuelve a escribirlos en el navegador o migra a otro." },
  { src: "assets/masys/contrasenas.webp", t: "Auditoría de contraseñas", d: "Revisa la fortaleza de las contraseñas guardadas, detecta las reutilizadas y comprueba si están expuestas en filtraciones (Have I Been Pwned, sin enviar la contraseña)." },
  { src: "assets/masys/procesos.webp", t: "Procesos", d: "Tabla de procesos con estado, prioridad, usuario, memoria y CPU, panel de detalle, notas y acciones (finalizar, suspender, reanudar, cambiar prioridad)." },
  { src: "assets/masys/firewall.webp", t: "Firewall", d: "Reglas del cortafuegos con dirección, acción, puerto y perfil, estado de los tres perfiles (Dominio, Privado, Público) y aviso de reglas demasiado amplias." },
  { src: "assets/masys/servicios.webp", t: "Servicios", d: "Servicios de Windows con estado y tipo de inicio: iniciar, detener y reiniciar, cambiar el arranque, notas y detección de servicios sospechosos." },
  { src: "assets/masys/software.webp", t: "Software instalado", d: "Inventario de programas con editor, versión y fecha, lista negra, filtros (antiguos, sin soporte) y desinstalación." },
  { src: "assets/masys/usuarios.webp", t: "Usuarios y cuentas", d: "Cuentas locales, de dominio y del sistema con estado, grupos, última conexión y tipo de vínculo (local, Microsoft, Entra ID, dominio)." },
  { src: "assets/masys/actualizaciones.webp", t: "Actualizaciones de Windows", d: "Actualizaciones pendientes e instaladas con criticidad y tamaño, e instalación de un KB concreto." },
  { src: "assets/masys/drivers.webp", t: "Controladores", d: "Controladores instalados con fabricante, versión y firma, detección de problemas y copia de seguridad de los de terceros." },
  { src: "assets/masys/tareas.webp", t: "Tareas programadas", d: "Tareas del programador de Windows con próxima ejecución, tareas ocultas y detección de tareas sospechosas (bypass/ofuscación)." },
  { src: "assets/masys/wifi.webp", t: "Redes WiFi", d: "Perfiles WiFi guardados con su clave, aviso de redes abiertas o WEP, código QR para compartir y escaneo de redes cercanas." },
  { src: "assets/masys/perfiles.webp", t: "Perfiles de características", d: "Antes de aplicar un perfil, MASys enseña qué se activará, qué se quitará y qué ya está como pide." },
  { src: "assets/masys/iconos.webp", t: "Iconos", d: "Bibliotecas de iconos de Windows con su índice e ID, y extracción a ICO o PNG." },
  { src: "assets/masys/caracteristicas.webp", t: "Características de Windows", d: "Características opcionales y capacidades (RSAT, .NET, IIS…) en una sola tabla, con activación y desactivación por fila o en lote." },
  { src: "assets/masys/extensiones.webp", t: "Extensiones y protocolos", d: "Qué programa abre cada extensión y protocolo, detección de elecciones rotas, restablecimiento y exportación o importación de las asociaciones." }
];

/* Capturas de la app móvil MASysMov (bloque propio) */
const MOBILE_SHOTS = [
  { src: "assets/masys/movil_seguridad.webp", t: "Seguridad y rastreadores", d: "Permisos delicados, apps instaladas fuera de tiendas y accesibilidad activa; bloqueo de rastreadores de publicidad y analítica con el recuento de consultas cortadas." },
  { src: "assets/masys/movil_apps.webp", t: "Apps y permisos", d: "Inventario completo de aplicaciones, en uso y todas, con los permisos concedidos a cada una." },
  { src: "assets/masys/movil_red.webp", t: "Red y consumo", d: "Conexiones del dispositivo y consumo de datos por aplicación, para detectar quién gasta de más." },
  { src: "assets/masys/movil_bateria.webp", t: "Batería y almacenamiento", d: "Estado y salud de la batería y reparto del espacio ocupado en el teléfono." },
  { src: "assets/masys/movil_ficha.webp", t: "Ficha del móvil y cuentas", d: "Modelo, Android, parche de seguridad y hardware del dispositivo, y las cuentas configuradas." },
  { src: "assets/masys/movil_rendimiento.webp", t: "Rendimiento y copias de apps", d: "Procesos y rendimiento en vivo, y copia de los APK instalados para guardarlos o reinstalarlos." }
];

const MASYS_EMAIL = "masys@masoft.es";

// navbar principal (72) + subcabecera (~52)
const NAV_OFFSET = 126;

const SECTIONS = [
  { id: "que-es", label: "Qué es" },
  { id: "dashboard", label: "Dashboard" },
  { id: "categorias", label: "Las 6 categorías" },
  { id: "pantallas", label: "Pantallas" },
  { id: "masysmov", label: "MASysMov" },
  { id: "transversal", label: "Herramientas transversales" },
  { id: "copias", label: "Copias de seguridad" },
  { id: "informes", label: "Informes" },
  { id: "publico", label: "Para quién" },
  { id: "requisitos", label: "Requisitos" },
  { id: "contacto", label: "Contacto" }
];

const scrollToId = (id) => {
  const el = document.getElementById(id);
  if (!el) return;
  const y = el.getBoundingClientRect().top + window.pageYOffset - NAV_OFFSET;
  window.scrollTo({ top: Math.max(0, y), behavior: "smooth" });
};

/* ---------- Subcabecera propia ---------- */
const MSSubnav = ({ active }) => (
  <div className="mp-subnav">
    <div className="container">
      <nav className="mp-subnav__inner">
        {SECTIONS.map(s => (
          <a
            key={s.id}
            href={`#${s.id}`}
            className={active === s.id ? "is-active" : undefined}
            aria-current={active === s.id ? "true" : undefined}
            onClick={(e) => { e.preventDefault(); scrollToId(s.id); }}
          >
            {s.label}
          </a>
        ))}
      </nav>
    </div>
  </div>
);

/* ---------- Las 6 categorías + sus secciones ---------- */
const CATEGORIES = [
  {
    icon: "cpu",
    name: "Sistema",
    intro: "Estado y configuración del núcleo del equipo.",
    items: [
      ["Sistema", "Fichas de hardware, sistema operativo, placa base y BIOS. Reinicio directo en la configuración de firmware (BIOS/UEFI)."],
      ["Registro de Windows", "Búsqueda en el registro, escaneo de entradas huérfanas, copia de seguridad de ramas antes de tocar y borrado seguro."],
      ["Iconos", "Bibliotecas de iconos de Windows con extracción a ICO y PNG, reconstrucción de las cachés de iconos y miniaturas, accesos directos rotos, espaciado y posición de los iconos del escritorio, prioridad de los iconos superpuestos (OneDrive, Dropbox, Git…) e iconos personalizados de unidades."],
      ["Extensiones y programas", "Qué programa abre cada extensión y cada protocolo, calculado igual que el Explorador. Detecta elecciones rotas, las restablece y exporta o importa las asociaciones en el XML de DISM."],
      ["Características de Windows", "Características opcionales y capacidades (RSAT, OpenSSH, idiomas…) en una sola tabla, perfiles listos — puesto de soporte IT, desarrollo, endurecer el equipo, programas antiguos — que enseñan antes qué cambian, e instalación de .NET 3.5 sin internet."],
      ["Estabilidad", "Pantallazos azules con el código explicado y su causa habitual, análisis del volcado para saber qué controlador lo provocó, apagados inesperados, apps que se cierran o dejan de responder e índice de estabilidad de Windows."],
      ["Procesos", "Tabla con panel de detalle y notas, cambio de prioridad, finalizar / suspender / reanudar y detección de procesos sospechosos."],
      ["Programas de Inicio", "Claves Run de HKLM/HKCU (32 y 64 bits) y carpetas de inicio de todos los usuarios. Activar/desactivar por fila o en lote usando la misma clave que el Administrador de tareas, con verificación de firma digital."],
      ["Servicios", "Iniciar / detener / reiniciar, cambio de tipo de arranque, notas, y detección de servicios sospechosos, con rutas sin comillas o atascados."],
      ["Actualizaciones de Windows", "Listado de actualizaciones, instalación de un KB concreto y restablecimiento completo de Windows Update."],
      ["Variables de Entorno", "Alta, edición y borrado de variables, desglose y búsqueda dentro de PATH, copia del registro antes de escribir e historial de cambios."],
      ["Eventos del Sistema", "Consulta del visor de eventos con detalle por evento, filtros y aviso de eventos críticos recientes."]
    ]
  },
  {
    icon: "grid",
    name: "Disco y Archivos",
    intro: "Almacenamiento local, recursos compartidos y contenido.",
    items: [
      ["Carpetas Compartidas", "Análisis de los recursos compartidos del equipo o de una ruta concreta, con control de profundidad, vista jerárquica (recurso → usuario → permisos) o de carpetas, e historial de conexiones."],
      ["Unidades Remotas", "Unidades de red mapeadas: conectar, desconectar, probar y ver el historial de conexiones."],
      ["Contenido", "Búsqueda de archivos y carpetas por nombre o expresión regular, extensión, tamaño y fecha, acotada a un ámbito (perfil de usuario, escritorio o ubicación libre). Gestión de la papelera de reciclaje."],
      ["Discos Duros", "Salud de cada disco, verificación con CHKDSK y búsqueda de archivos duplicados grandes (≥ 500 MB) que solo propone, nunca borra."]
    ]
  },
  {
    icon: "refresh",
    name: "Red",
    intro: "Conectividad, adaptadores y exposición del equipo.",
    items: [
      ["WiFi", "Perfiles guardados con su clave, generación de código QR para compartir una red con un móvil, y escaneo de redes cercanas con conexión directa."],
      ["Conexiones de Red", "Conexiones activas con resolución de nombre de host y menú contextual."],
      ["Firewall", "Reglas del cortafuegos con cambio de acción/estado, comprobación de puertos concretos y análisis de puertos abiertos poco habituales."],
      ["Conexiones Remotas", "Sesiones y configuración de escritorio remoto (RDP)."],
      ["Redes", "Adaptadores de red: habilitar, deshabilitar y reiniciar; vaciado de la caché DNS."],
      ["Red Local", "Tabla ARP: equipos vistos en el segmento de red local."],
      ["Herramientas de red", "Diagnóstico por capas de cualquier destino — de la tarjeta de red a Microsoft 365 — con investigación de puertos e informe técnico o para el cliente. Consultas DNS en varios servidores, WHOIS (RDAP), cabeceras web, certificado TLS e IP pública."]
    ]
  },
  {
    icon: "lock",
    name: "Usuarios y Seguridad",
    intro: "Identidades, credenciales, dominio y endurecimiento.",
    items: [
      ["Usuarios", "Cuentas locales, de dominio y del sistema: activar/desactivar, permisos e historial, con exportación."],
      ["Credenciales", "Administrador de credenciales de Windows: probar, añadir, editar y eliminar entradas."],
      ["Certificados", "Almacenes de certificados del equipo y del usuario, con exportación y aviso de certificados sospechosos."],
      ["Cuentas de Correo", "Cuentas y firmas de Outlook, con exportación de buzones a ficheros PST independientes."],
      ["Navegadores y Nube", "Firefox, Chrome y Edge por perfil: marcadores, historial, descargas, extensiones y contraseñas guardadas. Gestor de favoritos para cargarlos, revisarlos, editarlos, comprobar enlaces rotos, reorganizarlos y volver a escribirlos en el navegador o migrarlos a otro (exporta e importa en formato estándar). Auditoría de contraseñas: fortaleza, reutilizadas y comprobación de si están expuestas en filtraciones conocidas mediante Have I Been Pwned, sin que la contraseña salga del equipo (k-anonymity). Cuentas y carpetas vinculadas de OneDrive."],
      ["Active Directory", "Consulta del dominio mediante RSAT, con instalador de RSAT integrado si no está presente."],
      ["Políticas de Grupo", "Estado de unión a dominio / Entra ID (dsregcmd), GPO aplicadas (gpresult) e inscripción en Intune/MDM. No depende de RSAT: siempre disponible."],
      ["Sesiones Activas", "Sesiones de usuario abiertas en el equipo en este momento."],
      ["Seguridad", "Fichas de antivirus, cortafuegos, cifrado (BitLocker) y endurecimiento (UAC, SMBv1, PowerShell Remoting, AutoRun, Credential Guard, protección LSA…), con informe de seguridad."]
    ]
  },
  {
    icon: "image",
    name: "Hardware y Periféricos",
    intro: "Dispositivos, controladores e impresión.",
    items: [
      ["Administrador de Dispositivos", "Controladores instalados, copia de seguridad completa de los controladores de terceros (para antes de reinstalar Windows), dispositivos ocultos o fantasma y dispositivos con problema."],
      ["Impresoras", "Impresoras instaladas, cola de impresión por impresora (pausar / reanudar / eliminar trabajos) y reinicio del servicio de cola (Spooler)."],
      ["Dispositivos USB", "Dispositivos actuales, historial completo de almacenamiento USB conectado alguna vez al equipo, y detección de dispositivos sospechosos tipo BadUSB (mismo VID/PID presentándose con varias clases a la vez)."],
      ["Gráficas y Monitores", "Adaptadores gráficos y monitores; cambio de resolución de forma independiente por monitor, con cuenta atrás de seguridad para confirmar."],
      ["Bluetooth", "Adaptadores y dispositivos Bluetooth emparejados."],
      ["Móvil Android", "Recibe por la red local, cifrados con AES-256, los informes de la app MASysMov: ficha del móvil, hallazgos de seguridad, apps y permisos, conexiones y rastreadores, espacio, batería, procesos, evolución y copias de apps. También comprueba si un puerto de tu red se ve desde internet."]
    ]
  },
  {
    icon: "list",
    name: "Administración",
    intro: "Software, tareas, licencias y bases de datos.",
    items: [
      ["Software Instalado", "Inventario de programas con lista negra, desinstalación y menú contextual."],
      ["Tareas Programadas", "Tareas del programador de Windows con detección de tareas sospechosas y calendario de próximas ejecuciones."],
      ["Historial de PowerShell", "Historial de comandos de PowerShell con detección de bypass y ofuscación, y un lanzador de scripts .ps1 propios del técnico."],
      ["Licencias", "Estado de activación de Windows y de Office / Microsoft 365 leído de la plataforma de protección de software (SPP)."],
      ["Gestor de Paquetes", "Paquetes de winget: instalación individual o en lote en segundo plano y bloqueo/desbloqueo de la actualización de un paquete concreto."],
      ["SQL Server", "Detección de instancias de SQL Server, Express y LocalDB por registro; control de sus servicios (motor y agente) y copia de seguridad .bak de las bases de datos."],
      ["Inventario de migración", "Todo lo que hay que tener en cuenta al cambiar de equipo, en 18 categorías y sin copiar datos ni contraseñas. En el equipo nuevo dice qué falta, reinstala los programas con winget y genera una lista de comprobación imprimible."]
    ]
  }
];

const TRANSVERSAL = [
  { icon: "check", h: "Soporte contextual", p: "Un botón por sección que reúne las reparaciones habituales (SFC/DISM, punto de restauración, análisis de memoria, reinicio del Explorador, restablecer Windows Update, vaciar DNS…) y, además, los problemas detectados sobre los datos que ya tienes cargados: servicios o tareas sospechosos, PATH inseguro, discos con avisos… Cada aviso se puede validar para dejar de mostrarlo." },
  { icon: "lock", h: "Credenciales alternativas", p: "Ejecuta los análisis con otro usuario (DOMINIO\\Usuario o usuario@dominio) sin cerrar la aplicación — pensado para inspeccionar recursos y equipos remotos a los que tu sesión actual no llega." },
  { icon: "search", h: "Búsqueda global", p: "Busca un término en los datos de todas las secciones cargadas a la vez, sin ir pestaña por pestaña." },
  { icon: "refresh", h: "Snapshots del sistema", p: "Guarda el estado completo del equipo en un fichero y compáralo con otro momento posterior para ver exactamente qué ha cambiado." },
  { icon: "grid", h: "Perfiles de navegación", p: "Muestra, oculta y reordena las secciones, y guarda configuraciones con nombre para cada tipo de intervención. El perfil «MASys» es el predeterminado y queda protegido." },
  { icon: "moon", h: "Tema e integración", p: "Tema claro y oscuro, icono en la bandeja del sistema y ventana de trabajo amplia. Aplicación de escritorio: sin agente que instalar y sin conexión a la nube." }
];

const BACKUPS = [
  ["Registro de Windows", "HKLM\\SOFTWARE, HKLM\\SYSTEM y HKCU."],
  ["Credenciales y accesos", "Administrador de credenciales (con sus claves DPAPI), perfiles WiFi con clave, SSH y Git."],
  ["Navegadores", "Marcadores, contraseñas, historial, cookies y sesiones de un perfil."],
  ["Configuración del sistema", "Firewall, tareas, servicios, variables de entorno, red, impresoras, directiva local y certificados."],
  ["Correo", "Configuración de cuentas y firmas de Outlook."],
  ["Perfil de usuario", "Escritorio, Documentos, Imágenes, Vídeos, Música, Descargas y AppData\\Roaming."],
  ["Nube", "Cuentas y carpetas vinculadas de OneDrive."],
  ["Configuración de MASys", "Ajustes propios: lista negra, vínculos winget, avisos validados y catálogo de scripts."],
  ["Bases de datos SQL Server", "BACKUP DATABASE (.bak) de una instancia local, con autenticación de Windows."],
  ["Forense / auditoría", "Captura pericial con el motor MaPeriT — en caliente sobre el equipo en marcha o en frío sobre un disco conectado sin arrancar — con consola elevada, informe HTML y cadena de custodia."]
];

const AUDIENCE = [
  { icon: "check", h: "Técnicos de sistemas y SAT", p: "Todo el diagnóstico, el inventario y las reparaciones de un equipo en una sola ventana, sin saltar entre veinte herramientas de Windows." },
  { icon: "refresh", h: "MSP y soporte IT gestionado", p: "Inventario y auditoría reproducibles, informes por equipo y snapshots para demostrar qué cambió entre dos visitas." },
  { icon: "lock", h: "Administradores de dominio", p: "Estado de AD, GPO, Intune, licencias de Microsoft 365, sesiones y credenciales, con credenciales alternativas para equipos remotos." },
  { icon: "file-text", h: "Peritos y auditorías internas", p: "Captura forense integrada (motor MaPeriT), informe de seguridad y exportación completa del estado del equipo." }
];

const REQS = [
  ["Sistema operativo", "Windows 10 y Windows 11."],
  ["Permisos", "MASys pide permisos de administrador al abrirse: los necesitan las reparaciones, los servicios, las características de Windows, el firewall y los controladores."],
  ["Instalación", "Instalador por usuario (no necesita administrador para instalar) o versión portable para llevar en un USB. Al actualizar o desinstalar se conservan los datos, informes y copias."],
  ["Despliegue", "Instalación silenciosa (/VERYSILENT) para GPO o scripts de administración."],
  ["Formato", "Aplicación de escritorio. Sin agente, sin servicio en segundo plano y sin conexión a la nube."],
  ["Opcionales", "RSAT para Active Directory (con instalador integrado), winget para el gestor de paquetes y la reinstalación en migraciones, sqlcmd para copiar bases de datos SQL Server, internet para las consultas de red y MASysMov en un móvil Android de la misma red para la sección Móvil Android."],
  ["Exportación", "Informes en CSV, HTML, PDF y Excel por sección o de todo el equipo."]
];

const DASHBOARD = [
  { icon: "check", h: "Salud del equipo", p: "Puntuación de 0 a 100, junto a la de seguridad, con sus motivos: pantallazos azules, apagados inesperados, apps que fallan, avisos de soporte y espacio libre. Cada motivo lleva a la sección donde se arregla." },
  { icon: "refresh", h: "Cambios desde la última visita", p: "Cada sincronización guarda una foto del equipo y la compara con la anterior: programas, servicios, inicio, tareas, usuarios, controladores, firewall, actualizaciones, certificados, impresoras y USB nuevos, quitados o cambiados. Se puede comparar con cualquier visita guardada." },
  { icon: "grid", h: "Resumen por módulo", p: "Fichas grandes con medidor, valor, detalle y estado en color — verde, ámbar o rojo — de cada módulo con datos, de cinco en cinco." }
];

/* ---------- Tarjeta de categoría ---------- */
const CategoryCard = ({ c }) => (
  <article className="ms-cat reveal">
    <header className="ms-cat__head">
      <span className="ms-cat__ic"><Icon name={c.icon} size={20}/></span>
      <div>
        <h3>{c.name}</h3>
        <p>{c.intro} · {c.items.length} secciones</p>
      </div>
    </header>
    <ul className="ms-cat__list">
      {c.items.map(([n, d]) => (
        <li key={n}><b>{n}</b><span>{d}</span></li>
      ))}
    </ul>
  </article>
);

/* ---------- Formulario de contacto independiente ---------- */
const MasysContact = () => {
  const [form, setForm] = useState({ name: "", email: "", company: "", phone: "", message: "", accept: false });
  const [state, setState] = useState("idle");
  const [showTerms, setShowTerms] = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message || !form.accept) return;
    setState("sending");
    try {
      const res = await fetch("api/masys_contact.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form)
      });
      const data = await res.json();
      setState(data.ok ? "done" : "error");
    } catch {
      setState("error");
    }
  };

  return (
    <section className="section" id="contacto" style={{ paddingTop: 20 }}>
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Contacto MASys</span>
            <h2>Solicita información, una demostración o presupuesto.</h2>
          </div>
          <p className="section-head__r">
            Canal exclusivo de MASys. Escríbenos y te respondemos con la documentación,
            los requisitos y las condiciones de licenciamiento por número de equipos o técnicos.
          </p>
        </div>

        <div className="contact reveal">
          <div className="contact__info">
            <p style={{ fontSize: 16, color: "var(--ink-2)", maxWidth: 380 }}>
              Cuéntanos tu escenario — parque de equipos, dominio o grupos de trabajo, si necesitas
              el módulo forense — y preparamos una propuesta a medida. Sin compromiso.
            </p>
            <ul>
              <li>
                <Icon name="mail" size={20}/>
                <div><b><a href={`mailto:${MASYS_EMAIL}`} style={{ color: "inherit" }}>{MASYS_EMAIL}</a></b><span>Consulta directa sobre MASys</span></div>
              </li>
              <li>
                <Icon name="file-text" size={20}/>
                <div><b>Documentación bajo petición</b><span>Manual completo y checklist de despliegue</span></div>
              </li>
              <li>
                <Icon name="check" size={20}/>
                <div><b>Demostración guiada</b><span>Te enseñamos la consola sobre un equipo real</span></div>
              </li>
            </ul>
          </div>

          <div className="contact__form">
            {state === "done" ? (
              <div style={{ textAlign: "center", padding: "40px 20px" }}>
                <div style={{ width: 64, height: 64, borderRadius: 16, background: "var(--accent-soft)", color: "var(--accent)", display: "grid", placeItems: "center", margin: "0 auto 18px" }}>
                  <Icon name="check" size={32} stroke={2.5}/>
                </div>
                <h3>Solicitud enviada</h3>
                <p style={{ color: "var(--muted)" }}>Te responderemos a la mayor brevedad con la información de MASys.</p>
              </div>
            ) : (
              <form onSubmit={submit}>
                <div className="form-row">
                  <div className="field"><label>Nombre *</label><input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} required/></div>
                  <div className="field"><label>Email *</label><input type="email" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} required/></div>
                </div>
                <div className="form-row">
                  <div className="field"><label>Empresa</label><input value={form.company} onChange={e => setForm({ ...form, company: e.target.value })}/></div>
                  <div className="field"><label>Teléfono</label><input value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })}/></div>
                </div>
                <div className="field"><label>Cuéntanos qué necesitas *</label><textarea value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} required/></div>
                <div className="mp-consent">
                  <label className="mp-consent__row">
                    <input type="checkbox" checked={form.accept} onChange={e => setForm({ ...form, accept: e.target.checked })}/>
                    <span>
                      He leído y acepto la{" "}
                      <button type="button" className="mp-linkbtn" onClick={() => setShowTerms(v => !v)}>
                        política de privacidad
                      </button>
                      , y consiento el tratamiento de mis datos para gestionar esta solicitud de información.
                    </span>
                  </label>
                  {showTerms && PrivacyBox && (
                    <div className="mp-consent__terms"><PrivacyBox email={MASYS_EMAIL}/></div>
                  )}
                </div>
                <button type="submit" className="btn btn--accent" style={{ width: "100%", justifyContent: "center" }} disabled={state === "sending" || !form.name || !form.email || !form.message || !form.accept}>
                  {state === "sending" ? "Enviando..." : <>Enviar solicitud <Icon name="arrow-right" size={16}/></>}
                </button>
                {state === "error" && (
                  <p style={{ color: "#c33", fontSize: 13, marginTop: 10, textAlign: "center" }}>
                    No se ha podido enviar. Escríbenos directamente a <a href={`mailto:${MASYS_EMAIL}`} style={{ color: "var(--accent)" }}>{MASYS_EMAIL}</a>.
                  </p>
                )}
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- Página MASys ---------- */
const MasysPage = () => {
  const [t, setTweak] = useSiteTweaks();
  const [contactInfo, setContactInfo] = useState({});
  const [active, setActive] = useState(SECTIONS[0].id);
  useReveal(1);

  useEffect(() => {
    fetch("api/settings.php?action=get_public")
      .then(r => r.json())
      .then(d => { if (d.ok && d.settings) setContactInfo(d.settings); })
      .catch(() => {});
  }, []);

  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      const vis = entries.filter(e => e.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio);
      if (vis[0]) setActive(vis[0].target.id);
    }, { rootMargin: `-${NAV_OFFSET + 8}px 0px -55% 0px`, threshold: [0, 0.25, 0.5, 1] });
    SECTIONS.forEach(s => { const el = document.getElementById(s.id); if (el) obs.observe(el); });
    return () => obs.disconnect();
  }, []);

  const onScroll = (id) => {
    if (id === "top") { window.scrollTo({ top: 0, behavior: "smooth" }); return; }
    if (document.getElementById(id)) scrollToId(id);
    else window.location.href = `index.html#${id}`;
  };

  return (
    <>
      <Navbar page="masys" theme={t.theme} onToggleTheme={() => setTweak("theme", t.theme === "dark" ? "light" : "dark")} onScroll={onScroll}/>
      <main id="top" className="mp-page">

        {/* ---- Hero ---- */}
        <section className="hero mp-hero">
          <div className="hero__grid"/>
          <div className="container">
            <span className="pill"><span className="dot"/> El cerebro de tu parque de equipos</span>
            <h1 className="hero__title" style={{ marginTop: 18 }}>
              MASys — inventario, auditoría y <em>reparación</em> de Windows en una sola consola.
            </h1>
            <p className="lead" style={{ maxWidth: 730 }}>
              Una aplicación de escritorio que reúne cuarenta y cinco secciones de administración de Windows,
              Active Directory y Microsoft 365 — con exportación de informes y acciones de reparación
              integradas — para el equipo local o para equipos remotos con credenciales alternativas.
              Y su complemento para móvil, <b>MASysMov</b>, lleva el mismo inventario y auditoría al teléfono Android.
            </p>
            <div className="mp-badges">
              <span className="mp-badge">45 secciones</span>
              <span className="mp-badge">6 categorías</span>
              <span className="mp-badge">Salud y seguridad 0–100</span>
              <span className="mp-badge">Instalador y portable</span>
              <span className="mp-badge">Sin agente ni nube</span>
              <span className="mp-badge">CSV · HTML · PDF · Excel</span>
              <span className="mp-badge"><Icon name="phone" size={12}/> + App Android: MASysMov</span>
            </div>
            <div className="hero__cta">
              <a className="btn btn--accent" href="#contacto" onClick={(e) => { e.preventDefault(); scrollToId("contacto"); }}>Solicitar información <Icon name="arrow-right" size={16}/></a>
              <a className="btn btn--ghost" href="#categorias" onClick={(e) => { e.preventDefault(); scrollToId("categorias"); }}>Ver todas las capacidades</a>
              <a className="btn btn--ghost" href="#masysmov" onClick={(e) => { e.preventDefault(); scrollToId("masysmov"); }}>Conoce MASysMov</a>
            </div>
          </div>
        </section>

        <MSSubnav active={active}/>

        {/* ---- Qué es ---- */}
        <section className="section" id="que-es" style={{ paddingTop: 64 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">Qué es</span>
                <h2>Una sola ventana para todo el equipo.</h2>
              </div>
              <p className="section-head__r">
                MASys sustituye a la colección de consolas dispersas de Windows (servicios, tareas,
                registro, dispositivos, directiva local, visor de eventos…) por una interfaz única,
                coherente y exportable.
              </p>
            </div>
            <div className="mp-grid mp-grid--3">
              <div className="mp-card reveal">
                <h4>Consultar</h4>
                <p>Cada sección presenta los datos reales del equipo en tablas filtrables, con panel
                de detalle y notas. Un <b>Dashboard</b> puntúa la salud y la seguridad del equipo y agrupa las alertas.</p>
              </div>
              <div className="mp-card reveal">
                <h4>Actuar</h4>
                <p>Desde la misma tabla: iniciar o detener un servicio, desactivar un programa de
                inicio, cambiar una regla de firewall, desinstalar software, reparar el sistema…</p>
              </div>
              <div className="mp-card reveal">
                <h4>Documentar</h4>
                <p>Exportación de cualquier sección — o de varias a la vez — a CSV, HTML, PDF y Excel,
                más un informe completo del equipo y un informe de seguridad.</p>
              </div>
            </div>
          </div>
        </section>

        {/* ---- Dashboard ---- */}
        <section className="section" id="dashboard" style={{ paddingTop: 40 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">Dashboard</span>
                <h2>El estado del equipo, de un vistazo.</h2>
              </div>
              <p className="section-head__r">
                Al abrir MASys, el Dashboard ya sabe si el equipo va bien. Con «Sincronizar todo»
                completa el resto de secciones y deja constancia de lo que ha cambiado.
              </p>
            </div>
            <div className="mp-grid mp-grid--3">
              {DASHBOARD.map(x => (
                <div key={x.h} className="mp-card mp-card--icon reveal">
                  <span className="mp-card__ic"><Icon name={x.icon} size={20}/></span>
                  <div>
                    <h4>{x.h}</h4>
                    <p>{x.p}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ---- Categorías ---- */}
        <section className="section proceso" id="categorias" style={{ paddingTop: 80, paddingBottom: 80 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">Las 6 categorías</span>
                <h2>Cuarenta y cinco secciones, organizadas.</h2>
              </div>
              <p className="section-head__r">
                El menú lateral agrupa las secciones en seis categorías, más el Dashboard. Puedes
                mostrar, ocultar y reordenar las que uses en cada tipo de intervención.
              </p>
            </div>
            <div className="ms-cats">
              {CATEGORIES.map(c => <CategoryCard key={c.name} c={c}/>)}
            </div>
          </div>
        </section>

        {/* ---- Pantallas ---- */}
        <section className="section" id="pantallas" style={{ paddingTop: 40 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">Pantallas</span>
                <h2>Así se ve MASys.</h2>
              </div>
              <p className="section-head__r">
                Pantallas reales del programa con datos ficticios de demostración. Pulse una para
                ampliarla, y «Ver más» para recorrer el resto.
              </p>
            </div>
            <Galeria shots={SHOTS} iniciales={4}/>
          </div>
        </section>

        {/* ---- MASysMov (app móvil complementaria) ---- */}
        <section className="section proceso" id="masysmov" style={{ paddingTop: 72, paddingBottom: 72 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow"><Icon name="phone" size={14}/> App complementaria · Android</span>
                <h2>MASysMov: el móvil también entra en el inventario.</h2>
              </div>
              <p className="section-head__r">
                Una app Android que audita el teléfono y envía su informe a MASys por la red local,
                cifrado con AES-256 y sin pasar por ninguna nube. Lo que MASys hace con el PC, MASysMov
                lo hace con el móvil.
              </p>
            </div>

            <div className="mp-grid mp-grid--3">
              {[
                ["check", "Ficha del dispositivo", "Modelo, versión de Android y nivel de parche de seguridad, almacenamiento, batería, red y cuentas configuradas."],
                ["lock", "Seguridad y privacidad", "Hallazgos de seguridad del móvil, apps y permisos concedidos, conexiones y rastreadores detectados."],
                ["list", "Apps y procesos", "Inventario de aplicaciones, procesos en marcha, uso de espacio y copia de los APK instalados."],
                ["refresh", "Evolución en el tiempo", "Cada envío queda guardado para comparar el estado del móvil entre dos momentos, igual que los snapshots del PC."],
                ["grid", "Integración con MASys", "El informe aparece en la sección «Móvil Android» de MASys, junto al resto del parque, y se exporta con todo lo demás."],
                ["image", "Sin nube ni cuentas", "Emparejamiento por la red de casa; los datos del móvil solo viajan, cifrados, al PC que tú autorices."]
              ].map(([icon, h, p]) => (
                <div key={h} className="mp-card mp-card--icon reveal">
                  <span className="mp-card__ic"><Icon name={icon} size={20}/></span>
                  <div>
                    <h4>{h}</h4>
                    <p>{p}</p>
                  </div>
                </div>
              ))}
            </div>

            {MOBILE_SHOTS.length > 0 && (
              <div style={{ marginTop: 40 }}>
                <div className="section-head reveal" style={{ marginBottom: 24 }}>
                  <div>
                    <span className="eyebrow">Así se ve en el móvil</span>
                    <h2 style={{ fontSize: "clamp(22px, 3vw, 30px)" }}>Pantallas de MASysMov.</h2>
                  </div>
                </div>
                <Galeria shots={MOBILE_SHOTS} iniciales={4}/>
              </div>
            )}
          </div>
        </section>

        {/* ---- Transversal ---- */}
        <section className="section" id="transversal" style={{ paddingTop: 80 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">Herramientas transversales</span>
                <h2>Lo que funciona en todas las secciones.</h2>
              </div>
            </div>
            <div className="mp-grid mp-grid--2">
              {TRANSVERSAL.map(x => (
                <div key={x.h} className="mp-card mp-card--icon reveal">
                  <span className="mp-card__ic"><Icon name={x.icon} size={20}/></span>
                  <div>
                    <h4>{x.h}</h4>
                    <p>{x.p}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ---- Copias de seguridad ---- */}
        <section className="section" id="copias" style={{ paddingTop: 40 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">Copias de seguridad</span>
                <h2>Diez generadores con restauración.</h2>
              </div>
              <p className="section-head__r">
                Una ventana propia con una tarjeta por categoría. Cada copia es real (no una
                comprobación) y la mayoría tienen su restauración correspondiente. Con historial de copias.
              </p>
            </div>
            <div className="mp-table reveal">
              {BACKUPS.map(([k, v]) => (
                <div key={k} className="mp-table__row">
                  <div className="mp-table__k">{k}</div>
                  <div className="mp-table__v">{v}</div>
                </div>
              ))}
            </div>
            <p className="reveal" style={{ fontSize: 13.5, color: "var(--muted)", marginTop: 14 }}>
              El módulo forense usa el motor <a href="maperit.html" style={{ color: "var(--accent)" }}>MaPeriT</a>,
              disponible también como producto independiente.
            </p>
          </div>
        </section>

        {/* ---- Informes ---- */}
        <section className="section" id="informes" style={{ paddingTop: 40 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">Informes</span>
                <h2>Todo lo que ves, exportable.</h2>
              </div>
            </div>
            <div className="mp-grid mp-grid--2">
              <div className="mp-card reveal">
                <h4>Por sección o multisección</h4>
                <p>Exporta la sección activa — o el grupo de secciones relacionadas — a CSV, HTML,
                PDF o Excel, con un clic desde la barra inferior.</p>
              </div>
              <div className="mp-card reveal">
                <h4>Informe completo del equipo</h4>
                <p>Un único documento HTML o PDF con un resumen ejecutivo arriba y todos los módulos
                agrupados por categoría: inventario y estado del equipo listo para archivar o entregar.</p>
              </div>
              <div className="mp-card reveal">
                <h4>HTML profesionales, sin internet</h4>
                <p>Todos los informes HTML comparten diseño: índice por categorías, buscador que resalta
                lo encontrado, filtros por columna y por nivel, apartados plegables, CSV de cada tabla e imprimir.</p>
              </div>
              <div className="mp-card reveal">
                <h4>Informe para el cliente</h4>
                <p>El diagnóstico de red genera, además del informe técnico, una versión con el veredicto
                y los hallazgos en lenguaje llano, lista para entregar.</p>
              </div>
              <div className="mp-card reveal">
                <h4>Informe de seguridad</h4>
                <p>Resumen del estado de antivirus, cortafuegos, cifrado y endurecimiento del sistema.</p>
              </div>
              <div className="mp-card reveal">
                <h4>Snapshots comparables</h4>
                <p>Guarda el estado en un fichero y compara dos momentos para ver, línea a línea, qué
                ha cambiado en el equipo.</p>
              </div>
            </div>
          </div>
        </section>

        {/* ---- Para quién ---- */}
        <section className="section" id="publico" style={{ paddingTop: 40 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">Para quién es</span>
                <h2>Quién trabaja con MASys.</h2>
              </div>
            </div>
            <div className="mp-grid mp-grid--2">
              {AUDIENCE.map(a => (
                <div key={a.h} className="mp-card mp-card--icon reveal">
                  <span className="mp-card__ic"><Icon name={a.icon} size={20}/></span>
                  <div>
                    <h4>{a.h}</h4>
                    <p>{a.p}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ---- Requisitos ---- */}
        <section className="section" id="requisitos" style={{ paddingTop: 40 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">Requisitos</span>
                <h2>Qué necesita para funcionar.</h2>
              </div>
            </div>
            <div className="mp-table reveal">
              {REQS.map(([k, v]) => (
                <div key={k} className="mp-table__row">
                  <div className="mp-table__k">{k}</div>
                  <div className="mp-table__v">{v}</div>
                </div>
              ))}
            </div>
            <div className="mp-note reveal">
              <b>Uso responsable</b>
              <p>
                MASys ejecuta acciones reales sobre el equipo (servicios, registro, tareas, red,
                desinstalaciones, reparaciones). Debe usarse únicamente sobre equipos propios o sobre
                los que se dispone de autorización expresa para su administración. Las operaciones
                sensibles crean una copia de seguridad previa cuando es posible y quedan registradas
                en un historial de acciones.
              </p>
            </div>
          </div>
        </section>

        <MasysContact/>

      </main>
      <Footer page="masys" contactInfo={contactInfo} onScroll={onScroll}/>
      <SiteTweaks t={t} setTweak={setTweak}/>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MasysPage/>);