// PRODUCTO — arquitectura completa OMNIX
// StoryBrand 2.0 aplicado · buyer: CTO/CIO/CAIO/COO/Arquitectos/Procurement técnico

const ProductoHero = () => (
  <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 78% 40%, #000 0%, transparent 60%)',
      WebkitMaskImage: 'radial-gradient(ellipse at 78% 40%, #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">PRODUCTO · COGNITIVE OPERATIONS PLATFORM</Eyebrow><Rule width={56}/></Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 84, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#000' }}>
              La arquitectura de la <span style={{ color: '#F4024C' }}>cognición operacional</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 no es un copiloto ni una demo de IA. Es la plataforma operacional que convierte
              tus datos, reglas y procesos en <em>decisiones ejecutadas</em>, auditables, bajo tu
              control. Cuatro capas. Cuatro motores. Cinco niveles de autonomía.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: 'flex', gap: 12 }}>
              <Button variant="primary" icon="arrow-right" href="diagnostico.html">Solicitar arquitectura de referencia</Button>
              <Button variant="ghost" href="arquitectura.html">Ver cómo funciona OMNIX</Button>
            </div>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ display: 'flex', gap: 32, alignItems: 'center', marginTop: 40, flexWrap: 'wrap' }}>
              {[
                { l: 'Capas',    v: '4' },
                { l: 'Motores',  v: '4' },
                { l: 'Autonomía',v: 'N1 → N5' },
                { l: 'Deploy',   v: 'VPC · on-prem · air-gap' },
              ].map((s) => (
                <div key={s.l}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>{s.l}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 15, color: '#1E1F26', fontWeight: 500 }}>{s.v}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
        <Reveal delay={200} y={0}>
          <ProductoHeroDiagram/>
        </Reveal>
      </div>
    </Container>
  </section>
);

// Diagrama hero: torre de 4 capas con motores acoplados
const ProductoHeroDiagram = () => (
  <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>OMNIX · STACK OVERVIEW</span>
      <span style={{ color: '#F4024C', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: '#F4024C' }} className="omnix-blink"/>
        RUNNING
      </span>
    </div>
    <div style={{ padding: 0 }}>
      {[
        { k: 'IMPACT',        v: 'Ver resultados en KPIs de negocio',        c: '#F4024C', engine: 'CORTEX' },
        { k: 'ORCHESTRATION', v: 'Ejecuta decisiones sobre sistemas',        c: '#1E1F26', engine: 'RUNTIME' },
        { k: 'COGNITION',     v: 'SDMs entrenados sobre tu operación',       c: '#F4024C', engine: 'CORE' },
        { k: 'BASE',          v: 'Ingesta desde tu stack existente',         c: '#0050BD', engine: 'INGEST' },
      ].map((L, i) => (
        <div key={L.k} style={{
          padding: '18px 20px',
          borderBottom: (i < 3) ? '1px solid #E4EBF3' : 'none',
          display: 'grid', gridTemplateColumns: '32px 1fr 90px', gap: 16, alignItems: 'center',
          transition: 'background 220ms',
        }}
        onMouseEnter={(e) => e.currentTarget.style.background = '#FFF'}
        onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#96A3B5' }}>0{4 - i}</div>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: L.c, marginBottom: 4 }}>{L.k}</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#1E1F26', lineHeight: 1.35 }}>{L.v}</div>
          </div>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#1E1F26',
            padding: '4px 8px', border: '1px solid #1E1F26', textAlign: 'center', background: '#FFF',
          }}>{L.engine}</div>
        </div>
      ))}
    </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>4 layers · 4 engines</span>
      <span style={{ color: '#F4024C' }}>N1 → N5 autonomy</span>
    </div>
  </div>
);

// STORYBRAND: Problema tripartito
const ProductoProblem = () => (
  <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="Por qué los pilotos de IA no llegan a producción"/></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' }}>
            De observar y recomendar a <span style={{ color: '#F4024C' }}>ejecutar decisiones</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.45, color: '#52557A', margin: 0 }}>
            Un dashboard más no cambia tu operación. Una IA que sólo recomienda tampoco. La diferencia
            competitiva vive donde una plataforma decide y actúa — bajo tu control.
          </p>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1.5px solid #1E1F26' }}>
        {[
          { k: 'EXTERNO', t: 'Tu IA vive donde no debería.',
            d: 'Los pilotos con LLMs públicos y consultoras externas exponen contexto, telemetría y prompts. Cada RFP nueva reinicia el aprendizaje. La cognición nunca se acumula dentro de la empresa.' },
          { k: 'INTERNO', t: 'Tu arquitectura no está diseñada para decidir.',
            d: 'Tienes datos, dashboards y RPA — pero nada que razone bajo tus reglas y ejecute en producción. Cada nuevo caso pide una nueva integración, un nuevo integrador, un nuevo runbook.' },
          { k: 'FILOSÓFICO', t: 'La inteligencia debería ser un activo, no un servicio.',
            d: 'Cuando tu ventaja competitiva depende de un proveedor que sirve a tus competidores, deja de ser tuya. La cognición institucional se construye — no se renta por tokens.' },
        ].map((p, i) => (
          <Reveal key={p.k} delay={i * 120}>
            <div style={{
              padding: '36px 32px', borderRight: (i < 2) ? '1px solid #E4EBF3' : 'none',
              minHeight: 320,
            }}>
              <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>
);

// LAYERS — 4 capas con expansión interactiva
const ProductoLayers = () => {
  const [open, setOpen] = React.useState(0);
  const layers = [
    { n: '01', k: 'BASE', tag: 'INGESTIÓN Y CONTEXTO', t: 'Sobre tu stack existente.',
      d: 'OMNIX se conecta a los sistemas que ya operan tu negocio. No pide reemplazar, no rompe integraciones existentes. La cognición empieza donde ya viven tus datos.',
      bullets: ['Adapters certificados para ERP · CRM · WMS · TMS · SCADA', 'Streaming + batch simultáneos, exactly-once', 'PII / PHI anonimizado en origen', 'Latencia sub-100 ms para telemetría IT/OT'] },
    { n: '02', k: 'COGNICIÓN PRIVADA', tag: 'SDM CORE', t: 'Modelos entrenados sobre tu operación.',
      d: 'La capa donde nace tu inteligencia. Specialized Domain Models entrenados sobre tus datos, reglas y decisiones históricas. Viven en tu VPC, no en una API pública.',
      bullets: ['SDMs < 20B parámetros, ~13 W* de consumo', 'Fine-tuning continuo con feedback operacional', 'Ciclo cognitivo: comprende · aprende · razona · ejecuta · mide · reentrena', 'Cero llamadas a modelos externos'] },
    { n: '03', k: 'ORQUESTACIÓN OPERACIONAL', tag: 'RUNTIME', t: 'Ejecuta lo que otros sólo recomiendan.',
      d: 'La capa que convierte un score en una acción. Runtime auditable que decide, ejecuta y cierra el loop sobre tus sistemas. No un dashboard: una intervención operacional real.',
      bullets: ['Inferencia determinística auditable', 'Cinco niveles de autonomía graduables (N1 → N5)', 'Guardrails, policy-match, quorum de aprobación', 'Rollback en < 5 minutos'] },
    { n: '04', k: 'IMPACTO', tag: 'CORTEX', t: 'Resultados imposibles de ignorar.',
      d: 'La capa donde la cognición se mide contra tus KPIs de negocio — no contra métricas de paper. Deep Think razona sobre múltiples SDMs y produce el plan de acción priorizado.',
      bullets: ['MTTR −65%*, costo por decisión −40%*, precisión +30%*', '75%* de decisiones automatizadas end-to-end', 'Reportería regulator-ready por decisión', 'KPIs mapeados a los indicadores del cliente'] },
  ];
  return (
    <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="02" label="Las cuatro capas"/></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 datos crudos a KPI de negocio.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              Cada capa opera de forma independiente y compone hacia arriba. Puedes empezar por
              cualquiera y escalar. Cada una vive en tu perímetro — no en el nuestro.
            </p>
          </Reveal>
        </div>

        <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
          {layers.map((L, i) => (
            <div key={L.k} style={{ borderBottom: (i < layers.length - 1) ? '1px solid #E4EBF3' : 'none' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', border: 'none', background: 'transparent', textAlign: 'left', cursor: 'pointer',
                padding: '28px 24px', display: 'grid', gridTemplateColumns: '80px 220px 1fr auto',
                alignItems: 'center', gap: 32,
                transition: 'background 200ms',
              }}
              onMouseEnter={(e) => e.currentTarget.style.background = '#FAFBFD'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.18em', color: '#96A3B5' }}>LAYER · {L.n}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.14em', color: '#F4024C' }}>{L.k}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.015em', color: '#000' }}>{L.t}</span>
                <span style={{ color: '#1E1F26', transition: 'transform 280ms', transform: open === i ? 'rotate(45deg)' : 'rotate(0deg)' }}>
                  <i data-lucide="plus" width="20" height="20"></i>
                </span>
              </button>
              <div style={{
                maxHeight: open === i ? 480 : 0, overflow: 'hidden',
                transition: 'max-height 400ms cubic-bezier(0.2,0.7,0.2,1)',
              }}>
                <div style={{
                  padding: '0 24px 32px 24px',
                  display: 'grid', gridTemplateColumns: '80px 220px 1fr', gap: 32,
                }}>
                  <div/>
                  <div>
                    <Badge tone="ghost">{L.tag}</Badge>
                  </div>
                  <div>
                    <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: '#52557A', margin: '0 0 20px', maxWidth: 720 }}>
                      {L.d}
                    </p>
                    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                      {L.bullets.map((b) => (
                        <li key={b} style={{ display: 'flex', gap: 10, fontFamily: 'var(--font-body)', fontSize: 14, color: '#1E1F26', lineHeight: 1.5 }}>
                          <span style={{ color: '#F4024C', fontFamily: 'var(--font-mono)', fontSize: 12 }}>—</span>{b}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};

// ENGINES — 4 motores con links a sub-páginas
const ProductoEngines = () => {
  const engines = [
    { k: 'INGEST',  color: '#0050BD', icon: 'database',   verb: 'CAPTURA',  d: 'Ingesta desde sistemas de negocio, telemetría industrial y fuentes no estructuradas. Normaliza, anonimiza, vectoriza.', href: 'arquitectura-ingest.html' },
    { k: 'CORE',    color: '#F4024C', icon: 'cpu',        verb: 'ENTRENA',  d: 'Fábrica de SDMs propietarios. Fine-tuning continuo, MLOps enterprise, gobernanza integrada al ciclo.',        href: 'arquitectura-core.html' },
    { k: 'RUNTIME', color: '#1E1F26', icon: 'activity',   verb: 'EJECUTA',  d: 'Motor operacional. Inferencia auditable, guardrails, ejecución sobre tus sistemas, cinco niveles de autonomía.', href: 'arquitectura-runtime.html' },
    { k: 'CORTEX',  color: '#B00238', icon: 'git-branch', verb: 'RAZONA',   d: 'Deep Think. Orquesta múltiples SDMs, aplica reglas multi-objetivo, produce planes priorizados y explicables.',  href: 'arquitectura-cortex.html' },
  ];
  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="Los cuatro motores"/></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 }}>
            Cuatro piezas de ingeniería. Un contrato estable entre ellas.
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {engines.map((e, i) => (
            <SlideIn key={e.k} direction="up" delay={i * 100}>
              <MagneticHover strength={4}>
                <a href={e.href} style={{
                  display: 'block', background: '#FFF', border: '1px solid #E4EBF3',
                  padding: '32px 28px', minHeight: 360, textDecoration: 'none', color: '#1E1F26',
                  transition: 'border-color 220ms, background 220ms',
                }}
                onMouseEnter={(el) => { el.currentTarget.style.borderColor = e.color; el.currentTarget.style.background = '#FFF'; }}
                onMouseLeave={(el) => { el.currentTarget.style.borderColor = '#E4EBF3'; }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
                    <i data-lucide={e.icon} width="26" height="26" style={{ strokeWidth: 1.5, color: '#1E1F26' }}/>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5' }}>ENGINE · 0{i+1}</span>
                  </div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: e.color, marginBottom: 8 }}>{e.verb}</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26, letterSpacing: '-0.02em', color: '#000', marginBottom: 16 }}>
                    OMNIX <span style={{ color: e.color }}>{e.k.charAt(0)}{e.k.slice(1).toLowerCase()}</span>
                  </div>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.55, color: '#52557A', margin: 0, marginBottom: 20 }}>
                    {e.d}
                  </p>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: e.color, textTransform: 'uppercase', paddingTop: 14, borderTop: '1px solid #E4EBF3', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    Ver motor
                    <i data-lucide="arrow-right" width="14" height="14" style={{ strokeWidth: 1.5 }}/>
                  </div>
                </a>
              </MagneticHover>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

// AUTONOMY — timeline N1→N5 con toggle
const ProductoAutonomy = () => {
  const [lvl, setLvl] = React.useState(3);
  const levels = [
    { n: 'N1', t: 'Monitoreo',          role: 'HUMAN DECIDES · HUMAN ACTS',    d: 'La cognición observa, correlaciona alertas y prioriza. Humano decide y ejecuta.' },
    { n: 'N2', t: 'Recomendación',      role: 'AI SUGGESTS · HUMAN ACTS',      d: 'La cognición propone acción con score y explicación. Humano valida y ejecuta.' },
    { n: 'N3', t: 'Ejecución asistida', role: 'AI ACTS · HUMAN SUPERVISES',    d: 'La cognición ejecuta rutinarias y escala excepciones. Humano cierra loops.' },
    { n: 'N4', t: 'Ejecución autónoma', role: 'AI DECIDES · AI ACTS',          d: 'La cognición decide y ejecuta bajo guardrails. Humano audita a posteriori.' },
    { n: 'N5', t: 'Decisión crítica',    role: 'AI · HUMAN-IN-THE-LOOP',       d: 'Autonomía sobre casos críticos con human-in-the-loop obligatorio para gates definidos.' },
  ];
  return (
    <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="04" label="Niveles de autonomía operacional" 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 24px', color: '#FFF', maxWidth: 900 }}>
            Cinco niveles configurables por caso — no por sistema.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.5, color: '#96A3B5', margin: '0 0 56px', maxWidth: 720 }}>
            Cada caso empieza donde tenga sentido y sube cuando tu gobernanza está lista. Selecciona
            un nivel para ver quién decide y quién actúa.
          </p>
        </Reveal>

        <div style={{ display: 'flex', gap: 8, marginBottom: 24, flexWrap: 'wrap' }}>
          {levels.map((L, i) => (
            <button key={L.n} onClick={() => setLvl(i)} style={{
              padding: '14px 24px', border: '1.5px solid',
              borderColor: lvl === i ? '#F4024C' : '#2E3140',
              background: lvl === i ? '#F4024C' : 'transparent',
              color: lvl === i ? '#FFF' : '#96A3B5',
              fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.14em', fontWeight: 600,
              cursor: 'pointer', transition: 'all 220ms', minWidth: 84,
            }}>{L.n}</button>
          ))}
        </div>

        <div key={lvl} style={{
          border: '1.5px solid #2E3140', background: '#0A0B10', padding: 40,
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48,
          animation: 'omnix-slide-in 380ms cubic-bezier(0.2,0.7,0.2,1)',
        }}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 12 }}>
              {levels[lvl].role}
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 44, letterSpacing: '-0.025em', color: '#FFF', margin: '0 0 16px' }}>
              {levels[lvl].n} · <span style={{ color: '#F4024C' }}>{levels[lvl].t}</span>
            </h3>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: '#96A3B5', margin: 0 }}>
              {levels[lvl].d}
            </p>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 16 }}>Nivel acumulado hasta N{lvl+1}</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              {levels.map((L, i) => (
                <div key={L.n} style={{
                  padding: '14px 18px',
                  background: i <= lvl ? (i === lvl ? '#F4024C' : '#1E1F26') : 'transparent',
                  color: i <= lvl ? '#FFF' : '#96A3B5',
                  border: i <= lvl ? '1.5px solid transparent' : '1px dashed #2E3140',
                  fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em',
                  transition: 'all 320ms',
                }}>
                  <div style={{ opacity: 0.7, fontSize: 9, marginBottom: 4 }}>{L.n}</div>
                  <div style={{ fontSize: 12 }}>{i <= lvl ? '✓' : '·'} {L.t}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

// OBSERVE vs RECOMMEND vs EXECUTE — diferenciación key
const ProductoDifference = () => {
  const cols = [
    { k: 'OBSERVAR', tag: 'DASHBOARDS', c: '#96A3B5', t: 'Ves lo que pasa.',
      d: 'Un tablero refresca cada N segundos. Un analista lo interpreta. La operación reacciona horas después. La ventana crítica ya pasó.',
      items: ['Alertas', 'Tableros', 'Reports'], v: false },
    { k: 'RECOMENDAR', tag: 'COPILOTOS · LLMs', c: '#B8860B', t: 'Sabes qué hacer.',
      d: 'Un LLM sugiere. Un humano decide. Un humano ejecuta. La cognición no vive en producción — vive en la ventana del chat.',
      items: ['Sugerencias', 'Chat', 'Scores'], v: false },
    { k: 'EJECUTAR', tag: 'OMNIX · COGNICIÓN', c: '#F4024C', t: 'La operación decide y actúa.',
      d: 'OMNIX razona bajo tus políticas, decide con guardrails y ejecuta sobre tus sistemas. Con logs por decisión y rollback. La cognición vive en producción — no en la interfaz.',
      items: ['Decisión', 'Acción', 'Auditoría'], v: true },
  ];
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="05" label="Observar · recomendar · ejecutar"/></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 }}>
            La mayoría de plataformas de IA se detienen en los dos primeros.
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1.5px solid #1E1F26' }}>
          {cols.map((c, i) => (
            <SlideIn key={c.k} direction="up" delay={i * 120}>
              <div style={{
                padding: '36px 32px',
                borderRight: (i < 2) ? '1px solid #E4EBF3' : 'none',
                background: c.v ? '#000' : '#FFF',
                color: c.v ? '#FFF' : '#1E1F26',
                minHeight: 380, display: 'flex', flexDirection: 'column', gap: 16, position: 'relative',
              }}>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em',
                  color: c.c, marginBottom: 4,
                }}>{c.tag}</div>
                <div style={{
                  fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 32, letterSpacing: '-0.025em',
                  color: c.v ? '#FFF' : '#1E1F26', lineHeight: 1,
                }}>{c.k}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.015em', color: c.v ? '#FFF' : '#1E1F26', lineHeight: 1.2 }}>
                  {c.t}
                </div>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: c.v ? '#96A3B5' : '#52557A', margin: 0, flex: 1 }}>
                  {c.d}
                </p>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', paddingTop: 16, borderTop: c.v ? '1px solid #2E3140' : '1px solid #E4EBF3' }}>
                  {c.items.map((it) => (
                    <span key={it} style={{
                      fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em',
                      padding: '4px 10px',
                      border: `1px solid ${c.v ? c.c : c.c}`,
                      color: c.c,
                    }}>{it}</span>
                  ))}
                </div>
              </div>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

// INTEGRATIONS — pestañas por tipo
const ProductoIntegrations = () => {
  const [tab, setTab] = React.useState(0);
  const tabs = [
    { l: 'Business', items: [
      { n: 'SAP',        c: 'ERP'   }, { n: 'Oracle',     c: 'ERP'   },
      { n: 'Salesforce', c: 'CRM'   }, { n: 'ServiceNow', c: 'ITSM'  },
      { n: 'Workday',    c: 'HCM'   }, { n: 'NetSuite',   c: 'ERP'   },
    ]},
    { l: 'Data · Cloud', items: [
      { n: 'Databricks', c: 'Lake'  }, { n: 'Snowflake',  c: 'DWH'   },
      { n: 'BigQuery',   c: 'DWH'   }, { n: 'AWS S3',     c: 'Store' },
      { n: 'Azure DL',   c: 'Store' }, { n: 'Kafka',      c: 'Stream'},
    ]},
    { l: 'Industrial', items: [
      { n: 'SCADA',      c: 'OT'    }, { n: 'MES',        c: 'OT'    },
      { n: 'OSIsoft PI', c: 'OT'    }, { n: 'Kepware',    c: 'OPC'   },
      { n: 'Azure IoT',  c: 'IoT'   }, { n: 'Ignition',   c: 'OT'    },
    ]},
    { l: 'Ops · Retail', items: [
      { n: 'WMS',        c: 'Logi'  }, { n: 'TMS',        c: 'Logi'  },
      { n: 'OMS',        c: 'Retail'}, { n: 'POS',        c: 'Retail'},
      { n: 'Shopify',    c: 'Ecom'  }, { n: 'Manhattan',  c: 'Logi'  },
    ]},
  ];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 48, flexWrap: 'wrap', gap: 20 }}>
          <div>
            <Reveal><SectionMeta n="06" label="Integraciones"/></Reveal>
            <Reveal delay={80}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: 0, color: '#000', maxWidth: 720 }}>
                Sobre tu stack, no contra él.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={140}>
            <SegmentedTabs tabs={tabs} active={tab} onChange={setTab}/>
          </Reveal>
        </div>

        <div key={tab} style={{
          display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12,
          animation: 'omnix-slide-in 320ms cubic-bezier(0.2,0.7,0.2,1)',
        }}>
          {tabs[tab].items.map((it) => (
            <MagneticHover key={it.n} strength={3}>
              <div style={{
                padding: '20px 18px', background: '#FFF', border: '1px solid #E4EBF3',
                display: 'flex', flexDirection: 'column', gap: 8, minHeight: 100,
                transition: 'border-color 220ms',
              }}
              onMouseEnter={(e) => e.currentTarget.style.borderColor = '#1E1F26'}
              onMouseLeave={(e) => e.currentTarget.style.borderColor = '#E4EBF3'}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase' }}>{it.c}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, letterSpacing: '-0.005em', color: '#000' }}>{it.n}</div>
                <div style={{ marginTop: 'auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#0F5132' }}>CERTIFIED</span>
                  <i data-lucide="check" width="12" height="12" style={{ color: '#0F5132', strokeWidth: 2 }}/>
                </div>
              </div>
            </MagneticHover>
          ))}
        </div>
        <div style={{ marginTop: 32, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', color: '#52557A' }}>
          65+ adapters certificados · SDK abierto para conectores custom · APIs REST y gRPC de OMNIX
        </div>
      </Container>
    </section>
  );
};

// SECURITY TEASER (link a Seguridad)
const ProductoSecurityTeaser = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'center' }}>
        <div>
          <Reveal><SectionMeta n="07" label="Seguridad · resumen"/></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: '#000' }}>
              Todo el pipeline vive dentro de <span style={{ color: '#0050BD' }}>tu perímetro</span>.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: '0 0 32px', maxWidth: 500 }}>
              VPC privada, on-premise o air-gapped. Sin llamadas a APIs públicas. PII/PHI anonimizados
              en origen. Logs inmutables por decisión. Governance con approval flows y rollback.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <Button variant="ghost" icon="arrow-right" href="seguridad.html">Ver seguridad y gobernanza completa</Button>
          </Reveal>
        </div>
        <Reveal delay={200} y={0}>
          <div style={{ border: '1.5px solid #1E1F26', background: '#FAFBFD' }}>
            <div style={{
              padding: '14px 20px', borderBottom: '1.5px solid #1E1F26',
              fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#52557A',
            }}>
              SECURITY MATRIX · SUMMARY
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
              {[
                { l: 'Modelo vive en',     v: 'Tu VPC / on-prem' },
                { l: 'Encriptación',       v: 'AES-256 · TLS 1.3' },
                { l: 'PII / PHI',          v: 'Masked en origen' },
                { l: 'Logs',               v: 'WORM · 10 años' },
                { l: 'Rollback',           v: '< 5 min' },
                { l: 'Compliance',         v: 'GDPR · LGPD · HIPAA' },
                { l: 'Certifications',     v: 'SOC 2 · ISO 27001*' },
                { l: 'Deploy modes',       v: 'VPC · on-prem · air-gap' },
              ].map((r, i) => (
                <div key={r.l} style={{
                  padding: '16px 18px',
                  borderRight: (i % 2 === 0) ? '1px solid #E4EBF3' : 'none',
                  borderBottom: (i < 6) ? '1px solid #E4EBF3' : 'none',
                }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>{r.l}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: '#1E1F26', fontWeight: 500 }}>{r.v}</div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

// OBJECTIONS — 4 objeciones ejecutivas
const ProductoObjections = () => {
  const items = [
    { q: '¿En qué se diferencia OMNIX de comprar un LLM enterprise con RAG sobre nuestros datos?',
      a: 'Un LLM enterprise sigue viviendo en la infra del proveedor y responde con corpus web. OMNIX entrena SDMs propietarios en tu VPC, razona con tus políticas y ejecuta sobre tus sistemas. La cognición se acumula dentro de la empresa, no en un endpoint compartido.' },
    { q: '¿Cuánto tiempo desde firma hasta primera decisión en producción?',
      a: '8 – 12 semanas para el primer caso con SDM entrenado, integrado y operando en N3+. Diagnóstico previo de 2 – 3 semanas. Escalamiento a 5+ casos vivos entre 3 y 6 meses. ROI comprobado a los 6 meses sobre base 600M+ transacciones procesadas.' },
    { q: '¿Cómo se compara el costo total contra nuestro stack actual de IA + consultorías?',
      a: 'Los SDMs (< 20B parámetros, ~13W) reducen el costo por inferencia hasta 30× frente a un LLM generalista. El ciclo cognitivo baja el costo marginal con cada iteración. Y la transferencia progresiva reduce el gasto en consultoría externa después del año 1.' },
    { q: '¿Puede OMNIX operar sobre nuestro data lake y ERP sin migrarlos?',
      a: 'Sí. 65+ adapters certificados (SAP, Oracle, Salesforce, ServiceNow, Databricks, Snowflake, SCADA, WMS, TMS) permiten operar sin migración. Streaming + batch simultáneos. Latencia sub-100 ms para telemetría IT/OT.' },
  ];
  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="08" label="Objeciones del comité técnico"/></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 escritas antes de que las hagan.
          </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, {
  ProductoHero, ProductoProblem, ProductoLayers, ProductoEngines,
  ProductoAutonomy, ProductoDifference, ProductoIntegrations,
  ProductoSecurityTeaser, ProductoObjections,
});
