// LOGÍSTICA · VIDEO DEMOSTRATIVO — 8 ESCENAS · 90 SEGUNDOS
// Escenario: disrupción multi-nodo con órdenes críticas en riesgo
// Traducción específica a red logística multi-país + priorización de órdenes

const LogDemo = () => {
  const [scene, setScene] = React.useState(0);
  const [playing, setPlaying] = React.useState(true);
  const [muted, setMuted] = React.useState(true);
  const scenes = [
    { d: 8,  label: 'La red opera según el plan',                     cap: 'Cientos de órdenes avanzan entre nodos, operadores y países. OTIF 94.2%.' },
    { d: 10, label: 'Una disrupción cambia la red',                   cap: 'HUB-LIM pierde capacidad · transportista actualiza ETA. 47 órdenes afectadas.' },
    { d: 12, label: 'No todas las órdenes son iguales',                cap: 'OMNIX identifica qué pedidos son críticos por SLA, cliente y compromiso comercial.' },
    { d: 13, label: 'Contexto completo de la decisión',                cap: 'El SDM Logístico evalúa inventario, capacidad, costo, rutas y SLA de forma cruzada.' },
    { d: 14, label: 'Alternativas evaluadas en segundos',              cap: 'Esperar · reasignar nodo · dividir orden · cambiar transportista · reprogramar entrega.' },
    { d: 13, label: 'Aprobación humana · superó umbral costo',         cap: 'Head of Logistics autoriza. OMNIX coordina WMS · TMS · OMS · ERP en 4 acciones atómicas.' },
    { d: 12, label: 'Órdenes críticas protegidas',                     cap: 'Nuevas ETA comunicadas al cliente. Red estabilizada. Ventanas prioritarias resguardadas.' },
    { d: 8,  label: '−72% en tiempo de respuesta*',                    cap: 'Cada decisión medida, auditada, disponible para la siguiente. * [VALIDAR CASO · MÉTRICA · PERIODO]' },
  ];
  const totalMs = scenes.reduce((s, x) => s + x.d * 1000, 0);
  const [elapsed, setElapsed] = React.useState(0);

  React.useEffect(() => {
    if (!playing) return;
    const step = 100;
    const id = setInterval(() => {
      setElapsed((e) => {
        const next = e + step;
        let acc = 0, s = 0;
        for (let i = 0; i < scenes.length; i++) {
          acc += scenes[i].d * 1000;
          if (next < acc) { s = i; break; }
          s = i;
        }
        if (next >= totalMs) { setScene(0); return 0; }
        setScene(s);
        return next;
      });
    }, step);
    return () => clearInterval(id);
  }, [playing, totalMs]);

  const progress = Math.min(100, (elapsed / totalMs) * 100);
  const fmtTime = (ms) => { const s = Math.floor(ms / 1000); return `${Math.floor(s/60)}:${String(s%60).padStart(2, '0')}`; };

  return (
    <section id="demo" style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginBottom: 56, alignItems: 'end' }}>
          <div>
            <Reveal><SectionMeta n="02" label="Demo · 90 segundos"/></Reveal>
            <Reveal delay={80}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: 0, color: '#000' }}>
                Vea cómo OMNIX protege órdenes críticas ante una disrupción.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              Escenario simulado. Un hub regional pierde capacidad · un transportista actualiza ETA. OMNIX prioriza, evalúa alternativas y coordina la respuesta cross-sistema.
            </p>
          </Reveal>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.55fr 1fr', gap: 24 }}>
          <Reveal y={0}>
            <div style={{ border: '1.5px solid #1E1F26', background: '#000', color: '#FFF', overflow: 'hidden' }}>
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                padding: '12px 20px', borderBottom: '1.5px solid #2E3140',
                fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#96A3B5',
              }}>
                <span>OMNIX · LOGISTICS DEMO · SCENE 0{scene+1}/08</span>
                <span style={{ color: '#F4024C', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 6, height: 6, borderRadius: 999, background: '#F4024C' }} className={playing ? 'omnix-blink' : ''}/>
                  {playing ? 'PLAYING' : 'PAUSED'}
                </span>
              </div>
              <div style={{ position: 'relative', aspectRatio: '16 / 10', background: '#0A0B10' }}>
                <LogSceneStage scene={scene}/>
                <div style={{
                  position: 'absolute', top: 20, left: 20, padding: '8px 14px',
                  background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)',
                  fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase',
                }}>SIMULATED · scene {scene+1}</div>
                <div style={{
                  position: 'absolute', bottom: 0, left: 0, right: 0,
                  padding: '20px 32px 24px',
                  background: 'linear-gradient(180deg, transparent, rgba(0,0,0,0.85) 40%)',
                }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, letterSpacing: '-0.015em', color: '#FFF', marginBottom: 8, lineHeight: 1.15 }}>
                    {scenes[scene].label}
                  </div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#96A3B5', lineHeight: 1.4, maxWidth: 640 }}>
                    {scenes[scene].cap}
                  </div>
                </div>
              </div>
              <div style={{ borderTop: '1.5px solid #2E3140', padding: '14px 20px', display: 'flex', alignItems: 'center', gap: 16 }}>
                <button onClick={() => setPlaying((p) => !p)} style={ctrlBtn}>
                  <i data-lucide={playing ? 'pause' : 'play'} width="14" height="14"></i>
                </button>
                <button onClick={() => { setElapsed(0); setScene(0); }} style={ctrlBtn}>
                  <i data-lucide="rotate-ccw" width="14" height="14"></i>
                </button>
                <div style={{ flex: 1, height: 4, background: '#2E3140', position: 'relative' }}>
                  <div style={{ position: 'absolute', inset: 0, right: 'auto', width: `${progress}%`, background: '#F4024C', transition: 'width 100ms linear' }}/>
                </div>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', minWidth: 68, textAlign: 'right' }}>
                  {fmtTime(elapsed)} / {fmtTime(totalMs)}
                </span>
                <button onClick={() => setMuted((m) => !m)} style={ctrlBtn}>
                  <i data-lucide={muted ? 'volume-x' : 'volume-2'} width="14" height="14"></i>
                </button>
                <button style={ctrlBtn}>
                  <i data-lucide="captions" width="14" height="14"></i>
                </button>
              </div>
              <div style={{ borderTop: '1.5px solid #2E3140', display: 'grid', gridTemplateColumns: `repeat(${scenes.length}, 1fr)` }}>
                {scenes.map((s, i) => (
                  <button key={i} onClick={() => {
                    const before = scenes.slice(0, i).reduce((a, x) => a + x.d * 1000, 0);
                    setElapsed(before); setScene(i);
                  }} style={{
                    padding: '10px 8px', border: 'none', background: scene === i ? '#F4024C' : '#0A0B10',
                    color: scene === i ? '#FFF' : '#52557A',
                    borderRight: (i < scenes.length - 1) ? '1px solid #2E3140' : 'none',
                    fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase',
                    cursor: 'pointer', transition: 'all 220ms',
                  }}>{i+1}</button>
                ))}
              </div>
            </div>
          </Reveal>

          {/* Panel de explicación */}
          <Reveal delay={100} y={0}>
            <div style={{ border: '1.5px solid #1E1F26', background: '#FAFBFD', padding: 32, height: '100%', display: 'flex', flexDirection: 'column' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 12 }}>
                Qué está haciendo OMNIX
              </div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.55, color: '#1E1F26', margin: '0 0 20px' }}>
                Convierte una disrupción multi-nodo en una decisión coordinada · sobre WMS, TMS, OMS y ERP · protegiendo las órdenes que realmente importan.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
                {[
                  { t: 'Disrupción detectada',    d: 'Hub, ruta, transportista o restricción · red completa monitoreada.',              sys: 'INGEST',       auto: 'N1' },
                  { t: 'Órdenes priorizadas',      d: 'SLA · cliente · compromiso comercial · valor. No todas iguales.',                sys: 'SDM',          auto: 'N2' },
                  { t: 'Red contextualizada',      d: 'Inventario · capacidad nodos · rutas · transportistas · costo · SLA.',            sys: 'MULTI-SYS',    auto: 'N2' },
                  { t: 'Alternativas evaluadas',   d: 'Esperar · reasignar · dividir · rerutear · reprogramar. Por impacto y costo.',   sys: 'CORTEX',       auto: 'N3' },
                  { t: 'Respuesta ejecutada',      d: 'Coordinación atómica cross-WMS/TMS/OMS/ERP · con approval flow.',                sys: 'RUNTIME',      auto: 'N3-N4' },
                  { t: 'Impacto auditado',         d: 'Log firmado · métricas · comunicación al cliente · learning al SDM.',              sys: 'GOV · BI',     auto: '—' },
                ].map((c, i) => (
                  <div key={c.t} style={{
                    padding: '12px 14px', background: '#FFF',
                    border: '1px solid',
                    borderColor: scene >= i ? '#F4024C' : '#E4EBF3',
                    transition: 'border-color 320ms',
                    display: 'grid', gridTemplateColumns: '22px 1fr 60px', gap: 10, alignItems: 'start',
                  }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: scene >= i ? '#F4024C' : '#96A3B5' }}>0{i+1}</span>
                    <div>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '-0.005em', color: '#000', marginBottom: 3 }}>{c.t}</div>
                      <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#52557A', lineHeight: 1.4 }}>{c.d}</div>
                      <div style={{ marginTop: 3, fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#0050BD' }}>SYS · {c.sys}</div>
                    </div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#1E1F26', textAlign: 'right', paddingTop: 4 }}>
                      {c.auto}
                    </div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 16, padding: '12px 14px', background: '#FBF3D9', border: '1px solid #B8860B', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', color: '#1E1F26', lineHeight: 1.55 }}>
                Escenario demostrativo. Fuentes, reglas, costos, umbrales, integraciones y niveles de autonomía se configuran según la red y el gobierno de cada empresa.
              </div>
            </div>
          </Reveal>
        </div>

        {/* Cross-links + CTA */}
        <Reveal delay={200}>
          <div style={{ marginTop: 32, padding: '20px 24px', border: '1px solid #E4EBF3', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#52557A', textTransform: 'uppercase' }}>
              Para profundizar
            </div>
            <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
              <a href="arquitectura.html" style={docLink}>Arquitectura OMNIX <i data-lucide="arrow-up-right" width="12" height="12"/></a>
              <a href="ias-propietarias.html" style={docLink}>SDMs propietarios <i data-lucide="arrow-up-right" width="12" height="12"/></a>
              <a href="seguridad.html" style={docLink}>Seguridad y Gobernanza <i data-lucide="arrow-up-right" width="12" height="12"/></a>
              <a href="transferencia.html" style={docLink}>Transferencia de Control <i data-lucide="arrow-up-right" width="12" height="12"/></a>
            </div>
          </div>
        </Reveal>

        <Reveal delay={280}>
          <div style={{ marginTop: 24, padding: '24px 32px', background: '#000', color: '#FFF', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32, flexWrap: 'wrap' }}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 8 }}>Siguiente paso</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.015em', color: '#FFF' }}>
                Mapeemos una disrupción sobre <em>su</em> red.
              </div>
            </div>
            <div style={{ display: 'flex', gap: 12 }}>
              <Button variant="primary" icon="arrow-right" href="diagnostico.html">Evaluar una red logística</Button>
            </div>
          </div>
        </Reveal>
      </Container>
    </section>
  );
};

const ctrlBtn = {
  width: 32, height: 32, border: '1px solid #2E3140', background: '#0A0B10',
  color: '#FFF', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
};
const docLink = {
  fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: '#F4024C',
  textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6,
  textTransform: 'uppercase',
};

// SCENES
const LogSceneStage = ({ scene }) => (
  <div style={{ position: 'absolute', inset: 0 }}>
    {scene === 0 && <LScene0Network/>}
    {scene === 1 && <LScene1Disruption/>}
    {scene === 2 && <LScene2Priority/>}
    {scene === 3 && <LScene3Context/>}
    {scene === 4 && <LScene4Alternatives/>}
    {scene === 5 && <LScene5Execute/>}
    {scene === 6 && <LScene6Protected/>}
    {scene === 7 && <LScene7Outro/>}
  </div>
);

const LSceneGrid = () => (
  <g stroke="#2E3140" strokeWidth="0.5" opacity="0.4">
    {Array.from({length: 17}).map((_, i) => <line key={`v${i}`} x1={i*50} y1="0" x2={i*50} y2="500"/>)}
    {Array.from({length: 11}).map((_, i) => <line key={`h${i}`} x1="0" y1={i*50} x2="800" y2={i*50}/>)}
  </g>
);

// SCENE 0 · Red operando normal
const LScene0Network = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <LSceneGrid/>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">MULTI-COUNTRY NETWORK · LATAM · L24 HOURS</text>
    {[
      { x: 140, y: 200, k: 'CL', l: 'HUB-STG' },
      { x: 320, y: 160, k: 'PE', l: 'HUB-LIM' },
      { x: 500, y: 200, k: 'CO', l: 'FC-BOG' },
      { x: 660, y: 240, k: 'MX', l: 'HUB-MEX' },
      { x: 240, y: 340, k: 'AR', l: 'FC-BUE' },
      { x: 440, y: 340, k: 'BR', l: 'FC-SAO' },
    ].map((n) => (
      <g key={n.l} transform={`translate(${n.x}, ${n.y})`}>
        <rect x="-32" y="-16" width="64" height="32" fill="#0A0B10" stroke="#0F5132" strokeWidth="1.5"/>
        <text y="4" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="11" fill="#FFF">{n.k}</text>
        <text y="-24" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="#0F5132" letterSpacing="0.14em">{n.l}</text>
        <circle cx="24" cy="-10" r="3" fill="#0F5132">
          <animate attributeName="opacity" values="1;0.3;1" dur="1.6s" repeatCount="indefinite"/>
        </circle>
      </g>
    ))}
    {[
      [140, 200, 320, 160], [320, 160, 500, 200], [500, 200, 660, 240],
      [140, 200, 240, 340], [320, 160, 440, 340], [500, 200, 440, 340],
    ].map((r, i) => (
      <FlowPath key={i} d={`M ${r[0]} ${r[1]} L ${r[2]} ${r[3]}`} stroke="#96A3B5" strokeWidth={1} particleColor="#0050BD" particleSize={2.5} duration={2.6 + i * 0.15}/>
    ))}
    <g transform="translate(80, 420)">
      <text x="0" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">ÓRDENES EN VUELO</text>
      <text x="0" y="34" fontFamily="var(--font-display)" fontWeight="800" fontSize="32" fill="#0F5132" letterSpacing="-0.02em">2.847</text>
      <text x="220" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">OTIF · SHIFT</text>
      <text x="220" y="34" fontFamily="var(--font-display)" fontWeight="800" fontSize="32" fill="#0F5132" letterSpacing="-0.02em">94.2%</text>
      <text x="440" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">CARRIERS</text>
      <text x="440" y="34" fontFamily="var(--font-mono)" fontSize="20" fill="#FFF">12 · integrated</text>
    </g>
  </svg>
);

// SCENE 1 · Disrupción aparece
const LScene1Disruption = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <LSceneGrid/>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#EA384C">DISRUPTION DETECTED · HUB-LIM · CARRIER-04</text>
    <g transform="translate(320, 200)">
      <circle r="30" fill="none" stroke="#EA384C" strokeWidth="1.5" opacity="0.6">
        <animate attributeName="r" values="24;40;24" dur="1.4s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.6;0;0.6" dur="1.4s" repeatCount="indefinite"/>
      </circle>
      <rect x="-40" y="-20" width="80" height="40" fill="#0A0B10" stroke="#EA384C" strokeWidth="2"/>
      <text y="-2" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="12" fill="#FFF">HUB-LIM</text>
      <text y="12" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="#EA384C">60% CAP · 4-6h</text>
    </g>
    <g transform="translate(560, 300)">
      <rect x="-60" y="-20" width="120" height="40" fill="#0A0B10" stroke="#EA384C" strokeWidth="1.5"/>
      <text y="-2" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="11" fill="#FFF">CARRIER-04</text>
      <text y="14" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="#EA384C">ETA +6h · 3 rutas</text>
    </g>
    <g transform="translate(80, 400)">
      <rect x="0" y="0" width="640" height="70" fill="#FDE4E7" opacity="0.15" stroke="#EA384C" strokeWidth="1"/>
      <text x="20" y="26" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill="#EA384C">CONSECUENCIA · 47 ÓRDENES AFECTADAS</text>
      <text x="20" y="52" fontFamily="var(--font-body)" fontSize="14" fill="#FFF">
        <tspan fill="#EA384C" fontWeight="700">12</tspan> SLA-crítico · <tspan fill="#B8860B" fontWeight="700">18</tspan> ventana ajustada · <tspan fill="#96A3B5" fontWeight="700">17</tspan> holgura disponible
      </text>
    </g>
  </svg>
);

// SCENE 2 · Priorización de órdenes
const LScene2Priority = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <LSceneGrid/>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">SDM LOGÍSTICO · ORDER PRIORITIZATION</text>
    <text x="80" y="90" fontFamily="var(--font-display)" fontWeight="700" fontSize="20" fill="#FFF">47 órdenes · clasificadas por impacto real</text>
    {[
      { k: 'CRÍTICAS · SLA HARD', n: 12, c: '#EA384C', d: 'Contract SLA · penalidad activa · cliente enterprise' },
      { k: 'ALTAS · VENTANA AJUSTADA', n: 18, c: '#B8860B', d: 'Ventana estrecha · protección recomendada' },
      { k: 'MEDIAS · HOLGURA', n: 17, c: '#0F5132', d: 'Buffer suficiente · replanificación posible' },
    ].map((r, i) => (
      <g key={r.k} transform={`translate(80, ${140 + i * 100})`}>
        <rect x="0" y="0" width="640" height="80" fill="#0A0B10" stroke={r.c} strokeWidth="1.5"/>
        <text x="20" y="24" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill={r.c}>{r.k}</text>
        <text x="20" y="60" fontFamily="var(--font-display)" fontWeight="800" fontSize="40" fill={r.c} letterSpacing="-0.025em">{r.n}</text>
        <text x="80" y="60" fontFamily="var(--font-body)" fontSize="13" fill="#FFF">órdenes</text>
        <text x="200" y="52" fontFamily="var(--font-body)" fontSize="13" fill="#96A3B5">{r.d}</text>
        <rect x="580" y="34" width="40" height="12" fill={r.c} opacity="0.3"/>
        <rect x="580" y="34" width={Math.max(10, r.n * 3)} height="12" fill={r.c}>
          <animate attributeName="width" from="0" to={Math.max(10, r.n * 3)} dur="0.9s" begin={`${i * 0.15}s`} fill="freeze"/>
        </rect>
      </g>
    ))}
    <text x="80" y="470" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#F4024C">PROTEGER PRIMERO · 12 CRÍTICAS · SIGUIENTE ANÁLISIS DE ALTERNATIVAS</text>
  </svg>
);

// SCENE 3 · Contexto operacional completo
const LScene3Context = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <LSceneGrid/>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">OPERATIONAL CONTEXT · ASSEMBLED</text>
    {[
      { s: 'Inventario alternativo',   sys: 'WMS',           v: 'FC-BOG · 78% stock crítico', c: '#0F5132' },
      { s: 'Capacidad de nodos',        sys: 'WMS · muelles',v: 'HUB-STG +40% · HUB-MEX ok', c: '#0F5132' },
      { s: 'Transportistas alt.',       sys: 'TMS · Carriers',v: '3 disponibles · +12-18h',  c: '#B8860B' },
      { s: 'Rutas alternativas',        sys: 'TMS',           v: '4 rutas · +costo 22-58%',   c: '#B8860B' },
      { s: 'SLA por cliente',           sys: 'ERP · CRM',     v: '12 hard · 8 negociables',  c: '#EA384C' },
      { s: 'Costo incremental',         sys: 'ERP',           v: 'USD 4.2k – USD 18k',        c: '#B8860B' },
    ].map((r, i) => (
      <g key={r.s} transform={`translate(80, ${100 + i * 52})`}>
        <rect x="0" y="0" width="640" height="42" fill="#0A0B10" stroke="#2E3140" strokeWidth="1"/>
        <text x="16" y="18" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.06em" fill="#FFF">{r.s}</text>
        <text x="16" y="34" fontFamily="var(--font-mono)" fontSize="9" fill="#0050BD">{r.sys}</text>
        <text x="624" y="26" textAnchor="end" fontFamily="var(--font-mono)" fontSize="12" fill={r.c}>{r.v}</text>
      </g>
    ))}
    <text x="80" y="450" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#F4024C">SDM.LOG-V2.8 · CONTEXT READY · SIGUIENTE: ALTERNATIVAS</text>
  </svg>
);

// SCENE 4 · Alternativas evaluadas
const LScene4Alternatives = () => {
  const options = [
    { k: 'WAIT',           t: 'Esperar recuperación HUB-LIM',          cost: 0,  sla: 45, risk: 82, sel: false },
    { k: 'REASSIGN',       t: 'Reasignar a FC-BOG · dividir carga',    cost: 22, sla: 92, risk: 18, sel: true },
    { k: 'SPLIT',          t: 'Dividir órdenes multi-nodo',            cost: 34, sla: 88, risk: 22, sel: false },
    { k: 'CHANGE-CARRIER', t: 'Cambiar transportista · +ETA 12h',       cost: 40, sla: 76, risk: 28, sel: false },
    { k: 'EXPEDITE',       t: 'Transporte expedito · sólo críticas',    cost: 58, sla: 96, risk: 12, sel: false },
  ];
  return (
    <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
      <LSceneGrid/>
      <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">DEEP THINK · ALTERNATIVES · MULTI-OBJECTIVE</text>
      <g transform="translate(80, 100)">
        <text x="0" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">ACCIÓN</text>
        <text x="380" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#B8860B">+ COSTO</text>
        <text x="500" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#0F5132">SLA PROT.</text>
        <text x="620" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#EA384C">RIESGO</text>
      </g>
      {options.map((o, i) => (
        <g key={o.k} transform={`translate(80, ${140 + i * 62})`}>
          {o.sel && <rect x="-8" y="-16" width="656" height="52" fill="#F4024C" opacity="0.08"/>}
          {o.sel && <rect x="-8" y="-16" width="4" height="52" fill="#F4024C"/>}
          <text x="0" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill={o.sel ? '#F4024C' : '#96A3B5'}>0{i+1} · {o.k}</text>
          <text x="0" y="20" fontFamily="var(--font-display)" fontWeight="700" fontSize="14" fill="#FFF">{o.t}</text>
          {[
            { x: 370, v: o.cost, c: '#B8860B', suf: '%' },
            { x: 490, v: o.sla,  c: '#0F5132', suf: '%' },
            { x: 610, v: o.risk, c: '#EA384C', suf: '%' },
          ].map((b, j) => (
            <g key={j}>
              <rect x={b.x} y="8" width="80" height="6" fill="#2E3140"/>
              <rect x={b.x} y="8" width={b.v * 0.8} height="6" fill={b.c}>
                <animate attributeName="width" from="0" to={b.v * 0.8} dur="0.9s" begin={`${i * 0.12}s`} fill="freeze"/>
              </rect>
              <text x={b.x} y="30" fontFamily="var(--font-mono)" fontSize="10" fill={b.c}>{b.v}{b.suf}</text>
            </g>
          ))}
          {o.sel && <text x="660" y="0" textAnchor="end" fontFamily="var(--font-mono)" fontSize="10" fill="#F4024C">SELECTED</text>}
        </g>
      ))}
      <text x="80" y="470" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#B8860B">
        POLICY MATCH · REQUIRES APPROVAL · COST &gt; USD 5k · HEAD OF LOGISTICS
      </text>
    </svg>
  );
};

// SCENE 5 · Ejecución cross-sistema
const LScene5Execute = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <LSceneGrid/>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">APPROVED · COORDINATED EXECUTION</text>
    <g transform="translate(400, 250)">
      <circle r="52" fill="none" stroke="#F4024C" strokeWidth="1" opacity="0.4">
        <animate attributeName="r" values="44;58;44" dur="1.6s" repeatCount="indefinite"/>
      </circle>
      <rect x="-44" y="-44" width="88" height="88" fill="#F4024C" stroke="#F4024C" strokeWidth="2"/>
      <text y="-6" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="800" fontSize="14" fill="#FFF">OMNIX</text>
      <text y="16" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" fill="#FFF">RUNTIME</text>
    </g>
    {[
      { s: 'OMS', a: 'reasigna 12 órdenes → FC-BOG',      x: 130, y: 130 },
      { s: 'WMS', a: 'reserva stock crítico · picking',   x: 670, y: 130 },
      { s: 'TMS', a: 'rerutea despachos · ETA new',       x: 130, y: 380 },
      { s: 'ERP', a: 'aprueba costo · notifica CX',        x: 670, y: 380 },
    ].map((s) => (
      <g key={s.s}>
        <FlowPath d={`M 400 250 L ${s.x} ${s.y}`} stroke="#F4024C" strokeWidth={1.5} particleColor="#F4024C" particleSize={4} duration={1.4} pulseWidth/>
        <g transform={`translate(${s.x}, ${s.y})`}>
          <rect x="-88" y="-24" width="176" height="48" fill="#0A0B10" stroke="#0F5132" strokeWidth="1.5"/>
          <text x="-74" y="-4" fontFamily="var(--font-display)" fontWeight="800" fontSize="14" fill="#FFF">{s.s}</text>
          <text x="-74" y="14" fontFamily="var(--font-mono)" fontSize="9" fill="#0F5132">✓ {s.a}</text>
        </g>
      </g>
    ))}
    <text x="80" y="480" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#0F5132">
      ✓ TX #LG-2029-c4f2 · APPROVED head-of-logistics · 4 sistemas · 148ms · signed WORM
    </text>
  </svg>
);

// SCENE 6 · Impacto · red estabilizada
const LScene6Protected = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <LSceneGrid/>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">IMPACT · NETWORK STABILIZED</text>
    <text x="80" y="90" fontFamily="var(--font-display)" fontWeight="700" fontSize="22" fill="#FFF">Órdenes críticas protegidas · red re-balanceada</text>
    {[
      { l: 'CRÍTICAS PROTEGIDAS', v: '12 / 12', s: '100% dentro de SLA', c: '#0F5132' },
      { l: 'ETA COMUNICADA',      v: 'auto',    s: 'CX + cliente notificado', c: '#0050BD' },
      { l: 'COSTO INCREMENTAL',    v: '+22%',   s: 'vs +58% expedito',         c: '#B8860B' },
      { l: 'TIEMPO RESPUESTA',     v: '5h → 84s', s: 'signal → ejecución',      c: '#F4024C' },
    ].map((k, i) => (
      <g key={k.l} transform={`translate(${80 + (i % 2) * 340}, ${130 + Math.floor(i / 2) * 140})`}>
        <rect x="0" y="0" width="300" height="110" fill="#0A0B10" stroke="#2E3140" strokeWidth="1"/>
        <text x="14" y="24" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">{k.l}</text>
        <text x="14" y="66" fontFamily="var(--font-display)" fontWeight="800" fontSize="30" fill={k.c} letterSpacing="-0.02em">{k.v}</text>
        <text x="14" y="90" fontFamily="var(--font-mono)" fontSize="10" fill="#96A3B5">{k.s}</text>
      </g>
    ))}
    <g transform="translate(80, 430)">
      <text x="0" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#F4024C">DECISION TRACE · #LG-2029-c4f2 · signed · WORM · 10y retention</text>
    </g>
  </svg>
);

// SCENE 7 · Outro
const LScene7Outro = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <LSceneGrid/>
    <g transform="translate(400, 180)">
      <text textAnchor="middle" fontFamily="var(--font-display)" fontWeight="800" fontSize="80" fill="#F4024C" letterSpacing="-0.03em">−72%</text>
      <text y="20" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.24em" fill="#96A3B5">TIEMPO DE RESPUESTA*</text>
    </g>
    <g transform="translate(400, 260)">
      <text textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#B8860B">
        * [VALIDAR CASO · CLIENTE · MÉTRICA · PERIODO · DEFINICIÓN]
      </text>
    </g>
    <g transform="translate(400, 320)">
      <text textAnchor="middle" fontFamily="var(--font-serif)" fontStyle="italic" fontSize="20" fill="#96A3B5">
        Cada decisión queda registrada · medida · disponible para mejorar la siguiente.
      </text>
    </g>
    <g transform="translate(400, 400)">
      <rect x="-140" y="-24" width="280" height="48" fill="#F4024C"/>
      <text textAnchor="middle" fontFamily="var(--font-body)" fontWeight="600" fontSize="15" fill="#FFF" y="6">Evalúe su red logística</text>
    </g>
  </svg>
);

Object.assign(window, { LogDemo });