// ARQUITECTURA · OVERVIEW
// Pipeline animado horizontal con 4 motores clicables.
// Cada motor es un panel que expande al hover/click con su firma visual.

const ArchHero = () => (
  <section style={{
    background: '#FFFFFF', paddingTop: 96, paddingBottom: 88,
    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 50% 60%, #000 0%, transparent 70%)',
      WebkitMaskImage: 'radial-gradient(ellipse at 50% 60%, #000 0%, transparent 70%)',
    }}/>
    <Container>
      <div style={{ position: 'relative', maxWidth: 1000 }}>
        <Reveal><Eyebrow color="#F4024C">ARQUITECTURA · COGNITIVE OPERATIONS PLATFORM</Eyebrow><Rule width={56}/></Reveal>
        <Reveal delay={80}>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 88, lineHeight: 0.96, letterSpacing: '-0.03em', margin: '0 0 28px', color: '#000' }}>
            Cuatro motores.<br/>Un mismo <span style={{ color: '#F4024C' }}>runtime cognitivo</span>.
          </h1>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 21, lineHeight: 1.5, color: '#52557A', maxWidth: 780, margin: '0 0 32px' }}>
            De data cruda a decisiones ejecutadas. OMNIX se compone de cuatro motores especializados
            que operan como un flujo cognitivo continuo: desde la ingesta hasta el razonamiento auditable,
            todo dentro de tu perímetro.
          </p>
        </Reveal>
        <Reveal delay={200}>
          <div style={{ display: 'flex', gap: 12 }}>
            <Button variant="primary" icon="arrow-right" href="diagnostico.html">Solicitar Cognitive Assessment</Button>
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

// Pipeline horizontal interactivo — la joya de esta sección
const ArchPipeline = () => {
  const [active, setActive] = React.useState(0);
  const engines = [
    {
      k: 'INGEST',
      href: 'arquitectura-ingest.html',
      color: '#0050BD',
      verb: 'Captura',
      title: 'Data, telemetría y contexto operacional desde cualquier fuente autorizada.',
      role: 'Entrada del runtime',
      inputs: [
        'Sistemas empresariales',
        'Datos operacionales',
        'Telemetría · sensores',
        'APIs · eventos · logs',
        'Documentos · tickets · voz',
        'Fuentes externas aprobadas',
      ],
      outputs: 'Contexto normalizado',
      icon: 'database',
      metrics: { m1: '< 100ms', l1: 'Latencia captura', m2: '99.98%', l2: 'Uptime pipeline' },
    },
    {
      k: 'CORE',
      href: 'arquitectura-core.html',
      color: '#F4024C',
      verb: 'Entrena',
      title: 'SDMs propietarios sobre tus datos.',
      role: 'Fábrica de cognición',
      inputs: ['Vectores', 'Reglas de negocio', 'Feedback experto', 'Casos históricos'],
      outputs: 'SDM versionado',
      icon: 'cpu',
      metrics: { m1: '< 20B', l1: 'Parámetros por SDM', m2: '~13W', l2: 'Consumo inferencia' },
    },
    {
      k: 'RUNTIME',
      href: 'arquitectura-runtime.html',
      color: '#1E1F26',
      verb: 'Ejecuta',
      title: 'Inferencia segura, auditable, con acción.',
      role: 'Motor operacional',
      inputs: ['SDMs entrenados', 'Eventos live', 'Contexto operacional'],
      outputs: 'Decisión + acción',
      icon: 'activity',
      metrics: { m1: '75%', l1: 'Decisiones automáticas', m2: '100%', l2: 'Trazabilidad' },
    },
    {
      k: 'CORTEX',
      href: 'arquitectura-cortex.html',
      color: '#B00238',
      verb: 'Razona',
      title: 'Deep Think · orquesta múltiples SDMs.',
      role: 'Capa cognitiva superior',
      inputs: ['N SDMs concurrentes', 'Reglas multi-objetivo', 'Restricciones', 'KPI del cliente'],
      outputs: 'Plan de acción priorizado',
      icon: 'git-branch',
      metrics: { m1: '+30%', l1: 'Precisión', m2: 'N1→N5', l2: 'Autonomía graduable' },
    },
  ];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginBottom: 56, alignItems: 'end' }}>
          <div>
            <Reveal><SectionMeta n="01" label="El pipeline cognitivo"/></Reveal>
            <Reveal delay={80}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1.03, letterSpacing: '-0.025em', margin: 0, color: '#000' }}>
                De data a decisión. Sin pasar por afuera.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              OMNIX organiza cuatro motores especializados en un mismo runtime cognitivo. Cada motor procesa
              una parte del flujo —ingesta, contexto, razonamiento y ejecución— bajo contratos estables y
              dentro de tu entorno privado.
            </p>
          </Reveal>
        </div>

        {/* Diagrama SVG del pipeline con motores clicables */}
        <PipelineDiagram active={active} setActive={setActive} engines={engines}/>

        {/* Panel de detalle del motor activo */}
        <ActivePanel engine={engines[active]}/>
      </Container>
    </section>
  );
};

// SVG diagram del pipeline horizontal
const PipelineDiagram = ({ active, setActive, engines }) => {
  const W = 1216, H = 380;
  const stationX = [140, 420, 700, 980];
  const stationY = H / 2;
  return (
    <div style={{
      border: '1.5px solid #1E1F26', background: '#FFFFFF', marginBottom: 32,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Header */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '14px 24px', borderBottom: '1.5px solid #1E1F26',
        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#52557A',
      }}>
        <span>OMNIX · PIPELINE ARCHITECTURE · CLICK ANY ENGINE</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"/>
          LIVE FLOW
        </span>
      </div>
      <svg viewBox={`0 0 ${W} ${H}`} style={{ display: 'block', width: '100%', height: 'auto', background: '#FAFBFD' }}>
        <defs>
          <marker id="pl-arrow" viewBox="0 0 8 8" refX="6" refY="4" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M0,0 L8,4 L0,8" fill="none" stroke="#1E1F26" strokeWidth="1.5"/>
          </marker>
        </defs>
        {/* Grid sutil */}
        <g stroke="#E4EBF3" strokeWidth="0.5">
          {Array.from({length: 25}).map((_, i) => <line key={`v${i}`} x1={i*50} y1="0" x2={i*50} y2={H}/>)}
          {Array.from({length: 8}).map((_, i) => <line key={`h${i}`} x1="0" y1={i*50} x2={W} y2={i*50}/>)}
        </g>

        {/* Sources (izquierda) */}
        <g>
          <text x="30" y="30" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill="#96A3B5">SOURCES</text>
          {['SAP', 'SCADA', 'CRM', 'WMS'].map((s, i) => (
            <g key={s} transform={`translate(30, ${100 + i * 50})`}>
              <rect width="60" height="24" y="-12" fill="#FFF" stroke="#96A3B5" strokeWidth="1"/>
              <text x="30" y="4" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" fill="#1E1F26">{s}</text>
            </g>
          ))}
        </g>

        {/* Trazos de fuentes → primera estación */}
        {[100, 150, 200, 250].map((y, i) => (
          <FlowPath key={`s${i}`}
            d={`M 90 ${y} L ${(90 + stationX[0])/2} ${y} L ${(90 + stationX[0])/2} ${stationY} L ${stationX[0] - 42} ${stationY}`}
            stroke="#96A3B5" strokeWidth={0.75} particleColor="#0050BD" particleSize={2.5} duration={2 + i * 0.4}
          />
        ))}

        {/* Trazos entre estaciones */}
        {stationX.slice(0, -1).map((x, i) => (
          <FlowPath key={`t${i}`}
            d={`M ${x + 42} ${stationY} L ${stationX[i+1] - 42} ${stationY}`}
            stroke={engines[i].color} strokeWidth={1.5}
            particleColor={engines[i].color} particleSize={3.5}
            duration={2.2} pulseWidth
          />
        ))}

        {/* Estaciones (4 motores clickables) */}
        {engines.map((e, i) => {
          const isActive = active === i;
          return (
            <g key={e.k}
              transform={`translate(${stationX[i]}, ${stationY})`}
              style={{ cursor: 'pointer' }}
              onClick={() => setActive(i)}
            >
              {/* Halo pulse activo */}
              {isActive && (
                <>
                  <circle r="60" fill="none" stroke={e.color} strokeWidth="1" opacity="0.4">
                    <animate attributeName="r" from="42" to="70" dur="1.6s" repeatCount="indefinite"/>
                    <animate attributeName="opacity" from="0.4" to="0" dur="1.6s" repeatCount="indefinite"/>
                  </circle>
                  <circle r="52" fill="none" stroke={e.color} strokeWidth="1" opacity="0.2"/>
                </>
              )}
              {/* Node square */}
              <rect x="-42" y="-42" width="84" height="84"
                    fill={isActive ? e.color : '#FFF'}
                    stroke={isActive ? e.color : '#1E1F26'}
                    strokeWidth={isActive ? 2 : 1.5}
                    style={{ transition: 'all 300ms cubic-bezier(0.2,0.7,0.2,1)' }}/>
              {/* Order number */}
              <text y="-52" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill="#96A3B5">
                0{i+1} · ENGINE
              </text>
              {/* Engine label */}
              <text y="-8" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="800" fontSize="14"
                    fill={isActive ? '#FFF' : '#000'} letterSpacing="-0.005em">OMNIX</text>
              <text y="14" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="18"
                    fill={isActive ? '#FFF' : e.color} letterSpacing="-0.015em">{e.k}</text>
              {/* Verb */}
              <text y="62" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em"
                    fill={isActive ? e.color : '#52557A'}>
                {e.verb.toUpperCase()}
              </text>
            </g>
          );
        })}

        {/* Salida (derecha) */}
        <g transform={`translate(${W - 90}, ${stationY})`}>
          <polygon points="-14,0 0,-14 14,0 0,14" fill="#F4024C" stroke="#F4024C" strokeWidth="1.5"/>
          <text x="0" y="34" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill="#F4024C">
            ACTION
          </text>
          <text x="0" y="48" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#52557A">
            AUDIT · EXECUTE
          </text>
        </g>
        {/* Trazo cortex → action */}
        <FlowPath d={`M ${stationX[3] + 42} ${stationY} L ${W - 108} ${stationY}`}
                  stroke="#F4024C" strokeWidth={1.5} particleColor="#F4024C" particleSize={3.5} duration={1.6}/>
      </svg>
      {/* Footer stats */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        borderTop: '1.5px solid #1E1F26',
        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
      }}>
        {engines.map((e, i) => (
          <button key={e.k} onClick={() => setActive(i)} style={{
            padding: '14px 20px', border: 'none', textAlign: 'left', cursor: 'pointer',
            background: active === i ? '#000' : '#FFF',
            color: active === i ? '#FFF' : '#52557A',
            borderRight: (i < 3) ? '1px solid #E4EBF3' : 'none',
            transition: 'all 220ms',
          }}>
            <div style={{ fontSize: 9, color: active === i ? e.color : '#96A3B5', marginBottom: 4 }}>ENGINE 0{i+1}</div>
            <div style={{ fontSize: 12, letterSpacing: '0.14em', fontWeight: 500 }}>OMNIX {e.k.charAt(0)}{e.k.slice(1).toLowerCase()}</div>
          </button>
        ))}
      </div>
    </div>
  );
};

// Panel de detalle del motor activo (aparece bajo el pipeline)
const ActivePanel = ({ engine }) => {
  const [prev, setPrev] = React.useState(engine);
  const [key, setKey] = React.useState(0);
  React.useEffect(() => {
    if (engine.k !== prev.k) {
      setPrev(engine);
      setKey((k) => k + 1);
    }
  }, [engine.k]);
  return (
    <div key={key} style={{
      border: '1px solid #E4EBF3', background: '#FFF', padding: 40,
      display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 48,
      animation: 'omnix-panel-in 400ms cubic-bezier(0.2,0.7,0.2,1)',
    }}>
      <style>{`@keyframes omnix-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }`}</style>
      <div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: engine.color, marginBottom: 12 }}>
          {engine.role.toUpperCase()}
        </div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 40, letterSpacing: '-0.025em', color: '#000', margin: '0 0 12px', lineHeight: 1.05 }}>
          OMNIX <span style={{ color: engine.color }}>{engine.k.charAt(0)}{engine.k.slice(1).toLowerCase()}</span>
        </h3>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.015em', color: '#000', marginBottom: 24, lineHeight: 1.2 }}>
          {engine.k === 'CORE' ? `${engine.verb} ${engine.title}` : `${engine.verb}: ${engine.title}`}
        </div>
        <Button variant="ghost" icon="arrow-right" href={engine.href}>Explorar {engine.k.charAt(0)}{engine.k.slice(1).toLowerCase()}</Button>
      </div>

      <div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, marginBottom: 32 }}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 12 }}>
              INPUTS
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {engine.inputs.map((it) => (
                <li key={it} style={{ display: 'flex', gap: 10, fontFamily: 'var(--font-mono)', fontSize: 13, color: '#1E1F26' }}>
                  <span style={{ color: engine.color }}>→</span>{it}
                </li>
              ))}
            </ul>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 12 }}>
              OUTPUT
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.015em', color: engine.color, marginBottom: 8 }}>
              {engine.outputs}
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#52557A', letterSpacing: '0.06em' }}>
              Contrato estable · versionado · auditable
            </div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, borderTop: '1px solid #E4EBF3', paddingTop: 20 }}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 6 }}>
              {engine.metrics.l1}
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 32, color: engine.color, letterSpacing: '-0.025em', lineHeight: 1 }}>
              {engine.metrics.m1}<ValidateMark/>
            </div>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 6 }}>
              {engine.metrics.l2}
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 32, color: '#000', letterSpacing: '-0.025em', lineHeight: 1 }}>
              {engine.metrics.m2}<ValidateMark/>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const ArchProblem = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="02" label="Por qué esta arquitectura, no otra"/></Reveal>
      <Reveal delay={80}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 72px', color: '#000', maxWidth: 900 }}>
          Los pilotos de IA no fallan por falta de modelos. Fallan por <span style={{ color: '#F4024C' }}>falta de arquitectura operacional</span>.
        </h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1.5px solid #1E1F26' }}>
        {[
          { k: 'PROBLEMA EXTERNO', t: 'Tu IA vive donde no debería.',      d: 'Tus prompts entrenan modelos ajenos. Tu telemetría cruza fronteras. Tu contexto se pierde entre APIs públicas y consultoras rotativas. La cognición nunca se acumula dentro de tu empresa.' },
          { k: 'PROBLEMA INTERNO', t: 'Tu equipo no puede escalar decisiones.', d: 'Cada nuevo caso requiere un nuevo piloto, un nuevo integrador, una nueva RFP. Sin arquitectura común, cada solución muere aislada. El costo por decisión sube en lugar de bajar.' },
          { k: 'PROBLEMA FILOSÓFICO', t: 'La inteligencia debería ser un activo, no un servicio.', d: 'Cuando la ventaja competitiva depende de un proveedor que también sirve a tus competidores, la ventaja no es tuya. La cognición institucional se construye — no se renta.' },
        ].map((c, i) => (
          <Reveal key={c.k} delay={i * 120}>
            <div style={{
              padding: '36px 32px', borderRight: (i < 2) ? '1px solid #E4EBF3' : 'none',
              minHeight: 300,
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 20 }}>
                {c.k}
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, letterSpacing: '-0.015em', color: '#000', margin: '0 0 16px', lineHeight: 1.2 }}>
                {c.t}
              </h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: '#52557A', margin: 0 }}>
                {c.d}
              </p>
            </div>
          </Reveal>
        ))}
      </div>
    </Container>
  </section>
);

const ArchGuarantees = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="03" label="Garantías de arquitectura" dark color="#F4024C"/></Reveal>
      <Reveal delay={80}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 56px', color: '#FFF', maxWidth: 900 }}>
          Cuatro garantías. Escritas antes del contrato.
        </h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
        {[
          { i: 'shield', t: 'Sin dependencias externas.',       d: 'Todo el pipeline corre dentro de tu perímetro. Modelo, inferencia, logs, orquestación. Cero llamadas a APIs públicas de LLMs. Cero riesgo de leak vía prompt.' },
          { i: 'file-search', t: 'Razonamiento determinístico auditable.', d: 'Cada decisión queda con inputs, contexto, versión de SDM, política aplicada y output. Reproducible ante cualquier auditoría regulatoria o interna.' },
          { i: 'refresh-ccw', t: 'Transferencia progresiva.',       d: 'Desde la primera fase, tu equipo participa. Al final del programa, OMNIX se retira operacionalmente y tu equipo controla runtime, entrenamiento y gobernanza.' },
          { i: 'gauge', t: 'Costo por decisión que baja.',           d: 'SDMs de < 20B parámetros a ~13W. Hasta 30× menor costo por inferencia frente a un LLM generalista. La eficiencia crece con cada iteración del ciclo cognitivo.' },
        ].map((c, i) => (
          <Reveal key={c.t} delay={i * 100}>
            <MagneticHover strength={4}>
              <div style={{
                border: '1.5px solid #2E3140', padding: '32px 28px', background: '#0A0B10',
                minHeight: 200, display: 'flex', gap: 24,
                transition: 'border-color 220ms, background 220ms',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#F4024C'; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#2E3140'; }}>
                <div style={{ width: 44, height: 44, border: '1.5px solid #F4024C', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <i data-lucide={c.i} width="22" height="22" style={{ color: '#F4024C', strokeWidth: 1.5 }}/>
                </div>
                <div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.015em', color: '#FFF', margin: '0 0 10px', lineHeight: 1.2 }}>
                    {c.t}
                  </h3>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: '#96A3B5', margin: 0 }}>
                    {c.d}
                  </p>
                </div>
              </div>
            </MagneticHover>
          </Reveal>
        ))}
      </div>
    </Container>
  </section>
);

const ArchObjections = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <Reveal><SectionMeta n="04" label="Objeciones frecuentes del comité"/></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 un board serio hará. Respuestas escritas.
        </h2>
      </Reveal>
      <ObjectionList/>
    </Container>
  </section>
);

const ObjectionList = () => {
  const items = [
    { q: '¿Por qué no simplemente usar un LLM público con RAG sobre nuestros datos?',
      a: 'Porque tus prompts, telemetría y contexto quedan expuestos al proveedor. Y porque un LLM generalista no razona bajo tus reglas — improvisa con corpus web. Un SDM entrenado sobre tu operación decide con tus políticas, en tu VPC, con auditoría por decisión.' },
    { q: '¿Cómo garantizan que la IA no ejecuta acciones no deseadas?',
      a: 'Cinco niveles de autonomía (N1 → N5) configurables por caso. Cada acción crítica requiere policy match, quorum de aprobación configurable y logs inmutables. Rollback en minutos. En N5, human-in-the-loop obligatorio para decisiones críticas.' },
    { q: '¿Qué pasa con nuestro equipo interno? ¿Nos volvemos dependientes?',
      a: 'No. La transferencia de control es parte del contrato — no una promesa comercial. Certificamos a tus ingenieros como Cognitive Ops, Cognitive Architects y Governance Leads. Al cierre, entregamos código, modelos, gobernanza y runbooks. Sin cláusula de reversibilidad.' },
    { q: '¿Cuánto tiempo desde firma hasta primera decisión en producción?',
      a: '8 – 12 semanas para el primer caso productivo, con SDM entrenado, integrado y operando en N3 o superior. Diagnóstico previo de 2 – 3 semanas. Escalamiento a 5+ casos vivos entre 3 y 6 meses.' },
    { q: '¿Cómo se compara el costo total contra nuestro stack actual de IA / consultorías?',
      a: 'ROI comprobado en 6 meses en base 600M+ transacciones procesadas. Costo por decisión hasta 30× menor que un LLM generalista. La eficiencia crece: cada iteración del ciclo cognitivo baja el costo marginal.' },
  ];
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <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: 20, 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>
  );
};

Object.assign(window, { ArchHero, ArchPipeline, ArchProblem, ArchGuarantees, ArchObjections });