// MINERÍA — Secciones 8-11: autonomía · seguridad IT/OT · transferencia · CTA · 25 objeciones

const MineriaAutonomy = () => (
  <section style={{ background: '#FFFFFF', 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"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 48, lineHeight: 1.05, letterSpacing: '-0.025em', color: '#000', margin: '0 0 20px' }}>
              Automatice la coordinación sin perder el control técnico.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#52557A', margin: '0 0 24px' }}>
              La autonomía en minería nunca es binaria. Las decisiones críticas asociadas a relaves,
              seguridad de personas, controles geotécnicos o cambios relevantes en sistemas OT
              mantienen aprobación humana obligatoria.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ padding: '18px 22px', background: '#FBF3D9', border: '1.5px solid #B8860B' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#B8860B', textTransform: 'uppercase', marginBottom: 8 }}>REGLA ESPECIAL</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#1E1F26', lineHeight: 1.6 }}>
                Relaves · seguridad · geotecnia · cambios OT relevantes = aprobación humana obligatoria y protocolos específicos.
              </div>
            </div>
          </Reveal>
        </div>

        <Reveal delay={200} y={0}>
          <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
            {[
              { n: 'N1', t: 'Monitoreo',                r: 'Detecta, correlaciona, clasifica' },
              { n: 'N2', t: 'Recomendación',             r: 'Propone alternativas explicables' },
              { n: 'N3', t: 'Ejecución asistida',        r: 'Prepara acciones · espera aprobación' },
              { n: 'N4', t: 'Ejecución automática',       r: 'Decisiones recurrentes dentro de límites' },
              { n: 'N5', t: 'Decisión crítica gobernada',r: 'Respuesta compleja · HITL obligatorio' },
            ].map((l, i, arr) => (
              <div key={l.n} style={{
                display: 'grid', gridTemplateColumns: '48px 1fr 200px', gap: 16, alignItems: 'center',
                padding: '18px 20px',
                borderBottom: (i < arr.length - 1) ? '1px solid #E4EBF3' : 'none',
                background: i === 2 ? '#FFE5EC' : '#FFF',
              }}>
                <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: 16, color: '#000', letterSpacing: '-0.005em' }}>{l.t}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#52557A', marginTop: 4 }}>{l.r}</div>
                </div>
                {i === 2 && <Badge tone="fuxia">MINERÍA DEFAULT</Badge>}
              </div>
            ))}
          </div>
        </Reveal>
      </div>

      <div style={{ marginTop: 72, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
        {[
          { i: 'shield',        t: 'OT read-only',              d: 'Sin comandos directos al PLC · ejecución vía sistemas IT autorizados' },
          { i: 'flag',           t: 'Límites por dominio',      d: 'Mantenimiento · relaves · logística tienen umbrales propios' },
          { i: 'check-check',    t: 'Approval flows',            d: 'Segregación de funciones · quorum configurable por criticidad' },
          { i: 'file-text',      t: 'Trazabilidad completa',     d: 'Fundamento registrado · WORM · 10 años' },
          { i: 'circle-slash',   t: 'Modo seguro · kill switch', d: 'Detención completa desde comando único' },
        ].map((c, i) => (
          <SlideIn key={c.t} direction="up" delay={i * 80}>
            <div style={{ padding: 20, background: '#FAFBFD', border: '1px solid #E4EBF3', minHeight: 160 }}>
              <i data-lucide={c.i} width="20" height="20" style={{ color: '#F4024C', strokeWidth: 1.5, marginBottom: 12 }}/>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: '#000', letterSpacing: '-0.005em', marginBottom: 6 }}>{c.t}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#52557A', lineHeight: 1.5 }}>{c.d}</div>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

const MineriaSecurity = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>
        <div>
          <Reveal><SectionMeta n="08" label="Seguridad IT/OT · soberanía" dark color="#F4024C"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 48, lineHeight: 1.05, letterSpacing: '-0.025em', color: '#FFF', margin: '0 0 24px' }}>
              La cognición minera vive donde su seguridad lo permite.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#96A3B5', margin: '0 0 32px', maxWidth: 500 }}>
              Información geológica, metalúrgica, geotécnica y operacional constituye propiedad intelectual crítica.
              OMNIX opera con segregación IT/OT explícita, principio de mínimo privilegio y sin comandos
              directos a activos de campo.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <Button variant="ghost" dark icon="arrow-right" href="seguridad.html">Revisar Seguridad y Gobernanza</Button>
          </Reveal>
        </div>

        <Reveal delay={200} y={0}>
          <div style={{ border: '1.5px solid #2E3140', background: '#0A0B10' }}>
            <div style={{ padding: '14px 20px', borderBottom: '1px solid #2E3140', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase' }}>
              CONTROLES · SEGREGACIÓN IT/OT MINERA
            </div>
            {[
              { i: 'shield',         t: 'Despliegue VPC · on-prem · air-gapped',    d: 'Ubicación según regulación, conectividad de faena y modelo IT/OT.' },
              { i: 'network',         t: 'Conectividad IT/OT controlada',           d: 'DMZ industrial · gateways autorizados · principio de mínimo privilegio.' },
              { i: 'lock',            t: 'OT en modo read-only por defecto',         d: 'Ejecución vía sistemas IT (CMMS, ERP, planificación) · nunca al DCS/PLC.' },
              { i: 'users',           t: 'Acceso basado en roles',                    d: 'Segregación mina · planta · relaves · logística · governance.' },
              { i: 'file-search',     t: 'Auditoría por decisión',                    d: 'Fundamento registrado · evidencia disponible para revisión.' },
              { i: 'file-lock-2',     t: 'Protección de IP minera',                   d: 'Información geológica y metalúrgica anonimizada en entrenamiento.' },
              { i: 'globe',           t: 'Sin salida de datos OT',                    d: 'Los datos operacionales permanecen dentro del perímetro autorizado.' },
              { i: 'alert-triangle',  t: 'Sin comandos directos a controles',         d: 'Ninguna capacidad de escritura al DCS/PLC. [VALIDAR].' },
            ].map((c, i, arr) => (
              <div key={c.t} style={{
                padding: '14px 20px', display: 'grid', gridTemplateColumns: '28px 1fr', gap: 14,
                borderBottom: (i < arr.length - 1) ? '1px solid #2E3140' : 'none',
              }}>
                <i data-lucide={c.i} width="18" height="18" style={{ color: '#F4024C', strokeWidth: 1.5 }}/>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, color: '#FFF', marginBottom: 4, letterSpacing: '-0.005em' }}>{c.t}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#96A3B5', lineHeight: 1.5 }}>{c.d}</div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

const MineriaTransfer = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="09" 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 cognición minera permanece en su compañía.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: 0, maxWidth: 720 }}>
            OMNIX construye, opera y transfiere progresivamente la capacidad cognitiva al equipo interno de la faena. Sin lock-in. Sin dependencia forzada.
          </p>
        </Reveal>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1.5px solid #1E1F26', marginBottom: 40 }}>
        {[
          { k: 'ASSESSMENT',    dur: '2 – 3 semanas',   f: 'Mapeamos dominio, disrupción y sistemas', o: 90, c: 10 },
          { k: 'PILOTO',        dur: '8 – 12 semanas',   f: 'Un dominio · un caso vivo en operación',    o: 70, c: 30 },
          { k: 'ESCALAMIENTO',  dur: '3 – 6 meses',      f: 'Dominios adicionales + certificación',      o: 45, c: 55 },
          { k: 'TRANSFERENCIA', dur: 'Cuando digas',     f: 'Autonomía del equipo interno de la faena',  o: 15, c: 85 },
        ].map((p, i) => (
          <Reveal key={p.k} delay={i * 100}>
            <div style={{ padding: '28px 24px', borderRight: (i < 3) ? '1px solid #E4EBF3' : 'none', minHeight: 280, display: 'flex', flexDirection: 'column', gap: 14 }}>
              <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: 22, letterSpacing: '-0.015em', color: '#F4024C' }}>{p.k}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, 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.14em', color: '#52557A' }}>
                  <span><span style={{ color: '#F4024C' }}>■</span> OMNIX {p.o}%</span>
                  <span><span style={{ color: '#0050BD' }}>■</span> FAENA {p.c}%</span>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        <div style={{ padding: 32, background: '#FAFBFD', border: '1.5px solid #1E1F26' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 20 }}>QUÉ SE TRANSFIERE</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            {[
              'Documentación · arquitectura',
              'SDMs entrenados',
              'Reglas y umbrales',
              'Matrices de decisión',
              'Runbooks operacionales',
              'Protocolos de monitoreo',
              'Flujos de aprobación',
              'Gestión de excepciones',
              'Gobierno del modelo',
              'Criterios de reentrenamiento',
              'Roles y responsabilidades',
              'Plan de continuidad',
            ].map((it) => (
              <div key={it} style={{
                padding: '10px 12px', background: '#FFF', 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>

        <div style={{ padding: 32, background: '#000', color: '#FFF', border: '1.5px solid #000' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 20 }}>ROLES QUE DEBEN ASIGNARSE</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            {[
              'Mining Cognitive Architect',
              'Cognitive Operations Engineer',
              'IT/OT Integration Lead',
              'Model Governance Owner',
              'Maintenance Process Owner',
              'Tailings Domain Owner',
              'Mine Operations Owner',
              'Plant Operations Owner',
              'Logistics Process Owner',
              'Cybersecurity Owner',
            ].map((r) => (
              <div key={r} style={{
                padding: '10px 12px', background: '#0A0B10', border: '1px solid #2E3140',
                fontFamily: 'var(--font-mono)', fontSize: 11, color: '#FFF', letterSpacing: '-0.005em',
              }}>{r}</div>
            ))}
          </div>
          <div style={{ marginTop: 16, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#96A3B5', letterSpacing: '0.06em' }}>
            No son obligatorios · son funciones que deben asignarse a personas de la compañía.
          </div>
        </div>
      </div>
      <div style={{ marginTop: 20 }}>
        <Button variant="ghost" icon="arrow-right" href="transferencia.html">Ver modelo de transferencia completo</Button>
      </div>
    </Container>
  </section>
);

// CTA FINAL
const MineriaFinalCTA = () => (
  <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">
      <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 }}>
            — De señales aisladas a decisiones coordinadas —
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 70, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#FFF' }}>
            De mina a puerto, una decisión.
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.5, color: '#96A3B5', maxWidth: 720, margin: '0 auto 36px' }}>
            Comenzamos con una disrupción, un dominio y un resultado medible. Sin reemplazar sus sistemas actuales.
          </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 minero</Button>
          </div>
        </Reveal>
        <Reveal delay={280}>
          <div style={{ marginTop: 56, paddingTop: 28, borderTop: '1px solid #2E3140', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase' }}>
            30 min · sin propuesta estándar · NDA upfront · segregación IT/OT desde día 1
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

// 25 OBJECIONES
const MineriaObjections = () => {
  const items = [
    { q: 'Ya tenemos SCADA y un centro integrado de operaciones.',                            a: 'SCADA muestra y controla variables. El centro integrado muestra dashboards. OMNIX evalúa impacto operacional y coordina decisiones entre dominios que hoy operan aislados dentro del mismo centro.' },
    { q: 'Ya usamos sistemas expertos.',                                                        a: 'No competimos con ellos. Los conectamos. Cada sistema experto sigue optimizando su dominio. OMNIX evalúa el impacto completo y reconcilia recomendaciones incompatibles.' },
    { q: 'Tenemos mantenimiento predictivo.',                                                   a: 'La predicción estima falla. La decisión operacional coordina la respuesta con producción, plan, repuestos y personal. OMNIX opera sobre la predicción existente.' },
    { q: 'El sistema de despacho ya optimiza la flota.',                                        a: 'FMS optimiza flota. OMNIX conecta esa decisión con planta, mantenimiento y logística cuando hay un cambio de contexto que el FMS por diseño no ve.' },
    { q: 'Planificación minera ya define el plan.',                                             a: 'El plan es fijo por horizonte. La operación es variable. OMNIX reajusta secuencia dentro de las reglas del plan cuando el estado real lo requiere.' },
    { q: 'No queremos reemplazar sistemas.',                                                    a: 'No lo hacemos. Nos integramos mediante los conectores y APIs disponibles en su arquitectura. Todos los sistemas siguen operando. OMNIX opera sobre ellos.' },
    { q: 'Cada faena tiene proveedores distintos.',                                             a: 'Ese es el punto. La plataforma es la misma. La integración es específica de cada faena. Los SDMs se entrenan por faena y por dominio.' },
    { q: 'Nuestros datos OT no pueden salir de la operación.',                                  a: 'Correcto. OMNIX opera on-premise o air-gapped en la faena según requiera el modelo de seguridad. Sin salida de datos OT del perímetro autorizado.' },
    { q: 'La conectividad en faena es limitada.',                                                a: 'El despliegue on-prem funciona sin conectividad externa. Actualizaciones offline auditadas. Modo local con sincronización diferida cuando la conectividad se restablece.' },
    { q: 'No podemos permitir acceso directo a controles.',                                       a: 'Por diseño. OT permanece read-only. OMNIX no envía comandos al DCS o PLC. Las acciones se ejecutan vía sistemas IT (CMMS, planificación, ERP).' },
    { q: 'Relaves no puede automatizarse.',                                                     a: 'Correcto. Y OMNIX no propone automatizarlo. Para relaves acelera detección, reconciliación, investigación, coordinación y documentación. La decisión técnica permanece en los roles autorizados.' },
    { q: 'La responsabilidad técnica no puede delegarse.',                                        a: 'Nunca lo pretendemos. En dominios de responsabilidad técnica (geotecnia, calidad, seguridad), OMNIX opera como capa de vigilancia y coordinación · nunca como reemplazo del juicio profesional.' },
    { q: 'Los sistemas expertos pueden recomendar acciones distintas.',                          a: 'Exactamente ese es el problema que resolvemos. OMNIX aplica jerarquía de objetivos, evalúa impacto total y propone una respuesta consolidada. La aprobación final es humana.' },
    { q: 'Nuestros datos históricos son incompletos.',                                            a: 'No los necesitamos perfectos. El SDM aprende sobre operación real. Datos faltantes se imputan documentadamente y se flagean como incertidumbre en la decisión.' },
    { q: 'Cada yacimiento es diferente.',                                                        a: 'Por eso el SDM se entrena por faena, no globalmente. La plataforma es común, la cognición es específica del yacimiento, la geología y las reglas locales.' },
    { q: 'Esto parece otro piloto.',                                                              a: '8 – 12 semanas hasta primer caso vivo en producción. Diagnóstico previo de 2 – 3 semanas. Si al final del piloto no hay ROI demostrable en KPIs firmados por operaciones y finanzas, no hay escalamiento.' },
    { q: '¿Cómo se mide el ROI?',                                                                 a: 'En los mismos KPIs que ya mide: disponibilidad, MTBF, MTTR, throughput, cumplimiento del plan, OTIF, adherencia. Baseline pre-implementación firmado por operaciones y finanzas.' },
    { q: '¿Quién responde por una decisión equivocada?',                                          a: 'Depende del nivel de autonomía y política aprobada. En N3-N4 el responsable operacional firma la política ex-ante. Cada decisión con approval trail. En N5, HITL obligatorio con protocolo específico.' },
    { q: '¿Qué ocurre cuando el modelo no reconoce una condición?',                               a: 'Cuando el confidence cae bajo umbral definido, o aparecen features fuera de distribución, el SDM escala automáticamente a humano. Modo seguro y kill switch disponibles.' },
    { q: 'No queremos depender de OMNIX.',                                                        a: 'La transferencia de control es parte del contrato · no una promesa. Al cierre del programa entregamos código, SDMs, gobernanza y runbooks. Su equipo interno opera sin nosotros.' },
    { q: 'Ya tenemos un equipo interno de analítica.',                                            a: 'Perfecto. Ese equipo será clave en la operación y transferencia. OMNIX aporta la plataforma cognitiva; ustedes aportan el conocimiento operacional. Al final del programa, ellos operan.' },
    { q: 'No podemos detener la operación para implementar.',                                    a: 'El piloto comienza en modo asistido (N1-N2) con recomendaciones sombra durante 2-4 semanas antes de tomar acción. La operación no se detiene · el SDM aprende sobre operación en curso.' },
    { q: 'Nuestra arquitectura IT/OT es demasiado compleja.',                                     a: 'Ese es exactamente el escenario ideal. Cuanto más compleja la arquitectura, más valor agrega una capa de orquestación común. La integración se valida durante el assessment.' },
    { q: 'Existen obligaciones regulatorias y de auditoría.',                                      a: 'Cada decisión con logs WORM firmados criptográficamente durante 10 años. Fundamento explícito registrado. Reproducible bit-exacto para auditorías internas y externas.' },
    { q: 'Los sistemas críticos pertenecen a diferentes proveedores.',                             a: 'OMNIX es agnóstico al proveedor. Se integra vía APIs, conectores estándar y mecanismos autorizados. La compatibilidad con proveedores específicos se valida durante el assessment. [VALIDAR].' },
  ];
  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>
        <Reveal><SectionMeta n="10" label="Objeciones · comité de compra minero"/></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 }}>
            Veinticinco preguntas del comité minero.
          </h2>
        </Reveal>
        <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)} style={{
                width: '100%', border: 'none', background: 'transparent', textAlign: 'left', cursor: 'pointer',
                padding: '16px 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: 15, letterSpacing: '-0.01em', color: '#000', lineHeight: 1.3 }}>{it.q}</span>
                <span style={{ color: '#1E1F26', 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 ? 280 : 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.6, color: '#1E1F26', margin: 0, maxWidth: 900 }}>{it.a}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, { MineriaAutonomy, MineriaSecurity, MineriaTransfer, MineriaFinalCTA, MineriaObjections });
