// TRANSFERENCIA DE CONTROL v2
// Buyer: CEO / CIO / CTO / COO / Procurement / CRO / Legal / equipos de transformación
// Mensaje: OMNIX no construye dependencia — construye, opera y transfiere.

const TransHeroV2 = () => (
  <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.5, pointerEvents: 'none',
      maskImage: 'radial-gradient(ellipse at 82% 45%, #000 0%, transparent 60%)',
      WebkitMaskImage: 'radial-gradient(ellipse at 82% 45%, #000 0%, transparent 60%)',
    }}/>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 64, alignItems: 'center', position: 'relative' }}>
        <div>
          <Reveal><Eyebrow color="#F4024C">TRANSFERENCIA DE CONTROL · OPERACIÓN ASISTIDA</Eyebrow><Rule width={56}/></Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 82, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#000' }}>
              Construimos, operamos y te entregamos las <span style={{ color: '#F4024C' }}>llaves</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' }}>
              El único proveedor enterprise de IA cuya propuesta comercial incluye retirarse.
              Cuando tu equipo domina el sistema, OMNIX se transforma en plataforma — no en dependencia.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: 'flex', gap: 12 }}>
              <Button variant="primary" icon="arrow-right" href="diagnostico.html">Diseñar plan de transferencia</Button>
            </div>
          </Reveal>
        </div>
        <Reveal delay={200} y={0}>
          <TransferOwnershipBars/>
        </Reveal>
      </div>
    </Container>
  </section>
);

// Barras apiladas OMNIX / CLIENTE por fase — visualiza la transferencia
const TransferOwnershipBars = () => {
  const phases = [
    { k: 'ASSESSMENT',   omnix: 90, client: 10 },
    { k: 'PILOTO',        omnix: 70, client: 30 },
    { k: 'ESCALAMIENTO', omnix: 45, client: 55 },
    { k: 'TRANSFERENCIA',omnix: 15, client: 85 },
  ];
  return (
    <div style={{ border: '1.5px solid #1E1F26', background: '#FAFBFD' }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', padding: '14px 20px',
        borderBottom: '1.5px solid #1E1F26',
        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#52557A',
      }}>
        <span>OWNERSHIP · TIMELINE</span>
        <span style={{ color: '#F4024C' }}>OMNIX → CLIENT</span>
      </div>
      <div style={{ padding: '32px 24px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {phases.map((p, i) => <StackedBar key={p.k} phase={p} idx={i}/>)}
      </div>
      <div style={{
        borderTop: '1.5px solid #1E1F26', padding: '14px 20px',
        display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#52557A', textTransform: 'uppercase',
      }}>
        <span><span style={{ color: '#F4024C' }}>■</span> OMNIX operates</span>
        <span><span style={{ color: '#0050BD' }}>■</span> CLIENT owns</span>
      </div>
    </div>
  );
};

const StackedBar = ({ phase, idx }) => {
  const { ref, visible } = useReveal({ threshold: 0.3 });
  return (
    <div ref={ref}>
      <div style={{
        height: 200, border: '1px solid #E4EBF3', background: '#FFF',
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{
          background: '#F4024C', height: visible ? `${phase.omnix}%` : '0%',
          transition: `height 900ms cubic-bezier(0.2,0.7,0.2,1) ${idx * 120}ms`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          {visible && phase.omnix > 18 && (
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#FFF', letterSpacing: '0.14em' }}>{phase.omnix}</span>
          )}
        </div>
        <div style={{
          background: '#0050BD', height: visible ? `${phase.client}%` : '0%',
          transition: `height 900ms cubic-bezier(0.2,0.7,0.2,1) ${idx * 120 + 200}ms`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          {visible && phase.client > 18 && (
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#FFF', letterSpacing: '0.14em' }}>{phase.client}</span>
          )}
        </div>
      </div>
      <div style={{
        marginTop: 10, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em',
        color: '#1E1F26', textAlign: 'center', textTransform: 'uppercase',
      }}>{phase.k}</div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: '#96A3B5', textAlign: 'center', marginTop: 4 }}>
        FASE 0{idx + 1}
      </div>
    </div>
  );
};

// PROBLEMA STORYBRAND
const TransProblemV2 = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 72 }}>
        <Reveal><SectionMeta n="01" label="El miedo real del comprador enterprise"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#000' }}>
            "¿Y si termino más dependiente que <span style={{ color: '#F4024C' }}>antes</span>?"
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.45, color: '#52557A', margin: 0 }}>
            La pregunta que todo COO se hace antes de firmar. Y la única que casi ningún proveedor de IA
            enterprise responde por escrito.
          </p>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1.5px solid #1E1F26' }}>
        {[
          { k: 'EXTERNO',    t: 'Cada proveedor promete "partnership".',   d: 'Después firmas un contrato de 5 años, licencias por seat, cláusula de renovación automática y un integrador que "conoce mejor tu operación que tu propio equipo". La cognición vive con ellos.' },
          { k: 'INTERNO',    t: 'Tu equipo empieza a depender de ellos.',   d: 'Cada nueva versión requiere su aprobación. Cada rollback pasa por su ticketera. Cada reentrenamiento cuesta un SoW. El costo por decisión sube en lugar de bajar con el tiempo.' },
          { k: 'FILOSÓFICO', t: 'La ventaja competitiva debería ser transferible.', d: 'Si el activo que decide tu operación sólo puede operarlo el proveedor, no es tu activo. Es su producto. La cognición institucional se construye para quedarse — no para arrendarse.' },
        ].map((p, i) => (
          <Reveal key={p.k} delay={i * 120}>
            <div style={{ padding: '36px 32px', borderRight: (i < 2) ? '1px solid #E4EBF3' : 'none', minHeight: 340 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 20 }}>PROBLEMA {p.k}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 26, letterSpacing: '-0.02em', color: '#000', margin: '0 0 16px', lineHeight: 1.2 }}>{p.t}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: '#52557A', margin: 0 }}>{p.d}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </Container>
  </section>
);

// PROVEEDOR ETERNO vs GUÍA QUE TRANSFIERE
const TransContrast = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="02" label="Dos modelos comerciales"/></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 }}>
          Proveedor eterno vs guía que transfiere.
        </h2>
      </Reveal>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1.5px solid #1E1F26' }}>
        <div style={{ padding: '40px 36px', borderRight: '1px solid #E4EBF3', background: '#FAFBFD' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#96A3B5', marginBottom: 20 }}>MODELO CLÁSICO</div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 30, letterSpacing: '-0.02em', color: '#52557A', margin: '0 0 24px', lineHeight: 1.15 }}>
            Proveedor eterno.
          </h3>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              'Contratos multianuales con cláusula de renovación automática',
              'Modelo vive en la infra del proveedor',
              'Cada cambio requiere ticket y SoW',
              'Consultores rotativos que reaprenden cada 18 meses',
              'Al terminar el contrato, la cognición se va con ellos',
            ].map((f) => (
              <li key={f} style={{ display: 'flex', gap: 12, fontFamily: 'var(--font-body)', fontSize: 15, color: '#52557A', lineHeight: 1.5 }}>
                <span style={{ color: '#96A3B5', fontFamily: 'var(--font-mono)', fontSize: 14 }}>—</span>
                <span style={{ textDecoration: 'line-through', textDecorationColor: '#C7CFDA' }}>{f}</span>
              </li>
            ))}
          </ul>
        </div>
        <div style={{ padding: '40px 36px', background: '#FFF' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 20 }}>MODELO OMNIX</div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 30, letterSpacing: '-0.02em', color: '#000', margin: '0 0 24px', lineHeight: 1.15 }}>
            Guía que transfiere.
          </h3>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              'Contrato con hitos y punto de salida definido',
              'Modelo vive en tu VPC · on-prem · air-gap',
              'Tu equipo opera, aprueba y reentrena',
              'Certificación interna Cognitive Ops · Architect · Governance',
              'Al final del programa, entregamos código, modelos y llaves',
            ].map((f) => (
              <li key={f} style={{ display: 'flex', gap: 12, fontFamily: 'var(--font-body)', fontSize: 15, color: '#1E1F26', lineHeight: 1.5 }}>
                <span style={{ color: '#F4024C', fontFamily: 'var(--font-mono)', fontSize: 14 }}>+</span>
                {f}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </Container>
  </section>
);

// 4 FASES — tabla completa con roles, KPIs, entregables
const TransPhases = () => {
  const [active, setActive] = React.useState(0);
  const phases = [
    { k: 'ASSESSMENT', t: 'Diagnóstico cognitivo', dur: '2 – 3 semanas',
      role: 'OMNIX lidera · Cliente valida',
      kpis: ['Casos priorizados', 'ROI estimado por caso', 'Roadmap operativo'],
      deliv: ['Documento de arquitectura', 'Business case ejecutivo', 'Priorización de casos', 'Diseño de gobernanza'],
      omnix: 'Diagnostica operación, mapea datos y sistemas, prioriza casos por impacto y factibilidad, diseña la gobernanza mínima.',
      client: 'Valida asunciones, aprueba priorización y arquitectura, designa Business Process Owners y Cognitive Architects internos.' },
    { k: 'PILOTO', t: 'Primer SDM en producción', dur: '8 – 12 semanas',
      role: 'OMNIX opera · Cliente co-piloto',
      kpis: ['SDM entrenado', '1 caso operacional vivo', 'Métricas base contra KPI cliente'],
      deliv: ['SDM en VPC del cliente', 'Runbook operativo', 'Primera capa de logs y auditoría', 'Métricas base validadas'],
      omnix: 'Entrena el primer SDM, integra a sistemas fuente, opera el runtime en modo asistido, mentora al equipo interno.',
      client: 'Provee acceso, aprueba SDM y guardrails, participa como co-piloto en operación diaria, recibe primer bloque de certificación.' },
    { k: 'ESCALAMIENTO', t: 'Cobertura multi-caso', dur: '3 – 6 meses',
      role: 'OMNIX mentora · Cliente co-opera',
      kpis: ['5+ casos vivos', 'Nivel N4 alcanzado en casos maduros', 'Certificación interna completa'],
      deliv: ['Portfolio de casos operacionales', 'Engineers certificados (Cognitive Ops, Architect, Governance)', 'Governance board interno', 'Reportería regulator-ready'],
      omnix: 'Entrena SDMs adicionales, sube niveles de autonomía por caso, mentora en gobernanza y model risk.',
      client: 'Toma la mayoría de operación diaria, aprueba escalado de autonomía, certifica su equipo, formaliza governance board.' },
    { k: 'TRANSFERENCIA', t: 'Autonomía del cliente', dur: 'Cuando digas',
      role: 'OMNIX soporte on-demand',
      kpis: ['Equipo autónomo end-to-end', 'Runtime operado por cliente 24/7', 'SLA cliente-owned'],
      deliv: ['Código fuente del pipeline', 'Modelos versionados con historial', 'Runbooks + docs completos', 'Gobernanza transferida'],
      omnix: 'Se retira operacionalmente. Mantiene rol de plataforma (releases, updates, seguridad). Soporte a demanda.',
      client: 'Opera, aprueba, reentrena y gobierna. Decide qué modelos suben de versión y cuándo. Sin cláusula de reversibilidad.' },
  ];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <Reveal><SectionMeta n="03" label="El plan · cuatro fases"/></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 }}>
            De diagnóstico a autonomía. Con hitos, no con promesas.
          </h2>
        </Reveal>

        {/* Phase tabs */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginBottom: 24 }}>
          {phases.map((p, i) => (
            <button key={p.k} onClick={() => setActive(i)} style={{
              padding: '18px 22px', border: '1.5px solid',
              borderColor: active === i ? '#F4024C' : '#1E1F26',
              background: active === i ? '#F4024C' : '#FFF',
              color: active === i ? '#FFF' : '#1E1F26',
              fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', fontWeight: 500,
              cursor: 'pointer', transition: 'all 220ms', textAlign: 'left',
            }}>
              <div style={{ fontSize: 9, opacity: 0.7, marginBottom: 6 }}>FASE 0{i+1}</div>
              <div style={{ fontSize: 12, letterSpacing: '0.14em' }}>{p.k}</div>
            </button>
          ))}
        </div>

        {/* Active phase detail */}
        <div key={active} style={{
          border: '1.5px solid #1E1F26', background: '#FFF', padding: 40,
          animation: 'omnix-slide-in 380ms cubic-bezier(0.2,0.7,0.2,1)',
        }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, marginBottom: 40, paddingBottom: 32, borderBottom: '1px solid #E4EBF3' }}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 12 }}>
                FASE 0{active+1} · {phases[active].dur}
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 44, letterSpacing: '-0.025em', color: '#000', margin: '0 0 16px', lineHeight: 1.05 }}>
                {phases[active].t}
              </h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: '#52557A', margin: 0 }}>
                <strong style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: '#1E1F26' }}>ROL</strong> · {phases[active].role}
              </p>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 16 }}>KPIs de fase</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {phases[active].kpis.map((k) => (
                  <li key={k} style={{ display: 'flex', gap: 12, alignItems: 'baseline', fontFamily: 'var(--font-body)', fontSize: 15, color: '#1E1F26' }}>
                    <i data-lucide="target" width="14" height="14" style={{ color: '#F4024C', strokeWidth: 1.5, flexShrink: 0 }}/>
                    {k}
                  </li>
                ))}
              </ul>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32 }}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 12 }}>OMNIX</div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: '#1E1F26', margin: 0 }}>{phases[active].omnix}</p>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 12 }}>CLIENTE</div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: '#1E1F26', margin: 0 }}>{phases[active].client}</p>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 12 }}>ENTREGABLES</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {phases[active].deliv.map((d) => (
                  <li key={d} style={{ display: 'flex', gap: 8, fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.4 }}>
                    <span style={{ color: '#F4024C', fontFamily: 'var(--font-mono)', fontSize: 12 }}>—</span>{d}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

// QUÉ SE TRANSFIERE — inventario visual
const TransHandover = () => (
  <section 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="04" label="Qué se transfiere"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: 0, color: '#000' }}>
              El día del handover no hay sorpresas.
            </h2>
          </Reveal>
        </div>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
            Inventario contractual del entregable final. Nada oculto, nada sujeto a licenciamiento
            posterior. La cognición operacional queda en tu empresa.
          </p>
        </Reveal>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {[
          { i: 'file-code', t: 'Código fuente', d: 'Pipeline completo Ingest → Core → Runtime → Cortex, con historial de commits y CI/CD.' },
          { i: 'package',   t: 'Modelos versionados', d: 'Todos los SDMs entrenados con firma criptográfica, checkpoints y datasets asociados.' },
          { i: 'book-open', t: 'Runbooks operacionales', d: 'Playbooks por caso, escalation policies, procedimientos de rollback y recovery.' },
          { i: 'settings-2',t: 'Protocolos de reentrenamiento', d: 'Triggers, umbrales, gates de aprobación, calendarios y evaluación continua.' },
          { i: 'shield-check', t: 'Gobernanza de modelos', d: 'Approval flows, model risk framework, criterios de retirement, matriz RACI.' },
          { i: 'gauge',     t: 'Criterios de monitoreo', d: 'Dashboards operativos, alertas, KPIs por caso, umbrales de drift y performance.' },
          { i: 'terminal',  t: 'Operación de SDMs',      d: 'Herramientas de inference, batch scoring, A/B testing y canary release.' },
          { i: 'users',     t: 'Roles internos definidos', d: 'Cognitive Ops Engineer, Cognitive Architect, Model Governance Owner, Business Process Owner.' },
          { i: 'file-check-2', t: 'Documentación regulator-ready', d: 'Toda la evidencia lista para auditorías internas y externas (SR 11-7, DORA, sectoriales).' },
        ].map((c, i) => (
          <SlideIn key={c.t} direction="up" delay={i * 60}>
            <div style={{
              padding: '24px 22px', border: '1px solid #E4EBF3', background: '#FFF',
              minHeight: 180, display: 'flex', flexDirection: 'column', gap: 12,
              transition: 'border-color 220ms',
            }}
            onMouseEnter={(e) => e.currentTarget.style.borderColor = '#F4024C'}
            onMouseLeave={(e) => e.currentTarget.style.borderColor = '#E4EBF3'}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <i data-lucide={c.i} width="22" height="22" style={{ color: '#1E1F26', strokeWidth: 1.5 }}/>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#F4024C' }}>0{i+1}</span>
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, letterSpacing: '-0.01em', color: '#000', margin: 0, lineHeight: 1.2 }}>{c.t}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.55, color: '#52557A', margin: 0 }}>{c.d}</p>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// ROLES INTERNOS
const TransRoles = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="05" label="Roles internos que formamos" dark color="#F4024C"/></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: '#FFF', maxWidth: 900 }}>
          Cuatro perfiles certificados dentro de tu empresa.
        </h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
        {[
          { r: 'Cognitive Ops Engineer',    dur: '6 semanas',  d: 'Opera el runtime, gestiona incidentes, escala autonomía por caso. 60h formación + práctica sobre casos reales.', focus: 'Runtime · operación · SLAs' },
          { r: 'Cognitive Architect',       dur: '12 semanas', d: 'Diseña casos nuevos, entrena SDMs adicionales, integra sistemas. 120h + mentoría 1:1 con arquitecto senior OMNIX.', focus: 'Arquitectura · nuevos SDMs' },
          { r: 'Model Governance Owner',    dur: '8 semanas',  d: 'Define políticas de model risk, approval flows, compliance y auditoría. Formación regulatoria + práctica.', focus: 'Governance · risk · compliance' },
          { r: 'Business Process Owner',    dur: '4 semanas',  d: 'Traduce KPIs de negocio en criterios operativos del SDM. Puente entre operación y cognición.', focus: 'KPIs · policy design' },
        ].map((r, i) => (
          <SlideIn key={r.r} direction={i % 2 === 0 ? 'right' : 'left'} delay={i * 100}>
            <MagneticHover strength={4}>
              <div style={{
                padding: '32px 28px', border: '1.5px solid #2E3140', background: '#0A0B10',
                minHeight: 240, display: 'flex', flexDirection: 'column', gap: 14,
                transition: 'border-color 220ms',
              }}
              onMouseEnter={(e) => e.currentTarget.style.borderColor = '#F4024C'}
              onMouseLeave={(e) => e.currentTarget.style.borderColor = '#2E3140'}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <Badge tone="fuxia">{r.dur}</Badge>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#96A3B5' }}>PROGRAMA CERTIFICADO</span>
                </div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, letterSpacing: '-0.015em', color: '#FFF', margin: 0, lineHeight: 1.15 }}>{r.r}</h3>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.55, color: '#96A3B5', margin: 0, flex: 1 }}>{r.d}</p>
                <div style={{ paddingTop: 14, borderTop: '1px solid #2E3140', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: '#F4024C' }}>
                  {r.focus}
                </div>
              </div>
            </MagneticHover>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// WHAT OMNIX KEEPS vs WHAT CLIENT OWNS
const TransBoundary = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="06" label="La línea del contrato"/></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 }}>
          Qué mantiene OMNIX · qué controla el cliente.
        </h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1.5px solid #1E1F26' }}>
        <div style={{ padding: '40px 36px', borderRight: '1px solid #E4EBF3', background: '#FAFBFD' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 20 }}>OMNIX MANTIENE · PLATAFORMA</div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, letterSpacing: '-0.015em', color: '#000', margin: '0 0 24px' }}>
            El motor sigue evolucionando.
          </h3>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              'Releases del pipeline (Ingest / Core / Runtime / Cortex)',
              'Parches de seguridad y CVEs',
              'Nuevos adapters certificados',
              'Actualizaciones de arquitectura y performance',
              'Soporte 24/7 sobre la plataforma base',
              'Roadmap común con clientes enterprise',
            ].map((f) => (
              <li key={f} style={{ display: 'flex', gap: 12, fontFamily: 'var(--font-body)', fontSize: 15, color: '#1E1F26', lineHeight: 1.5 }}>
                <i data-lucide="package" width="16" height="16" style={{ color: '#F4024C', strokeWidth: 1.5, marginTop: 3, flexShrink: 0 }}/>
                {f}
              </li>
            ))}
          </ul>
        </div>
        <div style={{ padding: '40px 36px', background: '#000', color: '#FFF' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 20 }}>CLIENTE CONTROLA · COGNICIÓN</div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, letterSpacing: '-0.015em', color: '#FFF', margin: '0 0 24px' }}>
            La inteligencia es tuya.
          </h3>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              'Los SDMs entrenados sobre tu operación',
              'Los datasets, prompts y feedback experto',
              'Las decisiones ejecutadas y sus logs',
              'La gobernanza y los approval flows',
              'La operación diaria del runtime',
              'La decisión de cuándo (y si) reentrenar o retirar un modelo',
            ].map((f) => (
              <li key={f} style={{ display: 'flex', gap: 12, fontFamily: 'var(--font-body)', fontSize: 15, color: '#FFF', lineHeight: 1.5 }}>
                <i data-lucide="key-round" width="16" height="16" style={{ color: '#F4024C', strokeWidth: 1.5, marginTop: 3, flexShrink: 0 }}/>
                {f}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </Container>
  </section>
);

// OBJECTIONS
const TransObjections = () => {
  const items = [
    { q: '¿Qué pasa si al final del programa nuestro equipo no está listo?',
      a: 'La transferencia final ocurre cuando tu Governance Board — no OMNIX — declara al equipo autónomo. Si necesitas más tiempo, extendemos escalamiento sin cambiar el modelo comercial. No hay handover forzado.' },
    { q: '¿Podemos revertir la transferencia y volver a operación asistida?',
      a: 'Sí. Contrato incluye cláusula de "reversal" opcional a costo transparente. Si el negocio cambia y necesitas volver a operación asistida por OMNIX, se activa en semanas — sin renegociación.' },
    { q: '¿Cómo garantizan que la documentación quede completa y utilizable?',
      a: 'Cada fase tiene entregables de documentación gated: no cerramos fase sin que tu equipo firme aceptación. Al handover final, existe un checklist contractual de 40+ ítems verificables.' },
    { q: '¿Qué diferencia esto de contratar una consultora que "también nos capacita"?',
      a: 'Las consultoras rotan equipos cada 12-18 meses y monetizan la capacitación como recurrente. OMNIX se retira por diseño — nuestro modelo comercial no depende de tenerte enseñando indefinidamente.' },
  ];
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <Reveal><SectionMeta n="07" label="Objeciones legales · procurement"/></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 }}>
            Preguntas que Procurement y Legal siempre hacen.
          </h2>
        </Reveal>
        <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderBottom: (i < items.length - 1) ? '1px solid #E4EBF3' : 'none' }}>
              <button onClick={() => setOpenIdx(openIdx === i ? -1 : i)} style={{
                width: '100%', border: 'none', background: 'transparent', textAlign: 'left', cursor: 'pointer',
                padding: '24px 28px', display: 'grid', gridTemplateColumns: '48px 1fr auto', gap: 20, alignItems: 'center',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.18em', color: '#F4024C' }}>Q · 0{i+1}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, letterSpacing: '-0.015em', color: '#000', lineHeight: 1.3 }}>{it.q}</span>
                <span style={{ color: '#1E1F26', transition: 'transform 280ms', transform: openIdx === i ? 'rotate(45deg)' : 'rotate(0deg)' }}>
                  <i data-lucide="plus" width="20" height="20"></i>
                </span>
              </button>
              <div style={{ maxHeight: openIdx === i ? 260 : 0, overflow: 'hidden', transition: 'max-height 380ms cubic-bezier(0.2,0.7,0.2,1)' }}>
                <div style={{ padding: '0 28px 28px 28px', display: 'grid', gridTemplateColumns: '48px 1fr', gap: 20 }}>
                  <div/>
                  <p style={{ fontFamily: 'var(--font-serif)', fontSize: 17, lineHeight: 1.6, color: '#1E1F26', margin: 0, maxWidth: 900 }}>{it.a}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, {
  TransHeroV2, TransProblemV2, TransContrast, TransPhases,
  TransHandover, TransRoles, TransBoundary, TransObjections,
});