// SALUD · Autonomía + Privacidad/Seguridad + Gobierno IA + Transferencia + Comparativa + FAQ + CTA

// AUTONOMÍA Y CONTROL PROFESIONAL
const SaludAutonomy = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'start' }}>
        <div>
          <Reveal><SectionMeta n="07" label="Autonomía y control profesional" dark color="#F4024C"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 46, lineHeight: 1.05, letterSpacing: '-0.025em', color: '#FFF', margin: '0 0 20px' }}>
              La autonomía nunca es binaria en Salud.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#96A3B5', margin: '0 0 32px' }}>
              Cinco niveles graduables · configurables por caso, criticidad, jurisdicción y política institucional. Las decisiones con impacto clínico o de seguridad mantienen aprobación profesional obligatoria.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ padding: '18px 22px', background: '#0A0B10', border: '1.5px solid #EA384C' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#EA384C', textTransform: 'uppercase', marginBottom: 10 }}>APROBACIÓN PROFESIONAL OBLIGATORIA</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
                {[
                  'Sustitución de medicamentos',
                  'Priorización clínica de pacientes',
                  'Triaje asistencial',
                  'Admisión o alta hospitalaria',
                  'Decisiones sobre tratamiento',
                  'Uso de equipos con restricciones clínicas',
                  'Liberación de equipos tras mantenimiento',
                  'Retiro de lotes',
                  'Descarte de material clínico',
                  'Acciones de alto impacto sobre pacientes',
                  'Modificación de políticas relevantes',
                ].map((u) => (
                  <li key={u} style={{ display: 'flex', gap: 8, fontFamily: 'var(--font-body)', fontSize: 13, color: '#FFF' }}>
                    <i data-lucide="x" width="14" height="14" style={{ color: '#EA384C', strokeWidth: 2, flexShrink: 0, marginTop: 3 }}/>
                    {u}
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
        </div>
        <Reveal delay={200} y={0}>
          <div style={{ border: '1.5px solid #2E3140', background: '#0A0B10' }}>
            {[
              { n: 'N1', t: 'Observación',                   r: 'Conecta y clasifica señales operacionales' },
              { n: 'N2', t: 'Predicción',                     r: 'Anticipa quiebres, fallas o restricciones' },
              { n: 'N3', t: 'Recomendación',                  r: 'Propone alternativas con fundamento' },
              { n: 'N4', t: 'Ejecución asistida',              r: 'Prepara acciones · espera aprobación' },
              { n: 'N5', t: 'Ejecución operacional controlada', r: 'Workflows recurrentes dentro de umbrales' },
            ].map((l, i, arr) => (
              <div key={l.n} style={{
                display: 'grid', gridTemplateColumns: '48px 1fr 180px', gap: 16, alignItems: 'center',
                padding: '18px 20px',
                borderBottom: (i < arr.length - 1) ? '1px solid #2E3140' : 'none',
                background: i === 2 ? 'rgba(244,2,76,0.10)' : 'transparent',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.14em', color: i === 2 ? '#F4024C' : '#96A3B5', fontWeight: 600 }}>{l.n}</span>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: '#FFF' }}>{l.t}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', marginTop: 4 }}>{l.r}</div>
                </div>
                {i === 2 && <Badge tone="fuxia">SALUD DEFAULT</Badge>}
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

// PRIVACIDAD + GOBIERNO IA
const SaludPrivacyGov = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
        {/* Privacidad · seguridad · soberanía */}
        <div>
          <Reveal><SectionMeta n="08" label="Privacidad y seguridad"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 40, lineHeight: 1.05, letterSpacing: '-0.02em', margin: '0 0 20px', color: '#000' }}>
              Datos de salud dentro del perímetro autorizado.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: '#52557A', margin: '0 0 20px' }}>
              Datos, modelos y decisiones permanecen dentro del perímetro autorizado. Separación entre datos clínicos y operacionales. Retención según contrato y regulación aplicable.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              {['VPC privada', 'On-premise', 'Cifrado', 'Acceso por roles', 'Mínimo privilegio', 'Segmentación', 'Logs · auditoría', 'Seudonimización', 'Gestión de identidades', 'Retención · eliminación', 'Gestión de llaves', 'Respuesta a incidentes'].map((c) => (
                <div key={c} style={{ padding: '8px 10px', background: '#FAFBFD', border: '1px solid #E4EBF3', display: 'flex', gap: 6, alignItems: 'center' }}>
                  <i data-lucide="check" width="12" height="12" style={{ color: '#0050BD', strokeWidth: 2 }}/>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#1E1F26' }}>{c}</span>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ marginTop: 16, padding: '14px 16px', background: '#FBF3D9', border: '1px solid #B8860B', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#1E1F26', lineHeight: 1.6 }}>
              <strong>Marcos considerados según jurisdicción:</strong> leyes locales de protección de datos, GDPR, EHDS, HIPAA, requisitos sectoriales, seguridad de dispositivos médicos cuando aplique. Sin afirmar cumplimiento automático. [VALIDAR JURISDICCIÓN · REGULACIÓN]
            </div>
          </Reveal>
          <Reveal delay={320}>
            <div style={{ marginTop: 16 }}>
              <Button variant="ghost" icon="arrow-right" href="privacidad.html">Ver política de Privacidad</Button>
            </div>
          </Reveal>
        </div>

        {/* Gobierno IA · GMMM */}
        <div>
          <Reveal delay={80}><SectionMeta n="09" label="Gobierno de IA"/></Reveal>
          <Reveal delay={140}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 40, lineHeight: 1.05, letterSpacing: '-0.02em', margin: '0 0 20px', color: '#000' }}>
              Govern · Map · Measure · Manage.
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: '#52557A', margin: '0 0 20px' }}>
              Ciclo de vida gobernado con revisión profesional obligatoria en casos de alto impacto. Principios: autonomía humana, seguridad, transparencia, responsabilidad, equidad, privacidad, inclusión, sostenibilidad, trazabilidad.
            </p>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { k: 'GOVERN',   c: '#0050BD', d: 'Roles · responsabilidades · políticas · usos autorizados · usos prohibidos · riesgo aceptable' },
                { k: 'MAP',       c: '#F4024C', d: 'Caso de uso · datos · profesionales · pacientes potencialmente afectados · regulación · dependencias' },
                { k: 'MEASURE',   c: '#B8860B', d: 'Precisión · recall · falsos positivos/negativos · robustez · explicabilidad · drift · equidad · latencia' },
                { k: 'MANAGE',    c: '#0F5132', d: 'Límites · monitoreo · revisión profesional · aprobaciones · rollback · reentrenamiento · retiro · incidentes' },
              ].map((r) => (
                <div key={r.k} style={{
                  padding: '14px 16px', background: '#FAFBFD', border: `1.5px solid ${r.c}`,
                  display: 'grid', gridTemplateColumns: '100px 1fr', gap: 14, alignItems: 'start',
                }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: r.c, fontWeight: 500 }}>{r.k}</span>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26', lineHeight: 1.55 }}>{r.d}</span>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </Container>
  </section>
);

// TRANSFERENCIA · 5 fases
const SaludTransfer = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="10" label="Transferencia de control"/></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' }}>
            La inteligencia operacional <span style={{ color: '#F4024C' }}>permanece en la institución</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#52557A', margin: 0, maxWidth: 720 }}>
            OMNIX construye y opera la capacidad mientras el equipo de la institución desarrolla el conocimiento, los controles y las responsabilidades para asumirla progresivamente. [VALIDAR ALCANCE CONTRACTUAL]
          </p>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, borderTop: '1.5px solid #1E1F26', marginBottom: 40 }}>
        {[
          { k: 'DIAGNÓSTICO',    dur: '2-3 sem',       f: 'Decisión operacional · línea base · fuentes · riesgo · responsables · KPI', o: 95, c: 5 },
          { k: 'PROTOTIPO',       dur: '4-6 sem',       f: 'Datos sintéticos · SDM inicial · reglas · HITL · evaluación',              o: 80, c: 20 },
          { k: 'PILOTO PROD.',    dur: '8-12 sem',      f: 'Integración autorizada · logs · rollback · métricas · incidentes',          o: 60, c: 40 },
          { k: 'ESCALAMIENTO',    dur: '3-6 mes',       f: 'Nuevos centros · equipos · insumos · decisiones · workflows',              o: 40, c: 60 },
          { k: 'TRANSFERENCIA',   dur: 'Cuando decida', f: 'Documentación · capacitación · gobierno · continuidad interna',            o: 15, c: 85 },
        ].map((p, i) => (
          <Reveal key={p.k} delay={i * 100}>
            <div style={{ padding: '24px 20px', borderRight: (i < 4) ? '1px solid #E4EBF3' : 'none', minHeight: 260, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5' }}>FASE 0{i+1}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#F4024C' }}>{p.dur}</span>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, letterSpacing: '-0.015em', color: '#F4024C' }}>{p.k}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26', lineHeight: 1.4 }}>{p.f}</div>
              <div style={{ marginTop: 'auto', paddingTop: 16, borderTop: '1px solid #E4EBF3' }}>
                <div style={{ display: 'flex', height: 8, background: '#F2F5F9', marginBottom: 8 }}>
                  <div style={{ width: `${p.o}%`, background: '#F4024C' }}/>
                  <div style={{ width: `${p.c}%`, background: '#0050BD' }}/>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.08em', color: '#52557A' }}>
                  <span><span style={{ color: '#F4024C' }}>■</span> {p.o}%</span>
                  <span>{p.c}% <span style={{ color: '#0050BD' }}>■</span></span>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
      <div style={{ padding: 28, background: '#FFF', border: '1.5px solid #1E1F26' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 20 }}>QUÉ SE TRANSFIERE A LA INSTITUCIÓN</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8 }}>
          {['Documentación', 'Arquitectura', 'SDMs', 'Corpus acordado', 'Reglas', 'Runbooks', 'Workflows', 'Matrices de aprobación', 'Gobierno', 'Monitoreo', 'Evaluación', 'Gestión de excepciones', 'Reentrenamiento', 'Continuidad', 'Capacitación'].map((it) => (
            <div key={it} style={{ padding: '10px 12px', background: '#FAFBFD', border: '1px solid #E4EBF3', display: 'flex', gap: 8, alignItems: 'center' }}>
              <i data-lucide="check" width="12" height="12" style={{ color: '#0F5132', strokeWidth: 2 }}/>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26' }}>{it}</span>
            </div>
          ))}
        </div>
      </div>
    </Container>
  </section>
);

// COMPARATIVA · OMNIX vs sistemas sanitarios existentes
const SaludVs = () => {
  const rows = [
    { tool: 'HIS · EHR',          solves: 'Registro asistencial',                lacks: 'No conecta con recursos y decisiones operacionales', omnix: 'Conecta actividad clínica con recursos operacionales' },
    { tool: 'ERP',                solves: 'Compras y finanzas',                  lacks: 'No decide qué priorizar según demanda operacional',   omnix: 'Ayuda a decidir qué abastecer, priorizar o redistribuir' },
    { tool: 'WMS',                solves: 'Administra inventario',               lacks: 'No contextualiza según criticidad ni continuidad',    omnix: 'Contextualiza inventario según demanda y criticidad' },
    { tool: 'CMMS · EAM',         solves: 'Administra órdenes de mantenimiento', lacks: 'No coordina con inventario ni agenda operacional',    omnix: 'Determina qué equipo intervenir, cuándo y con qué recursos' },
    { tool: 'Farmacia hospitalaria', solves: 'Inventario y dispensación',        lacks: 'No coordina red · no anticipa quiebres',              omnix: 'Coordina red · anticipa · sin recomendar terapia' },
    { tool: 'LIS · RIS · PACS',   solves: 'Datos de laboratorio · imagen',        lacks: 'No decide sobre reactivos, calibraciones u operación',omnix: 'Gestiona reactivos, calibraciones y operación asociada' },
    { tool: 'Bed management',      solves: 'Muestra disponibilidad de camas',    lacks: 'No coordina restricciones operacionales cruzadas',    omnix: 'Coordina restricciones operacionales · sin triaje clínico' },
    { tool: 'BI · dashboards',     solves: 'Muestra métricas',                   lacks: 'No mueve la operación',                               omnix: 'Coordina acción · con auditoría · dentro de umbral' },
    { tool: 'RPA',                 solves: 'Automatiza tareas repetitivas',      lacks: 'No evalúa contexto ni excepciones',                    omnix: 'Automatiza decisiones · usa RPA como ejecutor' },
    { tool: 'Data lake',           solves: 'Consolida datos',                    lacks: 'No razona ni orquesta acciones',                       omnix: 'Convierte datos en decisiones ejecutadas y trazables' },
    { tool: 'Copiloto genérico',   solves: 'Asiste a un rol',                    lacks: 'Sin gobernanza sanitaria · datos institucionales',    omnix: 'SDM propio · determinístico · dentro del perímetro' },
    { tool: 'LLM genérico',        solves: 'Responde texto',                     lacks: 'No razona bajo políticas sanitarias',                 omnix: 'SDMs sanitarios · citables · auditables · con MRM' },
  ];
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="11" label="OMNIX vs sistemas existentes"/></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 }}>
            OMNIX no reemplaza · <span style={{ color: '#F4024C' }}>conecta, contextualiza y orquesta</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: '0 0 56px', maxWidth: 720 }}>
            HIS, EHR, ERP, WMS, CMMS, farmacia, laboratorio y bed management siguen operando. OMNIX es la capa cognitiva que los coordina.
          </p>
        </Reveal>
        <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1.4fr 1.4fr 1.6fr',
            background: '#000', color: '#FFF', padding: '18px 24px',
            fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
          }}>
            <div>SISTEMA</div>
            <div style={{ color: '#0F5132' }}>QUÉ RESUELVE</div>
            <div style={{ color: '#96A3B5' }}>QUÉ NO POR SÍ SOLO</div>
            <div style={{ color: '#F4024C' }}>QUÉ AGREGA OMNIX</div>
          </div>
          {rows.map((r, i) => (
            <SlideIn key={r.tool} direction="right" delay={i * 30}>
              <div style={{
                display: 'grid', gridTemplateColumns: '1fr 1.4fr 1.4fr 1.6fr',
                padding: '14px 24px', borderTop: '1px solid #E4EBF3',
                background: i % 2 === 0 ? '#FFF' : '#FAFBFD',
              }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, color: '#000' }}>{r.tool}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26', lineHeight: 1.4 }}>{r.solves}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#96A3B5', lineHeight: 1.4 }}>{r.lacks}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#F4024C', fontWeight: 500, lineHeight: 1.4 }}>{r.omnix}</div>
              </div>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

// FAQ · 10 preguntas
const SaludFAQ = () => {
  const items = [
    { q: '¿OMNIX toma decisiones clínicas?', a: 'No. OMNIX apoya decisiones operacionales (abastecimiento, inventario, equipos, mantenimiento, capacidad, logística sanitaria). No diagnostica, no prescribe medicamentos, no determina tratamientos, no realiza triaje clínico autónomo, no decide altas ni admisiones. Toda decisión con impacto clínico permanece en el profesional autorizado según normativa aplicable.' },
    { q: '¿OMNIX reemplaza el HIS, ERP o CMMS?', a: 'No. OMNIX no reemplaza HIS, EHR, ERP, WMS, CMMS, EAM, farmacia, LIS, RIS, PACS ni sistemas clínicos o administrativos. Es una capa cognitiva que se integra vía APIs y eventos autorizados para correlacionar señales entre estos sistemas, contextualizar restricciones y coordinar respuestas auditables · sin migración forzada.' },
    { q: '¿Cómo ayuda a evitar quiebres de inventario?', a: 'OMNIX conecta consumo histórico, agenda operacional, inventario local y de red, órdenes pendientes y proveedores para predecir riesgo de quiebre en insumos críticos, recomendar redistribución entre centros, priorizar reposición y controlar vencimientos y cadena de frío. No garantiza cero quiebres · reduce probabilidad y coordina respuesta.' },
    { q: '¿Puede gestionar equipos y repuestos entre varios centros?', a: 'Sí. OMNIX consolida el inventario maestro de equipos con ubicación, estado, criticidad, historial, garantías, contratos, calibración y repuestos entre múltiples centros de una red. Permite identificar equipos equivalentes, coordinar traslados operacionales y priorizar intervenciones. La liberación clínica del equipo permanece en Ingeniería Clínica.' },
    { q: '¿Cómo se mantiene la supervisión profesional?', a: 'Con niveles de autonomía configurables (N1-N5) donde el default en Salud es N3 (Recomendación con aprobación humana). Decisiones sobre sustitución de medicamentos, priorización clínica, triaje, admisión, alta, liberación de equipos tras mantenimiento, retiro de lotes y descarte de material clínico mantienen aprobación profesional obligatoria sin excepción.' },
    { q: '¿Cómo se protegen los datos de salud?', a: 'Datos, modelos y decisiones permanecen dentro del perímetro autorizado (VPC · on-premise · aislado). Cifrado, acceso por roles, mínimo privilegio, segmentación, logs firmados, seudonimización, gestión de identidades, retención según contrato y regulación aplicable. Separación entre datos clínicos y operacionales. Marcos considerados según jurisdicción: GDPR, EHDS, HIPAA, leyes locales.' },
    { q: '¿Puede integrarse con HL7 o FHIR?', a: 'Sí, potencialmente. OMNIX puede integrarse con arquitecturas sanitarias basadas en HL7 v2 o FHIR cuando estos estándares están disponibles en el entorno del cliente. Cada versión, perfil, recurso, extensión y operación específicos se validan técnicamente por proyecto. OMNIX no afirma certificación HL7 ni conformidad FHIR general. [VALIDAR ESTÁNDAR · VERSIÓN · PERFIL]' },
    { q: '¿Dónde se ejecutan los modelos?', a: 'Dentro del perímetro autorizado de la institución. Modalidades soportadas: VPC privada en cloud del cliente, on-premise en datacenter de la institución, o entornos aislados cuando aplique según requisitos de regulación sanitaria. Los datos, corpus y modelos nunca salen del perímetro. La residencia de datos se configura por jurisdicción y sector.' },
    { q: '¿Qué sucede si OMNIX no reconoce una condición?', a: 'Se escala automáticamente a revisión humana cuando la confianza cae bajo umbral. El caso no se procesa a ciegas. El equipo operacional o clínico recibe el contexto consolidado y la evidencia disponible. Estos casos alimentan el ciclo de reentrenamiento gobernado por Governance Board. Sin modo permisivo no autorizado. Sin excepciones automáticas.' },
    { q: '¿Cómo comienza un piloto sin exponer datos sensibles?', a: 'La Fase 2 (Prototipo Controlado) usa datos sintéticos o anonimizados. Se define un caso operacional específico, línea base, fuentes, clasificación de riesgo, responsables y KPI. Sólo cuando el prototipo demuestra fitness y la institución autoriza formalmente, se pasa a Piloto Productivo con integración a datos reales bajo controles definidos · logs, aprobaciones, rollback y monitoreo.' },
  ];
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <div style={{ maxWidth: 900, marginBottom: 56 }}>
          <Reveal><SectionMeta n="12" label="Preguntas frecuentes · comité de compra sanitario"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: 0, color: '#000' }}>
              Diez preguntas · diez respuestas directas.
            </h2>
          </Reveal>
        </div>
        <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderBottom: (i < items.length - 1) ? '1px solid #E4EBF3' : 'none' }}>
              <button onClick={() => setOpenIdx(openIdx === i ? -1 : i)} aria-expanded={openIdx === i} style={{
                width: '100%', border: 'none', background: 'transparent', textAlign: 'left', cursor: 'pointer',
                padding: '18px 28px', display: 'grid', gridTemplateColumns: '52px 1fr auto', gap: 20, alignItems: 'center',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C' }}>Q · {String(i+1).padStart(2, '0')}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, letterSpacing: '-0.01em', color: '#000', lineHeight: 1.3 }}>{it.q}</span>
                <span aria-hidden="true" style={{ transition: 'transform 280ms', transform: openIdx === i ? 'rotate(45deg)' : 'rotate(0deg)' }}>
                  <i data-lucide="plus" width="18" height="18"></i>
                </span>
              </button>
              <div style={{ maxHeight: openIdx === i ? 340 : 0, overflow: 'hidden', transition: 'max-height 380ms cubic-bezier(0.2,0.7,0.2,1)' }}>
                <div style={{ padding: '0 28px 22px 28px', display: 'grid', gridTemplateColumns: '52px 1fr', gap: 20 }}>
                  <div/>
                  <p style={{ fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.65, color: '#1E1F26', margin: 0, maxWidth: 900 }}>{it.a}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};

// CTA FINAL
const SaludCTA = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128, position: 'relative', overflow: 'hidden' }}>
    <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', opacity: 0.4 }} viewBox="0 0 1440 700" preserveAspectRatio="none" aria-hidden="true">
      <g stroke="#F4024C" strokeWidth="1" fill="none" opacity="0.35">
        <path d="M 0 200 Q 400 350 720 350" className="omnix-flow-dash"/>
        <path d="M 1440 200 Q 1040 350 720 350" className="omnix-flow-dash"/>
        <path d="M 0 500 Q 400 350 720 350" className="omnix-flow-dash"/>
        <path d="M 1440 500 Q 1040 350 720 350" className="omnix-flow-dash"/>
      </g>
      <circle cx="720" cy="350" r="6" fill="#F4024C"/>
      <circle cx="720" cy="350" r="24" fill="none" stroke="#F4024C" strokeWidth="1" opacity="0.4"/>
    </svg>
    <Container narrow>
      <div style={{ textAlign: 'center', position: 'relative' }}>
        <Reveal>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.24em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 24 }}>
            — Identifique qué decisión operacional puede automatizar primero —
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 62, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#FFF' }}>
            De recursos fragmentados a continuidad asistencial protegida.
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.5, color: '#96A3B5', maxWidth: 780, margin: '0 auto 36px' }}>
            La evaluación inicial puede realizarse con datos sintéticos, anonimizados o estrictamente operacionales.
          </p>
        </Reveal>
        <Reveal delay={220}>
          <div style={{ display: 'inline-flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
            <Button variant="primary" icon="arrow-right" href="diagnostico.html">Solicitar diagnóstico de Salud</Button>
            <Button variant="ghost" dark icon="arrow-right" href="seguridad.html">Revisar arquitectura de seguridad</Button>
          </div>
        </Reveal>
        <Reveal delay={280}>
          <div style={{ marginTop: 56, paddingTop: 28, borderTop: '1px solid #2E3140', display: 'flex', justifyContent: 'center', gap: 24, flexWrap: 'wrap' }}>
            {[
              { l: 'Conocer los SDMs para Salud',       h: 'ias-propietarias.html' },
              { l: 'Revisar privacidad de datos',         h: 'privacidad.html' },
              { l: 'Ver hiperautomatización',              h: 'producto.html' },
              { l: 'Transferencia de control',              h: 'transferencia.html' },
            ].map((l) => (
              <a key={l.l} href={l.h} style={{
                fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: '#96A3B5', textDecoration: 'none',
                display: 'inline-flex', alignItems: 'center', gap: 8,
              }}>{l.l} <i data-lucide="arrow-up-right" width="12" height="12"/></a>
            ))}
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

Object.assign(window, { SaludAutonomy, SaludPrivacyGov, SaludTransfer, SaludVs, SaludFAQ, SaludCTA });