// ENERGÍA · Autonomía + Seguridad/Gobierno IA + Transferencia + Comparativa + FAQ + CTA

const EnergiaAutonomy = () => (
  <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 humano" 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 Energía.
            </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, código de red y política institucional. Las maniobras críticas y decisiones con impacto en seguridad o mercado mantienen aprobación humana 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 HUMANA OBLIGATORIA</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
                {[
                  'Maniobras críticas',
                  'Cambios de protección',
                  'Cambios de setpoints sensibles',
                  'Despacho o redispatch regulado',
                  'Aislamiento de activos',
                  'Energización o desenergización',
                  'Cambios masivos',
                  'Acciones con impacto en seguridad',
                  'Acciones con impacto regulatorio',
                  'Decisiones de mercado relevantes',
                  'Casos con baja confianza del modelo',
                ].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 demanda, degradación, restricciones o fallas' },
              { 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 autorizados' },
            ].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">ENERGÍA DEFAULT</Badge>}
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

// SEGURIDAD + GOBIERNO IA
const EnergiaSecurityGov = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
        <div>
          <Reveal><SectionMeta n="08" label="Seguridad y soberanía"/></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 y modelos 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' }}>
              Segmentación IT/OT, Zero Trust, mínimo privilegio, control por propósito. Modelos firmados y versionados. Continuidad y respuesta a incidentes bajo procedimientos autorizados.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              {['VPC privada', 'On-premise', 'Entornos aislados', 'Segmentación IT/OT', 'Zero Trust', 'Mínimo privilegio', 'Cifrado', 'Gestión de llaves', 'Logs · auditoría', 'Firma de modelos', 'Versionado', 'Gobierno del corpus'].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 }}>
              <Button variant="ghost" icon="arrow-right" href="seguridad.html">Ver arquitectura de seguridad</Button>
            </div>
          </Reveal>
        </div>
        <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 operacional y de seguridad obligatoria en casos de alto impacto. Sin afirmar certificación de marcos regulatorios sin validación.
            </p>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { k: 'GOVERN',   c: '#0050BD', d: 'Roles · políticas · responsabilidades · usos permitidos y prohibidos · riesgo aceptable' },
                { k: 'MAP',       c: '#F4024C', d: 'Caso · datos · activos · personas · sistemas · dependencias · impactos · regulación' },
                { k: 'MEASURE',   c: '#B8860B', d: 'Precisión · falsos positivos/negativos · robustez · latencia · drift · seguridad · explicabilidad' },
                { k: 'MANAGE',    c: '#0F5132', d: 'Controles · monitoreo · 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 EnergiaTransfer = () => (
  <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 empresa energética</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 interno 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: '3-4 sem',     f: 'Decisión operacional · línea base · señales · riesgo · arquitectura · responsables · KPI', o: 95, c: 5 },
          { k: 'PROTOTIPO',       dur: '5-8 sem',     f: 'Datos históricos autorizados · SDM inicial · reglas · simulación · HITL',              o: 80, c: 20 },
          { k: 'PILOTO PROD.',    dur: '10-16 sem',   f: 'Integración autorizada · logs · rollback · métricas · incidentes',                    o: 60, c: 40 },
          { k: 'ESCALAMIENTO',    dur: '6-12 mes',    f: 'Nuevos activos · zonas · dominios · workflows · equipos',                              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 EMPRESA ENERGÉTICA</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 energéticos existentes
const EnergiaVs = () => {
  const rows = [
    { tool: 'SCADA',           solves: 'Muestra y controla variables autorizadas',           lacks: 'No contextualiza entre múltiples dominios',              omnix: 'Contextualiza señales y coordina decisiones cross-dominio' },
    { tool: 'EMS · ADMS',       solves: 'Analiza y opera la red',                              lacks: 'No conecta con activos · mantenimiento · campo',           omnix: 'Conecta operación con activos, mantenimiento, inventario y clima' },
    { tool: 'OMS',              solves: 'Gestiona interrupciones',                              lacks: 'No contextualiza impacto ni alternativas',                omnix: 'Contextualiza impacto, recursos y alternativas de respuesta' },
    { tool: 'DERMS',            solves: 'Coordina recursos distribuidos',                       lacks: 'No integra con activos y mantenimiento generales',        omnix: 'Integra flexibilidad con contexto operacional completo' },
    { tool: 'EAM',               solves: 'Registra activos',                                    lacks: 'No decide qué intervención protege mejor disponibilidad',  omnix: 'Ayuda a decidir intervención con contexto multi-dominio' },
    { tool: 'CMMS',              solves: 'Administra órdenes de mantenimiento',                 lacks: 'No evalúa prioridad, recursos ni contexto',                omnix: 'Evalúa prioridad, recursos, contexto y momento' },
    { tool: 'WFM',                solves: 'Asigna cuadrillas',                                   lacks: 'No decide qué trabajo priorizar ni qué recursos requiere', omnix: 'Ayuda a decidir qué priorizar y qué recursos requiere' },
    { tool: 'GIS',                solves: 'Muestra topología y ubicaciones',                    lacks: 'No coordina operación con base geoespacial',              omnix: 'Coordina decisiones operacionales usando contexto geoespacial' },
    { tool: 'AMI',                solves: 'Datos de medición inteligente',                       lacks: 'No convierte medición en decisiones operacionales',        omnix: 'Convierte datos AMI en contexto para decisiones operacionales' },
    { tool: 'SIEM',                solves: 'Detecta alertas de seguridad',                      lacks: 'No coordina contexto y respuesta cross-dominio',           omnix: 'Coordina contexto y respuesta defensiva IT/OT' },
    { 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',                                   lacks: 'No evalúa contexto ni excepciones',                        omnix: 'Automatiza decisiones · usa RPA como ejecutor' },
    { tool: 'Copiloto genérico',   solves: 'Asiste a un rol',                                    lacks: 'Sin gobernanza · sin datos institucionales',              omnix: 'SDM propio · determinístico · dentro del perímetro' },
    { tool: 'LLM genérico',        solves: 'Responde texto',                                      lacks: 'No razona bajo códigos de red ni políticas',             omnix: 'SDMs energéticos · 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 }}>
            SCADA, EMS, ADMS, OMS, DERMS, EAM, CMMS, WFM, GIS y AMI 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 EnergiaFAQ = () => {
  const items = [
    { q: '¿OMNIX reemplaza SCADA, EMS o ADMS?', a: 'No. OMNIX no reemplaza SCADA, EMS, ADMS, OMS, DERMS, EAM, CMMS, WFM, GIS ni AMI. Es una capa cognitiva que se integra vía APIs y mecanismos autorizados para correlacionar señales entre estos sistemas, contextualizar restricciones y coordinar respuestas auditables sobre los sistemas existentes · sin migración forzada.' },
    { q: '¿Puede OMNIX controlar directamente la red?', a: 'No sin aprobación y sistemas especializados. OMNIX apoya y coordina decisiones operacionales, pero las maniobras críticas, cambios de protección, energización/desenergización, cambios de setpoints y redispatch regulado se ejecutan mediante SCADA, EMS o ADMS con aprobación humana explícita y bajo las políticas de seguridad y regulación aplicables.' },
    { q: '¿Cómo ayuda a anticipar fallas?', a: 'OMNIX conecta condición, historial, criticidad, carga, redundancia, consecuencia de falla, repuestos, técnicos, ventanas, contratos, clima y acceso para priorizar mantenimiento preventivo, predictivo y correctivo. Reduce probabilidad y consecuencia · no elimina fallas. La certificación de seguridad final del activo permanece en el rol autorizado.' },
    { q: '¿Puede coordinar mantenimiento y repuestos?', a: 'Sí. OMNIX integra EAM/CMMS con inventario, compras, proveedores, contratos y disponibilidad de cuadrillas para priorizar intervenciones, redistribuir repuestos entre sitios, anticipar demanda y coordinar despacho. Sin sustitución técnica de componentes eléctricos sin equivalencia documentada y aprobación de Ingeniería.' },
    { q: '¿Cómo apoya la integración de renovables?', a: 'OMNIX conecta pronósticos de generación y demanda, variabilidad solar y eólica, meteorología, estado de baterías, curtailment, restricciones y planes de mantenimiento para detectar desviaciones, evaluar impacto, comparar alternativas de flexibilidad y coordinar órdenes. Sin despacho comercial autónomo · sujeto a regulación y autorización del operador.' },
    { q: '¿Cómo se mantiene la supervisión humana?', a: 'Con niveles de autonomía configurables (N1-N5) donde el default en Energía es N3 (Recomendación con aprobación humana). Mantienen aprobación obligatoria: maniobras críticas, cambios de protección, cambios de setpoints sensibles, despacho regulado, aislamiento/energización de activos, cambios masivos, acciones con impacto en seguridad o mercado y casos con baja confianza del modelo.' },
    { q: '¿Cómo protege los sistemas OT?', a: 'Con segmentación IT/OT estricta, Zero Trust, mínimo privilegio, control por propósito, cifrado, gestión de llaves y firma de modelos. Nunca conexiones directas no autorizadas a OT. Integraciones vía APIs, eventos y conectores autorizados. Alcance ciber sólo defensivo · sin operaciones ofensivas, sin explotación, sin evasión. [VALIDAR ARQUITECTURA]' },
    { q: '¿Puede operar on-premise o en entornos aislados?', a: 'Sí. OMNIX se despliega dentro del perímetro autorizado del cliente. Modalidades: VPC privada, infraestructura regional, on-premise en datacenter propio, o entornos aislados (air-gapped) cuando aplique según requisitos de seguridad. Los datos, corpus y modelos nunca salen del perímetro autorizado. [VALIDAR RESIDENCIA]' },
    { q: '¿Cómo se integra con estándares energéticos?', a: 'OMNIX toma como referencia estándares aplicables (IEC 61850, IEC 61970/CIM, IEC 62443, ISO 55001, NERC CIP, NIS2) para diseñar integraciones y modelos de información. Esta referencia no implica certificación ni conformidad automática. Cada versión, perfil, API y jurisdicción se valida técnicamente por proyecto. Códigos de red locales también aplican.' },
    { q: '¿Cómo comienza un piloto sin afectar la operación?', a: 'La Fase 2 (Prototipo Controlado) usa datos históricos autorizados o sintéticos, con simulación previa a integración productiva. Se define una decisión operacional específica, línea base, arquitectura, riesgo, responsables y KPI. Sólo cuando el prototipo demuestra fitness y la organización autoriza formalmente, se pasa a Piloto Productivo con integración a datos reales bajo controles definidos.' },
  ];
  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é energético"/></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 ? 360 : 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 EnergiaCTA = () => (
  <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 energética 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 señales de red a continuidad energética 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 históricos, sintéticos o dentro de un entorno controlado.
          </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 energético</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 Energía',    h: 'ias-propietarias.html' },
              { l: 'Ver hiperautomatización',           h: 'producto.html' },
              { l: 'Transferencia de control',           h: 'transferencia.html' },
              { l: 'Revisar privacidad de datos',        h: 'privacidad.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, { EnergiaAutonomy, EnergiaSecurityGov, EnergiaTransfer, EnergiaVs, EnergiaFAQ, EnergiaCTA });
