// MANUFACTURA — HERO + DISRUPCIÓN
// StoryBrand 2.0 · buyer: Plant Manager · COO · CIO · Maintenance/Quality/Production Manager
// Traducción vs Retail: activo crítico + orden prioritaria + IT/OT + OEE

const ManufHero = () => (
  <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' }}>Manufactura</span>
            </div>
            <Rule width={56}/>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 82, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#000' }}>
              De señales de planta a <span style={{ color: '#F4024C' }}>decisiones ejecutadas</span>.
            </h1>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 21, lineHeight: 1.5, color: '#52557A', maxWidth: 620, margin: '0 0 32px' }}>
              OMNIX conecta datos IT/OT, reglas operacionales y conocimiento experto para detectar
              disrupciones, coordinar mantenimiento, producción y calidad, y ejecutar acciones sobre
              tus sistemas existentes.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: 'flex', gap: 12, marginBottom: 20 }}>
              <Button variant="primary" icon="arrow-right" href="diagnostico.html">Evaluar una operación de Manufactura</Button>
              <Button variant="ghost" icon="play" href="#demo">Ver demo de 75 segundos</Button>
            </div>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              Mapeamos disrupción · sistemas · impacto operacional · sin reemplazar MES, ERP, SCADA o CMMS
            </div>
          </Reveal>
          <Reveal delay={320}>
            <div style={{ display: 'flex', gap: 24, marginTop: 40, flexWrap: 'wrap' }}>
              {[
                { l: 'Sistemas conectados',      v: 'SCADA · MES · ERP · CMMS · QMS · APS' },
                { l: 'Human-in-the-loop',         v: 'Configurable · segregación IT/OT' },
                { l: 'SDM Manufactura',           v: 'Entrenado sobre activos y procesos' },
              ].map((s) => (
                <div key={s.l}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>{s.l}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: '#1E1F26', fontWeight: 500 }}>{s.v}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>

        <Reveal delay={200} y={0}>
          <ManufLivePanel/>
        </Reveal>
      </div>
    </Container>
  </section>
);

// Panel con métricas industriales vivas
const ManufLivePanel = () => {
  const [oee, setOee] = React.useState(74.2);
  const [risk, setRisk] = React.useState(2);
  const [vib, setVib] = React.useState(4.8);
  const [decisions, setDecisions] = React.useState(1);
  React.useEffect(() => {
    const id = setInterval(() => {
      setOee((o) => Math.max(68, Math.min(88, o + (Math.random() - 0.5) * 0.6)));
      setVib((v) => Math.max(3.2, Math.min(11, v + (Math.random() - 0.35) * 0.8)));
      if (Math.random() < 0.15) setRisk((r) => Math.max(0, Math.min(5, r + (Math.random() > 0.5 ? 1 : -1))));
      if (Math.random() < 0.3) setDecisions((d) => d + 1);
    }, 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>PLANT RUNTIME · LINE-4 · ASSET-CNC-08</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>
      <div style={{ padding: '24px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div style={{ padding: '18px 20px', background: '#FFF', border: '1px solid #E4EBF3' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 8 }}>OEE · CURRENT</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 40, letterSpacing: '-0.025em', color: '#0F5132', lineHeight: 1 }}>
            <SpringNumber to={oee} decimals={1} suffix="%"/>
          </div>
          <div style={{ marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#52557A', letterSpacing: '0.06em' }}>target 82% · shift 3</div>
        </div>
        <div style={{ padding: '18px 20px', background: '#FFF', border: '1px solid #EA384C' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#EA384C', textTransform: 'uppercase', marginBottom: 8 }}>VIBRATION · mm/s</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 40, letterSpacing: '-0.025em', color: '#EA384C', lineHeight: 1 }}>
            <SpringNumber to={vib} decimals={1}/>
          </div>
          <div style={{ marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.06em' }}>ISO 10816 · zone C</div>
        </div>
        <div style={{ padding: '18px 20px', background: '#FFF', border: '1px solid #E4EBF3' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 8 }}>RIESGO · 24H</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 40, letterSpacing: '-0.025em', color: risk >= 3 ? '#EA384C' : '#B8860B', lineHeight: 1 }}>
            <SpringNumber to={risk}/><span style={{ fontSize: 20, color: '#96A3B5' }}> / 5</span>
          </div>
          <div style={{ marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#52557A', letterSpacing: '0.06em' }}>failure probability</div>
        </div>
        <div style={{ padding: '18px 20px', background: '#000', border: '1px solid #000', color: '#FFF' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 8 }}>SDM · MANUFACTURING</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: '#F4024C', lineHeight: 1.1 }}>mfg-asset-v3.7</div>
          <div style={{ marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#96A3B5', letterSpacing: '0.06em' }}>on-prem · signed · N3</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>SIMULATED · demo data</span>
        <span style={{ color: '#F4024C' }}>SCADA · MES · ERP · CMMS · QMS</span>
      </div>
    </div>
  );
};

// SECCIÓN 2 — DISRUPCIÓN
const ManufDisruption = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 72 }}>
        <Reveal><SectionMeta n="01" label="El costo de reaccionar tarde"/></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' }}>
            La alarma no es el problema. El problema es todo lo que <span style={{ color: '#F4024C' }}>ocurre después</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.45, color: '#52557A', margin: 0 }}>
            Detectar una anomalía no protege la producción. La respuesta debe considerar contexto,
            restricciones, impacto y ejecución — coordinados entre mantenimiento, producción y calidad.
          </p>
        </Reveal>
      </div>

      {/* Timeline anatomy */}
      <div style={{ border: '1.5px solid #1E1F26', background: '#FFF', 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 · CONDICIÓN ANÓMALA EN ACTIVO CRÍTICO</span>
          <span>T + 4 HORAS</span>
        </div>
        {[
          { t: 'T = 0',    ev: 'Vibración y temperatura fuera de patrón', d: 'El activo aún no se detiene. SCADA emite alerta. El operador de turno confirma pero no cuantifica el riesgo.', sys: 'SCADA · Historian' },
          { t: 'T + 20m',  ev: 'Mantenimiento revisa el ticket',           d: 'Sin contexto claro sobre el impacto sobre la orden en curso ni sobre calidad. Requiere consultar 3 sistemas.',      sys: 'CMMS · MES' },
          { t: 'T + 45m',  ev: 'Producción desconoce el impacto',           d: 'La orden prioritaria sigue corriendo. Nadie evaluó si conviene reducir velocidad o transferir a otra línea.',       sys: 'MES · APS' },
          { t: 'T + 1h30', ev: 'Calidad no sabe si el lote está afectado',  d: 'No hay evidencia técnica de que el defecto se esté produciendo, pero tampoco existe una inspección de refuerzo.',    sys: 'QMS · LIMS' },
          { t: 'T + 2h30', ev: 'Reunión ad-hoc para decidir',              d: '4 responsables coordinan por teléfono y planillas. No hay disponibilidad clara de técnicos ni repuestos.',           sys: 'Manual · Excel' },
          { t: 'T + 4h',   ev: 'Detención no planificada · scrap parcial',  d: 'El activo falla. La orden queda incompleta. Un lote es retenido. La ventana de intervención ya no existe.',           sys: 'Todos · consecuencia' },
        ].map((r, i, arr) => (
          <SlideIn key={r.t} direction="right" delay={i * 100}>
            <div style={{
              display: 'grid', gridTemplateColumns: '96px 1fr 220px', 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.2 }}>{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>

      {/* Costo de no actuar — cards industriales */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        {[
          { i: 'trending-down', l: 'Menor OEE',                  d: 'Disponibilidad y velocidad caen' },
          { i: 'x-octagon',     l: 'Scrap y retrabajo',           d: 'Lotes retenidos sin criterio claro' },
          { i: 'calendar-x',    l: 'Incumplimiento del plan',     d: 'Penalidades y órdenes urgentes' },
          { i: 'user-x',        l: 'Sobrecarga del equipo',       d: 'Reaccionando en vez de operar' },
        ].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: 17, color: '#000', letterSpacing: '-0.01em', marginBottom: 4 }}>{c.l}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#52557A', lineHeight: 1.4 }}>{c.d}</div>
            </div>
          </Reveal>
        ))}
      </div>
    </Container>
  </section>
);

Object.assign(window, { ManufHero, ManufDisruption });
