// MINERÍA — HERO + OPERACIÓN FRAGMENTADA
// StoryBrand 2.0 · Buyer: COO / Gerentes de Faena, Mina, Planta, Mantenimiento, Relaves, Logística
// Diferencia clave: OMNIX conecta sistemas expertos que hoy operan en silo

const MineriaHero = () => (
  <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' }}>Minería</span>
            </div>
            <Rule width={56}/>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 80, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#000' }}>
              La cognición operacional que conecta toda la <span style={{ color: '#F4024C' }}>operación minera</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 SCADA, planificación minera, mantenimiento, geotecnia, flota, planta y logística
              para detectar disrupciones, evaluar su impacto y coordinar respuestas auditables sobre
              sus sistemas actuales.
            </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 minera</Button>
              <Button variant="ghost" icon="play" href="#demo">Ver demostración operacional</Button>
            </div>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              Comenzamos con una disrupción, un dominio y un resultado medible · sin reemplazar sus sistemas actuales
            </div>
          </Reveal>

          {/* Nav a los 4 dominios */}
          <Reveal delay={320}>
            <div style={{ marginTop: 40, borderTop: '1.5px solid #1E1F26', paddingTop: 20 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 14 }}>
                Cuatro dominios del subsitio
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
                {[
                  { l: 'Mantenimiento · confiabilidad',      href: 'mineria-mantenimiento.html' },
                  { l: 'Relaves · gestión hídrica',           href: 'mineria-relaves.html' },
                  { l: 'Logística mina-puerto',                href: 'mineria-logistica.html' },
                  { l: 'Interconexión de sistemas expertos',   href: 'mineria-sistemas-expertos.html' },
                ].map((d) => (
                  <a key={d.l} href={d.href} style={{
                    padding: '10px 14px', background: '#FAFBFD', border: '1px solid #E4EBF3',
                    fontFamily: 'var(--font-mono)', fontSize: 11, color: '#1E1F26', textDecoration: 'none',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    transition: 'all 200ms',
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = '#000'; e.currentTarget.style.color = '#FFF'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = '#FAFBFD'; e.currentTarget.style.color = '#1E1F26'; }}>
                    <span>{d.l}</span>
                    <i data-lucide="arrow-right" width="12" height="12"/>
                  </a>
                ))}
              </div>
            </div>
          </Reveal>
        </div>

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

// Panel: mapa integrado mina → planta → relaves → puerto con métricas vivas
const MineriaHeroPanel = () => {
  const [prod,   setProd]   = React.useState(4820);
  const [avail,  setAvail]  = React.useState(88.4);
  const [risk,   setRisk]   = React.useState(1);
  React.useEffect(() => {
    const id = setInterval(() => {
      setProd((p) => p + Math.floor(Math.random() * 40 - 10));
      setAvail((a) => Math.max(78, Math.min(95, a + (Math.random() - 0.5) * 0.4)));
      if (Math.random() < 0.15) setRisk((r) => Math.max(0, Math.min(3, r + (Math.random() > 0.5 ? 1 : -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>MINE · PLANT · TAILINGS · PORT</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"/>
          COORDINATING
        </span>
      </div>
      {/* Mapa esquemático horizontal */}
      <svg viewBox="0 0 560 220" 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="220"/>)}
          {Array.from({length: 5}).map((_, i) => <line key={i} x1="0" y1={i*50} x2="560" y2={i*50}/>)}
        </g>
        {[
          { x: 60,  n: 'MINA',    sub: 'flota · plan',          c: '#1E1F26' },
          { x: 190, n: 'PLANTA',  sub: 'APC · metalurgia',      c: '#F4024C' },
          { x: 320, n: 'RELAVES', sub: 'geotec · hídrica',      c: '#0050BD' },
          { x: 450, n: 'PUERTO',  sub: 'FFCC · embarque',        c: '#B00238' },
        ].map((s, i) => (
          <g key={s.n} transform={`translate(${s.x}, 110)`}>
            <rect x="-42" y="-32" width="84" height="64" fill="#FFF" stroke={s.c} strokeWidth="1.5"/>
            <text y="-8" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="800" fontSize="13" fill="#000" letterSpacing="-0.005em">{s.n}</text>
            <text y="10" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="8" letterSpacing="0.14em" fill={s.c}>{s.sub}</text>
            <text y="24" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="7" letterSpacing="0.14em" fill="#96A3B5">OT · SCADA</text>
            {i < 3 && <FlowPath d={`M 42 0 L ${130 - 42} 0`} stroke="#F4024C" strokeWidth={1.25} particleColor="#F4024C" particleSize={3} duration={2.4}/>}
          </g>
        ))}
        {/* OMNIX orchestrator (arriba) */}
        <g transform="translate(280, 40)">
          <rect x="-56" y="-16" width="112" height="32" fill="#000" stroke="#F4024C" strokeWidth="1.5"/>
          <text y="4" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="12" fill="#F4024C">OMNIX · CORTEX</text>
        </g>
        {[60, 190, 320, 450].map((x, i) => (
          <line key={i} x1="280" y1="60" x2={x} y2="78" stroke="#96A3B5" strokeWidth="0.75" strokeDasharray="3 3" opacity="0.55"/>
        ))}
      </svg>
      {/* Live counters */}
      <div style={{ padding: '20px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
        <div style={{ padding: '14px 16px', background: '#000', color: '#FFF' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 6 }}>Throughput · t/h</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, color: '#F4024C', letterSpacing: '-0.025em' }}>
            <SpringNumber to={prod}/>
          </div>
        </div>
        <div style={{ padding: '14px 16px', background: '#FFF', border: '1px solid #E4EBF3' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 6 }}>Disponibilidad</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, color: '#0F5132', letterSpacing: '-0.025em' }}>
            <SpringNumber to={avail} decimals={1} suffix="%"/>
          </div>
        </div>
        <div style={{ padding: '14px 16px', background: '#FFF', border: `1px solid ${risk >= 2 ? '#EA384C' : '#E4EBF3'}` }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 6 }}>Riesgo activo</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, color: risk >= 2 ? '#EA384C' : '#B8860B', letterSpacing: '-0.025em' }}>
            <SpringNumber to={risk}/><span style={{ fontSize: 14, color: '#96A3B5' }}>/3</span>
          </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 · datos demostrativos</span>
        <span style={{ color: '#F4024C' }}>SCADA · CMMS · FMS · APC · TMS</span>
      </div>
    </div>
  );
};

// SECCIÓN 2 — LA OPERACIÓN FRAGMENTADA
const MineriaFragmentation = () => (
  <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="La operación fragmentada"/></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' }}>
            Sus sistemas entienden partes de la operación. Ninguno entiende la <span style={{ color: '#F4024C' }}>decisión completa</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.45, color: '#52557A', margin: 0 }}>
            El problema no es la falta de sistemas. Es la falta de una capa común para evaluar,
            priorizar y coordinar sus decisiones.
          </p>
        </Reveal>
      </div>

      {/* Cards por sistema aislado */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        {[
          { i: 'activity',      s: 'SCADA · DCS',                r: 'conoce variables',              m: 'no evalúa impacto operacional' },
          { i: 'wrench',        s: 'CMMS / EAM',                 r: 'conoce activos y órdenes',      m: 'no ve producción ni plan' },
          { i: 'calendar-days', s: 'Planificación minera',       r: 'conoce el plan',                 m: 'no ve estado real de activos' },
          { i: 'truck',         s: 'FMS · despacho',             r: 'conoce la flota',                m: 'no ve capacidad de planta' },
          { i: 'layers',        s: 'Geotécnico',                 r: 'conoce tendencias',              m: 'no correlaciona con operación' },
          { i: 'ship',          s: 'Logística · puerto',         r: 'conoce inventarios · embarques', m: 'no ve producción disponible' },
          { i: 'brain-circuit', s: 'Sistemas expertos',          r: 'generan recomendaciones',        m: 'pueden ser contradictorias' },
          { i: 'users',         s: 'Equipos humanos',            r: 'reconcilian todo',               m: 'depende de personas' },
        ].map((c, i) => (
          <Reveal key={c.s} delay={i * 60}>
            <div style={{ padding: '20px 20px', background: '#FFF', border: '1px solid #E4EBF3', minHeight: 170 }}>
              <i data-lucide={c.i} width="20" height="20" style={{ color: '#1E1F26', strokeWidth: 1.5, marginBottom: 12 }}/>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: '#000', letterSpacing: '-0.005em', marginBottom: 6 }}>{c.s}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#0F5132', textTransform: 'uppercase', marginBottom: 4 }}>+ {c.r}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#EA384C', textTransform: 'uppercase' }}>— {c.m}</div>
            </div>
          </Reveal>
        ))}
      </div>
    </Container>
  </section>
);

Object.assign(window, { MineriaHero, MineriaFragmentation });