/* Lote PCR y calidad — cuatro landings.
 *
 * Composición distinta por función, no cuatro héroes iguales:
 *   PcrMultiplexPage             → cabecera de especialidad con medio
 *   DiagnosticoSindromaticoPage  → página hija, columna editorial estrecha
 *   EjemplosResultadosPage       → herramienta de consulta con buscador
 *   CalidadPage                  → credenciales y alcance certificado
 *
 * Los datos vienen de window.LANDINGS_DATA (capa reemplazable) y de STUDIES.
 * Ninguna landing copia precios, tiempos, cobertura ni preparación: eso vive
 * en la ficha del estudio. El CSS está acotado a `.lnd` como hace el blog.
 */

const LD = () => window.LANDINGS_DATA;

function LandingStyles() {
  return <style>{`
.lnd { --l-navy:#1D2A4D; --l-azul:#3953A4; --l-aqua:#7EB9C7; --l-amar:#FDC345;
  --l-borde:#E3E6EE; --l-fondo:#F7F8FC; --l-tinta:#14182A; --l-muted:#6B7180; }
.lnd-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── Migas ── */
.lnd-crumbs { padding:26px 0 0; }
.lnd-crumbs nav { display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  font-size:13px; color:var(--l-muted); }
.lnd-crumbs a { color:var(--l-muted); border-bottom:1px solid transparent; }
.lnd-crumbs a:hover { color:var(--l-azul); border-bottom-color:currentColor; }
.lnd-crumbs .is-here { color:var(--l-tinta); font-weight:600; }

/* ── Cabecera de especialidad (PCR) ── */
.lnd-hero { padding:44px 0 64px; }
.lnd-hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.lnd-hero h1 { font-size:clamp(36px,4.4vw,56px); font-weight:800; letter-spacing:-.028em;
  line-height:1.05; margin-top:16px; }
.lnd-hero .lead { margin-top:20px; }
.lnd-hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.lnd-figure { border:1px solid var(--l-borde); border-radius:20px; overflow:hidden;
  background:#fff; box-shadow:var(--shadow-md); }
.lnd-figure img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.lnd-figure figcaption { padding:14px 18px; font-size:12.5px; color:var(--l-muted);
  border-top:1px solid var(--l-borde); line-height:1.5; }

/* ── Cabecera compacta (sindromático, ejemplos, calidad) ── */
.lnd-head { background:var(--l-fondo); border-bottom:1px solid var(--l-borde);
  padding:34px 0 44px; }
.lnd-head h1 { font-size:clamp(32px,3.6vw,46px); font-weight:800; letter-spacing:-.025em;
  line-height:1.08; margin-top:14px; max-width:20ch; }
.lnd-head .lead { margin-top:18px; }
.lnd-head--doc { background:var(--l-navy); border-bottom:none; color:#fff; }
.lnd-head--doc h1, .lnd-head--doc .lead { color:#fff; }
.lnd-head--doc .lead { color:rgba(255,255,255,.78); }

/* ── Bloques ── */
.lnd-block { padding:72px 0; }
.lnd-block--tight { padding:52px 0; }
.lnd-block--alt { background:var(--l-fondo); }
.lnd-h2 { font-size:clamp(24px,2.4vw,32px); font-weight:800; letter-spacing:-.022em;
  max-width:24ch; }
.lnd-h3 { font-size:17px; font-weight:700; letter-spacing:-.01em; }
.lnd-sub { margin-top:14px; color:var(--l-muted); font-size:16px; line-height:1.65;
  max-width:62ch; }
.lnd-narrow { max-width:760px; }
.lnd-prose p { font-size:16.5px; line-height:1.72; color:var(--ink-700); margin-top:18px; }
.lnd-prose p:first-child { margin-top:0; }

/* ── Flujo de 3 pasos ── */
.lnd-flow { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px; counter-reset:f; }
.lnd-flow-step { position:relative; background:#fff; border:1px solid var(--l-borde);
  border-radius:16px; padding:24px 20px 22px; }
.lnd-flow-step::before { counter-increment:f; content:counter(f);
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:999px; background:var(--l-azul); color:#fff;
  font-size:13px; font-weight:800; }
.lnd-flow-step h4 { margin-top:14px; font-size:15.5px; font-weight:700; }
.lnd-flow-step p { margin-top:8px; font-size:14px; line-height:1.6; color:var(--l-muted); }

/* ── Tarjetas de grupo/panel ── */
.lnd-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; }
.lnd-grid--2 { grid-template-columns:repeat(2,1fr); }
.lnd-card { display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--l-borde); border-radius:18px; padding:26px 24px;
  box-shadow:var(--shadow-sm); }
.lnd-card h3 { font-size:18px; font-weight:800; letter-spacing:-.015em; }
.lnd-card > p { margin-top:10px; font-size:14.5px; line-height:1.62; color:var(--l-muted); }
.lnd-card-foot { margin-top:auto; padding-top:20px; }
.lnd-studies { display:flex; flex-direction:column; gap:8px; margin-top:18px; }
.lnd-study { display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; text-align:left; background:var(--l-fondo); border:1px solid transparent;
  border-radius:11px; padding:11px 14px; transition:.16s; }
.lnd-study:hover, .lnd-study:focus-visible { background:#fff; border-color:var(--l-azul);
  box-shadow:var(--shadow-sm); }
.lnd-study b { font-size:14px; font-weight:650; line-height:1.35; }
.lnd-study small { display:block; font-family:ui-monospace,monospace; font-size:11px;
  color:var(--l-muted); margin-top:3px; }
.lnd-study .go { color:var(--l-azul); font-weight:700; font-size:13px; flex:0 0 auto; }

/* ── Avisos ── */
.lnd-note { display:flex; gap:12px; margin-top:18px; padding:14px 16px;
  border-radius:12px; font-size:13.5px; line-height:1.6; }
.lnd-note--info { background:var(--brand-cyan-50); color:#1f4c58; }
.lnd-note--warn { background:var(--brand-yellow-50); color:#7a5600; }
.lnd-note--pend { background:var(--ink-100); color:var(--ink-600); }
.lnd-note b { font-weight:750; }

/* ── Banda de acceso a la hija ── */
.lnd-band { background:var(--l-navy); border-radius:24px; padding:44px 48px; color:#fff;
  display:grid; grid-template-columns:1.3fr auto; gap:36px; align-items:center; }
.lnd-band h2 { color:#fff; font-size:clamp(22px,2.2vw,30px); font-weight:800;
  letter-spacing:-.02em; max-width:22ch; }
.lnd-band p { margin-top:12px; color:rgba(255,255,255,.76); font-size:15.5px;
  line-height:1.65; max-width:52ch; }

/* ── Tabla de comparación cualitativa ── */
.lnd-tabla { width:100%; margin-top:28px; border-collapse:separate; border-spacing:0;
  border:1px solid var(--l-borde); border-radius:14px; overflow:hidden; font-size:14.5px; }
.lnd-tabla th, .lnd-tabla td { padding:14px 16px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--l-borde); line-height:1.55; }
.lnd-tabla thead th { background:var(--l-fondo); font-size:12px; font-weight:750;
  letter-spacing:.06em; text-transform:uppercase; color:var(--l-muted); }
.lnd-tabla tbody tr:last-child td { border-bottom:none; }
.lnd-tabla td:first-child { font-weight:650; color:var(--l-tinta); }
.lnd-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ── Herramienta: biblioteca ── */
.lnd-tool { display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  padding:18px; background:#fff; border:1px solid var(--l-borde); border-radius:16px;
  box-shadow:var(--shadow-sm); }
.lnd-search { display:flex; align-items:center; gap:10px; flex:1 1 260px;
  background:var(--l-fondo); border:1px solid var(--l-borde); border-radius:11px;
  padding:0 14px; height:44px; }
.lnd-search input { flex:1; border:none; background:none; outline:none; font-size:14.5px;
  color:var(--l-tinta); min-width:0; }
/* El input pierde su propio anillo al quitarle el outline: lo devuelve el
   contenedor. El resto del foco se marca aquí porque styles.css no define
   una regla global de :focus-visible. */
.lnd-search:focus-within { border-color:var(--l-azul); box-shadow:0 0 0 4px rgba(57,83,164,.12); }
.lnd a:focus-visible, .lnd button:focus-visible { outline:2px solid var(--l-azul);
  outline-offset:3px; border-radius:8px; }
.lnd-chips { display:flex; flex-wrap:wrap; gap:8px; }
.lnd-chip { border:1px solid var(--l-borde); background:#fff; border-radius:999px;
  padding:8px 15px; font-size:13px; font-weight:600; color:var(--ink-700); transition:.15s; }
.lnd-chip:hover { border-color:var(--l-azul); color:var(--l-azul); }
.lnd-chip.is-on { background:var(--l-azul); border-color:var(--l-azul); color:#fff; }
.lnd-empty { margin-top:24px; border:1px dashed var(--l-borde); border-radius:18px;
  padding:56px 32px; text-align:center; background:#fff; }
.lnd-empty h3 { font-size:19px; font-weight:750; margin-top:16px; }
.lnd-empty p { margin:10px auto 0; max-width:52ch; font-size:14.5px; line-height:1.65;
  color:var(--l-muted); }
.lnd-empty .lnd-empty-actions { display:flex; gap:10px; justify-content:center;
  flex-wrap:wrap; margin-top:24px; }


.lnd-tag { display:inline-flex; align-items:center; gap:5px; border-radius:999px;
  padding:4px 10px; font-size:11px; font-weight:750; letter-spacing:.02em; }
.lnd-tag--jpg { background:var(--brand-cyan-50); color:#1f4c58; }
.lnd-card--rec { padding:22px 22px 20px; }
.lnd-card--rec h3 { font-size:16.5px; }

/* ── Credenciales de calidad ── */
.lnd-cred-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.lnd-cred { display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--l-borde); border-radius:22px; padding:36px 34px 34px;
  box-shadow:var(--shadow-md); }
.lnd-cred-ic { display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:14px; background:var(--brand-cyan-50);
  color:var(--l-azul); margin-bottom:20px; }
.lnd-cred h2 { font-size:clamp(22px,2.1vw,28px); font-weight:800; letter-spacing:-.022em; }
.lnd-cred-lead { margin-top:14px; font-size:15.5px; line-height:1.65; color:var(--ink-700); }
.lnd-cred-meta { margin:24px 0 0; padding-top:20px; border-top:1px solid var(--l-borde);
  display:flex; flex-direction:column; gap:14px; }
.lnd-cred-meta div { display:flex; flex-direction:column; gap:3px; }
.lnd-cred-meta dt { font-size:11.5px; font-weight:750; letter-spacing:.08em;
  text-transform:uppercase; color:var(--l-muted); }
.lnd-cred-meta dd { margin:0; font-size:14.5px; font-weight:650; color:var(--l-tinta);
  line-height:1.5; }

/* ── Alcance certificado ── */
.lnd-alcance { max-width:900px; margin:0 auto; text-align:center; }
.lnd-alcance .eyebrow { justify-content:center; }
.lnd-alcance-txt { margin-top:18px; font-size:clamp(19px,2.1vw,26px); line-height:1.5;
  font-weight:650; letter-spacing:-.015em; color:var(--l-tinta); text-wrap:balance; }

/* ── Responsive ── */
@media (max-width:1040px) {
  .lnd-hero-grid { grid-template-columns:1fr; gap:38px; }
  .lnd-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
  .lnd-cred-grid { grid-template-columns:1fr; }
}
@media (max-width:820px) {
  .lnd-band { grid-template-columns:1fr; padding:34px 28px; }
  .lnd-flow { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .lnd-block { padding:52px 0; }
  .lnd-grid, .lnd-grid--2 { grid-template-columns:1fr; }
  .lnd-cred { padding:30px 26px 28px; }
  .lnd-hero { padding:30px 0 46px; }
  .lnd-head h1 { max-width:none; }
}
`}</style>;
}

/* ───────────────────────── piezas compartidas ───────────────────────── */

function Crumbs({ items }) {
  return (
    <div className="lnd-crumbs">
      <div className="container">
        <nav aria-label="Ruta de navegación">
          {items.map((it, i) => (
            <React.Fragment key={i}>
              {i > 0 && <span aria-hidden="true">/</span>}
              {it.go
                ? <a href="#" onClick={(e) => { e.preventDefault(); it.go(); }}>{it.label}</a>
                : <span className="is-here" aria-current="page">{it.label}</span>}
            </React.Fragment>
          ))}
        </nav>
      </div>
    </div>
  );
}

/* Lista de estudios reales del catálogo, por identificador estable. */
function StudyLinks({ grupo, openStudy, openCatalog }) {
  const studies = (grupo.estudios || [])
    .map(id => window.STUDIES.find(s => s.id === id))
    .filter(Boolean);

  if (studies.length === 0) return null;

  return (
    <>
      <div className="lnd-studies">
        {studies.map(s => (
          <button key={s.id} className="lnd-study" onClick={() => openStudy(s.id)}>
            <span><b>{s.name}</b><small>{s.code}</small></span>
            <span className="go" aria-hidden="true">Ver ficha →</span>
          </button>
        ))}
      </div>
      {grupo.filtro_catalogo && (
        <div className="lnd-card-foot">
          <button className="btn-link" onClick={() => openCatalog(grupo.filtro_catalogo)}>
            Ver en el catálogo <Icon name="arrow" size={14} />
          </button>
        </div>
      )}
    </>
  );
}

/* ═════════════════════ 1. PCR MÚLTIPLEX ═════════════════════ */

function PcrMultiplexPage({ navigate, openStudy, openCatalog, onOpenLead }) {
  const { PANEL_GRUPOS, AREAS_RELACIONADAS } = LD();

  return (
    <main className="lnd" data-screen-label="14 PCR múltiplex"><LandingStyles />
      <Crumbs items={[
        { label: "Inicio", go: () => navigate("home") },
        { label: "Estudios", go: () => navigate("catalogo") },
        { label: "Estudios PCR múltiplex" },
      ]} />

      <section className="lnd-hero">
        <div className="container">
          <div className="lnd-hero-grid">
            <div>
              <div className="eyebrow">Especialidad molecular</div>
              <h1 className="text-balance">Estudios PCR múltiplex</h1>
              <p className="lead text-pretty">
                Una sola muestra, varios agentes buscados a la vez. Aquí explicamos
                cómo se organiza esta técnica en paneles y qué estudios del catálogo
                de InfectoLab la utilizan.
              </p>
              <div className="lnd-hero-cta">
                <button className="btn btn-primary btn-lg"
                  onClick={() => openCatalog({ cat: "Molecular", q: "" })}>
                  Ver estudios PCR <Icon name="arrow" size={16} />
                </button>
                <button className="btn btn-ghost btn-lg" onClick={() => navigate("sindromatico")}>
                  Diagnóstico sindromático
                </button>
              </div>
            </div>
            <figure className="lnd-figure" style={{ margin: 0 }}>
              <img src="assets/blog/pcr.png"
                alt="Pipeta de laboratorio depositando una muestra en una gradilla, junto a tubos y reactivos" />
              <figcaption>
                Imagen editorial de InfectoLab, la misma del artículo «¿Qué es el PCR?»
                del blog. No es una captura de un resultado clínico.
              </figcaption>
            </figure>
          </div>
        </div>
      </section>

      <section className="lnd-block lnd-block--alt">
        <div className="container">
          <h2 className="lnd-h2 text-balance">Qué significa que una PCR sea múltiplex</h2>
          <div className="lnd-prose lnd-narrow" style={{ marginTop: 20 }}>
            <p>
              La PCR amplifica el material genético de un microorganismo hasta que se
              vuelve detectable, aunque en la muestra hubiera muy poca cantidad. Una PCR
              convencional busca un blanco a la vez: se pide sabiendo ya qué se sospecha.
            </p>
            <p>
              En una PCR múltiplex la reacción se prepara con varios blancos genéticos
              simultáneos. En vez de pedir una prueba por microorganismo, se pide un
              <b> panel</b>: un conjunto definido de agentes que comparten forma de
              presentarse. Por eso los paneles se agrupan por aparato o por cuadro
              clínico y no por familia de germen.
            </p>
            <p>
              Qué agentes incluye cada panel, con qué muestra se toma y en cuánto tiempo
              se entrega son datos del estudio, no de esta página: cada ficha del catálogo
              los publica desde su propia fuente.
            </p>
          </div>

          <div className="lnd-flow">
            <div className="lnd-flow-step">
              <h4>Una muestra</h4>
              <p>El tipo de muestra depende del panel y está indicado en cada ficha:
                hisopado, sangre, materia fecal u otro material biológico.</p>
            </div>
            <div className="lnd-flow-step">
              <h4>Varios blancos a la vez</h4>
              <p>La reacción incluye simultáneamente los blancos genéticos definidos
                para ese panel, sin necesidad de que el microorganismo crezca en cultivo.</p>
            </div>
            <div className="lnd-flow-step">
              <h4>Un reporte por panel</h4>
              <p>El informe indica qué se buscó y qué se detectó. La interpretación
                corresponde al médico tratante junto con el cuadro clínico.</p>
            </div>
          </div>

          <div className="lnd-note lnd-note--warn lnd-narrow">
            <span>
              <b>Una PCR no diagnostica por sí sola.</b> Detectar material genético de un
              agente no equivale a establecer que ese agente causa el cuadro. El resultado
              se interpreta siempre con la valoración clínica.
            </span>
          </div>
        </div>
      </section>

      <section className="lnd-block">
        <div className="container">
          <h2 className="lnd-h2 text-balance">Paneles por aplicación</h2>
          <p className="lnd-sub">
            Los paneles se agrupan por el aparato o el cuadro clínico al que responden.
            Cada uno abre la ficha del estudio, con su muestra, preparación y tiempo
            de entrega.
          </p>
          <div className="lnd-grid">
            {PANEL_GRUPOS.map(g => (
              <article className="lnd-card" key={g.id}>
                <h3>{g.nombre}</h3>
                <p>{g.resumen}</p>
                <StudyLinks grupo={g} openStudy={openStudy} openCatalog={openCatalog} />
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="lnd-block lnd-block--tight">
        <div className="container">
          <div className="lnd-band">
            <div>
              <div className="eyebrow eyebrow--light">Página relacionada</div>
              <h2 style={{ marginTop: 12 }}>El enfoque por síndrome, explicado aparte</h2>
              <p>
                Por qué conviene partir del cuadro clínico y no del germen, qué panel
                corresponde a cada presentación y dónde están los límites del método.
                Está pensada sobre todo para médicos e instituciones.
              </p>
            </div>
            <button className="btn btn-light btn-lg" onClick={() => navigate("sindromatico")}>
              Ver diagnóstico sindromático <Icon name="arrow" size={16} />
            </button>
          </div>
        </div>
      </section>

      <section className="lnd-block lnd-block--alt">
        <div className="container">
          <div className="lnd-grid lnd-grid--2">
            <article className="lnd-card">
              <h3>Ejemplos de resultados</h3>
              <p>
                Consulta el formato de reporte de cada panel y familiarízate con la
                estructura del informe antes de tenerlo en la mano.
              </p>
              <div className="lnd-card-foot">
                <button className="btn btn-ghost" onClick={() => navigate("ejemplos")}>
                  Abrir la biblioteca <Icon name="arrow" size={14} />
                </button>
              </div>
            </article>
            <article className="lnd-card">
              <h3>Catálogo completo</h3>
              <p>
                Preparación, tipo de muestra, tiempo de respuesta, disponibilidad y precio
                particular se consultan en la ficha de cada estudio, que es la única fuente
                de esos datos.
              </p>
              <div className="lnd-card-foot">
                <button className="btn btn-ghost" onClick={() => openCatalog(null)}>
                  Ver todos los estudios <Icon name="arrow" size={14} />
                </button>
              </div>
            </article>
          </div>
        </div>
      </section>

      <section className="lnd-block">
        <div className="container">
          <h2 className="lnd-h2 text-balance">Áreas moleculares relacionadas</h2>
          <p className="lnd-sub">
            Comparten laboratorio y tecnología con los paneles múltiplex, pero no son
            paneles múltiplex. Se listan aparte para no clasificarlas de más.
          </p>
          <div className="lnd-grid">
            {AREAS_RELACIONADAS.map(a => (
              <article className="lnd-card" key={a.id}>
                <h3>{a.nombre}</h3>
                <p>{a.resumen}</p>
                <StudyLinks grupo={a} openStudy={openStudy} openCatalog={openCatalog} />
              </article>
            ))}
          </div>
        </div>
      </section>

      <CtaBand navigate={navigate} onOpenLead={onOpenLead} />
    </main>
  );
}

/* ═════════════════ 2. DIAGNÓSTICO SINDROMÁTICO ═════════════════ */

function DiagnosticoSindromaticoPage({ navigate, openStudy, openCatalog, onOpenLead }) {
  const { PANEL_GRUPOS } = LD();

  return (
    <main className="lnd" data-screen-label="15 Diagnóstico sindromático"><LandingStyles />
      <div className="lnd-head">
        <div className="container">
          <nav aria-label="Ruta de navegación"
            style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center", fontSize: 13, color: "var(--ink-500)" }}>
            <a href="#" onClick={(e) => { e.preventDefault(); navigate("home"); }} style={{ color: "var(--ink-500)" }}>Inicio</a>
            <span aria-hidden="true">/</span>
            <a href="#" onClick={(e) => { e.preventDefault(); navigate("pcr-multiplex"); }} style={{ color: "var(--brand-primary)", fontWeight: 600 }}>Estudios PCR múltiplex</a>
            <span aria-hidden="true">/</span>
            <span aria-current="page" style={{ color: "var(--ink-900)", fontWeight: 600 }}>Diagnóstico sindromático</span>
          </nav>
          <h1 className="text-balance">Diagnóstico sindromático</h1>
          <p className="lead text-pretty">
            Partir del cuadro clínico y no del germen sospechado. Qué aporta ese cambio
            de orden, qué panel corresponde a cada presentación y qué no resuelve.
          </p>
        </div>
      </div>

      <section className="lnd-block">
        <div className="container">
          <div className="lnd-narrow lnd-prose">
            <h2 className="lnd-h2 text-balance" style={{ marginBottom: 20 }}>
              Del germen sospechado al síndrome observado
            </h2>
            <p>
              El estudio dirigido parte de una hipótesis: se sospecha un agente y se pide
              la prueba para confirmarlo o descartarlo. Funciona bien cuando la sospecha
              es estrecha, y funciona mal cuando varios agentes distintos producen un
              cuadro clínico prácticamente idéntico.
            </p>
            <p>
              El enfoque sindromático invierte el orden. Se parte de lo que se observa —un
              síndrome respiratorio agudo, una gastroenteritis, un cuadro neurológico
              infeccioso— y se solicita el panel que cubre los agentes descritos para esa
              presentación. La pregunta deja de ser «¿es este germen?» y pasa a ser
              «¿cuál de los agentes compatibles con este cuadro está presente?».
            </p>
            <p>
              La consecuencia práctica es que una sola solicitud cubre el diferencial
              habitual del síndrome, en lugar de encadenar pruebas dirigidas hasta acertar.
            </p>
          </div>

          <div className="lnd-narrow lnd-scroll">
            <table className="lnd-tabla">
              <caption className="lnd-sr">Comparación cualitativa entre el enfoque dirigido y el enfoque sindromático</caption>
              <thead>
                <tr><th scope="col">Aspecto</th><th scope="col">Estudio dirigido</th><th scope="col">Panel sindromático</th></tr>
              </thead>
              <tbody>
                <tr>
                  <td>Punto de partida</td>
                  <td>Un agente sospechado</td>
                  <td>El cuadro clínico observado</td>
                </tr>
                <tr>
                  <td>Cobertura</td>
                  <td>Un blanco por prueba</td>
                  <td>El conjunto de agentes definido para ese panel</td>
                </tr>
                <tr>
                  <td>Si la sospecha inicial falla</td>
                  <td>Requiere solicitar otra prueba</td>
                  <td>El agente puede estar entre los ya buscados</td>
                </tr>
                <tr>
                  <td>Alcance del resultado</td>
                  <td>Confirma o descarta ese agente</td>
                  <td>Informa sólo sobre los agentes incluidos en el panel</td>
                </tr>
              </tbody>
            </table>
            <div className="lnd-note lnd-note--info">
              <span>
                El alcance, el tiempo de respuesta y la muestra de cada panel se consultan
                en la ficha del estudio.
              </span>
            </div>
          </div>
        </div>
      </section>

      <section className="lnd-block lnd-block--alt">
        <div className="container">
          <h2 className="lnd-h2 text-balance">Grupos por aplicación clínica</h2>
          <p className="lnd-sub">
            Orientación sobre cómo está organizada la oferta molecular. No es una
            herramienta de autodiagnóstico ni recomienda pruebas a partir de síntomas:
            la indicación corresponde al médico tratante.
          </p>
          <div className="lnd-grid lnd-grid--2">
            {PANEL_GRUPOS.map(g => (
              <article className="lnd-card" key={g.id}>
                <h3>{g.nombre}</h3>
                <p>{g.resumen}</p>
                <StudyLinks grupo={g} openStudy={openStudy} openCatalog={openCatalog} />
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="lnd-block">
        <div className="container">
          <div className="lnd-grid lnd-grid--2">
            <article className="lnd-card">
              <h3>Qué se consulta en la ficha del estudio</h3>
              <p>
                Estos datos no se duplican aquí porque cambian con la fuente y deben tener
                un solo origen:
              </p>
              <ul style={{ listStyle: "none", margin: "16px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 9 }}>
                {["Tipo de muestra y contenedor", "Preparación previa del paciente",
                  "Alcance del panel: qué agentes incluye", "Tiempo de entrega y disponibilidad",
                  "Precio particular vigente"].map((t, i) => (
                  <li key={i} style={{ display: "grid", gridTemplateColumns: "16px 1fr", gap: 9, fontSize: 14, lineHeight: 1.55, color: "var(--ink-700)" }}>
                    <span style={{ color: "var(--brand-primary)", fontWeight: 800 }}>·</span>{t}
                  </li>
                ))}
              </ul>
              <div className="lnd-card-foot">
                <button className="btn btn-ghost btn-sm" onClick={() => openCatalog({ cat: "Molecular", q: "" })}>
                  Ver estudios moleculares <Icon name="arrow" size={14} />
                </button>
              </div>
            </article>

            <article className="lnd-card">
              <h3>Límites del método</h3>
              <p>
                Un panel amplio no sustituye el razonamiento clínico. Conviene tener
                presente que:
              </p>
              <ul style={{ listStyle: "none", margin: "16px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 9 }}>
                {["Sólo informa sobre los agentes que el panel incluye.",
                  "Detectar material genético no prueba, por sí solo, causalidad.",
                  "Un resultado negativo no descarta toda infección.",
                  "La elección del panel y la lectura del informe son decisión médica."].map((t, i) => (
                  <li key={i} style={{ display: "grid", gridTemplateColumns: "16px 1fr", gap: 9, fontSize: 14, lineHeight: 1.55, color: "var(--ink-700)" }}>
                    <span style={{ color: "var(--brand-yellow-600)", fontWeight: 800 }}>·</span>{t}
                  </li>
                ))}
              </ul>
            </article>
          </div>

          <div className="lnd-grid lnd-grid--2" style={{ marginTop: 16 }}>
            <article className="lnd-card">
              <h3>Formatos de reporte</h3>
              <p>
                Cómo se ve el informe de cada panel, en la biblioteca de ejemplos de
                resultados.
              </p>
              <div className="lnd-card-foot">
                <button className="btn btn-ghost btn-sm" onClick={() => navigate("ejemplos")}>
                  Ver ejemplos <Icon name="arrow" size={14} />
                </button>
              </div>
            </article>
            <article className="lnd-card">
              <h3>Orden, convenio y ventas</h3>
              <p>
                Los médicos generan la orden desde InfectoApp. Clínicas, hospitales y
                empresas coordinan por convenio o con el área de ventas.
              </p>
              <div className="lnd-card-foot" style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                <a className="btn btn-primary btn-sm" href="https://app.infectolab.mx/solicitud"
                  target="_blank" rel="noopener noreferrer">
                  Generar orden<span className="lnd-sr"> (abre en una pestaña nueva)</span>
                </a>
                <button className="btn btn-ghost btn-sm" onClick={() => navigate("contacto")}>
                  Solicitar convenio
                </button>
              </div>
            </article>
          </div>
        </div>
      </section>

      <CtaBand navigate={navigate} onOpenLead={onOpenLead} />
    </main>
  );
}

/* ═════════════ 3. EJEMPLOS DE RESULTADOS (biblioteca) ═════════════ */

function EjemplosResultadosPage({ navigate, openStudy, openCatalog, onOpenLead }) {
  const { RECURSOS, RECURSO_SECCIONES } = LD();
  const [q, setQ] = React.useState("");
  const [sec, setSec] = React.useState("all");

  const filtrados = RECURSOS.filter(r => {
    if (sec !== "all" && r.seccion !== sec) return false;
    if (q.trim()) {
      const n = q.trim().toLowerCase();
      if (!r.nombre.toLowerCase().includes(n) && !r.seccion.toLowerCase().includes(n)) return false;
    }
    return true;
  });

  return (
    <main className="lnd" data-screen-label="16 Ejemplos de resultados"><LandingStyles />
      <div className="lnd-head">
        <div className="container">
          <nav aria-label="Ruta de navegación"
            style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center", fontSize: 13, color: "var(--ink-500)" }}>
            <a href="#" onClick={(e) => { e.preventDefault(); navigate("home"); }} style={{ color: "var(--ink-500)" }}>Inicio</a>
            <span aria-hidden="true">/</span>
            <a href="#" onClick={(e) => { e.preventDefault(); navigate("catalogo"); }} style={{ color: "var(--ink-500)" }}>Estudios</a>
            <span aria-hidden="true">/</span>
            <span aria-current="page" style={{ color: "var(--ink-900)", fontWeight: 600 }}>Ejemplos de resultados</span>
          </nav>
          <h1 className="text-balance">Ejemplos de resultados de laboratorio</h1>
          <p className="lead text-pretty">
            Así se ve un informe de InfectoLab. Consulta el formato de reporte de cada
            panel y familiarízate con su estructura antes de recibir el tuyo.
          </p>
          <div className="lnd-note lnd-note--info" style={{ maxWidth: 640 }}>
            <span>
              ¿Buscas tu resultado? Entra al{" "}
              <a href="#" onClick={(e) => { e.preventDefault(); navigate("resultados"); }}
                style={{ color: "inherit", textDecoration: "underline" }}>portal de resultados</a>.
              La interpretación de un resultado propio corresponde a tu médico.
            </span>
          </div>
        </div>
      </div>

      <section className="lnd-block lnd-block--tight">
        <div className="container">
          <div className="lnd-tool">
            <div className="lnd-search">
              <Icon name="search" size={17} />
              <label htmlFor="lnd-q" className="lnd-sr">Buscar por nombre de estudio</label>
              <input id="lnd-q" type="search" placeholder="Buscar por nombre de estudio…"
                value={q} onChange={(e) => setQ(e.target.value)} />
            </div>
            <div className="lnd-chips" role="group" aria-label="Filtrar por familia">
              <button className={"lnd-chip" + (sec === "all" ? " is-on" : "")}
                onClick={() => setSec("all")} aria-pressed={sec === "all"}>Todas</button>
              {RECURSO_SECCIONES.map(s => (
                <button key={s} className={"lnd-chip" + (sec === s ? " is-on" : "")}
                  onClick={() => setSec(s)} aria-pressed={sec === s}>{s}</button>
              ))}
            </div>
          </div>

          <p style={{ marginTop: 16, fontSize: 13.5, color: "var(--ink-500)" }} aria-live="polite">
            {filtrados.length} {filtrados.length === 1 ? "ejemplo" : "ejemplos"} de {RECURSOS.length}
          </p>

          {filtrados.length > 0 ? (
            <div className="lnd-grid" style={{ marginTop: 20 }}>
              {filtrados.map(r => {
                const est = r.estudio && window.STUDIES.find(s => s.id === r.estudio);
                return (
                  <article className="lnd-card lnd-card--rec" key={r.id}>
                    <span className="lnd-tag lnd-tag--jpg" style={{ alignSelf: "flex-start" }}>
                      {r.seccion}
                    </span>
                    <h3 style={{ marginTop: 12 }}>{r.nombre}</h3>
                    <div className="lnd-card-foot" style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
                      <a className="btn btn-ghost btn-sm" href={r.archivo}
                        target="_blank" rel="noopener noreferrer">
                        Ver ejemplo<span className="lnd-sr"> de resultado de {r.nombre}, abre en una pestaña nueva</span>
                        <Icon name="arrow" size={14} />
                      </a>
                      {est && (
                        <button className="btn-link" onClick={() => openStudy(est.id)}>
                          Ver el estudio
                        </button>
                      )}
                    </div>
                  </article>
                );
              })}
            </div>
          ) : (
            <div className="lnd-empty">
              <Icon name="search" size={28} style={{ color: "var(--ink-400)", margin: "0 auto" }} />
              <h3>Sin coincidencias</h3>
              <p>Prueba con otro nombre o cambia de familia.</p>
              <div className="lnd-empty-actions">
                <button className="btn btn-ghost" onClick={() => { setQ(""); setSec("all"); }}>
                  Ver todos los ejemplos
                </button>
              </div>
            </div>
          )}

          <div className="lnd-grid lnd-grid--2" style={{ marginTop: 40 }}>
            <article className="lnd-card">
              <h3>Consulta el estudio completo</h3>
              <p>
                Muestra, preparación, tiempo de entrega, disponibilidad y precio particular
                de cada prueba, en el catálogo.
              </p>
              <div className="lnd-card-foot">
                <button className="btn btn-ghost btn-sm" onClick={() => openCatalog(null)}>
                  Ver el catálogo <Icon name="arrow" size={14} />
                </button>
              </div>
            </article>
            <article className="lnd-card">
              <h3>Sobre los paneles PCR</h3>
              <p>
                Cómo se organiza la PCR múltiplex en paneles y qué aporta el enfoque por
                síndrome frente al estudio dirigido.
              </p>
              <div className="lnd-card-foot" style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                <button className="btn btn-ghost btn-sm" onClick={() => navigate("pcr-multiplex")}>
                  PCR múltiplex
                </button>
                <button className="btn btn-ghost btn-sm" onClick={() => navigate("sindromatico")}>
                  Diagnóstico sindromático
                </button>
              </div>
            </article>
          </div>
        </div>
      </section>

      <CtaBand navigate={navigate} onOpenLead={onOpenLead} />
    </main>
  );
}

/* ═════════════════ 4. CALIDAD — ISO y PACAL ═════════════════ */

function CalidadPage({ navigate, onOpenLead }) {
  const { CALIDAD } = LD();
  const { iso, pacal, beneficios } = CALIDAD;

  return (
    <main className="lnd" data-screen-label="17 Calidad ISO"><LandingStyles />
      <div className="lnd-head lnd-head--doc">
        <div className="container">
          <nav aria-label="Ruta de navegación"
            style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center", fontSize: 13, color: "rgba(255,255,255,.6)" }}>
            <a href="#" onClick={(e) => { e.preventDefault(); navigate("home"); }} style={{ color: "rgba(255,255,255,.6)" }}>Inicio</a>
            <span aria-hidden="true">/</span>
            <span aria-current="page" style={{ color: "#fff", fontWeight: 600 }}>Calidad y certificación</span>
          </nav>
          <div className="eyebrow eyebrow--light" style={{ marginTop: 22 }}>Calidad</div>
          <h1 className="text-balance">Certificación ISO 9001:2015</h1>
          <p className="lead text-pretty">
            Trabajamos con un sistema de gestión de la calidad certificado y participamos
            en evaluación externa de nuestra calidad analítica.
          </p>
        </div>
      </div>

      {/* Dos credenciales, presentadas al mismo nivel */}
      <section className="lnd-block">
        <div className="container">
          <div className="lnd-cred-grid">
            <article className="lnd-cred">
              <span className="lnd-cred-ic"><Icon name="award" size={20} /></span>
              <h2>ISO 9001:2015</h2>
              <p className="lnd-cred-lead">
                Nuestro sistema de gestión de la calidad está certificado bajo la norma
                {" "}{iso.norma}.
              </p>
              <dl className="lnd-cred-meta">
                <div><dt>Organismo certificador</dt><dd>{iso.organismo}</dd></div>
                <div><dt>Acreditación</dt><dd>{iso.acreditacion}</dd></div>
              </dl>
              <a className="btn btn-ghost btn-sm" style={{ marginTop: 24 }}
                href={iso.documento} target="_blank" rel="noopener noreferrer">
                Ver el certificado<span className="lnd-sr"> en formato PDF, abre en una pestaña nueva</span>
                <Icon name="arrow" size={14} />
              </a>
            </article>

            <article className="lnd-cred">
              <span className="lnd-cred-ic"><Icon name="shield" size={20} /></span>
              <h2>Evaluación externa de la calidad</h2>
              <p className="lnd-cred-lead">{pacal.texto}</p>
              <dl className="lnd-cred-meta">
                <div><dt>Programa</dt><dd>{pacal.organismo}</dd></div>
              </dl>
            </article>
          </div>
        </div>
      </section>

      {/* Alcance certificado, como declaración de confianza */}
      <section className="lnd-block lnd-block--alt lnd-block--tight">
        <div className="container">
          <div className="lnd-alcance">
            <div className="eyebrow">Alcance certificado</div>
            <p className="lnd-alcance-txt">{iso.alcance}</p>
          </div>
        </div>
      </section>

      {/* Qué significa para quien nos consulta */}
      <section className="lnd-block">
        <div className="container">
          <h2 className="lnd-h2 text-balance">Qué significa para ti</h2>
          <p className="lnd-sub">
            Una certificación de calidad no es un sello en la pared: es la forma en que
            operamos todos los días.
          </p>
          <div className="lnd-grid">
            {beneficios.map((b, i) => (
              <article className="lnd-card" key={i}>
                <h3>{b.titulo}</h3>
                <p>{b.texto}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <CtaBand navigate={navigate} onOpenLead={onOpenLead} />
    </main>
  );
}

Object.assign(window, {
  PcrMultiplexPage, DiagnosticoSindromaticoPage, EjemplosResultadosPage, CalidadPage,
  LandingStyles,
});
