// LOGÍSTICA — HERO + DISRUPCIÓN
// StoryBrand 2.0 · Buyer: COO / CSCO / VP SC / Dir. Logística / Dir. Fulfillment / Dir. Transporte
// Diferencia clave vs Retail: red multi-nodo multi-país + priorización de órdenes críticas

const LogHero = () => (
  <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' }}>Logística · supply chain</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' }}>
              De disrupciones multi-nodo 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 WMS, TMS, OMS, ERP, inventario y transporte para detectar disrupciones,
              priorizar órdenes críticas y coordinar respuestas entre nodos, operadores y países.
            </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 red logística</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' }}>
              Comenzamos con una disrupción, una red de nodos y un resultado medible · sin reemplazar WMS · TMS · OMS · ERP
            </div>
          </Reveal>
          <Reveal delay={320}>
            <div style={{
              marginTop: 40, padding: '20px 24px', background: '#FAFBFD', border: '1.5px solid #1E1F26',
              display: 'flex', gap: 24, alignItems: 'center',
            }}>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 4 }}>Claim disponible</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 40, letterSpacing: '-0.03em', color: '#F4024C', lineHeight: 1 }}>
                  −72%<span style={{ fontSize: 18, color: '#96A3B5', marginLeft: 4 }}>*</span>
                </div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#1E1F26', letterSpacing: '0.06em', marginTop: 4 }}>Tiempo de respuesta</div>
              </div>
              <div style={{ borderLeft: '1px solid #E4EBF3', paddingLeft: 24, flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#B8860B', textTransform: 'uppercase', marginBottom: 6 }}>* Resultado asociado a un caso específico</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#52557A', letterSpacing: '0.04em', lineHeight: 1.6 }}>
                  [VALIDAR CASO] · [VALIDAR MÉTRICA] · [VALIDAR PERIODO] · [VALIDAR BASE COMPARACIÓN] · [VALIDAR DEFINICIÓN DE TIEMPO DE RESPUESTA]
                </div>
              </div>
            </div>
          </Reveal>
        </div>

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

// Panel: mapa de red multi-nodo con contadores vivos
const LogHeroNetwork = () => {
  const [orders, setOrders] = React.useState(2847);
  const [risk, setRisk] = React.useState(18);
  const [otif, setOtif] = React.useState(94.2);
  React.useEffect(() => {
    const id = setInterval(() => {
      setOrders((o) => o + Math.floor(Math.random() * 12 + 2));
      setRisk((r) => Math.max(4, Math.min(32, r + Math.floor((Math.random() - 0.5) * 6))));
      setOtif((o) => Math.max(88, Math.min(98, o + (Math.random() - 0.5) * 0.3)));
    }, 1500);
    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>NETWORK · 4 PAÍSES · 12 NODOS</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"/>
          ORCHESTRATING
        </span>
      </div>
      <svg viewBox="0 0 560 260" 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="260"/>)}
          {Array.from({length: 6}).map((_, i) => <line key={i} x1="0" y1={i*50} x2="560" y2={i*50}/>)}
        </g>
        {/* 3 hubs regionales */}
        {[
          { x: 90,  y: 80,  k: 'CL', label: 'HUB-STG', c: '#0F5132' },
          { x: 260, y: 60,  k: 'PE', label: 'HUB-LIM', c: '#EA384C', risky: true },
          { x: 440, y: 90,  k: 'MX', label: 'HUB-MEX', c: '#0F5132' },
          { x: 170, y: 190, k: 'AR', label: 'FC-BUE',  c: '#0F5132' },
          { x: 350, y: 200, k: 'CO', label: 'FC-BOG',  c: '#B8860B' },
        ].map((n, i) => (
          <g key={n.label} transform={`translate(${n.x}, ${n.y})`}>
            {n.risky && (
              <circle r="18" fill="none" stroke="#EA384C" strokeWidth="1" opacity="0.6">
                <animate attributeName="r" values="14;24;14" dur="1.6s" repeatCount="indefinite"/>
                <animate attributeName="opacity" values="0.6;0;0.6" dur="1.6s" repeatCount="indefinite"/>
              </circle>
            )}
            <rect x="-24" y="-14" width="48" height="28" fill="#FFF" stroke={n.c} strokeWidth="1.5"/>
            <text y="4" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" fill="#000" letterSpacing="0.06em">{n.k}</text>
            <text y="-20" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="8" fill={n.c} letterSpacing="0.14em">{n.label}</text>
          </g>
        ))}
        {/* Rutas */}
        {[
          { d: 'M 114 80 L 236 60', c: '#96A3B5', pc: '#0050BD' },
          { d: 'M 284 60 L 416 90', c: '#96A3B5', pc: '#0050BD' },
          { d: 'M 90 96  L 170 174', c: '#96A3B5', pc: '#0050BD' },
          { d: 'M 260 78 L 350 184', c: '#EA384C', pc: '#EA384C', pw: true },
          { d: 'M 440 108 L 350 184', c: '#96A3B5', pc: '#0050BD' },
        ].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 : 3} pulseWidth={r.pw}/>
        ))}
        <text x="14" y="20" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#96A3B5">CL · AR · PE · CO · MX</text>
        <text x="14" y="252" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#EA384C">HUB-LIM · CAPACITY RESTRICTED · 2h</text>
      </svg>
      {/* Live counters */}
      <div style={{ padding: '18px 20px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
        <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 }}>Órdenes en vuelo</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: '#F4024C', letterSpacing: '-0.025em' }}>
            <SpringNumber to={orders}/>
          </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 }}>En riesgo</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: '#EA384C', letterSpacing: '-0.025em' }}>
            <SpringNumber to={risk}/>
          </div>
        </div>
        <div style={{ padding: '12px 14px', background: '#FFF', border: '1px solid #E4EBF3' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 6 }}>OTIF actual</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: '#0F5132', letterSpacing: '-0.025em' }}>
            <SpringNumber to={otif} decimals={1} suffix="%"/>
          </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' }}>WMS · TMS · OMS · ERP · CARRIERS</span>
      </div>
    </div>
  );
};

// SECCIÓN 2 — LA DISRUPCIÓN
const LogDisruption = () => (
  <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 disrupción multi-nodo"/></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 disrupción en un nodo puede comprometer toda la <span style={{ color: '#F4024C' }}>promesa de entrega</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 detectar la demora. El problema es decidir qué hacer antes de que afecte al cliente.
          </p>
        </Reveal>
      </div>

      {/* Timeline anatomía */}
      <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 · DISRUPCIÓN MULTI-NODO CON ÓRDENES CRÍTICAS</span>
          <span>T + 5 HORAS</span>
        </div>
        {[
          { t: 'T = 0',    ev: 'Hub regional pierde capacidad temporalmente',      d: 'HUB-LIM cae a 60% de capacidad por incidente operacional · ventana estimada 4-6h. WMS emite alerta.',      sys: 'WMS · gestión de muelles' },
          { t: 'T + 15m',  ev: 'Transportista actualiza ETA',                       d: 'Carrier informa +6h en 3 rutas críticas. TMS refresca ETA pero no evalúa impacto comercial.',                sys: 'TMS · Carrier portal' },
          { t: 'T + 30m',  ev: 'Órdenes en riesgo no priorizadas',                   d: '47 pedidos afectados. El OMS los muestra iguales · nadie sabe cuáles son cliente prioritario ni SLA crítico.', sys: 'OMS · dashboards' },
          { t: 'T + 1h',   ev: 'Coordinación manual entre 4 equipos',                d: 'Planning, transporte, customer ops y comercial reciben la alerta por separado. Reunión ad-hoc convocada.', sys: 'Email · Slack · llamadas' },
          { t: 'T + 2h30', ev: 'Decisiones locales sin visión global',                d: 'Cada país elige protegerse: transporte expedito, reasignaciones inconsistentes, comunicaciones divergentes al cliente.', sys: 'Manual · planillas' },
          { t: 'T + 5h',   ev: 'SLA incumplido · transporte expedito · cliente decepcionado', d: '12 pedidos entregados fuera de ventana. Costo expedito +58%. NPS golpeado. Ventanas perdidas irrecuperables.', sys: 'Consecuencia · todos' },
        ].map((r, i, arr) => (
          <SlideIn key={r.t} direction="right" delay={i * 100}>
            <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>

      {/* Costo de no actuar */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        {[
          { i: 'calendar-x',    l: 'SLA incumplido',           d: 'OTIF baja · penalidades' },
          { i: 'trending-up',    l: 'Transporte expedito',      d: 'Costo por orden +40-60%' },
          { i: 'users',          l: 'Sobrecarga del equipo',    d: 'Reuniones ad-hoc · reactividad' },
          { i: 'heart-crack',    l: 'Cliente decepcionado',     d: 'NPS y renovaciones en riesgo' },
        ].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, { LogHero, LogDisruption });