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

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

const SHOTS = [
  { src: "assets/maperit/visor_caso.webp", t: "MaPeriT.TN · Panel del caso", d: "Caso abierto en el visor: equipo, fases de adquisición capturadas, artefactos, anomalías y tamaño total." },
  { src: "assets/maperit/visor_riesgos.webp", t: "MaPeriT.TN · Puntuación de riesgo", d: "Correlación del análisis profundo: cada usuario, servicio o dispositivo con su puntuación y nivel, coloreado por gravedad." }
];

const MAPERIT_EMAIL = "maperit@masoft.es";

// Compensación de scroll: navbar principal (72) + subcabecera MAPerit (~52).
const NAV_OFFSET = 126;

// Secciones de la subcabecera propia de MAPerit.
const SECTIONS = [
  { id: "que-es", label: "Qué es" },
  { id: "flujo", label: "Flujo forense" },
  { id: "programas", label: "Los 5 programas" },
  { id: "pantallas", label: "Pantallas" },
  { id: "estandares", label: "Estándares" },
  { id: "publico", label: "Para quién" },
  { id: "entregables", label: "Entregables" },
  { 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 de MAPerit ---------- */
const MPSubnav = ({ 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>
);

/* ---------- El flujo forense ---------- */
const PIPELINE = [
  { k: "1", label: "Adquisición", sub: "SW · OF", desc: "Se recogen las evidencias del equipo (encendido) o del disco (apagado), siempre en solo lectura." },
  { k: "2", label: "Análisis", sub: "AN", desc: "Se interpretan las evidencias: sistema de ficheros, eventos, navegadores, antiforense y correlación." },
  { k: "3", label: "Revisión", sub: "TN · SC", desc: "El perito explora los hallazgos con el visor; el cliente los consulta con el asistente guiado." },
  { k: "4", label: "Informe", sub: "Entrega", desc: "Informe pericial HTML autocontenido en español, con firmas, apto para presentación en juzgado." }
];

/* ---------- Los 5 programas ---------- */
const PROGRAMS = [
  {
    id: "sw",
    code: "MaPeriT.SW",
    version: "v1.7.4",
    title: "Adquisición forense en vivo",
    tagline: "Recoge todas las evidencias de un equipo Windows encendido en una sola ejecución, sin modificar nada.",
    forWho: "Cuando el equipo objetivo está encendido y accesible.",
    caps: [
      "10 fases por orden de volatilidad (RFC 3227): datos volátiles, sistema, MFT, registro, eventos, navegadores, comunicaciones, nube, USB y persistencia.",
      "Opera en solo lectura y sin ninguna conexión de red.",
      "Cadena de custodia automática: cada evidencia se firma con SHA-256 en el momento de su adquisición.",
      "Análisis incluido: detección de anomalías en 9 categorías, extracción de IOC y timeline unificada de más de doce fuentes.",
      "Acceso a ficheros que el sistema mantiene bloqueados: bases de datos de navegadores, logs de seguridad activos.",
      "Modos avanzados: -DryRun, -SelfTest, -ExcludePaths, -NetworkIsolationCheck, -ChainOfCustodyStrictMode."
    ]
  },
  {
    id: "of",
    code: "MaPeriT.OF",
    version: "v1.1.1",
    title: "Adquisición forense offline",
    tagline: "Trabaja sobre el disco de un equipo apagado o extraído, sin arrancar su sistema operativo.",
    forWho: "Cuando el equipo está apagado, es inaccesible o solo se dispone del disco.",
    caps: [
      "Sistema de ficheros completo, registro de Windows offline, registros de eventos, navegadores, USB y nube, persistencia y tareas.",
      "No escribe absolutamente nada en el disco objetivo; toda la salida va al equipo forense.",
      "Misma estructura de salida que MaPeriT.SW: compatible de forma directa con AN y TN.",
      "Compatible con bloqueador de escritura hardware para garantizar la inmutabilidad del disco.",
      "Cadena de custodia SHA-256 idéntica a la de la adquisición en vivo."
    ]
  },
  {
    id: "an",
    code: "MaPeriT.AN",
    version: "v1.2.0",
    title: "Análisis forense profundo",
    tagline: "Interpreta las evidencias ya recogidas y construye una línea temporal de alta precisión con todo lo encontrado.",
    forWho: "Segundo paso del flujo: consume la salida de SW u OF, sin volver a tocar el equipo original.",
    caps: [
      "Sistema de ficheros en profundidad: ficheros borrados, árbol reconstruido y detección de manipulación de marcas de tiempo (timestomping).",
      "Procesado masivo de registros de eventos sin truncar ni muestrear, para investigaciones largas.",
      "Historial completo de navegadores, caché de ejecución de aplicaciones, diario de cambios del sistema de ficheros y artefactos de precarga.",
      "Detecta programas ejecutados aunque no queden eventos de proceso.",
      "Correlación multi-fuente: timeline unificada y puntuación de riesgo por cada usuario y proceso detectado.",
      "No destructivo por diseño: nunca escribe en el directorio de evidencias."
    ]
  },
  {
    id: "tn",
    code: "MaPeriT.TN",
    version: "v1.1.1",
    title: "Visor forense interactivo",
    tagline: "Interfaz de escritorio para navegar, visualizar y marcar los hallazgos, sin instalación y sin internet.",
    forWho: "El perito, durante la revisión de un proyecto SW/OF, con o sin el análisis de AN.",
    caps: [
      "Seis visores especializados: CSV, eventos EVTX, MFT, JSON, texto/log y hexadecimal, con filtrado, ordenación y exportación.",
      "Detección automática de IOC al cargar, con resaltado por severidad.",
      "Timeline consolidada multi-fuente con capacidad para decenas de miles de eventos.",
      "Sistema de marcadores a nivel de fichero, fila o celda, con severidad, etiqueta y nota; exportables como informe HTML o CSV.",
      "Búsqueda global en todos los ficheros del proyecto en segundo plano.",
      "Dashboard del proyecto: fases presentes, artefactos, anomalías y estado de cada fase."
    ]
  },
  {
    id: "sc",
    code: "MaPeriT.SC",
    version: "v1.0.0",
    title: "Consulta guiada para no peritos",
    tagline: "Respuestas concretas sobre lo ya analizado, para un cliente o una parte interesada, sin interpretar ficheros técnicos.",
    forWho: "Quien no es perito informático y necesita entender qué pasó y cuándo.",
    caps: [
      "Asistente de 8 pasos con variables predefinidas: usuario, categoría, ventana temporal, franja horaria y palabra clave.",
      "Ofrece una lista real de usuarios detectados en el proyecto, no un campo de texto libre.",
      "Distingue siempre si el usuario de un hallazgo viene confirmado por la fuente o inferido de la ruta del fichero.",
      "Cada resultado cita la fuente exacta y la ruta del fichero de MaPeriT.AN donde se encontró.",
      "Genera dos informes de los mismos hechos: uno pericial formal y otro en lenguaje llano.",
      "Independiente de MaPeriT.TN: ninguno de los dos necesita al otro."
    ]
  }
];

const STANDARDS = [
  { s: "RFC 3227 (IETF)", a: "Las fases de adquisición siguen estrictamente el orden de volatilidad — lo más efímero primero — y la cadena de custodia se documenta de forma automática." },
  { s: "NIST SP 800-86", a: "Metodología de adquisición, verificación de integridad y documentación de procedimientos conforme a la guía del Instituto Nacional de Estándares de EE. UU." },
  { s: "FIPS 180-4", a: "Todas las evidencias se firman con SHA-256 en el momento exacto de su adquisición; cualquier modificación posterior queda detectada al recalcular la huella." }
];

const AUDIENCE = [
  { icon: "check", h: "Peritos judiciales informáticos", p: "Un flujo completo de adquisición a informe, con cadena de custodia y salida apta para juzgado." },
  { icon: "file-text", h: "Despachos de abogados", p: "El módulo de consulta guiada traduce el informe pericial a un resumen en lenguaje llano para el cliente." },
  { icon: "lock", h: "Respuesta a incidentes y compliance", p: "Adquisición en vivo u offline, detección de IOC y timeline unificada para reconstruir qué ocurrió." },
  { icon: "search", h: "Investigaciones internas autorizadas", p: "Sobre equipos de la propia organización, con autorización explícita y trazabilidad completa." }
];

const DELIVERABLES = [
  { h: "Paquete de evidencias estructurado", p: "Carpeta organizada por fase con todos los artefactos en su formato original, más el manifiesto de integridad SHA-256." },
  { h: "Timeline unificada", p: "Fichero CSV con todos los eventos de todas las fuentes, ordenados cronológicamente." },
  { h: "Informe pericial HTML", p: "Documento autocontenido en español con portada, hallazgos, anomalías, IOC y bloque de firmas. Apto para presentación en juzgado por un perito habilitado." },
  { h: "Resumen en lenguaje llano (opcional)", p: "Con MaPeriT.SC, los mismos hechos explicados en frases sencillas para quien no es técnico." }
];

/* ---------- Pipeline ---------- */
const Pipeline = () => (
  <div className="mp-pipe reveal">
    {PIPELINE.map((p, i) => (
      <div key={p.k} className={`mp-pipe__step ${i === 0 ? "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>
);

/* ---------- Tarjeta de programa ---------- */
const ProgramCard = ({ p }) => (
  <article id={`programa-${p.id}`} className="mp-prog reveal">
    <div className="mp-prog__head">
      <div>
        <span className="mp-prog__code">{p.code}</span>
        <span className="mp-prog__ver">{p.version}</span>
      </div>
      <h3>{p.title}</h3>
      <p className="mp-prog__tagline">{p.tagline}</p>
    </div>
    <ul className="mp-prog__caps">
      {p.caps.map((c, i) => (
        <li key={i}><Icon name="check" size={15}/><span>{c}</span></li>
      ))}
    </ul>
    <p className="mp-prog__for"><b>Cuándo se usa:</b> {p.forWho}</p>
  </article>
);

/* ---------- Formulario de contacto independiente ---------- */
const MaperitContact = () => {
  const [form, setForm] = useState({ name: "", email: "", company: "", phone: "", message: "", accept: false });
  const [state, setState] = useState("idle"); // idle | sending | done | error
  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/maperit_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 MAPerit</span>
            <h2>Solicita información, una demostración o presupuesto.</h2>
          </div>
          <p className="section-head__r">
            Canal exclusivo de MAPerit. Escríbenos y te respondemos con la documentación técnica,
            los requisitos de despliegue y las condiciones de licenciamiento.
          </p>
        </div>

        <div className="contact reveal">
          <div className="contact__info">
            <p style={{ fontSize: 16, color: "var(--ink-2)", maxWidth: 380 }}>
              Cuéntanos tu caso — tipo de peritación, número de equipos, plazos — y preparamos una
              propuesta a medida. Sin compromiso.
            </p>
            <ul>
              <li>
                <Icon name="mail" size={20}/>
                <div><b><a href={`mailto:${MAPERIT_EMAIL}`} style={{ color: "inherit" }}>{MAPERIT_EMAIL}</a></b><span>Consulta directa sobre MAPerit</span></div>
              </li>
              <li>
                <Icon name="file-text" size={20}/>
                <div><b>Documentación bajo petición</b><span>Fichas técnicas y manuales de cada módulo</span></div>
              </li>
              <li>
                <Icon name="check" size={20}/>
                <div><b>Demostración guiada</b><span>Te enseñamos el flujo completo sobre un caso de ejemplo</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 MAPerit.</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 / despacho</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={MAPERIT_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:${MAPERIT_EMAIL}`} style={{ color: "var(--accent)" }}>{MAPERIT_EMAIL}</a>.
                  </p>
                )}
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- Página MAPerit ---------- */
const MaperitPage = () => {
  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(() => {});
  }, []);

  // Marca activa la sección visible en la subcabecera (scroll-spy).
  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();
  }, []);

  // "Contacto" del menú global vive en contacto.html; los enlaces internos de
  // esta página hacen scroll suave a la sección local correspondiente.
  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="maperit" 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"/> Suite forense · Windows</span>
            <h1 className="hero__title" style={{ marginTop: 18 }}>
              MAPerit — peritación informática <em>forense</em>, de principio a fin.
            </h1>
            <p className="lead" style={{ maxWidth: 720 }}>
              Cinco programas que cubren todo el ciclo de una prueba digital: adquisición en vivo y offline,
              análisis profundo, revisión visual y consulta para no peritos. El resultado es un informe
              pericial en español, con cadena de custodia, apto para presentación en juzgado.
            </p>
            <div className="mp-badges">
              <span className="mp-badge">RFC 3227</span>
              <span className="mp-badge">NIST SP 800-86</span>
              <span className="mp-badge">FIPS 180-4 · SHA-256</span>
              <span className="mp-badge">100% offline</span>
              <span className="mp-badge">Solo lectura</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="#programas" onClick={(e) => { e.preventDefault(); scrollToId("programas"); }}>Ver los 5 programas</a>
            </div>
          </div>
        </section>

        {/* ---- Subcabecera pegajosa ---- */}
        <MPSubnav 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 suite completa, no una herramienta suelta.</h2>
              </div>
              <p className="section-head__r">
                Cada módulo hace una cosa y la hace bien. Juntos forman una cadena: lo que recoge un
                programa es exactamente lo que consume el siguiente, sin conversiones ni pérdida de trazabilidad.
              </p>
            </div>
            <div className="mp-grid mp-grid--3">
              <div className="mp-card reveal">
                <h4>Rigor probatorio</h4>
                <p>Operación en solo lectura sobre el equipo o el disco analizado, sin conexión de red, con
                firma SHA-256 de cada evidencia en el momento de su adquisición.</p>
              </div>
              <div className="mp-card reveal">
                <h4>Cobertura real</h4>
                <p>Diez fases de adquisición y correlación de más de doce fuentes: memoria, sistema de ficheros,
                registro, eventos, navegadores, USB, nube y persistencia.</p>
              </div>
              <div className="mp-card reveal">
                <h4>Doble público</h4>
                <p>El perito trabaja con el visor y el análisis profundo; el cliente o el abogado obtiene un
                resumen guiado en lenguaje llano de los mismos hechos.</p>
              </div>
            </div>
          </div>
        </section>

        {/* ---- Flujo ---- */}
        <section className="section proceso" id="flujo" style={{ paddingTop: 80, paddingBottom: 80 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">El flujo forense</span>
                <h2>De la evidencia al informe, en cuatro pasos.</h2>
              </div>
            </div>
            <Pipeline/>
          </div>
        </section>

        {/* ---- Programas ---- */}
        <section className="section" id="programas" style={{ paddingTop: 80 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">Los 5 programas</span>
                <h2>Cada pieza del ecosistema MAPerit.</h2>
              </div>
              <p className="section-head__r">
                Todos para Windows 10, Windows 11 y Windows Server 2016 en adelante. SW, OF, AN y SC son
                scripts portables; TN es una aplicación de escritorio sin instalación.
              </p>
            </div>
            <div className="mp-progs">
              {PROGRAMS.map(p => <ProgramCard key={p.id} p={p}/>)}
            </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 el visor forense.</h2>
              </div>
              <p className="section-head__r">
                Pantallas reales del programa con datos ficticios de demostración. Pulse una para ampliarla.
              </p>
            </div>
            <Galeria shots={SHOTS}/>
          </div>
        </section>

        {/* ---- Estándares ---- */}
        <section className="section" id="estandares" style={{ paddingTop: 40 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">Estándares y garantías</span>
                <h2>Construido sobre normas reconocidas.</h2>
              </div>
            </div>
            <div className="mp-table reveal">
              {STANDARDS.map(row => (
                <div key={row.s} className="mp-table__row">
                  <div className="mp-table__k">{row.s}</div>
                  <div className="mp-table__v">{row.a}</div>
                </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 MAPerit.</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>

        {/* ---- Qué recibe ---- */}
        <section className="section" id="entregables" style={{ paddingTop: 40 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">Qué recibe el cliente</span>
                <h2>El entregable de una peritación con MAPerit.</h2>
              </div>
            </div>
            <div className="mp-grid mp-grid--2">
              {DELIVERABLES.map(d => (
                <div key={d.h} className="mp-card reveal">
                  <h4>{d.h}</h4>
                  <p>{d.p}</p>
                </div>
              ))}
            </div>

            <div className="mp-note reveal">
              <b>Aviso legal y uso autorizado</b>
              <p>
                Las herramientas MAPerit solo deben ejecutarse sobre los equipos y unidades de almacenamiento
                para los que exista autorización legal explícita (consentimiento del titular, mandato judicial
                o habilitación pericial). Su uso sin autorización puede constituir un acceso ilícito conforme
                al Código Penal. La cadena de custodia protege la integridad de las evidencias tras su
                adquisición, pero no certifica la autenticidad del contenido original: el valor probatorio del
                informe depende de su presentación por un perito judicial habilitado.
              </p>
            </div>
          </div>
        </section>

        {/* ---- Contacto independiente ---- */}
        <MaperitContact/>

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

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