// SECCIÓN 3 · VIDEO DEMOSTRATIVO ANIMADO
// 7 escenas · 68 segundos · SVG cinematográfico
// Datos etiquetados como SIMULATED · sin audio, entendible sólo por visual + captions

const RetailDemo = () => {
  const [scene, setScene] = React.useState(0);
  const [playing, setPlaying] = React.useState(true);
  const [muted, setMuted] = React.useState(true);
  const scenes = [
    { d: 8,  label: 'La demanda cambió',                   caption: 'Una promoción acelera la demanda más rápido de lo previsto.' },
    { d: 10, label: '14 ubicaciones en riesgo',             caption: 'OMNIX detecta qué productos y ubicaciones pueden quedarse sin stock.' },
    { d: 12, label: 'Contexto operacional completo',        caption: 'El SDM Retail evalúa inventario, órdenes, margen, restricciones y capacidad.' },
    { d: 13, label: 'Mejor acción según impacto',           caption: 'OMNIX selecciona la respuesta que protege disponibilidad, margen y nivel de servicio.' },
    { d: 14, label: 'Decisión ejecutada',                   caption: 'La plataforma crea la transferencia, actualiza prioridades y coordina los sistemas.' },
    { d: 11, label: 'Medido · auditado',                    caption: 'Cada decisión queda registrada. Regulator-ready. Reproducible.' },
    { d: 7,  label: 'De la señal a la acción operacional',  caption: 'Evalúe su operación Retail.' },
  ];
  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;
        // find scene based on next
        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);

  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 · 68 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 responde a una disrupción de inventario.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              Escenario simulado. Una promoción omnicanal dispara demanda. Riesgo de quiebre
              proyectado en 14 ubicaciones. Otras conservan inventario. OMNIX decide y ejecuta.
            </p>
          </Reveal>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.55fr 1fr', gap: 24 }}>
          {/* Video player */}
          <Reveal y={0}>
            <div style={{ border: '1.5px solid #1E1F26', background: '#000', color: '#FFF', overflow: 'hidden' }}>
              {/* Chrome */}
              <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 · RETAIL DEMO · SCENE 0{scene+1}/07</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>
              {/* Stage */}
              <div style={{ position: 'relative', aspectRatio: '16 / 10', background: '#0A0B10' }}>
                <SceneStage scene={scene}/>
                {/* Scene label overlay */}
                <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>
                {/* Caption bar */}
                <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: 26, 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].caption}
                  </div>
                </div>
              </div>
              {/* Controls */}
              <div style={{ borderTop: '1.5px solid #2E3140', padding: '14px 20px', display: 'flex', alignItems: 'center', gap: 16 }}>
                <button onClick={() => { setPlaying((p) => !p); }} style={{
                  width: 32, height: 32, border: '1px solid #2E3140', background: '#0A0B10',
                  color: '#FFF', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <i data-lucide={playing ? 'pause' : 'play'} width="14" height="14"></i>
                </button>
                <button onClick={() => { setElapsed(0); setScene(0); }} style={{
                  width: 32, height: 32, border: '1px solid #2E3140', background: '#0A0B10',
                  color: '#FFF', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <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' }}>
                  {formatTime(elapsed)} / {formatTime(totalMs)}
                </span>
                <button onClick={() => setMuted((m) => !m)} style={{
                  width: 32, height: 32, border: '1px solid #2E3140', background: '#0A0B10',
                  color: '#96A3B5', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <i data-lucide={muted ? 'volume-x' : 'volume-2'} width="14" height="14"></i>
                </button>
                <button style={{
                  width: 32, height: 32, border: '1px solid #2E3140', background: '#0A0B10',
                  color: '#96A3B5', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <i data-lucide="captions" width="14" height="14"></i>
                </button>
              </div>
              {/* Scene chapters */}
              <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>

          {/* Explanation panel */}
          <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 24px' }}>
                La cognición operacional conecta la señal (demanda) con el contexto (inventario, margen, capacidad) y produce una acción coordinada — sobre tus sistemas actuales.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
                {[
                  { t: 'Señales conectadas',    d: 'Ingesta POS, eCommerce, OMS, WMS, ERP, TMS, pricing.',       sys: 'INGEST',  res: 'Contexto operacional' },
                  { t: 'SDM Retail',             d: 'Modelo entrenado sobre tu operación real, en tu VPC.',        sys: 'CORE',    res: 'Razona con tus reglas' },
                  { t: 'Decisión',               d: 'Alternativas evaluadas por disponibilidad, margen y SLA.',    sys: 'CORTEX',  res: 'Plan priorizado' },
                  { t: 'Ejecución',              d: 'Transferencias, reprecios, prioridades sobre tus sistemas.',   sys: 'RUNTIME', res: 'Acción coordinada' },
                  { t: 'Control e impacto',      d: 'Logs auditables, KPIs medidos, human-in-the-loop.',            sys: 'GOV',     res: 'Auditable · reversible' },
                ].map((c, i) => (
                  <div key={c.t} style={{
                    padding: '14px 16px', background: scene >= i && scene <= i+1 ? '#FFF' : '#FFF',
                    border: '1px solid',
                    borderColor: scene >= i ? '#F4024C' : '#E4EBF3',
                    transition: 'border-color 320ms',
                    display: 'grid', gridTemplateColumns: '24px 1fr 70px', gap: 12, alignItems: 'start',
                  }}>
                    <span style={{
                      fontFamily: 'var(--font-mono)', fontSize: 11,
                      color: scene >= i ? '#F4024C' : '#96A3B5',
                    }}>0{i+1}</span>
                    <div>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, 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: 4, fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5' }}>
                        → {c.res}
                      </div>
                    </div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#1E1F26', textAlign: 'right', paddingTop: 4 }}>
                      {c.sys}
                    </div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 20, padding: '12px 14px', background: '#FBF3D9', border: '1px solid #B8860B', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', color: '#1E1F26', lineHeight: 1.5 }}>
                Escenario demostrativo. Los sistemas, reglas, umbrales y niveles de autonomía se configuran según cada operación.
              </div>
            </div>
          </Reveal>
        </div>

        {/* CTA row */}
        <Reveal delay={200}>
          <div style={{ marginTop: 40, 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 esta disrupción sobre <em>tu</em> operación.
              </div>
            </div>
            <div style={{ display: 'flex', gap: 12 }}>
              <Button variant="primary" icon="arrow-right" href="diagnostico.html">Evaluar una operación Retail</Button>
            </div>
          </div>
        </Reveal>
      </Container>
    </section>
  );
};

const formatTime = (ms) => {
  const s = Math.floor(ms / 1000);
  return `0:${String(s).padStart(2, '0')}`;
};

// SCENE STAGE — SVG scene composer
const SceneStage = ({ scene }) => {
  return (
    <div style={{ position: 'absolute', inset: 0 }}>
      {scene === 0 && <Scene0DemandSpike/>}
      {scene === 1 && <Scene1LocationsAtRisk/>}
      {scene === 2 && <Scene2ContextCross/>}
      {scene === 3 && <Scene3Alternatives/>}
      {scene === 4 && <Scene4Execute/>}
      {scene === 5 && <Scene5Impact/>}
      {scene === 6 && <Scene6Outro/>}
    </div>
  );
};

// ─── SCENE 0: Aumento anómalo de demanda ───────────────────
const Scene0DemandSpike = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <SceneGrid/>
    {/* Chart axes */}
    <line x1="80" y1="380" x2="740" y2="380" stroke="#2E3140" strokeWidth="1"/>
    <line x1="80" y1="80" x2="80" y2="380" stroke="#2E3140" strokeWidth="1"/>
    {/* Baseline (dashed) */}
    <line x1="80" y1="300" x2="740" y2="300" stroke="#52557A" strokeWidth="1" strokeDasharray="4 4"/>
    <text x="90" y="295" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#52557A">BASELINE 7d</text>
    {/* Demand curve (spiking) */}
    <DrawLine d="M 80 300 L 180 305 L 260 298 L 340 288 L 400 260 L 460 210 L 520 160 L 580 130 L 640 115 L 700 108" stroke="#F4024C" strokeWidth={2.5} duration={2000}/>
    {/* Area fill */}
    <path d="M 80 300 L 180 305 L 260 298 L 340 288 L 400 260 L 460 210 L 520 160 L 580 130 L 640 115 L 700 108 L 700 380 L 80 380 Z" fill="#F4024C" opacity="0.12"/>
    {/* Anomaly marker */}
    <circle cx="640" cy="115" r="7" fill="#F4024C">
      <animate attributeName="r" values="7;11;7" dur="1.2s" repeatCount="indefinite"/>
    </circle>
    <line x1="640" y1="115" x2="640" y2="380" stroke="#F4024C" strokeWidth="1" strokeDasharray="3 3" opacity="0.5"/>
    <text x="655" y="115" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.12em" fill="#F4024C">+128% × BASELINE</text>
    {/* Header */}
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">DEMAND · CATEGORY A · L7 HOURS</text>
    {/* SKUs affected */}
    <g transform="translate(80, 410)">
      <text x="0" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">SKUs AFFECTED</text>
      {['SKU-4029', 'SKU-4038', 'SKU-4041', 'SKU-4082', 'SKU-4094', 'SKU-4102'].map((s, i) => (
        <g key={s} transform={`translate(${140 + i * 100}, -14)`}>
          <rect x="0" y="0" width="90" height="20" fill="none" stroke="#F4024C" strokeWidth="1"/>
          <text x="45" y="14" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" fill="#F4024C">{s}</text>
        </g>
      ))}
    </g>
  </svg>
);

// ─── SCENE 1: 14 ubicaciones en riesgo ────────────────────
const Scene1LocationsAtRisk = () => {
  const nodes = [
    { x: 140, y: 140, k: 'ST-01', r: true },  { x: 220, y: 180, k: 'ST-02', r: false },
    { x: 300, y: 130, k: 'ST-03', r: true },  { x: 380, y: 190, k: 'ST-04', r: true },
    { x: 460, y: 150, k: 'ST-05', r: true },  { x: 560, y: 200, k: 'ST-06', r: false },
    { x: 640, y: 140, k: 'ST-07', r: true },  { x: 720, y: 180, k: 'ST-08', r: false },
    { x: 140, y: 260, k: 'DC-01', r: true, dc: true },  { x: 300, y: 280, k: 'ST-10', r: true },
    { x: 460, y: 270, k: 'ST-11', r: true },  { x: 640, y: 290, k: 'ST-12', r: false },
    { x: 180, y: 360, k: 'ST-13', r: true },  { x: 320, y: 380, k: 'ST-14', r: true },
    { x: 480, y: 370, k: 'DC-02', r: false, dc: true }, { x: 640, y: 380, k: 'ST-16', r: true },
    { x: 220, y: 440, k: 'ST-17', r: true },  { x: 400, y: 440, k: 'ST-18', r: true },
    { x: 560, y: 450, k: 'ST-19', r: false }, { x: 720, y: 440, k: 'ST-20', r: false },
  ];
  const atRisk = nodes.filter((n) => n.r).length;
  return (
    <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
      <SceneGrid/>
      <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">NETWORK MAP · TIENDAS + DCs</text>
      <text x="80" y="90" fontFamily="var(--font-display)" fontWeight="700" fontSize="22" fill="#FFF" letterSpacing="-0.015em">
        <tspan fill="#EA384C">{atRisk}</tspan><tspan fill="#FFF"> / {nodes.length} nodos en riesgo</tspan>
      </text>
      {/* Connections between DCs and stores */}
      {nodes.filter((n) => !n.dc).map((n, i) => {
        const dc = nodes.find((d) => d.dc && Math.abs(d.y - n.y) < 200);
        if (!dc) return null;
        return <line key={i} x1={dc.x} y1={dc.y} x2={n.x} y2={n.y} stroke="#2E3140" strokeWidth="0.5" opacity="0.6"/>;
      })}
      {/* Nodes */}
      {nodes.map((n, i) => (
        <g key={n.k} transform={`translate(${n.x}, ${n.y})`}>
          {n.r && <circle r="16" fill="none" stroke="#EA384C" strokeWidth="1" opacity="0.6">
            <animate attributeName="r" values="12;22;12" dur="1.6s" begin={`${i*0.08}s`} repeatCount="indefinite"/>
            <animate attributeName="opacity" values="0.6;0;0.6" dur="1.6s" begin={`${i*0.08}s`} repeatCount="indefinite"/>
          </circle>}
          {n.dc ? (
            <rect x="-10" y="-10" width="20" height="20" fill={n.r ? '#EA384C' : '#0F5132'} stroke="#FFF" strokeWidth="1"/>
          ) : (
            <circle r="6" fill={n.r ? '#EA384C' : '#0F5132'} stroke="#FFF" strokeWidth="1"/>
          )}
          <text y={-16} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="8" fill={n.r ? '#EA384C' : '#96A3B5'} letterSpacing="0.06em">{n.k}</text>
        </g>
      ))}
      {/* Legend */}
      <g transform="translate(80, 470)">
        <circle cx="6" cy="0" r="5" fill="#EA384C"/>
        <text x="18" y="4" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">STOCKOUT &lt; 24H</text>
        <circle cx="180" cy="0" r="5" fill="#0F5132"/>
        <text x="192" y="4" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">STOCK OK</text>
        <rect x="270" y="-5" width="10" height="10" fill="#96A3B5"/>
        <text x="285" y="4" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">DC</text>
      </g>
    </svg>
  );
};

// ─── SCENE 2: Cruce de contexto operacional ────────────────
const Scene2ContextCross = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <SceneGrid/>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">SDM RETAIL · CONTEXT AGGREGATION</text>
    {/* 6 fuentes convergiendo al SDM */}
    {[
      { x: 80, y: 140, k: 'INVENTORY',   sys: 'WMS', v: 'ok' },
      { x: 80, y: 210, k: 'ORDERS',      sys: 'OMS', v: 'ok' },
      { x: 80, y: 280, k: 'PRICING',     sys: 'PRICING', v: 'ok' },
      { x: 80, y: 350, k: 'LEAD TIMES',  sys: 'TMS', v: 'ok' },
      { x: 80, y: 420, k: 'MARGIN',      sys: 'ERP', v: 'ok' },
    ].map((s, i) => (
      <g key={s.k}>
        <rect x={s.x} y={s.y - 14} width="140" height="28" fill="#0A0B10" stroke="#0050BD" strokeWidth="1.25"/>
        <circle cx={s.x + 10} cy={s.y} r="3" fill="#0F5132">
          <animate attributeName="opacity" values="1;0.3;1" dur={`${1.2 + i * 0.15}s`} repeatCount="indefinite"/>
        </circle>
        <text x={s.x + 22} y={s.y + 4} fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.06em" fill="#FFF">{s.k}</text>
        <text x={s.x + 138} y={s.y + 4} textAnchor="end" fontFamily="var(--font-mono)" fontSize="9" fill="#0050BD">{s.sys}</text>
        <FlowPath d={`M 220 ${s.y} L 340 ${s.y} L 380 280`} stroke="#96A3B5" strokeWidth={0.75} particleColor="#0050BD" particleSize={2.5} duration={2.5 + i * 0.2}/>
      </g>
    ))}
    {/* SDM at center */}
    <g transform="translate(500, 280)">
      <circle r="90" fill="none" stroke="#F4024C" strokeWidth="1" opacity="0.15"/>
      <circle r="72" fill="none" stroke="#F4024C" strokeWidth="1" opacity="0.3">
        <animate attributeName="r" values="65;76;65" dur="2.4s" repeatCount="indefinite"/>
      </circle>
      <rect x="-56" y="-56" width="112" height="112" fill="#000" stroke="#F4024C" strokeWidth="2"/>
      <text y="-14" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="800" fontSize="14" fill="#FFF">OMNIX</text>
      <text y="8" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="16" fill="#F4024C">SDM</text>
      <text y="26" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.2em" fill="#96A3B5">RETAIL-v4.2</text>
    </g>
    {/* Additional context */}
    <g transform="translate(660, 140)">
      <rect x="0" y="0" width="120" height="24" fill="none" stroke="#96A3B5" strokeWidth="0.75" strokeDasharray="3 3"/>
      <text x="60" y="16" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.12em" fill="#96A3B5">POLICIES · RULES</text>
    </g>
    <FlowPath d="M 720 165 L 720 250 L 560 275" stroke="#96A3B5" strokeWidth={0.75} particleColor="#96A3B5" particleSize={2} duration={2.6}/>
    {/* Output preview */}
    <text x="620" y="440" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill="#F4024C">CONTEXT · ASSEMBLED</text>
    <text x="620" y="460" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.06em" fill="#96A3B5">14 nodos · 6 skus · restricciones</text>
  </svg>
);

// ─── SCENE 3: Alternativas evaluadas ──────────────────────
const Scene3Alternatives = () => {
  const options = [
    { k: 'TRANSFER',  t: 'Transferencia DC → Nodos', a: 87, b: 12, c: 91, sel: true },
    { k: 'REASSIGN',  t: 'Reasignación omnicanal',   a: 74, b: 8,  c: 82, sel: false },
    { k: 'REPRICE',   t: 'Ajuste controlado promo',  a: 62, b: 22, c: 71, sel: false },
  ];
  return (
    <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
      <SceneGrid/>
      <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">DEEP THINK · MULTI-OBJECTIVE OPTIMIZATION</text>
      <text x="80" y="90" fontFamily="var(--font-display)" fontWeight="700" fontSize="20" fill="#FFF" letterSpacing="-0.015em">3 alternativas · una seleccionada</text>
      {/* Header row */}
      <g transform="translate(80, 130)">
        <text x="0" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">ACCIÓN</text>
        <text x="320" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#0F5132">AVAILABILITY</text>
        <text x="470" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#EA384C">RISK</text>
        <text x="600" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#0050BD">SLA</text>
      </g>
      {options.map((o, i) => (
        <g key={o.k} transform={`translate(80, ${170 + i * 90})`}>
          {o.sel && <rect x="-8" y="-24" width="656" height="72" fill="#F4024C" opacity="0.08"/>}
          {o.sel && <rect x="-8" y="-24" width="4" height="72" fill="#F4024C"/>}
          <text x="0" y="0" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.14em" fill={o.sel ? '#F4024C' : '#96A3B5'}>0{i+1} · {o.k}</text>
          <text x="0" y="22" fontFamily="var(--font-display)" fontWeight="700" fontSize="16" fill="#FFF" letterSpacing="-0.01em">{o.t}</text>
          {/* Bars */}
          <rect x="300" y="10" width="140" height="6" fill="#2E3140"/>
          <rect x="300" y="10" width={o.a * 1.4} height="6" fill="#0F5132">
            <animate attributeName="width" from="0" to={o.a * 1.4} dur="0.9s" begin={`${i * 0.15}s`} fill="freeze"/>
          </rect>
          <text x="300" y="34" fontFamily="var(--font-mono)" fontSize="10" fill="#96A3B5">{o.a}%</text>
          <rect x="450" y="10" width="120" height="6" fill="#2E3140"/>
          <rect x="450" y="10" width={o.b * 1.2} height="6" fill="#EA384C">
            <animate attributeName="width" from="0" to={o.b * 1.2} dur="0.9s" begin={`${i * 0.15}s`} fill="freeze"/>
          </rect>
          <text x="450" y="34" fontFamily="var(--font-mono)" fontSize="10" fill="#96A3B5">{o.b}%</text>
          <rect x="580" y="10" width="60" height="6" fill="#2E3140"/>
          <rect x="580" y="10" width={o.c * 0.6} height="6" fill="#0050BD">
            <animate attributeName="width" from="0" to={o.c * 0.6} dur="0.9s" begin={`${i * 0.15}s`} fill="freeze"/>
          </rect>
          <text x="580" y="34" fontFamily="var(--font-mono)" fontSize="10" fill="#96A3B5">{o.c}%</text>
          {o.sel && (
            <text x="660" y="12" textAnchor="end" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#F4024C">SELECTED</text>
          )}
        </g>
      ))}
      <text x="80" y="470" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">POLICY MATCH · GUARDRAILS · APPROVAL FLOW · ready</text>
    </svg>
  );
};

// ─── SCENE 4: Ejecución sobre sistemas ─────────────────────
const Scene4Execute = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <SceneGrid/>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">RUNTIME · EXECUTE ON CUSTOMER SYSTEMS</text>
    {/* Center OMNIX */}
    <g transform="translate(400, 260)">
      <circle r="50" fill="none" stroke="#F4024C" strokeWidth="1" opacity="0.4">
        <animate attributeName="r" values="42;56;42" dur="1.6s" repeatCount="indefinite"/>
      </circle>
      <rect x="-42" y="-42" width="84" height="84" 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" letterSpacing="0.18em" fill="#FFF">RUNTIME</text>
    </g>
    {/* 4 sistemas */}
    {[
      { sys: 'OMS',  action: 'update-priority',    x: 130, y: 140, delay: 0    },
      { sys: 'WMS',  action: 'create-transfer',    x: 670, y: 140, delay: 0.3 },
      { sys: 'ERP',  action: 'log-decision',       x: 130, y: 400, delay: 0.6 },
      { sys: 'TMS',  action: 'reserve-capacity',   x: 670, y: 400, delay: 0.9 },
    ].map((s, i) => (
      <g key={s.sys}>
        <FlowPath d={`M 400 260 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="-64" y="-30" width="128" height="60" fill="#0A0B10" stroke="#0F5132" strokeWidth="1.5"/>
          <text y="-8" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="800" fontSize="16" fill="#FFF">{s.sys}</text>
          <text y="12" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.06em" fill="#0F5132">✓ {s.action}</text>
          <text y="26" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="8" letterSpacing="0.14em" fill="#96A3B5">ACK · signed</text>
        </g>
      </g>
    ))}
    {/* Bottom log */}
    <g transform="translate(80, 460)">
      <text x="0" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#0F5132">✓ TRANSACTION #DT-2029-a7f9 · executed · 4 systems · 78ms · signed</text>
    </g>
  </svg>
);

// ─── SCENE 5: Impacto y trazabilidad ───────────────────────
const Scene5Impact = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <SceneGrid/>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">IMPACT · AUDIT TRAIL</text>
    <text x="80" y="90" fontFamily="var(--font-display)" fontWeight="700" fontSize="22" fill="#FFF" letterSpacing="-0.015em">Cada decisión queda medida y auditada</text>
    {/* KPI cards */}
    {[
      { l: 'RIESGO DE QUIEBRE',    b: '14 → 3',     sub: 'nodos afectados restantes', c: '#0F5132', x: 80,  y: 140 },
      { l: 'TIEMPO DE RESPUESTA',  b: '6h → 78ms',   sub: 'signal to action', c: '#F4024C', x: 260, y: 140 },
      { l: 'DISPONIBILIDAD PROT.', b: '91%',         sub: 'de la promoción cubierta', c: '#0050BD', x: 440, y: 140 },
      { l: 'MARGEN PROTEGIDO',     b: '−8%',         sub: 'markdown evitado (est.)', c: '#B8860B', x: 620, y: 140 },
    ].map((k) => (
      <g key={k.l} transform={`translate(${k.x}, ${k.y})`}>
        <rect x="0" y="0" width="160" height="100" fill="#0A0B10" stroke="#2E3140" strokeWidth="1"/>
        <text x="12" y="20" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#96A3B5">{k.l}</text>
        <text x="12" y="60" fontFamily="var(--font-display)" fontWeight="800" fontSize="28" fill={k.c} letterSpacing="-0.02em">{k.b}</text>
        <text x="12" y="82" fontFamily="var(--font-mono)" fontSize="9" fill="#96A3B5">{k.sub}</text>
      </g>
    ))}
    {/* Audit trail */}
    <g transform="translate(80, 280)">
      <text x="0" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#F4024C">DECISION TRACE · #DT-2029-a7f9</text>
      {[
        'input: promotion-demand-spike · category-A',
        'sdm.retail-omni-v4.2 · score=0.92 · confidence=high',
        'policy.p_29: match  ·  guardrail.g_12: pass',
        'action: transfer-inventory · from=DC-01 · to=14 nodes',
        'systems: OMS.update · WMS.transfer · ERP.log · TMS.reserve',
        'autonomy: N4 · executed · signed · WORM',
      ].map((line, i) => (
        <text key={i} x="0" y={26 + i * 20} fontFamily="var(--font-mono)" fontSize="11" fill="#FFF">
          <tspan fill="#52557A">{`0${i+1}  `}</tspan>{line}
        </text>
      ))}
    </g>
  </svg>
);

// ─── SCENE 6: Outro ────────────────────────────────────────
const Scene6Outro = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <SceneGrid/>
    {/* Central logo */}
    <g transform="translate(400, 210)">
      <text textAnchor="middle" fontFamily="var(--font-display)" fontWeight="800" fontSize="72" fill="#FFF" letterSpacing="-0.03em" y="0">OMNIX</text>
      <text y="30" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.24em" fill="#F4024C">COGNITIVE OPERATIONS · RETAIL</text>
    </g>
    <g transform="translate(400, 310)">
      <text textAnchor="middle" fontFamily="var(--font-serif)" fontStyle="italic" fontSize="24" fill="#96A3B5" letterSpacing="-0.01em" y="0">
        De la señal a la acción operacional.
      </text>
    </g>
    <g transform="translate(400, 380)">
      <rect x="-130" y="-24" width="260" height="48" fill="#F4024C"/>
      <text textAnchor="middle" fontFamily="var(--font-body)" fontWeight="600" fontSize="16" fill="#FFF" letterSpacing="-0.005em" y="6">Evalúe su operación Retail</text>
    </g>
  </svg>
);

// Reusable dark scene grid
const SceneGrid = () => (
  <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>
);

Object.assign(window, { RetailDemo });