import type { Metadata } from "next";
import Link from "next/link";
import { FormularioContacto } from "@/components/formulario/FormularioContacto";
import { TarjetaEscenario } from "@/components/marca/IconoEscenario";
import { Migas } from "@/components/site/contenido/Migas";
import { FOTOS, HeroeLanding } from "@/components/site/HeroeLanding";
import { Revelar } from "@/components/site/Revelar";
import { EMPRESA, NORMAS, SITIO_URL } from "@/data/empresa";
import { ESCENARIOS, type Escenario } from "@/data/escenarios";
import { INDUSTRIAS } from "@/data/industrias";
import { imagenesOg } from "@/lib/seo";

/**
 * /cumplimiento-nom-002 — la página de mayor intención de compra del sitio.
 *
 * Orden deliberado: primero las tres preguntas que hace el dueño de un negocio
 * —me aplica, qué me pueden multar, qué tengo que tener— y solo después la
 * precisión normativa. Cada bloque está escrito en dos niveles: la primera
 * frase la entiende cualquiera, la segunda le da al experto el dato.
 *
 * Regla del contenido: no se citan artículos, umbrales, plazos ni montos de
 * sanción que no estén en src/data/empresa.ts o en la fuente pública. Lo que no
 * está verificado se declara como no reproducido; no se estima.
 */

const TITULO = "Cumplimiento NOM-002-STPS-2010: qué te van a pedir";
const DESCRIPCION =
  "¿La NOM-002-STPS-2010 te aplica y qué te van a pedir en una verificación? Explicado sin tecnicismos y con la precisión normativa después: clasificación de riesgo, equipo, plan de emergencia, brigadas, simulacros y los ocho documentos del expediente.";

export const metadata: Metadata = {
  title: TITULO,
  description: DESCRIPCION,
  alternates: { canonical: `${SITIO_URL}/cumplimiento-nom-002` },
  openGraph: {
    title: `${TITULO} | ${EMPRESA.nombreCorto}`,
    description: DESCRIPCION,
    url: `${SITIO_URL}/cumplimiento-nom-002`,
    ...imagenesOg(),
  },
};

const AVISO_ALCANCE =
  "Esta página es una referencia orientativa construida con información pública. La normativa puede actualizarse y complementarse por estado, municipio, tipo de instalación y autoridad competente. No sustituye un dictamen técnico ni una opinión jurídica.";

const MENSAJE_INICIAL = "Necesito saber si cumplo con la NOM-002. Mi instalación es un ";

/**
 * Las tres preguntas reales, en el orden en el que llegan. Cada respuesta abre
 * en lenguaje llano y cierra con el dato normativo.
 */
const PREGUNTAS_REALES = [
  {
    id: "me-aplica",
    pregunta: "¿Esto me aplica a mí?",
    llano:
      "Si tienes gente trabajando, sí. No hay tamaño mínimo: aplica igual a una oficina de quince personas que a una planta de trescientas.",
    tecnico:
      "La NOM-002-STPS-2010 rige para todo centro de trabajo en México. Lo que cambia entre una oficina y una planta no es la norma: es el nivel de riesgo de incendio con el que se clasifica el centro, y de ese nivel dependen el equipo, los sistemas y el plan que te corresponden.",
  },
  {
    id: "que-me-multan",
    pregunta: "¿Qué me pueden multar?",
    llano:
      "No te vamos a dar una cifra. Quien te promete un monto exacto en una página web se lo está inventando, y con eso no se toma una decisión.",
    tecnico:
      "El monto de una sanción lo determina la autoridad competente según lo que encuentre en la verificación, y no lo publicamos porque no podemos sostenerlo con una fuente verificable. Lo que sí es concreto —y es lo que conviene preparar— son los ocho documentos del expediente que aparece más abajo.",
  },
  {
    id: "que-necesito",
    pregunta: "¿Qué tengo que tener?",
    llano:
      "Equipo que sirva para lo que se puede quemar en cada área, un plan escrito, personal que sepa qué hacer y registro de todo lo anterior. No se cumple solo comprando extintores.",
    tecnico:
      "En el orden que sigue la norma: clasificación del riesgo de incendio, equipo contra incendio, sistemas fijos y medios de detección y alarma cuando el nivel lo exige, plan de atención a emergencias por escrito, brigadas con capacitación acreditada y simulacros ejecutados y documentados.",
  },
];

/** Elementos que la norma contempla, según la referencia de NORMAS. */
const ELEMENTOS = [
  {
    n: "01",
    titulo: "Clasificación del riesgo de incendio",
    llano:
      "Es el primer paso y define todo lo demás. Si se hace mal, todo lo que se compre encima queda mal.",
    detalle:
      "De la clasificación depende qué equipo, qué sistemas y qué plan te corresponden. Se determina con el procedimiento de la propia norma; los umbrales no se reproducen aquí porque dependen del material y de la superficie de cada centro de trabajo.",
  },
  {
    n: "02",
    titulo: "Equipo contra incendio",
    llano: "Extintores que se vean, se alcancen y sirvan para lo que hay en esa área concreta.",
    detalle:
      "Disponibles, accesibles y señalizados, seleccionados según la clase de fuego presente en cada zona. El equipo correcto en el lugar equivocado no cumple, y el conteo total no sustituye a la distancia de recorrido.",
  },
  {
    n: "03",
    titulo: "Sistemas fijos y de alarma",
    llano: "Si tu riesgo es alto, con equipo portátil no alcanza.",
    detalle:
      "Según el nivel de riesgo, el centro de trabajo puede requerir sistemas fijos de supresión y medios de detección y alarma, además del equipo portátil. Es el punto donde la conversación deja de ser una compra y pasa a ser un proyecto.",
  },
  {
    n: "04",
    titulo: "Plan de atención a emergencias",
    llano: "Un documento que diga quién hace qué el día del incidente. Por escrito, no de palabra.",
    detalle:
      "Es lo primero que se pide en una verificación y lo que con más frecuencia no existe o quedó desactualizado tras un cambio de instalación, de proceso o de personal.",
  },
  {
    n: "05",
    titulo: "Brigadas y capacitación",
    llano: "Personas con nombre y apellido que sepan operar el equipo, y un papel que lo compruebe.",
    detalle:
      "Personal designado, entrenado y con constancia por persona y fecha. La capacitación sin registro documental no es demostrable ante una autoridad, aunque haya ocurrido.",
  },
  {
    n: "06",
    titulo: "Simulacros",
    llano: "Practicarlo antes, y dejar constancia de que se practicó.",
    detalle:
      "Ejecutados y documentados. El registro del simulacro es evidencia doble, del plan y de la capacitación, y es donde se detectan los huecos que un plano no muestra.",
  },
];

const EXPEDIENTE = [
  {
    documento: "Clasificación de riesgo de incendio",
    quePrueba: "Que el nivel de exigencia aplicado al centro de trabajo es el correcto.",
    quienLoPide: "Verificación STPS, Protección Civil, aseguradora",
  },
  {
    documento: "Plan de atención a emergencias",
    quePrueba: "Que existe un procedimiento escrito y vigente para el escenario.",
    quienLoPide: "Verificación STPS, Protección Civil",
  },
  {
    documento: "Inventario y ubicación del equipo",
    quePrueba: "Qué hay instalado, dónde, de qué clase y con qué capacidad.",
    quienLoPide: "Verificación STPS, auditoría interna",
  },
  {
    documento: "Ficha técnica y certificado por modelo",
    quePrueba: "Que el equipo instalado es el que se declara y cubre las clases que se afirman.",
    quienLoPide: "Auditoría, aseguradora, cliente corporativo",
  },
  {
    documento: "Hoja de datos de seguridad del agente",
    quePrueba: "Manejo, almacenamiento y respuesta ante exposición del agente extintor.",
    quienLoPide: "Seguridad industrial, ambiental, auditoría",
  },
  {
    documento: "Bitácora de revisión mensual",
    quePrueba: "Que la revisión de extintores se realiza con la periodicidad debida.",
    quienLoPide: "Verificación STPS, Protección Civil",
  },
  {
    documento: "Constancias de capacitación y brigadas",
    quePrueba: "Que hay personal designado y entrenado, con nombre y fecha.",
    quienLoPide: "Verificación STPS",
  },
  {
    documento: "Registro de simulacros",
    quePrueba: "Que el plan se ejecuta y se corrige con lo aprendido.",
    quienLoPide: "Verificación STPS, Protección Civil",
  },
];

/** Los ocho escenarios más frecuentes en una conversación de cumplimiento. */
const SLUGS_CUMPLIMIENTO = [
  "industria",
  "gasolineras",
  "bodegas",
  "cocinas-hoteles",
  "oficinas",
  "auditorios-afluencia",
  "flotas-maquinaria",
  "minas",
];

const ESCENARIOS_CUMPLIMIENTO = ESCENARIOS.filter((e) => SLUGS_CUMPLIMIENTO.includes(e.slug));

function hrefEscenario(escenario: Escenario): string {
  if (escenario.industria) return `/soluciones/${escenario.industria}`;
  const categoria = escenario.categorias[0];
  return categoria ? `/catalogo/${categoria}` : "/catalogo";
}

export default function PaginaCumplimiento() {
  return (
    <>
      <HeroeLanding
        antes={<Migas actual="Cumplimiento NOM-002" />}
        eyebrow="Cumplimiento NOM-002-STPS-2010"
        titulo="¿La NOM-002 te aplica? Sí. Esto es lo que te van a pedir"
        entrada="Primero en español llano y después con la precisión normativa. Si solo quieres saber por dónde empezar, empieza por la revisión: te decimos qué te falta antes de venderte nada."
        foto={FOTOS.normas}
        enfoque="62% 42%"
        altura="alto"
        prioridad
      >
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
          <Link href="#validar" className="btn btn-signal w-full sm:w-auto">
            Revisar mi cumplimiento
          </Link>
          <p className="font-mono text-[0.625rem] uppercase leading-relaxed tracking-[0.1em] text-faint">
            Cuatro campos · Sin costo · Sin compromiso de compra
          </p>
        </div>
      </HeroeLanding>

      {/* ---------- las tres preguntas reales ---------- */}
      <section className="grid-bg-lite bg-paper py-14 sm:py-20" aria-labelledby="preguntas-titulo">
        <div className="shell">
          <Revelar>
            <p className="eyebrow mb-4">Empecemos por lo básico</p>
            <h2
              id="preguntas-titulo"
              className="max-w-2xl font-display text-2xl font-extrabold text-deep sm:text-3xl"
            >
              Las tres preguntas que hace todo el mundo, respondidas sin rodeos
            </h2>
            <p className="mt-4 max-w-2xl text-sm leading-relaxed text-deep-muted sm:text-base">
              En cada respuesta, lo primero es lo que necesitas para decidir. Lo segundo es el
              detalle normativo, para quien tiene que sostenerlo ante una auditoría.
            </p>
          </Revelar>

          <div className="mt-10 grid gap-px bg-rule-lite lg:grid-cols-3">
            {PREGUNTAS_REALES.map((item) => (
              <article key={item.id} id={item.id} className="bg-white p-6 sm:p-7">
                <h3 className="font-display text-lg font-extrabold leading-tight text-deep sm:text-xl">
                  {item.pregunta}
                </h3>
                <p className="mt-4 text-base leading-relaxed text-deep">{item.llano}</p>
                <hr className="hair-lite my-5" />
                <p className="font-mono text-[0.625rem] uppercase tracking-[0.14em] text-deep-muted">
                  El dato normativo
                </p>
                <p className="mt-2.5 text-sm leading-relaxed text-deep-muted">{item.tecnico}</p>
              </article>
            ))}
          </div>

          <div
            role="note"
            aria-label="Alcance de esta página"
            className="mt-10 max-w-3xl rounded-[6px] border border-rule-lite border-l-2 border-l-ember bg-white p-5 sm:p-6"
          >
            <p className="font-mono text-[0.6875rem] uppercase tracking-[0.16em] text-deep-muted">
              Alcance de esta página
            </p>
            <p className="mt-3 text-sm leading-relaxed text-deep-muted">{AVISO_ALCANCE}</p>
          </div>
        </div>
      </section>

      {/* ---------- identifica tu caso con la iconografía de escenarios ---------- */}
      <section
        className="border-t border-rule bg-ink py-14 sm:py-20"
        aria-labelledby="escenarios-titulo"
      >
        <div className="shell">
          <Revelar>
            <p className="eyebrow mb-4">Encuentra tu caso</p>
            <h2
              id="escenarios-titulo"
              className="max-w-2xl font-display text-2xl font-extrabold sm:text-3xl"
            >
              Busca el lugar que se parece al tuyo
            </h2>
            <p className="mt-4 max-w-2xl text-sm leading-relaxed text-muted sm:text-base">
              No hace falta que sepas qué clase de fuego tienes. Si administras una gasolinera, un
              hotel o una bodega, eso ya define el perfil de riesgo y, con él, las obligaciones que
              se te aplican con más peso.
            </p>
          </Revelar>

          <ul className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {ESCENARIOS_CUMPLIMIENTO.map((escenario) => (
              <li key={escenario.slug} className="grid">
                <TarjetaEscenario
                  escenario={escenario}
                  href={hrefEscenario(escenario)}
                  conRiesgo={false}
                />
              </li>
            ))}
          </ul>

          <p className="mt-8 max-w-3xl text-sm leading-relaxed text-muted">
            Si el tuyo no está en la lista, escríbelo tal cual en la revisión: lo clasificamos
            nosotros.{" "}
            <Link href="#validar" className="link">
              Ir a la revisión
            </Link>
            .
          </p>
        </div>
      </section>

      {/* ---------- qué contempla la norma ---------- */}
      <section
        className="grid-bg-lite border-t border-rule bg-paper py-14 sm:py-20"
        aria-labelledby="elementos-titulo"
      >
        <div className="shell">
          <Revelar>
            <p className="eyebrow mb-4">Qué contempla la norma</p>
            <h2
              id="elementos-titulo"
              className="max-w-2xl font-display text-2xl font-extrabold text-deep sm:text-3xl"
            >
              Seis frentes, y ninguno se cierra con una compra
            </h2>
            <p className="mt-4 max-w-2xl text-sm leading-relaxed text-deep-muted sm:text-base">
              Cada frente genera un documento distinto. Los expedientes incompletos casi siempre
              fallan en los tres que no se compran: el plan, la capacitación y el registro.
            </p>
          </Revelar>

          <ol className="mt-10 grid gap-px bg-rule-lite sm:grid-cols-2 lg:grid-cols-3">
            {ELEMENTOS.map((elemento) => (
              <li key={elemento.n} className="bg-white p-6 sm:p-7">
                <p className="font-mono text-[0.625rem] font-semibold tracking-[0.1em] text-signal">
                  {elemento.n}
                </p>
                <h3 className="mt-3 font-display text-base font-extrabold leading-tight text-deep">
                  {elemento.titulo}
                </h3>
                <p className="mt-3 text-sm leading-relaxed text-deep">{elemento.llano}</p>
                <p className="mt-3 text-sm leading-relaxed text-deep-muted">{elemento.detalle}</p>
              </li>
            ))}
          </ol>

          <div className="mt-10 rounded-[6px] border border-rule-lite bg-white p-5 sm:p-6">
            <p className="font-mono text-[0.6875rem] uppercase tracking-[0.16em] text-deep-muted">
              La obligación que más se pierde de vista
            </p>
            <h3 className="mt-3 font-display text-lg font-extrabold text-deep">
              Los extintores se revisan cada mes
            </h3>
            <p className="mt-3 max-w-3xl text-sm leading-relaxed text-deep-muted">
              {NORMAS[1].aplica} Casi nunca se pierde por desconocerla: se pierde porque nadie
              quedó a cargo de la bitácora.
            </p>
          </div>
        </div>
      </section>

      {/* ---------- el expediente ---------- */}
      <section
        className="border-t border-rule bg-ink py-14 sm:py-20"
        aria-labelledby="expediente-titulo"
      >
        <div className="shell-wide">
          <Revelar>
            <p className="eyebrow mb-4">Expediente</p>
            <h2
              id="expediente-titulo"
              className="max-w-2xl font-display text-2xl font-extrabold sm:text-3xl"
            >
              Los ocho documentos que piden en una verificación
            </h2>
            <p className="mt-4 max-w-2xl text-sm leading-relaxed text-muted sm:text-base">
              Esta es la lista con la que conviene compararse antes de que alguien llegue a
              pedirla. Ninguno es opcional cuando se pregunta, y cada uno prueba algo distinto.
            </p>
          </Revelar>

          <p className="mt-6 font-mono text-[0.6875rem] uppercase tracking-[0.14em] text-faint sm:hidden">
            Desliza la tabla para ver todas las columnas
          </p>

          <div
            className="mt-4 overflow-x-auto rounded-[6px] border border-rule bg-ink-2 [-webkit-overflow-scrolling:touch]"
            tabIndex={0}
            role="region"
            aria-label="Documentos del expediente, tabla desplazable en horizontal"
          >
            <table className="w-full min-w-[46rem] border-collapse text-left">
              <caption className="sr-only">
                Documentos que integran un expediente de cumplimiento, qué prueba cada uno y quién
                lo solicita.
              </caption>
              <thead>
                <tr className="border-b border-rule bg-ink-3">
                  {["Documento", "Qué prueba", "Quién lo pide"].map((c) => (
                    <th
                      key={c}
                      scope="col"
                      className="whitespace-nowrap px-4 py-3 font-mono text-[0.625rem] font-medium uppercase tracking-[0.14em] text-faint"
                    >
                      {c}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {EXPEDIENTE.map((fila) => (
                  <tr key={fila.documento} className="border-b border-rule last:border-b-0">
                    <th scope="row" className="px-4 py-4 text-left align-top">
                      <span className="font-sans text-sm font-semibold text-bright">
                        {fila.documento}
                      </span>
                    </th>
                    <td className="max-w-[24rem] px-4 py-4 align-top text-sm leading-relaxed text-muted">
                      {fila.quePrueba}
                    </td>
                    <td className="px-4 py-4 align-top font-mono text-xs leading-relaxed text-muted">
                      {fila.quienLoPide}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="mt-8 flex flex-col gap-4 sm:flex-row sm:items-center">
            <Link href="#validar" className="btn btn-signal w-full sm:w-auto">
              Ver qué me falta del expediente
            </Link>
            <p className="max-w-lg text-xs leading-relaxed text-faint">
              En una compra con nosotros, los documentos que dependen del equipo se entregan por
              número de modelo.{" "}
              <Link href="/evidencia" className="link">
                Ver el índice de documentación por categoría
              </Link>
              .
            </p>
          </div>
        </div>
      </section>

      {/* ---------- lo que cambia por operación ---------- */}
      <section
        className="grid-bg-lite border-t border-rule bg-paper py-14 sm:py-20"
        aria-labelledby="segmentos-titulo"
      >
        <div className="shell">
          <Revelar>
            <p className="eyebrow mb-4">Por operación</p>
            <h2
              id="segmentos-titulo"
              className="max-w-2xl font-display text-2xl font-extrabold text-deep sm:text-3xl"
            >
              Lo que además se te pide según dónde trabajas
            </h2>
            <p className="mt-4 max-w-2xl text-sm leading-relaxed text-deep-muted sm:text-base">
              La NOM-002 es el piso común. Encima de ella, cada sector acumula requisitos propios
              de su autoridad, de su aseguradora o de su cliente corporativo.
            </p>
          </Revelar>

          <ul className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {INDUSTRIAS.map((industria) => (
              <li key={industria.slug} className="flex">
                <Link
                  href={`/soluciones/${industria.slug}`}
                  className="group flex h-full w-full flex-col rounded-[6px] border border-rule-lite bg-white p-5 transition-colors duration-200 hover:border-signal [-webkit-tap-highlight-color:transparent]"
                >
                  <h3 className="font-display text-base font-extrabold leading-tight text-deep">
                    {industria.nombre}
                  </h3>
                  <p className="mt-2 text-sm leading-relaxed text-deep">{industria.dolor}</p>
                  <ul className="mt-4 space-y-2">
                    {industria.cumplimiento.map((obligacion) => (
                      <li
                        key={obligacion}
                        className="flex gap-2.5 text-xs leading-relaxed text-deep-muted"
                      >
                        <span
                          aria-hidden="true"
                          className="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-signal"
                        />
                        {obligacion}
                      </li>
                    ))}
                  </ul>
                  <span className="mt-auto pt-5 font-mono text-[0.625rem] uppercase tracking-[0.14em] text-signal transition-colors group-hover:text-signal-hi">
                    Ver el segmento &rarr;
                  </span>
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* ---------- referencias normativas ---------- */}
      <section
        className="border-t border-rule bg-ink-2 py-14 sm:py-16"
        aria-labelledby="referencias-titulo"
      >
        <div className="shell">
          <Revelar>
            <p className="eyebrow eyebrow-muted mb-4">Referencias</p>
            <h2 id="referencias-titulo" className="font-display text-xl font-extrabold sm:text-2xl">
              Normas citadas en esta página
            </h2>
          </Revelar>

          <ul className="mt-8 grid gap-4 lg:grid-cols-2">
            {NORMAS.map((norma) => (
              <li key={norma.clave} className="panel p-5 sm:p-6">
                <p className="font-mono text-xs font-semibold uppercase tracking-[0.12em] text-signal">
                  {norma.clave}
                </p>
                <h3 className="mt-3 font-display text-base font-extrabold leading-tight text-bright">
                  {norma.titulo}
                </h3>
                <p className="mt-3 text-sm leading-relaxed text-muted">{norma.aplica}</p>
                <a
                  href={norma.fuente}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="mt-4 inline-block font-mono text-[0.625rem] uppercase tracking-[0.14em] text-bright underline decoration-rule-2 underline-offset-4 hover:decoration-signal"
                >
                  Ver la fuente oficial
                </a>
              </li>
            ))}
          </ul>

          <p className="mt-8 max-w-3xl text-xs leading-relaxed text-faint">
            Los enlaces apuntan al sitio del Diario Oficial de la Federación. Verifica siempre la
            versión vigente: la publicación oficial manda sobre cualquier resumen, incluido este.
          </p>
        </div>
      </section>

      {/* ---------- conversión ---------- */}
      <section
        id="validar"
        className="grid-bg-lite border-t border-rule bg-paper py-14 sm:py-20"
        aria-labelledby="validar-titulo"
      >
        <div className="shell">
          <div className="grid gap-10 lg:grid-cols-[1fr_1.05fr] lg:items-start lg:gap-16">
            <div>
              <Revelar>
                <p className="eyebrow mb-4">Siguiente paso</p>
                <h2
                  id="validar-titulo"
                  className="font-display text-2xl font-extrabold text-deep sm:text-3xl"
                >
                  Te decimos qué te falta antes de venderte nada
                </h2>
                <p className="mt-4 text-sm leading-relaxed text-deep-muted sm:text-base">
                  Revisamos qué tienes, qué te falta y en qué orden conviene resolverlo. Si tu
                  situación requiere un dictamen formal, te lo decimos en lugar de venderte equipo.
                </p>
              </Revelar>

              <ul className="mt-8 space-y-3.5">
                {[
                  "No necesitas saber tu nivel de riesgo para escribirnos: eso es justo lo que revisamos.",
                  "Si ya te levantaron una observación, mándala tal cual y respondemos sobre ella.",
                  "Si lo que te falta no es equipo sino documentación, lo decimos así.",
                ].map((punto) => (
                  <li key={punto} className="flex gap-3 text-sm leading-relaxed text-deep-muted">
                    <span
                      aria-hidden="true"
                      className="mt-2 h-1 w-1 shrink-0 rounded-full bg-signal"
                    />
                    {punto}
                  </li>
                ))}
              </ul>

              <div
                role="note"
                aria-label="Recordatorio de alcance"
                className="mt-8 rounded-[6px] border border-rule-lite border-l-2 border-l-ember bg-white p-5"
              >
                <p className="font-mono text-[0.6875rem] uppercase tracking-[0.16em] text-deep-muted">
                  Recordatorio de alcance
                </p>
                <p className="mt-3 text-sm leading-relaxed text-deep-muted">{AVISO_ALCANCE}</p>
              </div>
            </div>

            <FormularioContacto
              id="formulario-cumplimiento"
              canal="cumplimiento"
              variante="claro"
              titulo="Revisar mi cumplimiento NOM-002"
              descripcion="Completa la frase del mensaje con tu tipo de instalación y envía. Respondemos con el hueco documental que vemos y por dónde empezar."
              mensajeInicial={MENSAJE_INICIAL}
              textoBoton="Solicitar revisión"
            />
          </div>
        </div>
      </section>
    </>
  );
}