// Bloque 9 — INDUSTRIES GRID
const HomeIndustries = () => {
  const list = [
    { name: 'Banca',            icon: 'landmark',    pain: 'Fraude en tiempo real, riesgo crediticio, AML.' },
    { name: 'Telecomunicaciones', icon: 'radio-tower', pain: 'NOC saturado. −65% MTTR* en incidentes.' },
    { name: 'Retail',           icon: 'shopping-bag',pain: 'Quiebres de stock, pricing dinámico, demanda.' },
    { name: 'Logística',        icon: 'truck',       pain: 'Coordinación multi-nodo, disrupciones supply.' },
    { name: 'Manufactura',      icon: 'factory',     pain: 'Downtime no planificado, OEE, mantención.' },
    { name: 'Minería',          icon: 'mountain',    pain: 'Continuidad IT/OT sobre SCADA y sensores.' },
    { name: 'Energía',          icon: 'zap',         pain: 'Optimización de red, forecast, curtailment.' },
    { name: 'Gobierno',         icon: 'building-2',  pain: 'Soberanía cognitiva, escala, auditabilidad.' },
  ];
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginBottom: 72, alignItems: 'end' }}>
          <div>
            <Reveal>
              <SectionMeta n="06" label="Dónde operamos hoy"/>
            </Reveal>
            <Reveal delay={80}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1.03, letterSpacing: '-0.025em', margin: 0, color: '#000' }}>
                Ocho verticales críticas.<br/>Un mismo runtime.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              La plataforma es la misma. La cognición es específica de tu industria — entrenada con
              tu vocabulario, tu telemetría y tus reglas de negocio.
            </p>
            <div style={{ marginTop: 24 }}>
              <Button variant="ghost" href="industrias.html" icon="arrow-right">Ver todas las industrias</Button>
            </div>
          </Reveal>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          borderTop: '1.5px solid #1E1F26', borderLeft: '1px solid #E4EBF3',
        }}>
          {list.map((v, i) => (
            <Reveal key={v.name} delay={(i % 4) * 80}>
              <a href="industrias.html" style={{
                padding: 28, background: '#FFFFFF',
                borderRight: '1px solid #E4EBF3', borderBottom: '1px solid #E4EBF3',
                display: 'flex', flexDirection: 'column', gap: 18,
                textDecoration: 'none', color: '#1E1F26', minHeight: 220,
                transition: 'all 200ms', position: 'relative',
              }}
              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 style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <i data-lucide={v.icon} width="26" height="26" style={{ strokeWidth: 1.5 }}/>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: 'inherit', opacity: 0.5 }}>0{i+1}</span>
                </div>
                <div style={{ marginTop: 'auto' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, letterSpacing: '-0.015em', marginBottom: 8 }}>
                    {v.name}
                  </div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.45, opacity: 0.7 }}>
                    {v.pain}
                  </div>
                </div>
                <div style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  paddingTop: 12, borderTop: '1px solid rgba(150,163,181,0.25)',
                  fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
                }}>
                  <span>Ver vertical</span>
                  <i data-lucide="arrow-right" width="14" height="14" style={{ strokeWidth: 1.5 }}/>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, { HomeIndustries });