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

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

const MADECA_EMAIL = "madeca@masoft.es";

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

const SECTIONS = [
  { id: "que-es", label: "Qué es" },
  { id: "obligacion", label: "La obligación" },
  { id: "funcionamiento", label: "Cómo funciona" },
  { id: "gestion", label: "Gestión" },
  { id: "pantallas", label: "Pantallas" },
  { id: "integraciones", label: "Integraciones" },
  { id: "garantias", label: "Garantías" },
  { id: "preguntas", label: "Preguntas" },
  { id: "mini", label: "Versión gratuita", destacado: true },
  { 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" });
};

/* ---------- Contenido ---------- */
// Referencias normativas comprobadas en los textos consolidados del BOE el
// 09/10/2026: Orden FOM/2861/2012 (arts. 2.1, 4, 6, 7 y 9), Ley 16/1987 LOTT
// (arts. 141.17 y 143.1.d), Ley 9/2025 (DT 8.ª) y Resolución de 5 de junio
// de 2026 (BOE-A-2026-12784). No añadir cifras ni plazos sin fuente oficial.

const REQUISITOS = [
  { icon: "file-text", h: "Electrónico de origen", p: "Un albarán en papel escaneado no sirve como DeCA: el documento debe nacer en formato electrónico." },
  { icon: "search", h: "Visible en carretera", p: "La inspección debe poder consultarlo con un código QR o un enlace, sin usuario ni contraseña." },
  { icon: "lock", h: "Conservado un año", p: "Cargador y transportista deben conservarlo al menos un año, a disposición de la Inspección de Transporte." }
];

const PIPELINE = [
  { k: "1", label: "Llega el albarán", sub: "ERP · NUBE · NAS · FOTO", desc: "MADeCa lo recoge de donde ya lo tiene: su ERP, una carpeta compartida, la nube o una foto del papel." },
  { k: "2", label: "Lee los datos", sub: "EXTRACCIÓN · OCR", desc: "Cargador, transportista, destinatario, origen, destino, mercancía, fecha y matrícula, también de escaneos." },
  { k: "3", label: "Usted confirma", sub: "BANDEJA DE REVISIÓN", desc: "Lo que falta, en rojo y a un clic de su campo; el documento original, al lado, señala dónde se leyó cada dato. Nada se emite sin revisión." },
  { k: "4", label: "DeCA con su QR", sub: "PDF · QR · ENLACE", desc: "Copia para el conductor, enlace privado para la otra parte y consulta inmediata para la inspección." }
];

const SHOTS = [
  { src: "assets/madeca/v04/inicio.webp", t: "Inicio", d: "Lo pendiente, lo que está en ruta y lo que necesita atención: certificados por caducar, borradores sin revisar y fuentes con error." },
  { src: "assets/madeca/v04/revision.webp", t: "Revisión de un albarán", d: "MADeCa no da por bueno ningún dato del que no esté completamente seguro. Si un dato no aparece o no puede comprobarse —como un NIF cuyo dígito de control no cuadra—, en lugar de suponerlo lo señala y pide su comprobación: un clic lleva al campo, que queda en rojo hasta confirmarlo con el albarán original a la vista." },
  { src: "assets/madeca/v04/bandeja.webp", t: "Bandeja de revisión", d: "Filtros, orden por columnas y varios documentos a la vez: emitir los completos con confirmación o descartar." },
  { src: "assets/madeca/v04/expediciones.webp", t: "Expediciones", d: "Búsqueda por referencia, matrícula, cliente o NIF, periodos de fechas, estados con su número y exportación a Excel." },
  { src: "assets/madeca/v04/historial.webp", t: "Historial", d: "Estadísticas por día, semana, mes, trimestre, año o fechas a elegir, con la evolución del periodo." },
  { src: "assets/madeca/v04/historial_desglose.webp", t: "Desglose del historial", d: "Por destinatario, cargador, vehículo, provincia, mercancía y más. Pulse una fila y todo el historial se filtra por ella." },
  { src: "assets/madeca/v04/expedicion.webp", t: "Ficha de la expedición", d: "Modificaciones en ruta y actividad: quién emitió, modificó o entregó cada DeCA y cuándo." },
  { src: "assets/madeca/v04/nueva.webp", t: "Nueva expedición", d: "Formulario por secciones del art. 6, con comprobación al escribir y sugerencias de clientes de DeCA anteriores." },
  { src: "assets/madeca/deca.webp", t: "El DeCA en PDF", d: "Documento completo con los datos del art. 6 de la Orden FOM/2861/2012 y su código QR de verificación." },
  { src: "assets/madeca/v04/fuentes.webp", t: "Fuentes de datos", d: "Conexión con SharePoint, Google Drive, Dropbox, NAS y los principales ERP." }
];

const GESTION = [
  { icon: "check", h: "Revisión guiada", p: "Los datos obligatorios que faltan, enlazados a su campo; cada NIF, matrícula y fecha se comprueba mientras se escribe, con las mismas reglas que al emitir." },
  { icon: "search", h: "Dónde se leyó cada dato", p: "En la revisión, el documento original recuadra el dato del campo en el que está. Se comprueba de un vistazo." },
  { icon: "list", h: "Varios a la vez", p: "Seleccione varios albaranes de la bandeja y emita los completos —con su confirmación— o descarte los que no sirven." },
  { icon: "grid", h: "Inicio y avisos", p: "Resumen del día y avisos de certificados por caducar, documentos sin revisar y fuentes con error, también por correo a los administradores." },
  { icon: "file-text", h: "Historial y estadísticas", p: "Todo lo gestionado por periodo, con desglose por destinatario, vehículo, provincia o mercancía. Cada cifra filtra al pulsarla." },
  { icon: "download", h: "Exportación a Excel", p: "Las expediciones y el historial, con sus filtros y totales, en un libro de Excel listo para trabajar." }
];

const INTEGRACIONES = [
  ["ERP", "Microsoft Dynamics 365 Business Central, Odoo, SAP Business One* y Holded*."],
  ["Documentos en la nube", "SharePoint, OneDrive, Google Drive y Dropbox."],
  ["Red de la empresa", "NAS por SFTP o el conector local, que lee los documentos dentro de su red y solo envía los datos."],
  ["ERP sin API", "Carpeta compartida (a3ERP, Sigrid y otros): el ERP deja el PDF o los datos y MADeCa los recoge."],
  ["A medida", "API para que su programa envíe los albaranes directamente."]
];

const GARANTIAS = [
  { icon: "check", h: "Revisión humana", p: "Su equipo confirma cada DeCA antes de emitirlo; la responsabilidad de los datos queda donde la pone la norma." },
  { icon: "grid", h: "Cada empresa, sus datos", p: "Accesos separados por empresa y por rol: administración, operación y consulta." },
  { icon: "lock", h: "Claves protegidas", p: "Las credenciales de su ERP y de su nube se guardan cifradas y no se vuelven a mostrar." },
  { icon: "refresh", h: "Cambios en ruta", p: "Si cambia la matrícula o el destino, la modificación se añade al mismo documento: mismo QR, misma URL." },
  { icon: "file-text", h: "Constancia de cada emisión", p: "Cada DeCA queda registrado con su fecha y hora de emisión, la prueba que exime al cargador si el documento no va a bordo." },
  { icon: "cpu", h: "En la nube o en su servidor", p: "Servicio gestionado por Masoft o instalación propia junto a su ERP y su NAS." }
];

const PREGUNTAS = [
  ["¿Tengo que cambiar de ERP?", "No. MADeCa lee de su ERP, de una carpeta o de sus documentos."],
  ["¿Y si no tengo ERP?", "Puede subir sus albaranes o rellenar el formulario del panel."],
  ["¿Vale escanear el albarán en papel?", "Como DeCA, no. Pero MADeCa lee el escaneo y genera un documento válido."],
  ["¿Necesito certificado digital?", "Solo si el DeCA tiene finalidad contractual. En ese caso MADeCa firma con el certificado de su empresa."],
  ["¿Quién está obligado?", "El cargador contractual (también agencias, transitarios y operadores logísticos) y el transportista efectivo."],
  ["¿Qué transportes quedan fuera?", "Las mudanzas, la paquetería de pocos bultos, el traslado de vehículos averiados y los transportes que no necesitan autorización."]
];

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

/* ---------- Formulario de contacto independiente ---------- */
const MadecaContact = () => {
  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/madeca_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 MADeCa</span>
            <h2>Pruébelo con sus propios albaranes.</h2>
          </div>
          <p className="section-head__r">
            Canal exclusivo de MADeCa. Le preparamos una demostración con documentos reales de su
            empresa y una propuesta según su volumen de envíos.
          </p>
        </div>

        <div className="contact reveal">
          <div className="contact__info">
            <p style={{ fontSize: 16, color: "var(--ink-2)", maxWidth: 380 }}>
              Cuéntenos si es cargador, transportista u operador logístico, qué ERP usa y cuántos
              envíos hace al mes. Sin compromiso.
            </p>
            <ul>
              <li>
                <Icon name="mail" size={20}/>
                <div><b><a href={`mailto:${MADECA_EMAIL}`} style={{ color: "inherit" }}>{MADECA_EMAIL}</a></b><span>Consulta directa sobre MADeCa</span></div>
              </li>
              <li>
                <Icon name="check" size={20}/>
                <div><b>Demostración con sus documentos</b><span>Le enseñamos el DeCA generado a partir de sus albaranes</span></div>
              </li>
              <li>
                <Icon name="file-text" size={20}/>
                <div><b>Propuesta a medida</b><span>Según su volumen de envíos y la modalidad que prefiera</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)" }}>Le responderemos a la mayor brevedad con la información de MADeCa.</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éntenos qué necesita *</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={MADECA_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íbanos directamente a <a href={`mailto:${MADECA_EMAIL}`} style={{ color: "var(--accent)" }}>{MADECA_EMAIL}</a>.
                  </p>
                )}
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- MADeCa Mini (versión gratuita) ---------- */
// Datos tomados del paquete 0.5.0 (LICENCIA.txt y guía de instalación). Si
// cambia el paquete, actualizar MINI_PAQUETE y copiar los ficheros nuevos a
// madeca-mini/ (el .tar.gz no va en Git: se sube por FTP). El .tar.gz no tiene
// acceso directo: se sirve desde api/mini_download.php, que toma siempre el de
// versión más alta que haya en madeca-mini/.
const MINI_DIR = "madeca-mini/";
const MINI_PAQUETE = {
  version: "0.5.0",
  fichero: "madeca-mini-0.5.0.tar.gz",
  tamano: "183 MB",
  sha256: "f9a339eb5188145ac8576a6118228bd348a3048a1f2ae4f9567c1d98174c83f3"
};
const MINI_GUIA = MINI_DIR + "GUIA_INSTALACION_MADeCa_Mini.html";

const MINI_LIMITES = [
  { n: "1", h: "Una empresa", p: "Una sola empresa por instalación." },
  { n: "30", h: "DeCA al día", p: "Al llegar al límite no se emiten más ese día; lo pendiente espera en la bandeja." },
  { n: "3", h: "Vehículos", p: "Hasta tres cabezas tractoras o camiones registrados." }
];

const MINI_REQUISITOS = [
  ["Servidor", "Linux Ubuntu 22.04 o 24.04 LTS, o Debian 12, en un equipo x86_64 (Intel/AMD) con 2 GB de memoria y 10 GB libres como mínimo. Dedicado, máquina virtual o VPS."],
  ["Dominio propio", "Un dominio o subdominio con un registro DNS que apunte a la IP pública del servidor."],
  ["Acceso desde internet", "Puertos 80 y 443 abiertos hasta el servidor y libres de otros servicios. El certificado HTTPS se obtiene y se renueva solo."],
  ["Siempre en marcha", "La inspección consulta el DeCA escaneando su QR en carretera: si el servidor se apaga o pierde la conexión, no podrá descargarlo."],
  ["Administración", "Acceso sudo por SSH y alguien que se ocupe del servidor: seguridad, copias de seguridad y actualizaciones."]
];

// LICENCIA.txt viene cortada a ~75 columnas para leerse en consola. Para la web
// se unen las líneas de continuación (sangradas, tras otra línea sangrada) y el
// texto se ajusta solo al ancho de la ventana, también en el móvil.
const unirLineas = (txt) => {
  const out = [];
  let previaSangrada = false;
  for (const linea of txt.replace(/\r/g, "").split("\n")) {
    const sangrada = /^ +\S/.test(linea);
    const t = linea.trim();
    if (sangrada && previaSangrada && !/^(-|\d+\.)/.test(t) && out.length) out[out.length - 1] += " " + t;
    else out.push(sangrada ? linea.replace(/^ +/, m => (/^-/.test(t) ? "  " : "")) : linea);
    previaSangrada = sangrada;
  }
  return out.join("\n");
};

// El paquete no tiene enlace directo: al aceptar se pide al servidor un enlace
// temporal (api/mini_token.php) que caduca a la hora y cuenta la descarga.
const MINI_ERRORES = {
  demasiadas: "Se han pedido demasiadas descargas desde su conexión. Inténtelo dentro de una hora.",
  no_disponible: "La descarga no está disponible en este momento. Inténtelo más tarde.",
  robot: "Su navegador no permite esta descarga. Pruebe con otro navegador."
};

const MiniDescarga = ({ open, onClose }) => {
  const [accept, setAccept] = useState(false);
  const [licencia, setLicencia] = useState(null);
  const [preparando, setPreparando] = useState(false);
  const [error, setError] = useState(null);
  const [iniciada, setIniciada] = useState(false);

  const descargar = async () => {
    if (!accept || preparando) return;
    setPreparando(true); setError(null); setIniciada(false);
    try {
      const r = await fetch("api/mini_token.php", {
        method: "POST",
        credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ acepto: true })
      });
      const d = await r.json().catch(() => ({}));
      if (!r.ok || !d.ok || !d.url) throw new Error(d.error || "servidor");
      window.location.href = d.url;
      setIniciada(true);
    } catch (e) {
      setError(MINI_ERRORES[e.message] || "No se ha podido iniciar la descarga. Inténtelo de nuevo en unos minutos.");
    } finally {
      setPreparando(false);
    }
  };

  useEffect(() => {
    if (!open) return;
    setAccept(false); setError(null); setIniciada(false);
    document.body.style.overflow = "hidden";
    if (licencia === null) {
      fetch(MINI_DIR + "LICENCIA.txt", { cache: "no-cache" })
        .then(r => (r.ok ? r.text() : Promise.reject()))
        .then(t => setLicencia(unirLineas(t)))
        .catch(() => setLicencia(""));
    }
    const esc = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", esc);
    return () => { window.removeEventListener("keydown", esc); document.body.style.overflow = ""; };
  }, [open]);

  return (
    <div className={`modal-bg ${open ? "is-open" : ""}`} onClick={onClose}>
      <div className="modal modal--wide" role="dialog" aria-modal="true" aria-label="Descargar MADeCa Mini" onClick={e => e.stopPropagation()}>
        <button className="modal__close" onClick={onClose} aria-label="Cerrar"><Icon name="x" size={16}/></button>
        <span className="eyebrow"><Icon name="download" size={12}/> &nbsp;Descarga gratuita</span>
        <h3>MADeCa Mini {MINI_PAQUETE.version}</h3>
        <p style={{ fontSize: 14, color: "var(--muted)", marginBottom: 16 }}>
          {MINI_PAQUETE.tamano} · Servidor Linux (Ubuntu o Debian) · Instalador, licencia y guía incluidos
        </p>

        <div className="md-mini-lic">
          <b>Condiciones de uso</b>
          {licencia === null && <p>Cargando las condiciones…</p>}
          {licencia === "" && (
            <p>No se han podido mostrar aquí. Léalas en <a href={MINI_DIR + "LICENCIA.txt"} target="_blank" rel="noopener">LICENCIA.txt</a> antes de descargar.</p>
          )}
          {licencia && <pre>{licencia}</pre>}
        </div>

        <label className="field--check md-mini-acepto">
          <input type="checkbox" checked={accept} onChange={e => setAccept(e.target.checked)}/>
          <span>He leído y acepto las condiciones de uso: versión gratuita, sin soporte ni garantía, y prohibida su venta y su modificación.</span>
        </label>

        <button
          type="button"
          className="btn btn--accent md-mini-btn"
          style={{ width: "100%", justifyContent: "center", display: "flex", opacity: accept && !preparando ? 1 : 0.45, marginTop: 8 }}
          disabled={!accept || preparando}
          onClick={descargar}
        >
          <Icon name="download" size={16}/> {preparando ? "Preparando la descarga…" : `Descargar (${MINI_PAQUETE.tamano})`}
        </button>
        {error && <p className="md-mini-msg md-mini-msg--err" role="alert">{error}</p>}
        {iniciada && <p className="md-mini-msg" role="status">La descarga ha comenzado. El enlace es personal y caduca en una hora.</p>}
        <p className="md-mini-sha">
          {MINI_PAQUETE.fichero} · SHA-256: <code>{MINI_PAQUETE.sha256}</code>
          {" · "}<a href={MINI_DIR + MINI_PAQUETE.fichero + ".sha256"}>fichero .sha256</a>
        </p>
      </div>
    </div>
  );
};

const MadecaMini = () => {
  const [abierta, setAbierta] = useState(false);
  return (
    <section className="section md-mini" id="mini" style={{ paddingTop: 70, paddingBottom: 70 }}>
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow md-mini-eyebrow">Versión gratuita</span>
            <h2>MADeCa Mini, gratis y en su servidor.</h2>
          </div>
          <p className="section-head__r">
            La misma aplicación MADeCa, totalmente gratuita, para instalar en un servidor propio.
            Tiene todas las funciones, con tres límites.
          </p>
        </div>

        <div className="md-mini-limites reveal">
          {MINI_LIMITES.map(x => (
            <div key={x.h} className="md-mini-limite">
              <span className="md-mini-limite__n">{x.n}</span>
              <div><b>{x.h}</b><p>{x.p}</p></div>
            </div>
          ))}
        </div>

        <div className="md-mini-tecnico reveal">
          <b><Icon name="cpu" size={18}/> Para técnicos de sistemas</b>
          <p>
            MADeCa Mini no es un programa de doble clic. El DeCA tiene que poder consultarse desde
            internet en cualquier momento, así que la aplicación funciona como un servicio web
            publicado con HTTPS en un servidor Linux propio. Su instalación y su mantenimiento
            requieren conocimientos previos de administración de servidores Linux, redes y dominios.
            Si no los tiene, le recomendamos la versión completa con servicio gestionado.
          </p>
        </div>

        <div className="mp-table reveal" style={{ marginTop: 22 }}>
          {MINI_REQUISITOS.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="md-mini-aviso reveal">
          <b>Sin soporte ni garantía · Prohibida su venta y su modificación</b>
          <p>
            MADeCa Mini es totalmente gratuita y se entrega tal cual, con su guía de instalación y
            configuración. No incluye soporte, instalación, alojamiento, mantenimiento ni
            actualizaciones comprometidas, y Masoft.es no garantiza que funcione sin interrupciones
            ni errores. En la medida en que la ley lo permita, Masoft.es no responde de ningún daño
            derivado de su instalación o su uso: pérdida de datos, interrupciones, DeCA no emitidos o
            no disponibles para la inspección, sanciones o pérdida de beneficios. Quien la instala
            responde de su servidor, de sus copias de seguridad y de los datos de cada DeCA.
          </p>
          <p>
            <strong>Queda prohibido venderla, alquilarla o cobrar por ella</strong>, sola o dentro de
            otro producto o servicio, así como modificarla, descompilarla, intentar saltarse sus
            límites o quitar los avisos de versión gratuita y de autoría.
          </p>
          <p>
            Soporte, instalación, servidor o la versión completa sin límites: contrato aparte con
            Masoft.es, a través del formulario de contacto.
          </p>
        </div>

        <div className="md-mini-cta reveal">
          <a className="btn btn--ghost" href={MINI_GUIA} target="_blank" rel="noopener">
            <Icon name="file-text" size={16}/> Ver la guía de instalación
          </a>
          <button type="button" className="btn btn--accent md-mini-btn" onClick={() => setAbierta(true)}>
            <Icon name="download" size={16}/> Descargar MADeCa Mini {MINI_PAQUETE.version}
          </button>
        </div>
        <p className="reveal md-fuentes">
          Consulte la guía antes de descargar: explica paso a paso la instalación, la configuración
          inicial y el mantenimiento, con capturas de la aplicación.
        </p>
      </div>
      <MiniDescarga open={abierta} onClose={() => setAbierta(false)}/>
    </section>
  );
};

/* ---------- Página MADeCa ---------- */
const MadecaPage = () => {
  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="madeca" 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"/> Obligatorio desde el 5 de octubre de 2026</span>
            <h1 className="hero__title" style={{ marginTop: 18 }}>
              MADeCa — el DeCA de cada transporte, <em>listo</em> antes de salir.
            </h1>
            <p className="lead" style={{ maxWidth: 730 }}>
              El documento de control del transporte de mercancías por carretera ya es obligatoriamente
              electrónico. MADeCa lo genera a partir de los albaranes que su empresa ya tiene — con su
              código QR para la inspección — sin cambiar su forma de trabajar.
            </p>
            <div className="mp-badges">
              <span className="mp-badge">Orden FOM/2861/2012</span>
              <span className="mp-badge">QR sin usuario ni contraseña</span>
              <span className="mp-badge">Lee escaneos (OCR)</span>
              <span className="mp-badge">ERP · nube · NAS</span>
              <span className="mp-badge">Nube o servidor propio</span>
            </div>
            <div className="hero__cta">
              <a className="btn btn--accent" href="#contacto" onClick={(e) => { e.preventDefault(); scrollToId("contacto"); }}>Solicitar una demostración <Icon name="arrow-right" size={16}/></a>
              <a className="btn btn--ghost" href="#pantallas" onClick={(e) => { e.preventDefault(); scrollToId("pantallas"); }}>Ver las pantallas</a>
            </div>
          </div>
        </section>

        <MDSubnav 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>Sus albaranes, convertidos en DeCA válidos.</h2>
              </div>
              <p className="section-head__r">
                MADeCa emite, guarda y sirve a la inspección el Documento Electrónico de Control
                Administrativo de cada envío. Para cargadores, transportistas, agencias y operadores logísticos.
              </p>
            </div>
            <div className="mp-grid mp-grid--3">
              <div className="mp-card reveal">
                <h4>Emitir</h4>
                <p>Si su ERP ya genera el albarán en PDF, MADeCa le añade el QR. Si no, redacta el
                documento completo con los datos, comprobando NIF, matrículas y fechas.</p>
              </div>
              <div className="mp-card reveal">
                <h4>Acompañar el viaje</h4>
                <p>Copia en PDF con QR para el conductor, cambios en ruta sobre el mismo documento y
                cierre de la URL pública siete días después de la entrega.</p>
              </div>
              <div className="mp-card reveal">
                <h4>Conservar</h4>
                <p>Un año de conservación, enlace privado para la otra parte durante ese plazo y
                constancia de la fecha y hora de cada emisión.</p>
              </div>
            </div>
          </div>
        </section>

        {/* ---- La obligación ---- */}
        <section className="section proceso" id="obligacion" style={{ paddingTop: 80, paddingBottom: 80 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">La obligación</span>
                <h2>Cargador y transportista, los dos.</h2>
              </div>
              <p className="section-head__r">
                Desde el 5 de octubre de 2026 el documento de control es obligatoriamente digital. Están
                obligados el cargador contractual — también agencias, transitarios y operadores
                logísticos — y el transportista efectivo.
              </p>
            </div>
            <div className="mp-grid mp-grid--3">
              {REQUISITOS.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 className="md-risk reveal">
              <div className="md-risk__num">401 – 600 €</div>
              <div className="md-risk__txt">
                <b>Multa por infracción grave</b>
                <p>cuando falta el documento de control o le faltan datos esenciales. Responden el cargador
                y el transportista; el cargador queda eximido si prueba que lo emitió — y MADeCa deja
                constancia de cada emisión.</p>
              </div>
            </div>
            <p className="reveal md-fuentes">
              Fuentes (BOE, textos consolidados): Ley 9/2025, disposición transitoria 8.ª · Orden
              FOM/2861/2012, arts. 2.1, 4, 7 y 9 · Ley 16/1987 (LOTT), arts. 141.17 y 143.1.d · Resolución
              de 5 de junio de 2026 (<span style={{ whiteSpace: "nowrap" }}>BOE-A-2026-12784</span>).
            </p>
          </div>
        </section>

        {/* ---- Cómo funciona ---- */}
        <section className="section" id="funcionamiento" style={{ paddingTop: 80 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">Cómo funciona</span>
                <h2>Cuatro pasos, uno solo es suyo.</h2>
              </div>
              <p className="section-head__r">
                MADeCa recoge y prepara; su equipo revisa y confirma. Así la responsabilidad de los datos
                queda donde la pone el art. 7 de la Orden FOM/2861/2012.
              </p>
            </div>
            <div className="mp-pipe reveal">
              {PIPELINE.map((p, i) => (
                <div key={p.k} className={`mp-pipe__step ${i === 2 ? "is-first" : ""}`}>
                  <div className="mp-pipe__dot">{p.k}</div>
                  <div className="mp-pipe__body">
                    <b>{p.label}</b>
                    <span className="mp-pipe__sub">{p.sub}</span>
                    <p>{p.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ---- Gestión ---- */}
        <section className="section" id="gestion" style={{ paddingTop: 80 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">Gestión</span>
                <h2>Todo a la vista, sin buscar.</h2>
              </div>
              <p className="section-head__r">
                Además de emitir, MADeCa le ayuda a revisar más rápido y a saber en cada momento qué ha
                gestionado, para quién y con qué vehículo.
              </p>
            </div>
            <div className="mp-grid mp-grid--3">
              {GESTION.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>

        {/* ---- Pantallas ---- */}
        <section className="section" id="pantallas" style={{ paddingTop: 80 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">Pantallas</span>
                <h2>Así se ve MADeCa.</h2>
              </div>
              <p className="section-head__r">
                Pantallas reales de la demostración, con datos ficticios. Pulse una para ampliarla.
              </p>
            </div>
            <Galeria shots={SHOTS}/>
          </div>
        </section>

        {/* ---- Integraciones ---- */}
        <section className="section" id="integraciones" style={{ paddingTop: 80 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">Integraciones</span>
                <h2>Se conecta con lo que ya usa.</h2>
              </div>
              <p className="section-head__r">
                MADeCa revisa cada pocos minutos la fuente que elija y deja los albaranes nuevos en la
                bandeja de revisión.
              </p>
            </div>
            <div className="mp-table reveal">
              {INTEGRACIONES.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 md-fuentes">* SAP Business One y Holded: correspondencia de campos en validación con instalaciones reales.</p>
          </div>
        </section>

        {/* ---- Garantías ---- */}
        <section className="section" id="garantias" style={{ paddingTop: 60 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">Garantías</span>
                <h2>Seguridad y cumplimiento.</h2>
              </div>
            </div>
            <div className="mp-grid mp-grid--3">
              {GARANTIAS.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>

        {/* ---- Preguntas ---- */}
        <section className="section" id="preguntas" style={{ paddingTop: 60 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">Preguntas frecuentes</span>
                <h2>Lo que nos preguntan siempre.</h2>
              </div>
            </div>
            <div className="mp-grid mp-grid--2">
              {PREGUNTAS.map(([q, a]) => (
                <div key={q} className="mp-card reveal">
                  <h4>{q}</h4>
                  <p>{a}</p>
                </div>
              ))}
            </div>
            <div className="mp-note reveal">
              <b>Aviso</b>
              <p>
                MADeCa es una herramienta de apoyo para cumplir la normativa. La exactitud de los datos de
                cada DeCA es responsabilidad del cargador contractual y del transportista efectivo (art. 7 de
                la Orden FOM/2861/2012); por eso ningún documento se emite sin la confirmación de su equipo.
              </p>
            </div>
          </div>
        </section>

        <MadecaMini/>

        <MadecaContact/>

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

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