// GOBIERNO · MOVILIDAD PREDICTIVA · Estudio Ruta 78
// Presentado como ESTUDIO / ARQUITECTURA PROPUESTA · nunca como caso de éxito
// Video demostrativo · escenario modelado con [VALOR ILUSTRATIVO DE DEMO]

const MovHero = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 96, paddingBottom: 96, position: 'relative', overflow: 'hidden' }}>
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: 'linear-gradient(#E4EBF3 1px, transparent 1px), linear-gradient(90deg, #E4EBF3 1px, transparent 1px)',
      backgroundSize: '80px 80px', opacity: 0.55, pointerEvents: 'none',
      maskImage: 'radial-gradient(ellipse at 85% 45%, #000 0%, transparent 55%)',
      WebkitMaskImage: 'radial-gradient(ellipse at 85% 45%, #000 0%, transparent 55%)',
    }}/>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 64, alignItems: 'center', position: 'relative' }}>
        <div>
          <Reveal>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <a href="gobierno.html" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#52557A', textDecoration: 'none', textTransform: 'uppercase' }}>← Gobierno</a>
              <span style={{ color: '#96A3B5' }}>/</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#0050BD', textTransform: 'uppercase' }}>Infraestructura y movilidad predictiva</span>
            </div>
            <Rule width={56}/>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 76, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#000' }}>
              De congestión reactiva a <span style={{ color: '#0050BD' }}>movilidad predictiva</span>.
            </h1>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 21, lineHeight: 1.5, color: '#52557A', maxWidth: 620, margin: '0 0 32px' }}>
              OMNIX integra tráfico, flotas, clima, incidentes, agenda portuaria y condición vial para
              anticipar disrupciones y coordinar recomendaciones sobre el corredor Santiago–San Antonio.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: 'flex', gap: 12, marginBottom: 20, flexWrap: 'wrap' }}>
              <Button variant="primary" icon="arrow-right" href="diagnostico.html">Evaluar la arquitectura Ruta 78</Button>
              <Button variant="ghost" icon="play" href="#demo">Ver simulación · 90 segundos</Button>
            </div>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ padding: '16px 20px', background: '#FBF3D9', border: '1.5px solid #B8860B', marginTop: 20 }}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <i data-lucide="lock" width="18" height="18" style={{ color: '#B8860B', strokeWidth: 1.5, flexShrink: 0, marginTop: 2 }}/>
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#B8860B', textTransform: 'uppercase', marginBottom: 6 }}>Nivel de evidencia · confidencialidad</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.55 }}>
                    <strong>Estudio de movilidad predictiva · arquitectura propuesta.</strong> Contenido público sobre capacidad potencial. La identidad de contrapartes institucionales, cifras específicas de tráfico, agenda portuaria y detalles operacionales son <strong>información reservada</strong> · protegida por NDA, convenios institucionales y normativa aplicable (Ley de Datos Personales · Ley de Transparencia · marcos sectoriales). <a href="gobierno.html#legal" style={{ color: '#B8860B', textDecoration: 'underline' }}>Ver marco legal completo</a>.
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>

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

// Mapa del corredor Santiago–San Antonio (esquemático)
const MovCorridorMap = () => (
  <div style={{ border: '1.5px solid #1E1F26', background: '#FAFBFD' }}>
    <div style={{
      display: 'flex', justifyContent: 'space-between', padding: '14px 20px',
      borderBottom: '1.5px solid #1E1F26',
      fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#52557A',
    }}>
      <span>CORREDOR SANTIAGO ↔ SAN ANTONIO · RUTA 78</span>
      <span style={{ color: '#0050BD' }}>ARQUITECTURA CONCEPTUAL</span>
    </div>
    <svg viewBox="0 0 560 260" style={{ display: 'block', width: '100%', height: 'auto', background: '#FFF' }}>
      <g stroke="#E4EBF3" strokeWidth="0.5">
        {Array.from({length: 12}).map((_, i) => <line key={i} x1={i*50} y1="0" x2={i*50} y2="260"/>)}
        {Array.from({length: 6}).map((_, i) => <line key={i} x1="0" y1={i*50} x2="560" y2={i*50}/>)}
      </g>
      {/* Santiago */}
      <g transform="translate(60, 130)">
        <rect x="-40" y="-24" width="80" height="48" fill="#FFF" stroke="#0050BD" strokeWidth="2"/>
        <text y="-4" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="12" fill="#000">SANTIAGO</text>
        <text y="14" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="#0050BD">origen · carga</text>
      </g>
      {/* Corredor con puntos de monitoreo */}
      <line x1="100" y1="130" x2="460" y2="130" stroke="#1E1F26" strokeWidth="2"/>
      {[
        { x: 160, k: 'PLAZA', l: 'peaje' },
        { x: 220, k: 'CAMINO', l: 'aforo' },
        { x: 280, k: 'PENDIENTE', l: 'meteo' },
        { x: 340, k: 'OBRA', l: 'obra activa' },
        { x: 400, k: 'ACCESO', l: 'acceso puerto' },
      ].map((n) => (
        <g key={n.k} transform={`translate(${n.x}, 130)`}>
          <circle r="6" fill="#F4024C"/>
          <text y="-14" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="8" letterSpacing="0.14em" fill="#F4024C">{n.k}</text>
          <text y="26" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="8" fill="#96A3B5">{n.l}</text>
        </g>
      ))}
      {/* Partículas de tráfico */}
      <FlowPath d="M 100 130 L 460 130" stroke="none" strokeWidth={0} particleColor="#0050BD" particleSize={2.5} duration={4} dashed={false}/>
      <FlowPath d="M 460 130 L 100 130" stroke="none" strokeWidth={0} particleColor="#B8860B" particleSize={2.5} duration={5} dashed={false}/>
      {/* Puerto San Antonio */}
      <g transform="translate(500, 130)">
        <rect x="-40" y="-24" width="80" height="48" fill="#FFF" stroke="#B00238" strokeWidth="2"/>
        <text y="-4" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="11" fill="#000">SAN ANTONIO</text>
        <text y="14" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="#B00238">puerto · ventanas</text>
      </g>
      {/* Actores arriba */}
      <text x="60" y="35" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#96A3B5">ACTORES · MOP · MTT · UOCT · CONCESIONARIA · PUERTO SAN ANTONIO · TRANSPORTISTAS · METEOROLOGÍA · UNAB</text>
      <text x="60" y="235" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#0050BD">→ 100 km · integración de datos autorizada por convenio</text>
    </svg>
    <div style={{ padding: '14px 20px', background: '#000', borderTop: '1.5px solid #1E1F26', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
      <span>[ESCENARIO MODELADO]</span>
      <span style={{ color: '#B8860B' }}>[VALIDAR AUTORIZACIÓN DE PUBLICACIÓN]</span>
    </div>
  </div>
);

// SECCIÓN — Objetivos del estudio
const MovObjectives = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <Reveal><SectionMeta n="01" label="Objetivos del estudio" color="#0050BD"/></Reveal>
      <Reveal delay={80}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 56px', color: '#000', maxWidth: 900 }}>
          Construir sobre OMNIX una capacidad predictiva para el corredor.
        </h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {[
          { i: 'clock',         t: 'Anticipar congestión',           d: 'Predicción a 15 minutos · 24 horas · 72 horas por tramo, con nivel de confianza asociado.' },
          { i: 'ship',          t: 'Coordinar flujo hacia el puerto', d: 'Sincronización carretera–puerto · ventanas portuarias · agenda de embarque · flotas.' },
          { i: 'lightbulb',     t: 'Recomendar horarios y acciones',   d: 'Sugerencias explicables para transportistas · organismos coordinadores · concesionaria.' },
          { i: 'route',         t: 'Evaluar rutas autorizadas',        d: 'Alternativas dentro del marco legal · sin desvíos no autorizados · respetando restricciones.' },
          { i: 'construction',  t: 'Estimar desgaste de pavimento',    d: 'Modelo de deterioro por flota · clima · uso · para priorizar inversión.' },
          { i: 'wrench',        t: 'Priorizar mantenimiento',          d: 'Ventanas de intervención · mínimo impacto · máximo beneficio · aprobación del organismo.' },
        ].map((o, i) => (
          <SlideIn key={o.t} direction="up" delay={i * 80}>
            <div style={{ padding: 28, background: '#FFF', border: '1px solid #E4EBF3', minHeight: 200, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <i data-lucide={o.i} width="24" height="24" style={{ color: '#0050BD', strokeWidth: 1.5 }}/>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, letterSpacing: '-0.01em', color: '#000' }}>{o.t}</div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.55, color: '#52557A', margin: 0 }}>{o.d}</p>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// VIDEO DEMOSTRATIVO · 90s · 8 escenas
const MovDemo = () => {
  const [scene, setScene] = React.useState(0);
  const [playing, setPlaying] = React.useState(true);
  const scenes = [
    { d: 8,  label: 'Corredor Santiago–San Antonio · turno diurno',    cap: 'Ruta 78 opera dentro del comportamiento esperado. UOCT · MOP · concesionaria monitorean cada uno su parte.' },
    { d: 12, label: 'Coinciden múltiples factores',                     cap: 'Aumento de camiones · lluvia · obra activa · evento masivo · demanda portuaria elevada · reducción de velocidad en un tramo.' },
    { d: 12, label: 'OMNIX conecta señales de todos los actores',        cap: 'Tráfico · flotas · clima · incidentes · agenda portuaria · condición vial. Todo bajo convenio institucional.' },
    { d: 13, label: 'Predicción a 15 minutos · 24 horas · 72 horas',    cap: 'Modelos por horizonte temporal con nivel de confianza asociado. Escenario modelado · valores ilustrativos.' },
    { d: 14, label: 'Identifica vehículos y cargas afectadas',           cap: 'Cruza flotas comerciales con agenda portuaria. Prioriza cargas críticas · ventanas comprometidas.' },
    { d: 13, label: 'Evalúa alternativas · dentro del marco autorizado', cap: 'Avanzar · esperar · reprogramar · ruta alternativa autorizada. Nunca desvíos ilegales.' },
    { d: 10, label: 'Solicita aprobación · comunica a actores',           cap: 'Approval flow del organismo correspondiente. Comunicación a transportistas · UOCT · concesionaria · puerto.' },
    { d: 8,  label: 'Registra fundamento · mide resultado',               cap: 'Log firmado · trazabilidad de la recomendación · evidencia para revisión posterior.' },
  ];
  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="02" 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' }}>
                Simulación basada en la arquitectura propuesta.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              Escenario modelado. Datos ilustrativos. No resultado real. Todo bajo convenio institucional a formalizar.
            </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 · RUTA 78 STUDY · SCENE 0{scene+1}/08</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' }}>
                <MovSceneStage 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',
                }}>[ESCENARIO MODELADO] · [VALOR ILUSTRATIVO DE DEMO]</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={mCtrlBtn}>
                  <i data-lucide={playing ? 'pause' : 'play'} width="14" height="14"></i>
                </button>
                <button onClick={() => { setElapsed(0); setScene(0); }} style={mCtrlBtn}>
                  <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={mCtrlBtn}>
                  <i data-lucide="volume-x" 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', transition: 'all 220ms',
                  }}>{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 }}>
                Actores del estudio
              </div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.55, color: '#1E1F26', margin: '0 0 20px' }}>
                Actores previstos · integraciones dependen de acuerdos institucionales autorizados.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {[
                  { r: 'MOP',                        d: 'Ministerio de Obras Públicas · condición vial · plan de inversión' },
                  { r: 'MTT',                        d: 'Ministerio de Transporte y Telecomunicaciones · marco regulatorio' },
                  { r: 'UOCT',                       d: 'Unidad Operativa de Control de Tránsito · monitoreo en tiempo real' },
                  { r: 'Concesionaria Ruta 78',      d: 'Operador de la concesión · información de peajes y tráfico' },
                  { r: 'Puerto San Antonio',         d: 'Agenda portuaria · ventanas de embarque · restricciones de acceso' },
                  { r: 'Transportistas',             d: 'Flotas comerciales · agenda de despachos · GPS · cargas' },
                  { r: 'Meteorología autorizada',    d: 'Fuentes oficiales · condiciones climáticas por tramo' },
                  { r: 'UNAB',                       d: 'Alianza académica · modelo científico · validación metodológica' },
                ].map((c) => (
                  <div key={c.r} style={{
                    padding: '10px 12px', background: '#FFF', border: '1px solid #E4EBF3',
                    display: 'grid', gridTemplateColumns: '110px 1fr', gap: 12, alignItems: 'start',
                  }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', color: '#0050BD', fontWeight: 500 }}>{c.r}</span>
                    <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26', lineHeight: 1.4 }}>{c.d}</span>
                  </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 }}>
                No afirmar que las integraciones están implementadas. Sujeto a convenios institucionales autorizados por cada organismo.
              </div>
            </div>
          </Reveal>
        </div>
      </Container>
    </section>
  );
};

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

// Escenas del video
const MovSceneStage = ({ scene }) => (
  <div style={{ position: 'absolute', inset: 0 }}>
    {scene === 0 && <MvScene0/>}
    {scene === 1 && <MvScene1/>}
    {scene === 2 && <MvScene2/>}
    {scene === 3 && <MvScene3/>}
    {scene === 4 && <MvScene4/>}
    {scene === 5 && <MvScene5/>}
    {scene === 6 && <MvScene6/>}
    {scene === 7 && <MvScene7/>}
  </div>
);

const MvGrid = () => (
  <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 · Corredor operando normal
const MvScene0 = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <MvGrid/>
    <text x="60" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">RUTA 78 · TURNO DIURNO · L2 HOURS</text>
    <g transform="translate(60, 240)">
      <rect x="-40" y="-24" width="80" height="48" fill="#FFF" stroke="#0050BD" strokeWidth="2"/>
      <text y="-4" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="12" fill="#000">SANTIAGO</text>
    </g>
    <line x1="100" y1="240" x2="700" y2="240" stroke="#FFF" strokeWidth="3"/>
    {[180, 280, 380, 480, 580].map((x, i) => (
      <g key={i} transform={`translate(${x}, 240)`}>
        <circle r="4" fill="#0F5132"/>
      </g>
    ))}
    <FlowPath d="M 100 240 L 700 240" stroke="none" strokeWidth={0} particleColor="#0050BD" particleSize={2.5} duration={4} dashed={false}/>
    <FlowPath d="M 700 240 L 100 240" stroke="none" strokeWidth={0} particleColor="#B8860B" particleSize={2.5} duration={5} dashed={false}/>
    <g transform="translate(740, 240)">
      <rect x="-40" y="-24" width="80" height="48" fill="#FFF" stroke="#B00238" strokeWidth="2"/>
      <text y="-4" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="10" fill="#000">SAN ANTONIO</text>
    </g>
    <g transform="translate(60, 400)">
      <text x="0" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">TRÁFICO ACTUAL</text>
      <text x="0" y="28" fontFamily="var(--font-display)" fontWeight="800" fontSize="24" fill="#0F5132" letterSpacing="-0.02em">Nominal</text>
      <text x="220" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">VELOCIDAD MEDIA</text>
      <text x="220" y="28" fontFamily="var(--font-mono)" fontSize="18" fill="#FFF">92 km/h</text>
      <text x="440" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">CAMIONES / H</text>
      <text x="440" y="28" fontFamily="var(--font-mono)" fontSize="18" fill="#FFF">312</text>
    </g>
  </svg>
);

// SCENE 1 · Coinciden múltiples factores
const MvScene1 = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <MvGrid/>
    <text x="60" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#B8860B">CONVERGENCIA DE FACTORES · ALERTA</text>
    {[
      { i: 'truck',          k: 'Aumento de camiones', v: '+38%', c: '#B8860B', x: 60, y: 130 },
      { i: 'cloud-rain',     k: 'Lluvia',              v: '12 mm/h', c: '#0050BD', x: 260, y: 130 },
      { i: 'construction',   k: 'Obra activa',         v: 'km 42', c: '#EA384C', x: 460, y: 130 },
      { i: 'users',          k: 'Evento masivo',       v: 'salida', c: '#B8860B', x: 60, y: 280 },
      { i: 'ship',           k: 'Demanda portuaria',   v: 'ventana', c: '#B00238', x: 260, y: 280 },
      { i: 'trending-down',  k: 'Velocidad',           v: '−22%', c: '#EA384C', x: 460, y: 280 },
    ].map((f, i) => (
      <g key={f.k} transform={`translate(${f.x}, ${f.y})`}>
        <rect x="0" y="0" width="180" 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="26" 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="60" y="470" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#EA384C">6 FACTORES CONVERGEN · IMPACTO EN 15-72h</text>
  </svg>
);

// SCENE 2 · OMNIX conecta las señales
const MvScene2 = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <MvGrid/>
    <text x="60" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">SDM MOVILIDAD · MULTI-SOURCE ASSEMBLY</text>
    {['Tráfico UOCT', 'Flotas GPS', 'Meteorología', 'Incidentes', 'Agenda portuaria', 'Condición vial'].map((s, i) => (
      <g key={s} transform={`translate(60, ${120 + i * 44})`}>
        <rect x="0" y="-14" width="220" height="28" fill="#0A0B10" stroke="#0050BD" strokeWidth="1"/>
        <text x="12" y="4" fontFamily="var(--font-mono)" fontSize="11" fill="#FFF">{s}</text>
        <FlowPath d={`M 220 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(540, 260)">
      <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="-56" y="-40" width="112" height="80" fill="#000" stroke="#0050BD" strokeWidth="2"/>
      <text y="-8" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="800" fontSize="14" fill="#FFF">SDM</text>
      <text y="12" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="13" fill="#0050BD">MOVILIDAD</text>
      <text y="28" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#96A3B5">v0.4 · demo</text>
    </g>
  </svg>
);

// SCENE 3 · Predicción a 3 horizontes
const MvScene3 = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <MvGrid/>
    <text x="60" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">PREDICCIÓN POR HORIZONTE · CONFIDENCE-AWARE</text>
    {[
      { h: '15 minutos', v: 'Alto riesgo', c: '#EA384C', conf: '0.91', d: 'Congestión inminente en km 42-58', x: 60 },
      { h: '24 horas',    v: 'Riesgo medio', c: '#B8860B', conf: '0.78', d: 'Ventana crítica 07:00-10:00', x: 300 },
      { h: '72 horas',    v: 'Vigilancia',   c: '#0050BD', conf: '0.62', d: 'Convergencia lluvia + obra + carga', x: 540 },
    ].map((p, i) => (
      <g key={p.h} transform={`translate(${p.x}, 120)`}>
        <rect x="0" y="0" width="220" height="240" fill="#0A0B10" stroke={p.c} strokeWidth="1.5"/>
        <text x="14" y="26" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill="#96A3B5">HORIZONTE · {i+1}</text>
        <text x="14" y="52" fontFamily="var(--font-display)" fontWeight="700" fontSize="22" fill={p.c}>{p.h}</text>
        <text x="14" y="98" fontFamily="var(--font-display)" fontWeight="800" fontSize="28" fill="#FFF" letterSpacing="-0.02em">{p.v}</text>
        <text x="14" y="140" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">CONFIANZA</text>
        <text x="14" y="164" fontFamily="var(--font-mono)" fontSize="18" fill={p.c}>{p.conf}</text>
        <text x="14" y="200" fontFamily="var(--font-body)" fontSize="12" fill="#FFF">{p.d}</text>
      </g>
    ))}
    <text x="60" y="410" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#B8860B">[VALOR ILUSTRATIVO DE DEMO] · [NO PRESENTAR COMO RESULTADO REAL]</text>
  </svg>
);

// SCENE 4 · Cargas críticas identificadas
const MvScene4 = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <MvGrid/>
    <text x="60" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">IDENTIFICA VEHÍCULOS Y CARGAS AFECTADAS</text>
    <text x="60" y="90" fontFamily="var(--font-display)" fontWeight="700" fontSize="20" fill="#FFF">128 vehículos · 6 ventanas portuarias en riesgo</text>
    {[
      { k: 'CARGA CRÍTICA · SLA HARD', n: 24, c: '#EA384C', d: 'Ventana portuaria comprometida' },
      { k: 'PROGRAMADA',                n: 62, c: '#B8860B', d: 'Cumplimiento en riesgo · reasignable' },
      { k: 'FLEXIBLE',                  n: 42, c: '#0F5132', d: 'Puede reprogramarse sin impacto' },
    ].map((r, i) => (
      <g key={r.k} transform={`translate(60, ${130 + i * 90})`}>
        <rect x="0" y="0" width="680" height="72" 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="58" fontFamily="var(--font-display)" fontWeight="800" fontSize="34" fill={r.c} letterSpacing="-0.025em">{r.n}</text>
        <text x="90" y="58" fontFamily="var(--font-body)" fontSize="14" fill="#FFF">vehículos</text>
        <text x="240" y="52" fontFamily="var(--font-body)" fontSize="13" fill="#96A3B5">{r.d}</text>
      </g>
    ))}
  </svg>
);

// SCENE 5 · Alternativas dentro del marco autorizado
const MvScene5 = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <MvGrid/>
    <text x="60" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">ALTERNATIVAS · DENTRO DE MARCO AUTORIZADO</text>
    {[
      { k: 'AVANZAR',       t: 'Continuar según plan',                  cost: 0,  risk: 78, sel: false },
      { k: 'ESPERAR',       t: 'Retrasar salida 45 min · críticas',      cost: 12, risk: 32, sel: true },
      { k: 'REPROGRAMAR',   t: 'Reprogramar cargas flexibles',           cost: 22, risk: 18, sel: false },
      { k: 'RUTA ALT.',     t: 'Ruta autorizada · +18 km',                cost: 34, risk: 42, sel: false },
    ].map((o, i) => (
      <g key={o.k} transform={`translate(60, ${120 + i * 76})`}>
        {o.sel && <rect x="-8" y="-16" width="720" height="64" fill="#0050BD" opacity="0.12"/>}
        {o.sel && <rect x="-8" y="-16" width="4" height="64" 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="24" fontFamily="var(--font-display)" fontWeight="700" fontSize="16" fill="#FFF">{o.t}</text>
        <rect x="380" y="16" width="120" height="6" fill="#2E3140"/>
        <rect x="380" y="16" width={o.cost * 3} height="6" fill="#B8860B"><animate attributeName="width" from="0" to={o.cost * 3} dur="0.9s" begin={`${i * 0.15}s`} fill="freeze"/></rect>
        <text x="380" y="40" fontFamily="var(--font-mono)" fontSize="10" fill="#B8860B">COST +{o.cost}%</text>
        <rect x="540" y="16" width="120" height="6" fill="#2E3140"/>
        <rect x="540" y="16" width={o.risk * 1.2} height="6" fill={o.risk > 40 ? '#EA384C' : '#0F5132'}><animate attributeName="width" from="0" to={o.risk * 1.2} dur="0.9s" begin={`${i * 0.15}s`} fill="freeze"/></rect>
        <text x="540" y="40" fontFamily="var(--font-mono)" fontSize="10" fill={o.risk > 40 ? '#EA384C' : '#0F5132'}>RISK {o.risk}%</text>
        {o.sel && <text x="700" y="14" textAnchor="end" fontFamily="var(--font-mono)" fontSize="10" fill="#0050BD">RECOMMENDED</text>}
      </g>
    ))}
    <text x="60" y="460" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#B8860B">RECOMENDACIÓN · REQUIERE APROBACIÓN DEL ORGANISMO</text>
  </svg>
);

// SCENE 6 · Aprobación + comunicación
const MvScene6 = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <MvGrid/>
    <text x="60" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">APPROVAL FLOW · COMUNICACIÓN A ACTORES</text>
    <g transform="translate(60, 100)">
      <rect x="0" y="0" width="680" height="70" fill="#0A0B10" stroke="#0F5132" strokeWidth="1.5"/>
      <text x="20" y="26" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill="#0F5132">APROBACIÓN INSTITUCIONAL</text>
      <text x="20" y="52" fontFamily="var(--font-display)" fontWeight="700" fontSize="16" fill="#FFF">✓ Coordinador UOCT · turno diurno · 14:28</text>
    </g>
    <text x="60" y="220" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">NOTIFICACIÓN A ACTORES</text>
    {[
      { r: 'Transportistas',        s: 'Recomendación de reprogramación · 24 cargas críticas', t: '14:29' },
      { r: 'Concesionaria Ruta 78', s: 'Alerta operacional · km 42-58 · próximas 3h',           t: '14:29' },
      { r: 'Puerto San Antonio',    s: 'Actualización de ventanas · 6 embarques afectados',     t: '14:30' },
      { r: 'UOCT',                  s: 'Recomendación implementada · monitoreo activo',         t: '14:30' },
    ].map((n, i) => (
      <g key={n.r} transform={`translate(60, ${250 + i * 50})`}>
        <rect x="0" y="0" width="680" height="40" fill="#0A0B10" stroke="#2E3140" strokeWidth="1"/>
        <text x="16" y="16" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#0050BD">{n.r}</text>
        <text x="16" y="32" fontFamily="var(--font-mono)" fontSize="11" fill="#FFF">{n.s}</text>
        <text x="660" y="24" textAnchor="end" fontFamily="var(--font-mono)" fontSize="10" fill="#96A3B5">{n.t}</text>
      </g>
    ))}
  </svg>
);

// SCENE 7 · Log y trazabilidad
const MvScene7 = () => (
  <svg viewBox="0 0 800 500" style={{ width: '100%', height: '100%' }}>
    <MvGrid/>
    <text x="60" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">TRAZABILIDAD · FUNDAMENTO REGISTRADO</text>
    <g transform="translate(60, 100)">
      <rect x="0" y="0" width="680" height="360" fill="#0A0B10" stroke="#0050BD" strokeWidth="1.5"/>
      <text x="20" y="30" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill="#0050BD">DECISION TRACE · #GOV-MOV-2029-a1c4 · signed</text>
      {[
        'timestamp:   2029-07-11 14:28:41',
        'input:       6 factors converging · ruta 78 · corredor Santiago–San Antonio',
        'sdm:         sdm.mobility-v0.4-study (escenario modelado)',
        'predictions: h15=0.91 · h24=0.78 · h72=0.62',
        'affected:    128 vehicles · 24 critical · 62 programmed · 42 flexible',
        'options:     4 evaluated dentro de marco autorizado',
        'recommendation: opción 02 · retrasar 45 min · cargas críticas',
        'approval:    coordinador UOCT · turno diurno · 14:28',
        'systems:     UOCT · concesionaria · puerto · transportistas',
        'evidence:    signed WORM · [VALIDAR AUTORIZACIÓN DE PUBLICACIÓN]',
      ].map((line, i) => (
        <text key={i} x="20" y={60 + i * 26} fontFamily="var(--font-mono)" fontSize="11" fill="#FFF">
          <tspan fill="#52557A">{`0${i+1}  `}</tspan>{line}
        </text>
      ))}
    </g>
  </svg>
);

// SECCIÓN — Métricas del estudio (con etiquetas)
const MovMetrics = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="03" label="Métricas del estudio" dark color="#0050BD"/></Reveal>
      <Reveal delay={80}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#FFF', maxWidth: 900 }}>
          Cuatro categorías · separadas rigurosamente.
        </h2>
      </Reveal>
      <Reveal delay={140}>
        <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#96A3B5', margin: '0 0 56px', maxWidth: 780 }}>
          Nunca mezclar datos operacionales, objetivos del proyecto, escenarios modelados y resultados reales. Cada categoría con su etiqueta explícita.
        </p>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {[
          { k: 'DATOS OPERACIONALES', c: '#0050BD', label: '[VALIDAR FUENTE]',
            desc: 'Estadísticas verificables del corredor y su operación actual',
            examples: ['Camiones/día', 'Velocidad media', 'Incidentes/mes', 'Ventanas portuarias/día'] },
          { k: 'OBJETIVOS DEL PROYECTO', c: '#F4024C', label: '[OBJETIVO ACORDADO]',
            desc: 'Métricas objetivo del estudio · aún no medidas',
            examples: ['Anticipar 72h', 'Coordinar 4 actores', 'Predicción confidence-aware', 'Logs regulator-ready'] },
          { k: 'ESCENARIOS MODELADOS', c: '#B8860B', label: '[VALOR ILUSTRATIVO]',
            desc: 'Valores del video/simulación · no resultado real',
            examples: ['128 vehículos afectados', '0.91 confidence', '6 ventanas en riesgo', 'reprogramación 45 min'] },
          { k: 'RESULTADOS REALES', c: '#0F5132', label: '[VALIDAR MÉTRICA · AUTORIZACIÓN]',
            desc: 'Sólo con línea base firmada y validación',
            examples: ['Pendiente piloto', 'Pendiente medición', 'Pendiente autorización', 'Pendiente publicación'] },
        ].map((r, i) => (
          <SlideIn key={r.k} direction="up" delay={i * 100}>
            <div style={{ padding: '28px 24px', background: '#0A0B10', border: `1.5px solid ${r.c}`, minHeight: 340, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: r.c }}>{r.k}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.06em', color: '#B8860B' }}>{r.label}</div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#96A3B5', lineHeight: 1.5, margin: 0 }}>{r.desc}</p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6, marginTop: 8 }}>
                {r.examples.map((e) => (
                  <li key={e} style={{ display: 'flex', gap: 8, fontFamily: 'var(--font-mono)', fontSize: 11, color: '#FFF' }}>
                    <span style={{ color: r.c }}>·</span>{e}
                  </li>
                ))}
              </ul>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

Object.assign(window, { MovHero, MovObjectives, MovDemo, MovMetrics });
