// RETAIL — HERO + DISRUPCIÓN
// StoryBrand 2.0: héroe = líder de Retail, guía = OMNIX
// Buyer: CEO, COO, CIO, CDO, VP Supply Chain, Dir. Pricing, Dir. Inventario, Dir. Omnicanal

const RetailHero = () => (
  <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' }}>Retail omnicanal</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 quiebres de stock 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' }}>
              La cognición operacional que conecta demanda, inventario, pricing y fulfillment.
              OMNIX detecta la disrupción, entiende el contexto, decide y ejecuta sobre tus sistemas
              actuales. Sin reemplazar tu ERP, OMS, WMS ni tu pricing engine.
            </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 Retail</Button>
              <Button variant="ghost" icon="play" href="#demo">Ver demo de 60 segundos</Button>
            </div>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              30 min con un socio de OMNIX · sin propuesta pre-armada · NDA disponible upfront
            </div>
          </Reveal>
          <Reveal delay={320}>
            <div style={{ display: 'flex', gap: 24, marginTop: 40, flexWrap: 'wrap' }}>
              {[
                { l: 'Sistemas conectados',   v: 'OMS · WMS · ERP · TMS' },
                { l: 'Decisión → acción',      v: 'Auditable en logs WORM' },
                { l: 'SDM Retail',             v: 'Entrenado sobre tu operación' },
              ].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}>
          <RetailHeroLiveBoard/>
        </Reveal>
      </div>
    </Container>
  </section>
);

// Panel con métricas Retail vivas
const RetailHeroLiveBoard = () => {
  const [demand,   setDemand]   = React.useState(1.28);
  const [risk,     setRisk]     = React.useState(14);
  const [actions,  setActions]  = React.useState(3);
  React.useEffect(() => {
    const id = setInterval(() => {
      setDemand((d) => Math.max(1.0, Math.min(2.4, d + (Math.random() - 0.4) * 0.08)));
      setRisk((r) => Math.max(2, Math.min(24, r + Math.floor((Math.random() - 0.5) * 4))));
      if (Math.random() < 0.35) setActions((a) => a + 1);
    }, 1600);
    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>RETAIL RUNTIME · LIVE</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>
      <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 }}>DEMANDA · MULTIPLIER</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 40, letterSpacing: '-0.025em', color: '#F4024C', lineHeight: 1 }}>
            <SpringNumber to={demand} decimals={2} suffix="×"/>
          </div>
          <div style={{ marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.06em' }}>vs baseline 7d</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 }}>NODOS EN RIESGO</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 40, letterSpacing: '-0.025em', color: '#EA384C', lineHeight: 1 }}>
            <SpringNumber to={risk}/>
          </div>
          <div style={{ marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#52557A', letterSpacing: '0.06em' }}>stockout &lt; 24h proyectado</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 }}>ACCIONES ORQUESTADAS</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 40, letterSpacing: '-0.025em', color: '#0F5132', lineHeight: 1 }}>
            <SpringNumber to={actions}/>
          </div>
          <div style={{ marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#52557A', letterSpacing: '0.06em' }}>transferencias · reprecios · alertas</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 · RETAIL</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, color: '#F4024C', lineHeight: 1.1 }}>retail-omni-v4.2</div>
          <div style={{ marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#96A3B5', letterSpacing: '0.06em' }}>fine-tuned · in-VPC · signed</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' }}>OMS · WMS · ERP · TMS</span>
      </div>
    </div>
  );
};

// SECCIÓN 2 — LA DISRUPCIÓN
const RetailDisruption = () => (
  <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 decisiones fragmentadas"/></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' }}>
            El problema no es detectar el quiebre. Es <span style={{ color: '#F4024C' }}>responder</span> antes de perder la venta.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.45, color: '#52557A', margin: 0 }}>
            Un retailer que ya posee datos de demanda, inventario, pricing, clientes y logística
            no debería perder ventas porque esos datos no pueden convertirse en decisiones a tiempo.
          </p>
        </Reveal>
      </div>

      {/* Timeline de la disrupción */}
      <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 DE UNA DISRUPCIÓN · CADENA DE RETAIL</span>
          <span>T + 6 HORAS</span>
        </div>
        {[
          { t: 'T = 0',    ev: 'Promoción activa acelera demanda',      d: 'La categoría A sube 128% del baseline. Un patrón que ninguna regla estática anticipó.',    sys: 'POS · eCommerce' },
          { t: 'T + 30m',  ev: 'Riesgo proyectado en 14 ubicaciones',    d: 'El sistema de forecast se recalcula por la noche. La disrupción ocurre a media mañana.',   sys: 'Forecast engine' },
          { t: 'T + 1h',   ev: 'Alertas llegan a 4 equipos distintos',   d: 'Category, planning, pricing y logística reciben notificaciones separadas y descoordinadas.', sys: 'Email · dashboards' },
          { t: 'T + 3h',   ev: 'Otras tiendas siguen con inventario disponible', d: 'El WMS muestra stock en 22 ubicaciones sin riesgo — pero nadie autoriza aún la transferencia.', sys: 'WMS · OMS' },
          { t: 'T + 4h',   ev: 'Pricing sigue promocionando SKUs en riesgo', d: 'El pricing engine opera con reglas estáticas — no ve el inventario real proyectado.',   sys: 'Pricing engine' },
          { t: 'T + 6h',   ev: 'Quiebre efectivo · venta perdida',        d: 'Cliente omnicanal encuentra "no disponible". Cambia a competencia. Impacto en NPS y ventas.',  sys: 'Todos · consecuencia' },
        ].map((r, i, arr) => (
          <SlideIn key={r.t} direction="right" delay={i * 100}>
            <div style={{
              display: 'grid', gridTemplateColumns: '90px 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 */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        {[
          { i: 'trending-down', l: 'Ventas perdidas',       d: 'Cliente cambia a competencia' },
          { i: 'archive',        l: 'Sobreinventario',        d: 'Stock inmovilizado en canal equivocado' },
          { i: 'percent',        l: 'Markdowns tardíos',      d: 'Margen que se erosiona por reacción' },
          { i: 'users',          l: 'Equipos saturados',      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, { RetailHero, RetailDisruption });
