// SALUD · 7 dominios interactivos + 10 SDMs + 4 capas + Interoperabilidad HL7/FHIR

const SaludDomains = () => {
  const [active, setActive] = React.useState(0);
  const domains = [
    {
      k: 'ABASTECIMIENTO E INVENTARIO', icon: 'package', color: '#F4024C',
      question: '¿Cómo ayuda OMNIX a anticipar quiebres de stock hospitalario?',
      answer: 'OMNIX conecta consumo histórico, agenda operacional, inventario local y de red, órdenes pendientes y proveedores para predecir riesgo de quiebre, recomendar redistribución entre centros, priorizar reposición y controlar vencimientos, lotes y cadena de frío · sobre los sistemas de inventario y compras existentes.',
      cases: ['Predicción de demanda', 'Reposición · redistribución', 'Priorización de pedidos críticos', 'Control de vencimientos', 'Cadena de frío', 'Reserva de inventario', 'Sustitución con equivalencias autorizadas', 'Reducción de inmovilizado', 'Compras urgentes', 'Conciliación de inventario'],
      kpi: 'Fill rate · quiebres · días de cobertura · vencimientos · precisión · OTIF · lead time',
      systems: 'ERP · WMS · farmacia · laboratorio · compras · proveedores · agenda operacional',
      autonomy: 'N3 · aprobación en sustituciones y compras urgentes',
      restriction: 'Sin sustitución automática de productos clínicos. Reglas de equivalencia y aprobación profesional obligatorias.',
    },
    {
      k: 'EQUIPOS BIOMÉDICOS Y REPUESTOS', icon: 'activity', color: '#0050BD',
      question: '¿Qué equipos están realmente disponibles para operar?',
      answer: 'OMNIX consolida el inventario maestro de equipos con ubicación, estado, criticidad, configuración, historial, horas de uso, garantías, contratos, calibración, repuestos, accesorios y obsolescencia · para dar visibilidad de disponibilidad real y priorizar inversiones, retiro y reemplazo.',
      cases: ['Inventario maestro', 'Localización · RTLS', 'Duplicados y baja utilización', 'Equipos fuera de servicio', 'Repuestos críticos', 'Gestión de garantías y contratos', 'Reposición · obsolescencia', 'Priorización de inversiones', 'Retiro y reemplazo'],
      kpi: 'Disponibilidad · utilización · localizados · fuera de servicio · obsolescencia · sin mantenimiento',
      systems: 'EAM · CMMS · WMS · ERP · RTLS · contratos · proveedores',
      autonomy: 'N2-N3 · liberación clínica del equipo permanece en Ingeniería Clínica',
      restriction: 'OMNIX no determina si un equipo es seguro para uso clínico. La liberación permanece en el rol autorizado. [VALIDAR SEGURIDAD CLÍNICA]',
    },
    {
      k: 'MANTENIMIENTO E INGENIERÍA CLÍNICA', icon: 'wrench', color: '#B8860B',
      question: '¿Cómo prioriza OMNIX el mantenimiento biomédico?',
      answer: 'OMNIX relaciona condición del equipo, historial de fallas, criticidad, disponibilidad de alternativas, demanda programada, repuestos, técnicos, contratos y SLA para priorizar intervenciones preventivas, predictivas y correctivas · coordinar proveedor y confirmar recuperación.',
      cases: ['Preventivo · predictivo · correctivo', 'Inspecciones · calibraciones', 'Fallas repetitivas', 'Órdenes pendientes · backlog', 'Asignación de técnicos', 'Coordinación de repuestos', 'Gestión de proveedor y SLA', 'Evidencia de reparación'],
      kpi: 'Disponibilidad · MTBF · MTTR · backlog · preventivos · fallas repetitivas · first-time-fix',
      systems: 'CMMS · EAM · WMS · contratos · proveedores · IoT sensores',
      autonomy: 'N3-N4 · con approval de Ingeniería Clínica en intervenciones críticas',
      restriction: 'La calibración final y la liberación del equipo permanecen en el rol autorizado según normativa aplicable.',
    },
    {
      k: 'CAPACIDAD Y FLUJO OPERACIONAL', icon: 'layout-grid', color: '#0F5132',
      question: '¿Cómo coordina OMNIX capacidad hospitalaria entre unidades y centros?',
      answer: 'OMNIX consolida capacidad de camas, pabellones, urgencias, ambulancias, equipos compartidos, personal disponible y demanda esperada para detectar restricciones operacionales · comparar alternativas de coordinación · preparar workflows · actualizar sistemas y notificar responsables. Alcance exclusivamente operacional.',
      cases: ['Consolidación de capacidad', 'Detección de cuellos de botella', 'Coordinación de ambulancias', 'Traslados operacionales', 'Limpieza y preparación', 'Restricciones de personal', 'Equipos compartidos'],
      kpi: 'Utilización · tiempo de espera operacional · actividades reprogramadas · restricciones detectadas',
      systems: 'Bed management · OR scheduling · ambulancias · agenda · HIS (solo lectura)',
      autonomy: 'N2-N3 · sin triage clínico autónomo',
      restriction: 'Sin triaje clínico. Sin priorización clínica de pacientes. Sin decisiones sobre admisión, alta o tratamiento. Supervisión clínica obligatoria en toda decisión con impacto en atención.',
    },
    {
      k: 'FARMACIA · LABORATORIO · CADENA DE FRÍO', icon: 'thermometer-snowflake', color: '#EA384C',
      question: '¿Cómo ayuda OMNIX en farmacia hospitalaria, laboratorio y cadena de frío?',
      answer: 'OMNIX gestiona inventario de medicamentos y reactivos, lotes, vencimientos, temperaturas, consumos atípicos y demanda estacional · para detectar riesgo de quiebre, priorizar reposición, preparar transferencia entre centros, escalar incidentes de cadena de frío y aislar administrativamente lotes bajo revisión.',
      cases: ['Quiebres de medicamentos', 'Falta de reactivos', 'Vencimientos · lotes · retiros', 'Temperatura y almacenamiento', 'Reposición · redistribución', 'Consumo atípico · estacional', 'Órdenes urgentes'],
      kpi: 'Fill rate farmacia · vencidos · quiebres · incidentes cadena de frío · trazabilidad lote',
      systems: 'Farmacia · LIS · IoT temperatura · WMS · ERP · trazabilidad lote',
      autonomy: 'N3 · aprobación farmacéutica en sustituciones y aislamientos',
      restriction: 'OMNIX no recomienda medicamentos, dosis ni tratamientos. Sustituciones terapéuticas requieren aprobación farmacéutica y clínica según normativa.',
    },
    {
      k: 'RESILIENCIA Y CONTINUIDAD', icon: 'shield-check', color: '#52557A',
      question: '¿Cómo apoya OMNIX la continuidad asistencial ante incidentes?',
      answer: 'OMNIX construye una visión operacional común entre energía, agua, gases clínicos, climatización, redes, infraestructura crítica y proveedores para identificar servicios afectados, priorizar recursos, coordinar equipos, activar workflows autorizados, registrar decisiones y medir recuperación.',
      cases: ['Corte de energía · agua · gases', 'Fallas de climatización · redes', 'Caída de proveedor crítico', 'Aumento de demanda estacional', 'Emergencias sanitarias', 'Traslado de operaciones', 'Recuperación coordinada'],
      kpi: 'MTTD · MTTR · disponibilidad · incidentes · servicios afectados · tiempo recuperación',
      systems: 'BMS · SCADA infraestructura · SIEM · gestión de proveedores · comunicaciones',
      autonomy: 'N2-N3 · runbooks pre-autorizados por evento',
      restriction: 'Sin operaciones cibernéticas ofensivas. Sin acciones sobre proveedores sin autorización explícita.',
    },
    {
      k: 'COMPRAS E INTEGRIDAD', icon: 'file-search', color: '#B00238',
      question: '¿Cómo apoya OMNIX el control de compras hospitalarias?',
      answer: 'OMNIX detecta anomalías en pagos, órdenes duplicadas, consumos atípicos, diferencias de precio, recepciones incompletas, contratos próximos a vencer y equipos adquiridos sin uso · para priorizar revisión de auditoría, preparar antecedentes y escalar casos. Prioriza investigación · no determina culpabilidad ni aplica sanciones.',
      cases: ['Órdenes duplicadas', 'Diferencias de precio · consumos atípicos', 'Proveedores recurrentes', 'Recepciones incompletas', 'Contratos próximos a vencer', 'Equipos adquiridos sin uso', 'Repuestos no compatibles'],
      kpi: 'Anomalías detectadas · casos priorizados · duplicados resueltos · vencimientos anticipados',
      systems: 'ERP · sistemas de compras · contratos · proveedores · inventario · pagos',
      autonomy: 'N2-N3 · aprobación humana obligatoria en cualquier decisión sobre proveedor',
      restriction: 'OMNIX prioriza investigación. No determina fraude · no aplica sanciones · no adjudica contratos automáticamente. Debido proceso preservado.',
    },
  ];
  const d = domains[active];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <Reveal><SectionMeta n="03" label="Siete dominios de aplicación"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#000', maxWidth: 900 }}>
            Siete dominios sanitarios · <span style={{ color: '#F4024C' }}>una sola plataforma cognitiva</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#52557A', margin: '0 0 56px', maxWidth: 780 }}>
            Alcance operacional. Sin decisiones clínicas autónomas. Cada dominio con SDM propio, KPI, autonomía graduable y restricciones profesionales explícitas.
          </p>
        </Reveal>

        {/* Selector · 7 tabs */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 0, marginBottom: 24, border: '1.5px solid #1E1F26' }}>
          {domains.map((dom, i) => (
            <button key={dom.k} onClick={() => setActive(i)} style={{
              padding: '14px 10px', border: 'none', textAlign: 'left', cursor: 'pointer',
              background: active === i ? '#000' : '#FFF',
              color: active === i ? '#FFF' : '#1E1F26',
              borderRight: (i < 6) ? '1px solid #E4EBF3' : 'none',
              transition: 'all 220ms',
              display: 'flex', flexDirection: 'column', gap: 8, minHeight: 110,
            }}>
              <i data-lucide={dom.icon} width="18" height="18" style={{ strokeWidth: 1.5, color: active === i ? dom.color : '#96A3B5' }}/>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: active === i ? dom.color : '#96A3B5' }}>DOM · 0{i+1}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 10, letterSpacing: '-0.005em', lineHeight: 1.2 }}>{dom.k}</div>
            </button>
          ))}
        </div>

        {/* Active panel */}
        <div key={active} style={{
          border: '1.5px solid #1E1F26', background: '#FFF', padding: 40,
          animation: 'omnix-slide-in 380ms cubic-bezier(0.2,0.7,0.2,1)',
          display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 40,
        }}>
          <div>
            <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 20 }}>
              <div style={{ width: 56, height: 56, border: `1.5px solid ${d.color}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <i data-lucide={d.icon} width="24" height="24" style={{ color: d.color, strokeWidth: 1.5 }}/>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: d.color }}>DOMINIO · 0{active+1}</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20, letterSpacing: '-0.02em', color: '#000', margin: '4px 0 0', lineHeight: 1.15 }}>{d.k}</h3>
              </div>
            </div>
            <div style={{ padding: '18px 20px', background: '#FAFBFD', border: `1px solid ${d.color}`, marginBottom: 16 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: d.color, textTransform: 'uppercase', marginBottom: 8 }}>PREGUNTA · AEO</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: '#000', lineHeight: 1.3, marginBottom: 12 }}>{d.question}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.6 }}>{d.answer}</div>
            </div>
            <div style={{ padding: '16px 18px', background: '#FBF3D9', border: '1px solid #B8860B' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#B8860B', textTransform: 'uppercase', marginBottom: 6 }}>Restricción profesional</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.55 }}>{d.restriction}</div>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 10 }}>Casos operacionales</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {d.cases.map((c) => (
                  <span key={c} style={{ padding: '5px 12px', border: `1px solid ${d.color}`, color: d.color, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.04em' }}>{c}</span>
                ))}
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
              {[
                { l: 'Sistemas',       v: d.systems, c: '#0050BD' },
                { l: 'Nivel autonomía', v: d.autonomy, c: '#F4024C' },
                { l: 'KPI',              v: d.kpi,      c: '#0F5132' },
              ].map((r) => (
                <div key={r.l} style={{ gridColumn: r.l === 'KPI' ? 'span 2' : 'auto' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>{r.l}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: r.c, lineHeight: 1.45 }}>{r.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

// 10 SDMs para Salud
const SaludSDMs = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="04" label="SDMs · IAs propietarias para Salud"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#000' }}>
            Diez modelos propietarios · entrenados sobre la operación sanitaria.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#52557A', margin: 0 }}>
            Cada SDM se documenta con propietario, corpus, categorías de datos (incluyendo datos de salud restringidos), políticas, usos autorizados/prohibidos, nivel de riesgo, aprobaciones, monitoreo, drift, reentrenamiento y criterios de retiro.
          </p>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
        {[
          { n: 'sdm.health-supply',     t: 'SDM Abastecimiento Sanitario', d: 'Predicción de demanda, redistribución entre centros, priorización de reposición y control de vencimientos.', risk: 'MEDIO' },
          { n: 'sdm.clinical-inventory', t: 'SDM Inventario Clínico',      d: 'Visibilidad multi-centro, precisión de conteo, gestión de lotes y equivalencias autorizadas.',              risk: 'MEDIO' },
          { n: 'sdm.biomedical',        t: 'SDM Equipos Biomédicos',       d: 'Inventario maestro, ubicación, criticidad, disponibilidad y priorización de inversiones.',                  risk: 'ALTO' },
          { n: 'sdm.clinical-maint',    t: 'SDM Mantenimiento e Ing. Clínica', d: 'Priorización de intervenciones · coordinación de técnicos, repuestos y proveedor · SLA.',              risk: 'ALTO' },
          { n: 'sdm.capacity',           t: 'SDM Capacidad Hospitalaria',   d: 'Consolidación operacional de camas, pabellones, ambulancias, personal. Sin triage clínico.',              risk: 'ALTO' },
          { n: 'sdm.pharmacy-cold',     t: 'SDM Farmacia y Cadena de Frío', d: 'Inventario de medicamentos, lotes, vencimientos, temperaturas · sin recomendación terapéutica.',           risk: 'ALTO' },
          { n: 'sdm.lab-reagents',      t: 'SDM Laboratorio y Reactivos',   d: 'Stock, calibraciones, control de reactivos, consumo atípico, priorización de reposición.',                risk: 'MEDIO' },
          { n: 'sdm.continuity',         t: 'SDM Continuidad Asistencial',  d: 'Correlación de incidentes de infraestructura crítica · coordinación de recuperación.',                    risk: 'MEDIO' },
          { n: 'sdm.procurement',        t: 'SDM Compras e Integridad',      d: 'Detección de anomalías · priorización de auditoría · segregación de funciones preservada.',              risk: 'ALTO' },
          { n: 'sdm.network-ops',        t: 'SDM Operaciones de Red',        d: 'Coordinación operacional cross-centros · notificaciones · gestión de excepciones.',                     risk: 'MEDIO' },
        ].map((s, i) => (
          <SlideIn key={s.n} direction="up" delay={i * 40}>
            <div style={{ padding: '20px 22px', background: '#FAFBFD', border: '1px solid #E4EBF3', minHeight: 140, display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', color: '#F4024C' }}>{s.n}</span>
                <Badge tone={s.risk === 'ALTO' ? 'fuxia' : 'warning'}>RIESGO {s.risk}</Badge>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em', color: '#000' }}>{s.t}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#52557A', lineHeight: 1.5 }}>{s.d}</div>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// 4 CAPAS
const SaludLayers = () => {
  const layers = [
    { n: '01', k: 'BASE', color: '#0050BD',
      t: 'Fuentes y sistemas de la institución.',
      note: 'Integración vía APIs, eventos, conectores y mecanismos autorizados de la arquitectura del cliente. [VALIDAR INTEGRACIÓN]',
      items: ['HIS · EHR', 'ERP', 'WMS · TMS', 'CMMS · EAM', 'Farmacia', 'LIS · RIS · PACS', 'Bed management', 'OR scheduling', 'Ambulancias', 'Compras · proveedores', 'IoT · RTLS · sensores', 'Data lake · APIs · eventos'] },
    { n: '02', k: 'COGNICIÓN PRIVADA', color: '#F4024C',
      t: '10 SDMs sanitarios entrenados sobre la operación.',
      note: 'Modelos propietarios · corpus del cliente · versionados · auditables · governance clínica cuando aplique.',
      items: ['10 SDMs', 'Reglas', 'Procedimientos', 'Historial operacional', 'Contexto', 'Conocimiento experto', 'Restricciones clínicas', 'Razonamiento auditable', 'Gobierno de modelos', 'Drift monitoring', 'Human-in-the-loop', 'Explicabilidad'] },
    { n: '03', k: 'ORQUESTACIÓN', color: '#1E1F26',
      t: 'Acciones coordinadas cross-sistema.',
      note: 'Cada acción configurable por umbrales clínicos, operacionales y contractuales · aprobación humana en decisiones de impacto.',
      items: ['Detectar', 'Contextualizar', 'Evaluar', 'Recomendar', 'Solicitar aprobación', 'Crear órdenes', 'Reservar inventario', 'Coordinar recursos', 'Notificar', 'Escalar excepción', 'Registrar', 'Medir', 'Rollback', 'Learning al SDM'] },
    { n: '04', k: 'IMPACTO', color: '#B00238',
      t: 'KPIs sobre disponibilidad, continuidad y eficiencia.',
      note: 'Publicación cuantitativa requiere [VALIDAR MÉTRICA] con metodología firmada por operaciones y auditoría interna.',
      items: ['Disponibilidad de equipos', 'Continuidad asistencial', 'Fill rate · quiebres', 'MTBF · MTTR mantenimiento', 'Utilización de capacidad', 'Tiempo hasta decisión', 'Actividades reprogramadas', 'Vencimientos evitados', 'Compras urgentes evitadas', 'Costo operacional', 'Decisiones auditadas'] },
  ];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <Reveal><SectionMeta n="05" label="Cómo funciona OMNIX en Salud"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 56px', color: '#000', maxWidth: 900 }}>
            Cuatro capas · vocabulario sanitario · integración vía APIs autorizadas.
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
          {layers.map((L, i) => (
            <SlideIn key={L.k} direction={i % 2 === 0 ? 'right' : 'left'} delay={i * 100}>
              <div style={{
                padding: '32px 28px', background: '#FFF', border: '1px solid #E4EBF3',
                minHeight: 400, display: 'flex', flexDirection: 'column', gap: 14,
                transition: 'border-color 220ms',
              }}
              onMouseEnter={(e) => e.currentTarget.style.borderColor = L.color}
              onMouseLeave={(e) => e.currentTarget.style.borderColor = '#E4EBF3'}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: L.color }}>CAPA {L.n} · {L.k}</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.015em', color: '#000', margin: 0, lineHeight: 1.15 }}>{L.t}</h3>
                <p style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', color: '#B8860B', margin: 0, lineHeight: 1.5 }}>* {L.note}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 4 }}>
                  {L.items.map((it) => (
                    <span key={it} style={{
                      padding: '4px 10px', border: `1px solid ${L.color}`, color: L.color,
                      fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em',
                    }}>{it}</span>
                  ))}
                </div>
              </div>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

// INTEROPERABILIDAD HL7 / FHIR
const SaludInterop = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 40 }}>
        <Reveal><SectionMeta n="06" label="Interoperabilidad sanitaria"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#000' }}>
            ¿Cómo se integra OMNIX con los sistemas de Salud?
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: '#52557A', margin: '0 0 24px' }}>
            OMNIX puede integrarse con arquitecturas sanitarias basadas en HL7 o FHIR cuando estos estándares estén disponibles en el entorno del cliente. <strong>Cada versión, perfil, recurso, extensión y operación debe validarse técnicamente por proyecto.</strong>
          </p>
        </Reveal>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginBottom: 32 }}>
        <SlideIn direction="up" delay={0}>
          <div style={{ padding: '28px 26px', background: '#FAFBFD', border: '1.5px solid #0050BD', minHeight: 260 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#0050BD', marginBottom: 8 }}>ESTÁNDAR</div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26, letterSpacing: '-0.02em', color: '#000', margin: '0 0 12px' }}>HL7 v2</h3>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.6, color: '#52557A', margin: '0 0 16px' }}>
              Mensajería legacy ampliamente utilizada en HIS, LIS, RIS, farmacia. OMNIX puede consumir y producir mensajes según los perfiles disponibles en el entorno del cliente.
            </p>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.06em' }}>
              [VALIDAR VERSIÓN · PERFIL · INTERFAZ]
            </div>
          </div>
        </SlideIn>
        <SlideIn direction="up" delay={80}>
          <div style={{ padding: '28px 26px', background: '#FAFBFD', border: '1.5px solid #F4024C', minHeight: 260 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 8 }}>ESTÁNDAR MODERNO</div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26, letterSpacing: '-0.02em', color: '#000', margin: '0 0 12px' }}>HL7 FHIR</h3>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.6, color: '#52557A', margin: '0 0 16px' }}>
              Estándar RESTful moderno para interoperabilidad sanitaria. OMNIX puede integrarse cuando los recursos, perfiles y operaciones específicos están disponibles en el ecosistema del cliente.
            </p>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.06em' }}>
              [VALIDAR RECURSOS FHIR · PERFIL · TERMINOLOGÍA]
            </div>
          </div>
        </SlideIn>
        <SlideIn direction="up" delay={160}>
          <div style={{ padding: '28px 26px', background: '#FAFBFD', border: '1.5px solid #0F5132', minHeight: 260 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#0F5132', marginBottom: 8 }}>COMPLEMENTARIO</div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, letterSpacing: '-0.02em', color: '#000', margin: '0 0 12px', lineHeight: 1.2 }}>APIs · Eventos · Catálogos</h3>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.6, color: '#52557A', margin: '0 0 16px' }}>
              Integraciones REST/GraphQL, event streaming (Kafka, RabbitMQ), catálogos maestros institucionales, terminologías autorizadas e identidad institucional según arquitectura del cliente.
            </p>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.06em' }}>
              [VALIDAR INTERFAZ · TERMINOLOGÍA]
            </div>
          </div>
        </SlideIn>
      </div>

      <div style={{ padding: '20px 24px', background: '#FBF3D9', border: '1.5px solid #B8860B' }}>
        <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
          <i data-lucide="alert-triangle" width="18" height="18" style={{ color: '#B8860B', strokeWidth: 1.5, flexShrink: 0, marginTop: 2 }}/>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#1E1F26', letterSpacing: '0.06em', lineHeight: 1.65 }}>
            <strong>Alcance de las referencias:</strong> OMNIX no afirma certificación HL7 · no afirma conformidad FHIR general · no afirma soporte automático de versión, perfil, recurso, extensión u operación específicos · no afirma compatibilidad nativa con ningún HIS/EHR/ERP. Todo se valida técnicamente en el diagnóstico inicial del proyecto según arquitectura y jurisdicción.
          </div>
        </div>
      </div>
    </Container>
  </section>
);

Object.assign(window, { SaludDomains, SaludSDMs, SaludLayers, SaludInterop });