// ENERGÍA · Hero + Respuesta AEO + Problema operacional
// StoryBrand: empresa energética es el héroe · OMNIX el guía
// Alcance: operacional · no ejecuta maniobras críticas sin aprobación

const EnergiaHero = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 96, paddingBottom: 96, position: 'relative', overflow: 'hidden' }}>
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: 'linear-gradient(#E4EBF3 1px, transparent 1px), linear-gradient(90deg, #E4EBF3 1px, transparent 1px)',
      backgroundSize: '80px 80px', opacity: 0.55, pointerEvents: 'none',
      maskImage: 'radial-gradient(ellipse at 78% 40%, #000 0%, transparent 60%)',
      WebkitMaskImage: 'radial-gradient(ellipse at 78% 40%, #000 0%, transparent 60%)',
    }}/>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 64, alignItems: 'center', position: 'relative' }}>
        <div>
          <Reveal>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <a href="industrias.html" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#52557A', textDecoration: 'none', textTransform: 'uppercase' }}>← Industrias</a>
              <span style={{ color: '#96A3B5' }}>/</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase' }}>Energía · utilities · redes</span>
            </div>
            <Rule width={56}/>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 74, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#000' }}>
              De señales de red a <span style={{ color: '#F4024C' }}>decisiones coordinadas</span>.
            </h1>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 21, lineHeight: 1.5, color: '#52557A', maxWidth: 640, margin: '0 0 32px' }}>
              OMNIX conecta generación, red, activos, mantenimiento, demanda, clima y operaciones de campo
              para anticipar restricciones y coordinar respuestas auditables sobre los sistemas existentes.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: 'flex', gap: 12, marginBottom: 20, flexWrap: 'wrap' }}>
              <Button variant="primary" icon="arrow-right" href="diagnostico.html">Evaluar una operación energética</Button>
              <Button variant="ghost" icon="play" href="#demo">Ver demo de 90 segundos</Button>
            </div>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              Comenzamos con una condición operacional, una línea base y controles definidos · sin reemplazar sus plataformas de operación
            </div>
          </Reveal>
          <Reveal delay={320}>
            <div style={{ marginTop: 32, padding: '18px 22px', background: '#FBF3D9', border: '1.5px solid #B8860B' }}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <i data-lucide="zap" width="18" height="18" style={{ color: '#B8860B', strokeWidth: 1.5, flexShrink: 0, marginTop: 2 }}/>
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#B8860B', textTransform: 'uppercase', marginBottom: 6 }}>Alcance operacional · sin maniobras autónomas</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.55 }}>
                    OMNIX apoya la coordinación operacional entre red, activos, mantenimiento y campo. <strong>No ejecuta maniobras, cambios de protección, energización/desenergización, redispatch ni acciones sobre setpoints sin aprobación de operadores autorizados y sistemas especializados.</strong> Ciberseguridad OT: sólo capacidades defensivas.
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
        <Reveal delay={200} y={0}><EnergiaHeroPanel/></Reveal>
      </div>
    </Container>
  </section>
);

// Panel: sistema eléctrico abstracto con métricas live
const EnergiaHeroPanel = () => {
  const [demand, setDemand] = React.useState(4820);
  const [renew, setRenew] = React.useState(1240);
  const [saidi, setSaidi] = React.useState(38.2);
  const [assetsRisk, setAssetsRisk] = React.useState(11);
  React.useEffect(() => {
    const id = setInterval(() => {
      setDemand((v) => Math.max(4200, Math.min(5600, v + Math.floor((Math.random() - 0.4) * 80))));
      setRenew((v) => Math.max(800, Math.min(1900, v + Math.floor((Math.random() - 0.5) * 60))));
      setSaidi((v) => Math.max(28, Math.min(52, v + (Math.random() - 0.5) * 1.2)));
      setAssetsRisk((v) => Math.max(4, Math.min(24, v + Math.floor((Math.random() - 0.5) * 3))));
    }, 1400);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{ border: '1.5px solid #1E1F26', background: '#FAFBFD' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 20px', borderBottom: '1.5px solid #1E1F26', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#52557A' }}>
        <span>SISTEMA · GEN + TRANSMISIÓN + DISTRIBUCIÓN · [DEMO]</span>
        <span style={{ color: '#F4024C', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: '#F4024C' }} className="omnix-blink"/>
          MONITORING
        </span>
      </div>
      <svg viewBox="0 0 560 280" style={{ display: 'block', width: '100%', height: 'auto', background: '#FFF' }}>
        <g stroke="#E4EBF3" strokeWidth="0.5">
          {Array.from({length: 12}).map((_, i) => <line key={i} x1={i*50} y1="0" x2={i*50} y2="280"/>)}
          {Array.from({length: 6}).map((_, i) => <line key={i} x1="0" y1={i*50} x2="560" y2={i*50}/>)}
        </g>
        {/* Nodos: generación → transmisión → distribución */}
        {[
          { x: 60,  y: 70,  k: 'GEN·SOLAR',  c: '#B8860B' },
          { x: 60,  y: 200, k: 'GEN·EÓLICA', c: '#0F5132' },
          { x: 200, y: 140, k: 'TRANS·SUB',  c: '#0050BD' },
          { x: 340, y: 80,  k: 'DIST·N1',    c: '#0F5132' },
          { x: 340, y: 200, k: 'DIST·N2',    c: '#EA384C', risky: true },
          { x: 480, y: 140, k: 'STORAGE',    c: '#0050BD' },
        ].map((n) => (
          <g key={n.k} transform={`translate(${n.x}, ${n.y})`}>
            {n.risky && (
              <circle r="16" fill="none" stroke="#EA384C" strokeWidth="1" opacity="0.6">
                <animate attributeName="r" values="12;22;12" dur="1.4s" repeatCount="indefinite"/>
                <animate attributeName="opacity" values="0.6;0;0.6" dur="1.4s" repeatCount="indefinite"/>
              </circle>
            )}
            <rect x="-42" y="-14" width="84" height="28" fill="#FFF" stroke={n.c} strokeWidth="1.5"/>
            <text y="4" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="#000">{n.k}</text>
          </g>
        ))}
        {[
          { d: 'M 102 70 L 158 140', c: '#96A3B5', pc: '#0050BD' },
          { d: 'M 102 200 L 158 140', c: '#96A3B5', pc: '#0050BD' },
          { d: 'M 242 140 L 298 80', c: '#96A3B5', pc: '#0050BD' },
          { d: 'M 242 140 L 298 200', c: '#EA384C', pc: '#EA384C', pw: true },
          { d: 'M 382 80 L 438 140', c: '#96A3B5', pc: '#0050BD' },
          { d: 'M 382 200 L 438 140', c: '#B8860B', pc: '#B8860B' },
        ].map((r, i) => (
          <FlowPath key={i} d={r.d} stroke={r.c} strokeWidth={r.pw ? 1.5 : 0.75} particleColor={r.pc} particleSize={r.pw ? 3.5 : 2.5} duration={r.pw ? 1.8 : 2.8} pulseWidth={r.pw}/>
        ))}
        <text x="14" y="20" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#96A3B5">RED ABSTRACTA · SIN TOPOLOGÍA REAL</text>
        <text x="14" y="260" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#EA384C">DIST-N2 · transformador con degradación · repuesto limitado</text>
      </svg>
      <div style={{ padding: '18px 20px', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
        <div style={{ padding: '12px 14px', background: '#000', color: '#FFF' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 6 }}>Demanda actual · MW</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: '#F4024C', letterSpacing: '-0.025em' }}><SpringNumber to={demand}/></div>
        </div>
        <div style={{ padding: '12px 14px', background: '#FFF', border: '1px solid #B8860B' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 6 }}>Renovable prevista · MW</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: '#B8860B', letterSpacing: '-0.025em' }}><SpringNumber to={renew}/></div>
        </div>
        <div style={{ padding: '12px 14px', background: '#FFF', border: '1px solid #0F5132' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 6 }}>SAIDI · min · demo</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: '#0F5132', letterSpacing: '-0.025em' }}><SpringNumber to={saidi} decimals={1}/></div>
        </div>
        <div style={{ padding: '12px 14px', background: '#FFF', border: '1px solid #EA384C' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 6 }}>Activos en riesgo</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: '#EA384C', letterSpacing: '-0.025em' }}><SpringNumber to={assetsRisk}/></div>
        </div>
      </div>
      <div style={{ borderTop: '1.5px solid #1E1F26', padding: '10px 20px', background: '#000', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
        <span>[DATOS SINTÉTICOS] · [RED ABSTRACTA]</span>
        <span style={{ color: '#F4024C' }}>SCADA · EMS · ADMS · EAM · WFM · GIS</span>
      </div>
    </div>
  );
};

const EnergiaAEO = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 72, paddingBottom: 72, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 40, alignItems: 'start' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase' }}>Respuesta AEO</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#96A3B5', marginTop: 4 }}>tl;dr</div>
        </div>
        <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.55, color: '#000', margin: 0, maxWidth: 900 }}>
          OMNIX es una plataforma de <strong>cognición operacional soberana</strong> para empresas de generación, transmisión, distribución y energías renovables. Conecta red, activos, mantenimiento, demanda, clima, inventario y operaciones de campo para detectar restricciones, evaluar alternativas y coordinar respuestas auditables · manteniendo <strong>control humano</strong> y gobierno institucional.
        </p>
      </div>
    </Container>
  </section>
);

const EnergiaProblem = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 72 }}>
        <Reveal><SectionMeta n="01" label="El problema operacional"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#000' }}>
            Una alarma indica que algo cambió. La <span style={{ color: '#F4024C' }}>cognición operacional</span> determina qué significa.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.45, color: '#52557A', margin: 0 }}>
            El valor operacional aparece cuando se comprende qué está en riesgo, qué recursos existen y qué respuesta debe coordinarse antes de perder continuidad del servicio.
          </p>
        </Reveal>
      </div>
      <div style={{ border: '1.5px solid #1E1F26', background: '#FAFBFD', marginBottom: 40 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 24px', borderBottom: '1.5px solid #1E1F26', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#52557A' }}>
          <span>ANATOMÍA · CONVERGENCIA DE CONDICIONES EN LA RED</span>
          <span>T + 4 HORAS</span>
        </div>
        {[
          { t: 'T = 0',    ev: 'La demanda esperada aumenta',                            d: 'Pronóstico térmico + evento programado + nueva carga elevan la demanda del período. EMS registra sin alerta crítica.',           sys: 'EMS · sistema meteorológico' },
          { t: 'T + 20m',  ev: 'La generación renovable prevista disminuye',              d: 'Cobertura nubosa mayor a la modelada · viento por debajo del pronóstico. Plataforma renovable ajusta expectativa a la baja.',   sys: 'Plataforma renovable · meteo' },
          { t: 'T + 40m',  ev: 'Un transformador muestra degradación',                    d: 'Historian registra desviación térmica y de vibración fuera de patrón. EAM sin orden asociada. Ingeniería sin visibilidad cruzada.',  sys: 'SCADA · historian · EAM' },
          { t: 'T + 1h30', ev: 'Mantenimiento programado no ajustado',                    d: 'Ventana de intervención mantiene su plan original. CMMS coordina cuadrilla · sin considerar el nuevo estado del sistema.',        sys: 'CMMS · WFM' },
          { t: 'T + 3h',    ev: 'Repuesto crítico limitado · cuadrilla ocupada',            d: 'WMS muestra 1 unidad regional. WFM asigna cuadrilla a otro trabajo. Flexibilidad de baterías disponible pero no considerada.',    sys: 'WMS · WFM · almacenamiento' },
          { t: 'T + 4h',    ev: 'Respuesta fragmentada · decisión bajo presión',            d: 'Cada área decide sobre datos parciales. Se activa contingencia costosa que podría haberse anticipado con coordinación temprana.',   sys: 'Consecuencia · todos' },
        ].map((r, i, arr) => (
          <SlideIn key={r.t} direction="right" delay={i * 90}>
            <div style={{ display: 'grid', gridTemplateColumns: '96px 1fr 240px', gap: 32, alignItems: 'start', padding: '20px 24px', borderBottom: (i < arr.length - 1) ? '1px solid #E4EBF3' : 'none', background: i === arr.length - 1 ? '#FDE4E7' : '#FFF' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.18em', color: i === arr.length - 1 ? '#EA384C' : '#F4024C', fontWeight: 500 }}>{r.t}</div>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, letterSpacing: '-0.015em', color: '#000', marginBottom: 6, lineHeight: 1.25 }}>{r.ev}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#52557A', lineHeight: 1.5 }}>{r.d}</div>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', color: '#52557A', textAlign: 'right' }}>{r.sys}</div>
            </div>
          </SlideIn>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        {[
          { i: 'zap-off',           l: 'Interrupciones',              d: 'SAIDI · SAIFI · CAIDI se degradan sin anticipación' },
          { i: 'trending-up',       l: 'Costo de emergencia',         d: 'Mantenimiento reactivo · logística urgente' },
          { i: 'wrench',            l: 'Backlog creciente',           d: 'Órdenes acumuladas · sin priorización con contexto' },
          { i: 'file-warning',      l: 'Auditoría regulatoria',       d: 'Trazabilidad limitada · fundamentos no documentados' },
        ].map((c, i) => (
          <Reveal key={c.l} delay={i * 80}>
            <div style={{ padding: '20px 22px', background: '#FFF', border: '1px solid #E4EBF3' }}>
              <i data-lucide={c.i} width="20" height="20" style={{ color: '#F4024C', strokeWidth: 1.5, marginBottom: 14 }}/>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: '#000', letterSpacing: '-0.01em', marginBottom: 4 }}>{c.l}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#52557A', lineHeight: 1.4 }}>{c.d}</div>
            </div>
          </Reveal>
        ))}
      </div>
    </Container>
  </section>
);

Object.assign(window, { EnergiaHero, EnergiaAEO, EnergiaProblem });
