// PÁGINA: Industrias — HUB
const IndHero = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 88, 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.5, pointerEvents: 'none',
      maskImage: 'radial-gradient(ellipse at 90% 40%, #000 0%, transparent 60%)',
      WebkitMaskImage: 'radial-gradient(ellipse at 90% 40%, #000 0%, transparent 60%)',
    }}/>
    <Container>
      <div style={{ position: 'relative', maxWidth: 980 }}>
        <Reveal><Eyebrow color="#F4024C">INDUSTRIAS · SDMs POR VERTICAL</Eyebrow><Rule width={56}/></Reveal>
        <Reveal delay={80}>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 84, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 28px', color: '#000' }}>
            Cognición operacional <span style={{ color: '#F4024C' }}>adaptada</span> a tu industria.
          </h1>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 21, lineHeight: 1.5, color: '#52557A', maxWidth: 720, margin: '0 0 32px' }}>
            No traducimos entre industrias. Entrenamos una IA específica para la tuya —con tu vocabulario, tus reglas, tu telemetría y tus KPIs.
          </p>
        </Reveal>
      </div>
    </Container>
  </section>
);

const IndGrid = () => {
  const industries = [
    { n: 'Banca',              href: 'banca.html', ready: true, icon: 'landmark',    pain: 'Fraude en tiempo real, riesgo crediticio, AML, KYC.',       use: 'Cognición operacional soberana · 6 dominios · 10 SDMs bancarios.',      result: 'Decisiones auditables', country: 'LATAM · EU' },
    { n: 'Telco',              href: 'telco.html', ready: true, icon: 'radio-tower', pain: 'Alarm fatigue, MTTR alto, SLA en riesgo, alineación TM Forum.', use: 'Correlación de alertas + priorización por cliente + auto-mitigación.', result: '−65% MTTR*',              country: 'LATAM' },
    { n: 'Telecomunicaciones', href: '#', ready: false, icon: 'radio-tower', pain: 'NOC saturado, tickets sin priorizar, degradación de red.', use: 'Correlación de alertas + auto-mitigación de incidentes NOC.',    result: '−65% MTTR*',              country: 'LATAM · IB' },
    { n: 'Retail',             href: 'retail.html', ready: true, icon: 'shopping-bag',pain: 'Quiebres de stock, pricing dinámico, elasticidad.',        use: 'Forecast por SKU × tienda + reprecio automático diario.',       result: '−22% quiebres*',          country: 'LATAM · IB' },
    { n: 'Logística',          href: 'logistica.html', ready: true, icon: 'truck',       pain: 'Coordinación multi-nodo, disrupciones supply-chain.',      use: 'Re-ruteo automático + priorización de órdenes críticas.',       result: '−72% tiempo respuesta*',  country: 'MULTI-PAÍS' },
    { n: 'Manufactura',        href: 'manufactura.html', ready: true, icon: 'factory',     pain: 'Downtime no planificado, OEE bajo, mantención reactiva.',  use: 'Mantención predictiva + optimización de línea en tiempo real.', result: '+18% OEE*',               country: 'LATAM' },
    { n: 'Minería',            href: 'mineria.html', ready: true, icon: 'mountain',    pain: 'Continuidad IT/OT, SCADA, seguridad operacional.',         use: 'Correlación de sensores + orquestación de respuesta operacional.',result: '−41% downtime*',         country: 'CONO SUR' },
    { n: 'Salud',              href: 'salud.html', ready: true, icon: 'stethoscope',  pain: 'Quiebres de stock, equipos fuera de servicio, capacidad fragmentada.', use: 'Cognición operacional sanitaria · 7 dominios · 10 SDMs.',      result: 'Continuidad asistencial', country: 'LATAM · IB' },
    { n: 'Energía y Utilities', href: 'energia.html', ready: true, icon: 'zap',         pain: 'Restricciones de red, mantenimiento reactivo, variabilidad renovable.',   use: 'Cognición operacional energética · 7 dominios · 11 SDMs.',   result: 'Continuidad de red',        country: 'EU · LATAM' },
    { n: 'Gobierno',           href: 'gobierno.html', ready: true, icon: 'building-2',  pain: 'Soberanía cognitiva, escala nacional, auditabilidad.',     use: 'Cognición institucional soberana · 7 dominios públicos.',    result: 'Estudio Ruta 78',              country: 'LATAM' },
    { n: 'Defensa y operaciones críticas', href: 'defensa.html', ready: true, icon: 'shield', pain: 'Datos fragmentados · sostenimiento manual · gobernanza compleja.', use: 'Cognición institucional soberana · 6 dominios · no cinético.',    result: 'Capacidad institucional',        country: 'RESERVADO' },
    { n: 'Operaciones Críticas · Transversal', href: 'operaciones-criticas.html', ready: true, icon: 'layers', pain: 'Su industria no está entre las verticales · pero cumple criterios de encaje enterprise.', use: '8 dominios de decisión · 11 SDMs genéricos · assessment de encaje.', result: 'Categoría transversal', country: 'MULTI-SECTOR' },
  ];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <Reveal><SectionMeta n="01" label="Ocho verticales · un runtime"/></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 }}>
            Producción real, en ocho industrias críticas.
          </h2>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, borderTop: '1.5px solid #1E1F26', borderLeft: '1px solid #E4EBF3' }}>
          {industries.map((ind, i) => (
            <Reveal key={ind.n} delay={(i % 2) * 100}>
              <a href={ind.href} style={{
                display: 'grid', gridTemplateColumns: '60px 1fr auto',
                gap: 24, padding: '32px 28px',
                background: '#FFF',
                borderRight: '1px solid #E4EBF3', borderBottom: '1px solid #E4EBF3',
                textDecoration: 'none', color: '#1E1F26',
                transition: 'all 220ms',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = '#000'; e.currentTarget.style.color = '#FFF'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = '#FFF'; e.currentTarget.style.color = '#1E1F26'; }}>
                <div>
                  <div style={{ width: 44, height: 44, border: '1.5px solid currentColor', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <i data-lucide={ind.icon} width="22" height="22" style={{ strokeWidth: 1.5 }}/>
                  </div>
                </div>
                <div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 6 }}>
                    <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, letterSpacing: '-0.015em', margin: 0, lineHeight: 1 }}>
                      {ind.n}
                    </h3>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', opacity: 0.6 }}>
                      {ind.country}
                    </span>
                  </div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.55, marginBottom: 12, opacity: 0.85 }}>
                    <strong style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#F4024C', textTransform: 'uppercase', marginRight: 8 }}>DOLOR</strong>
                    {ind.pain}
                  </div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.55, opacity: 0.75 }}>
                    <strong style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: 'currentColor', opacity: 0.6, textTransform: 'uppercase', marginRight: 8 }}>USO</strong>
                    {ind.use}
                  </div>
                </div>
                <div style={{ textAlign: 'right', display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-end' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, letterSpacing: '-0.02em', color: '#F4024C' }}>
                    {ind.result}
                  </div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', opacity: ind.ready ? 1 : 0.5, textTransform: 'uppercase', color: ind.ready ? '#F4024C' : 'inherit' }}>
                    {ind.ready ? 'Ver página →' : 'Ver caso →'}
                  </div>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
};

const IndCallOut = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <Reveal><SectionMeta n="02" label="Tu industria no está listada" dark color="#F4024C"/></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: '#FFF' }}>
              Si tu operación es crítica, tu SDM ya tiene sentido.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: '#96A3B5', margin: '0 0 24px', maxWidth: 560 }}>
              Hemos entrenado SDMs para verticales que no publicamos por acuerdo con el cliente. Si tu industria
              tiene sistemas complejos, decisiones repetitivas de alto impacto y datos propietarios ricos —
              hay caso.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <Button variant="primary" icon="arrow-right" href="diagnostico.html">Explorar mi industria</Button>
          </Reveal>
        </div>
        <Reveal delay={200} y={0}>
          <div style={{ border: '1.5px solid #2E3140', padding: 32, background: '#0A0B10' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 20 }}>
              Verticales exploradas · no publicadas
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              {['Seguros', 'Ports', 'Aviación', 'Farma', 'Utilities', 'Defensa', 'Educación', 'Real Estate'].map((v) => (
                <li key={v} style={{
                  padding: '10px 14px', border: '1px solid #2E3140',
                  fontFamily: 'var(--font-mono)', fontSize: 12, color: '#96A3B5', letterSpacing: '0.02em',
                }}>{v}</li>
              ))}
            </ul>
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

Object.assign(window, { IndHero, IndGrid, IndCallOut });