// DEFENSA · VIDEO DEMOSTRATIVO — 8 escenas · 90s
// Escenario NO CINÉTICO: restricción de abastecimiento + respuesta institucional coordinada
// Sin armas · sin ubicaciones · sin unidades reales · datos simulados

const DefDemo = () => {
  const [scene, setScene] = React.useState(0);
  const [playing, setPlaying] = React.useState(true);
  const scenes = [
    { d: 8,  label: 'Operación institucional · turno regular',                cap: 'Activos de apoyo en mantenimiento programado. Órdenes de trabajo en curso. Sistemas operativos con conectividad parcial.' },
    { d: 12, label: 'Convergen múltiples restricciones',                     cap: 'Repuestos limitados · orden de compra demorada · presupuesto restringido · personal técnico acotado · disrupción logística.' },
    { d: 12, label: 'OMNIX conecta 6 dominios institucionales',                cap: 'Datos · Logística · Mantenimiento · Ciclo Económico · Conocimiento. Todo dentro del perímetro soberano · con clasificación por acceso.' },
    { d: 14, label: 'Prioriza activos por misión de apoyo',                    cap: 'El SDM Defensa clasifica activos según prioridad institucional, disponibilidad requerida y ventana crítica. No decide sobre operaciones cinéticas.' },
    { d: 14, label: 'Alternativas evaluadas · dentro del marco autorizado',    cap: 'Reasignación de repuestos · reprogramación · orden alternativa · sustitución técnica. Cada opción con impacto, costo y riesgo residual.' },
    { d: 13, label: 'Aprobación humana · flujo institucional',                 cap: 'Autoridad responsable autoriza según nivel de riesgo y umbral definido. Approval flow con doble validación cuando aplica.' },
    { d: 12, label: 'Coordinación cross-sistema · registro auditable',         cap: 'ERP · CMMS · inventario · contratos · notificaciones. Cada acción con log firmado · reversible · trazable por auditoría institucional.' },
    { d: 8,  label: 'Operación local · sincronización diferida',                cap: 'Cuando la conectividad es intermitente, OMNIX opera en modo local y sincroniza al restablecer enlace autorizado. [VALIDAR OPERACIÓN OFFLINE]' },
  ];
  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 fmt = (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="03" label="Simulación · 90 segundos" color="#0050BD"/></Reveal>
            <Reveal delay={80}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: 0, color: '#000' }}>
                De una restricción de abastecimiento a una respuesta institucional coordinada.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              Escenario demostrativo · datos simulados · sin unidades ni ubicaciones reales. Operación no cinética de apoyo · con aprobación humana en decisiones institucionales.
            </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 · DEFENSE DEMO · SCENE 0{scene+1}/08 · NON-KINETIC</span>
                <span style={{ color: '#0050BD', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 6, height: 6, borderRadius: 999, background: '#0050BD' }} className={playing ? 'omnix-blink' : ''}/>
                  {playing ? 'PLAYING' : 'PAUSED'}
                </span>
              </div>
              <div style={{ position: 'relative', aspectRatio: '16 / 10', background: '#0A0B10' }}>
                <DefSceneStage 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: '#B8860B', textTransform: 'uppercase',
                }}>SIMULATED · [VALOR ILUSTRATIVO] · datos no reales</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: 22, letterSpacing: '-0.015em', color: '#FFF', marginBottom: 8, lineHeight: 1.15 }}>
                    {scenes[scene].label}
                  </div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, 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(!playing)} style={dfCtrl}>
                  <i data-lucide={playing ? 'pause' : 'play'} width="14" height="14"></i>
                </button>
                <button onClick={() => { setElapsed(0); setScene(0); }} style={dfCtrl}>
                  <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: '#0050BD', transition: 'width 100ms linear' }}/>
                </div>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', minWidth: 68, textAlign: 'right' }}>
                  {fmt(elapsed)} / {fmt(totalMs)}
                </span>
                <button style={dfCtrl}><i data-lucide="volume-x" width="14" height="14"></i></button>
                <button style={dfCtrl}><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 ? '#0050BD' : '#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',
                  }}>{i+1}</button>
                ))}
              </div>
            </div>
          </Reveal>

          <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: '#0050BD', textTransform: 'uppercase', marginBottom: 12 }}>
                Qué está haciendo OMNIX
              </div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.55, color: '#1E1F26', margin: '0 0 20px' }}>
                Convierte una restricción compleja en una respuesta coordinada dentro del perímetro autorizado · sin salir del alcance no cinético · con aprobación humana obligatoria en decisiones institucionales.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
                {[
                  { t: 'Detecta la condición',       d: 'Múltiples restricciones convergentes en 6 dominios.',                 sys: 'INGEST',    auto: 'N1' },
                  { t: 'Contextualiza',              d: 'Cruza activos · órdenes · inventario · presupuesto · contratos.',    sys: 'SDM',       auto: 'N2' },
                  { t: 'Prioriza',                    d: 'Por misión de apoyo, ventana crítica, disponibilidad requerida.',  sys: 'SDM',       auto: 'N2' },
                  { t: 'Evalúa alternativas',         d: 'Reasignar · reprogramar · orden alternativa · sustitución.',          sys: 'CORTEX',    auto: 'N3' },
                  { t: 'Solicita aprobación',         d: 'Autoridad responsable · según nivel y umbral definido.',              sys: 'GOV',       auto: 'N3-N4' },
                  { t: 'Ejecuta y sincroniza',         d: 'Cross-sistema · con log firmado · operación local si aplica.',       sys: 'RUNTIME',    auto: 'N4' },
                ].map((c, i) => (
                  <div key={c.t} style={{
                    padding: '10px 12px', background: '#FFF',
                    border: '1px solid',
                    borderColor: scene >= i + (i > 3 ? 1 : 0) ? '#0050BD' : '#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 ? '#0050BD' : '#96A3B5' }}>0{i+1}</span>
                    <div>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, letterSpacing: '-0.005em', color: '#000', marginBottom: 2 }}>{c.t}</div>
                      <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, 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: 14, padding: '10px 12px', background: '#FDE4E7', border: '1px solid #EA384C', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', color: '#1E1F26', lineHeight: 1.55 }}>
                No incluye: selección de objetivos · sistemas de armas · operaciones ofensivas · uso de fuerza.
              </div>
            </div>
          </Reveal>
        </div>

        {/* Transcripción accesible */}
        <Reveal delay={200}>
          <details style={{ marginTop: 32, padding: '20px 24px', border: '1px solid #E4EBF3', background: '#FAFBFD' }}>
            <summary style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#0050BD', textTransform: 'uppercase', cursor: 'pointer' }}>
              Transcripción del video
            </summary>
            <div style={{ marginTop: 16, fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.7, color: '#1E1F26' }}>
              {scenes.map((s, i) => (
                <p key={i} style={{ margin: '0 0 10px' }}>
                  <strong>Escena {i+1} · {fmt(scenes.slice(0, i).reduce((a, x) => a + x.d * 1000, 0))} — {s.label}.</strong> {s.cap}
                </p>
              ))}
              <p style={{ margin: '16px 0 0', fontStyle: 'italic', color: '#52557A' }}>
                Escenario demostrativo. Datos simulados. Sin unidades, ubicaciones, activos o proyectos reales. OMNIX se limita a operaciones no cinéticas de apoyo.
              </p>
            </div>
          </details>
        </Reveal>
      </Container>
    </section>
  );
};

const dfCtrl = {
  width: 32, height: 32, border: '1px solid #2E3140', background: '#0A0B10',
  color: '#FFF', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
};

// SCENES · SVG animado (sin armas · sin unidades · sin ubicaciones)
const DefSceneStage = ({ scene }) => (
  <div style={{ position: 'absolute', inset: 0 }}>
    {scene === 0 && <DfScene0/>}
    {scene === 1 && <DfScene1/>}
    {scene === 2 && <DfScene2/>}
    {scene === 3 && <DfScene3/>}
    {scene === 4 && <DfScene4/>}
    {scene === 5 && <DfScene5/>}
    {scene === 6 && <DfScene6/>}
    {scene === 7 && <DfScene7/>}
  </div>
);

const DfGrid = () => (
  <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>
);

const DfScene0 = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <DfGrid/>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">OPERACIÓN INSTITUCIONAL · TURNO REGULAR</text>
    <g transform="translate(80, 120)">
      {['ACTIVOS APOYO', 'MANTENIMIENTO', 'INVENTARIO', 'CONTRATOS'].map((k, i) => (
        <g key={k} transform={`translate(${i * 170}, 0)`}>
          <rect x="0" y="0" width="150" height="80" fill="#0A0B10" stroke="#0F5132" strokeWidth="1"/>
          <text x="12" y="24" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#96A3B5">{k}</text>
          <text x="12" y="52" fontFamily="var(--font-display)" fontWeight="800" fontSize="18" fill="#0F5132" letterSpacing="-0.02em">Nominal</text>
          <text x="12" y="70" fontFamily="var(--font-mono)" fontSize="9" fill="#96A3B5">estado esperado</text>
        </g>
      ))}
    </g>
    <text x="80" y="260" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#0F5132">CONECTIVIDAD · PARCIAL · SDMs ACTIVOS</text>
    <g transform="translate(80, 300)">
      {[0, 1, 2, 3, 4, 5].map((i) => (
        <g key={i} transform={`translate(${i * 110}, 0)`}>
          <rect x="0" y="0" width="90" height="30" fill="#FFF" fillOpacity="0.05" stroke="#0050BD" strokeWidth="1"/>
          <text x="45" y="20" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" fill="#0050BD">SDM · {['DAT','LOG','MNT','ECO','CIB','KNW'][i]}</text>
        </g>
      ))}
    </g>
  </svg>
);

const DfScene1 = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <DfGrid/>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#EA384C">CONVERGENCIA DE RESTRICCIONES · ALERTA INSTITUCIONAL</text>
    {[
      { i: 'package',       k: 'Repuestos',           v: 'Stock < 15%',       c: '#EA384C', x: 80,  y: 120 },
      { i: 'clock',         k: 'Orden compra',       v: '+21 días',           c: '#B8860B', x: 280, y: 120 },
      { i: 'wallet',        k: 'Presupuesto',        v: '82% ejec.',         c: '#B8860B', x: 480, y: 120 },
      { i: 'users',         k: 'Personal técnico',   v: 'Cobertura 60%',      c: '#B8860B', x: 80,  y: 260 },
      { i: 'route',         k: 'Ruta logística',     v: 'Disrupción',        c: '#EA384C', x: 280, y: 260 },
      { i: 'wifi-off',      k: 'Conectividad',       v: 'Intermitente',      c: '#B8860B', x: 480, y: 260 },
    ].map((f) => (
      <g key={f.k} transform={`translate(${f.x}, ${f.y})`}>
        <rect x="0" y="0" width="200" height="110" fill="#0A0B10" stroke={f.c} strokeWidth="1.5"/>
        <text x="14" y="24" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill={f.c}>{f.k}</text>
        <text x="14" y="60" fontFamily="var(--font-display)" fontWeight="800" fontSize="22" fill="#FFF" letterSpacing="-0.02em">{f.v}</text>
        <text x="14" y="88" fontFamily="var(--font-mono)" fontSize="9" fill="#96A3B5">registrado</text>
      </g>
    ))}
    <text x="80" y="440" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#EA384C">6 FACTORES CONVERGEN · IMPACTO EN DISPONIBILIDAD DE ACTIVOS DE APOYO</text>
  </svg>
);

const DfScene2 = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <DfGrid/>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">OMNIX · MULTI-DOMAIN CONTEXT ASSEMBLY</text>
    {['Datos', 'Logística', 'Mantenimiento', 'Ciclo económico', 'Ciberdefensa', 'Conocimiento'].map((s, i) => (
      <g key={s} transform={`translate(60, ${100 + i * 46})`}>
        <rect x="0" y="-14" width="240" height="28" fill="#0A0B10" stroke="#0050BD" strokeWidth="1"/>
        <text x="12" y="4" fontFamily="var(--font-mono)" fontSize="11" fill="#FFF">SDM · {s}</text>
        <FlowPath d={`M 240 0 L 380 0 L 440 130`} stroke="#96A3B5" strokeWidth={0.5} particleColor="#0050BD" particleSize={2} duration={2.4 + i * 0.15}/>
      </g>
    ))}
    <g transform="translate(560, 250)">
      <circle r="70" fill="none" stroke="#0050BD" strokeWidth="1" opacity="0.3">
        <animate attributeName="r" values="60;76;60" dur="2.4s" repeatCount="indefinite"/>
      </circle>
      <rect x="-64" y="-44" width="128" height="88" fill="#000" stroke="#0050BD" strokeWidth="2"/>
      <text y="-12" 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="12" fill="#0050BD">CORTEX</text>
      <text y="30" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#96A3B5">context assembled</text>
    </g>
  </svg>
);

const DfScene3 = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <DfGrid/>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">SDM DEFENSA · ASSET PRIORITIZATION</text>
    <text x="80" y="90" fontFamily="var(--font-display)" fontWeight="700" fontSize="22" fill="#FFF">42 activos · clasificados por prioridad de misión de apoyo</text>
    {[
      { k: 'ALTA PRIORIDAD · APOYO CRÍTICO', n: 8,  v: 'Ventana crítica',  c: '#EA384C' },
      { k: 'MEDIA · SOSTENIMIENTO',           n: 18, v: 'Reprogramable',    c: '#B8860B' },
      { k: 'BAJA · FLEXIBLE',                 n: 16, v: 'Diferible',         c: '#0F5132' },
    ].map((r, i) => (
      <g key={r.k} transform={`translate(80, ${140 + i * 90})`}>
        <rect x="0" y="0" width="640" height="72" fill="#0A0B10" stroke={r.c} strokeWidth={i === 0 ? 1.5 : 1}/>
        <text x="20" y="24" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill={r.c}>{r.k}</text>
        <text x="20" y="58" fontFamily="var(--font-display)" fontWeight="800" fontSize="30" fill={r.c} letterSpacing="-0.025em">{r.n}</text>
        <text x="90" y="58" fontFamily="var(--font-body)" fontSize="14" fill="#FFF">activos</text>
        <text x="240" y="52" fontFamily="var(--font-body)" fontSize="13" fill="#96A3B5">{r.v}</text>
      </g>
    ))}
    <text x="80" y="450" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#EA384C">→ NO CINÉTICO · CLASIFICACIÓN POR MISIÓN DE APOYO · NO SELECCIÓN DE OBJETIVOS</text>
  </svg>
);

const DfScene4 = () => {
  const options = [
    { k: 'WAIT',         t: 'Esperar orden de compra',      cost: 0,  risk: 82, sla: 24, sel: false },
    { k: 'REASSIGN',     t: 'Reasignar repuestos internos', cost: 12, risk: 22, sla: 86, sel: true },
    { k: 'RESCHEDULE',   t: 'Reprogramar mantenimiento',    cost: 8,  risk: 34, sla: 68, sel: false },
    { k: 'ALT-ORDER',    t: 'Orden alternativa · nuevo proveedor', cost: 34, risk: 42, sla: 78, sel: false },
    { k: 'SUBSTITUTE',   t: 'Sustitución técnica autorizada', cost: 18, risk: 28, sla: 72, sel: false },
  ];
  return (
    <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
      <DfGrid/>
      <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">DEEP THINK · ALTERNATIVAS AUTORIZADAS</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="#EA384C">RIESGO</text>
        <text x="620" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#0F5132">DISPONIBILIDAD</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="#0050BD" opacity="0.10"/>}
          {o.sel && <rect x="-8" y="-16" width="4" height="52" fill="#0050BD"/>}
          <text x="0" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill={o.sel ? '#0050BD' : '#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.risk, c: '#EA384C', suf: '%' },
            { x: 610, v: o.sla,  c: '#0F5132', 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="#0050BD">RECOMMENDED</text>}
        </g>
      ))}
      <text x="80" y="460" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#B8860B">
        SIGUIENTE · APROBACIÓN INSTITUCIONAL REQUERIDA
      </text>
    </svg>
  );
};

const DfScene5 = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <DfGrid/>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">APPROVAL FLOW · CADENA DE RESPONSABILIDAD</text>
    {[
      { r: 'ANÁLISIS TÉCNICO',       s: '✓ Jefe de Mantenimiento · dentro de umbral técnico', t: '14:28' },
      { r: 'VALIDACIÓN LOGÍSTICA',    s: '✓ Jefe de Abastecimiento · repuestos internos disponibles', t: '14:31' },
      { r: 'APROBACIÓN PRESUPUESTARIA', s: '✓ Dirección de Administración · costo dentro de umbral autorizado', t: '14:36' },
      { r: 'AUTORIZACIÓN INSTITUCIONAL', s: '✓ Autoridad responsable · acción no cinética · trazable', t: '14:42' },
    ].map((n, i) => (
      <g key={n.r} transform={`translate(80, ${120 + i * 74})`}>
        <rect x="0" y="0" width="680" height="58" fill="#0A0B10" stroke="#0F5132" strokeWidth="1.5"/>
        <text x="20" y="24" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#0F5132">{n.r}</text>
        <text x="20" y="46" fontFamily="var(--font-body)" fontSize="14" fill="#FFF">{n.s}</text>
        <text x="660" y="34" textAnchor="end" fontFamily="var(--font-mono)" fontSize="11" fill="#96A3B5">{n.t}</text>
      </g>
    ))}
    <text x="80" y="450" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#0050BD">
      ✓ CADENA DE APROBACIÓN COMPLETA · 4 ROLES INSTITUCIONALES · SIGNED WORM
    </text>
  </svg>
);

const DfScene6 = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <DfGrid/>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">COORDINACIÓN CROSS-SISTEMA · REGISTRO AUDITABLE</text>
    <g transform="translate(400, 260)">
      <circle r="52" fill="none" stroke="#0050BD" 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="#0050BD" stroke="#0050BD" 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: 'ERP',        a: 'reasigna presupuesto',        x: 130, y: 130 },
      { s: 'CMMS',       a: 'genera órdenes internas',      x: 670, y: 130 },
      { s: 'INVENTARIO', a: 'reserva repuestos',            x: 130, y: 380 },
      { s: 'CONTRATOS',  a: 'notifica proveedor alt.',       x: 670, y: 380 },
    ].map((s) => (
      <g key={s.s}>
        <FlowPath d={`M 400 260 L ${s.x} ${s.y}`} stroke="#0050BD" strokeWidth={1.5} particleColor="#0050BD" 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 #DEF-a4c2 · 4 sistemas · 220ms · signed WORM · reversible · trazable
    </text>
  </svg>
);

const DfScene7 = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <DfGrid/>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">OPERACIÓN LOCAL · SINCRONIZACIÓN DIFERIDA</text>
    <g transform="translate(200, 200)">
      <rect x="-80" y="-40" width="160" height="80" fill="#0A0B10" stroke="#0050BD" strokeWidth="1.5"/>
      <text y="-10" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">EDGE · LOCAL</text>
      <text y="12" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="16" fill="#0050BD">SDM · CACHE</text>
      <text y="30" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="#0F5132">● operating</text>
    </g>
    <g transform="translate(600, 200)">
      <rect x="-80" y="-40" width="160" height="80" fill="#0A0B10" stroke="#0050BD" strokeWidth="1.5"/>
      <text y="-10" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">CENTRAL · AUTHORIZED</text>
      <text y="12" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="16" fill="#0050BD">CORE · GOV</text>
      <text y="30" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="#B8860B">◐ awaiting sync</text>
    </g>
    <FlowPath d="M 280 200 L 520 200" stroke="#B8860B" strokeWidth={0.75} strokeDasharray="6 4" particleColor="#B8860B" particleSize={2.5} duration={3}/>
    <text x="400" y="180" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#B8860B">DEFERRED SYNC · CONNECTIVITY WINDOW</text>
    <text x="400" y="240" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">[VALIDAR OPERACIÓN OFFLINE] · [VALIDAR AIR-GAPPED]</text>
    <g transform="translate(400, 340)">
      <text textAnchor="middle" fontFamily="var(--font-serif)" fontStyle="italic" fontSize="18" fill="#FFF">
        La cognición institucional opera dentro de su perímetro autorizado ·
      </text>
      <text y="26" textAnchor="middle" fontFamily="var(--font-serif)" fontStyle="italic" fontSize="18" fill="#0050BD">
        y sincroniza cuando el enlace lo permite.
      </text>
    </g>
    <g transform="translate(400, 440)">
      <rect x="-160" y="-24" width="320" height="48" fill="#0050BD"/>
      <text textAnchor="middle" fontFamily="var(--font-body)" fontWeight="600" fontSize="15" fill="#FFF" y="6">Solicitar sesión institucional</text>
    </g>
  </svg>
);

Object.assign(window, { DefDemo });