// IAs PROPIETARIAS / SDMs v2
// Buyer: CEO / Board / CAIO / CIO / CTO / CDO / CRO
// Mensaje: la próxima ventaja no será tener IA — será tener cognición propia.

const IAsHeroV2 = () => (
  <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 80% 45%, #000 0%, transparent 60%)',
      WebkitMaskImage: 'radial-gradient(ellipse at 80% 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">IAs PROPIETARIAS · SPECIALIZED DOMAIN MODELS</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' }}>
              La inteligencia de tu empresa, entrenada sobre <span style={{ color: '#F4024C' }}>tu operación</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' }}>
              La próxima ventaja competitiva no será tener IA. Será tener <em>cognición propia</em> —
              modelos entrenados sobre tus datos, tus reglas y tu conocimiento experto,
              operando 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">Construir tu primer SDM</Button>
            </div>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ marginTop: 40, padding: '20px 24px', background: '#FAFBFD', border: '1px solid #E4EBF3', display: 'flex', gap: 24, alignItems: 'center' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C' }}>MANIFIESTO</div>
              <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 17, color: '#1E1F26', lineHeight: 1.4 }}>
                La velocidad se compra. La cognición institucional se construye.
              </div>
            </div>
          </Reveal>
        </div>
        <Reveal delay={200} y={0}>
          <SDMOwnershipDiagram/>
        </Reveal>
      </div>
    </Container>
  </section>
);

// Diagrama: SDM propio vs LLM público — dos círculos, uno dentro del perímetro
const SDMOwnershipDiagram = () => (
  <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 TOPOLOGY</span>
      <span style={{ color: '#F4024C' }}>SDM · IN-PERIMETER</span>
    </div>
    <svg viewBox="0 0 560 400" style={{ display: 'block', width: '100%', height: 'auto' }}>
      <g stroke="#E4EBF3" strokeWidth="0.5">
        {Array.from({length: 12}).map((_, i) => <line key={i} x1={i*50} y1="0" x2={i*50} y2="400"/>)}
        {Array.from({length: 9}).map((_, i) => <line key={i} x1="0" y1={i*50} x2="560" y2={i*50}/>)}
      </g>

      {/* Client perimeter */}
      <DrawLine d="M 40 60 L 400 60 L 400 340 L 40 340 Z" stroke="#1E1F26" strokeWidth={1.5} duration={800}/>
      <text x="50" y="80" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill="#96A3B5">CLIENT PERIMETER · YOUR VPC</text>

      {/* SDM inside */}
      <g transform="translate(220, 200)">
        <circle r="85" fill="none" stroke="#F4024C" strokeWidth="1" opacity="0.15"/>
        <circle r="68" fill="none" stroke="#F4024C" strokeWidth="1" opacity="0.3">
          <animate attributeName="r" values="62;72;62" dur="3s" repeatCount="indefinite"/>
        </circle>
        <rect x="-52" y="-52" width="104" height="104" fill="#FFF" stroke="#F4024C" strokeWidth="2"/>
        <text y="-14" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="800" fontSize="14" fill="#000">OMNIX</text>
        <text y="8" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="16" fill="#F4024C">SDM</text>
        <text y="28" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.2em" fill="#52557A">&lt; 20B · ~13W</text>
      </g>

      {/* Data flows around */}
      {['DATOS', 'REGLAS', 'CONTEXTO', 'FEEDBACK'].map((l, i) => {
        const angle = (i / 4) * Math.PI * 2 - Math.PI / 4;
        const x = 220 + Math.cos(angle) * 130;
        const y = 200 + Math.sin(angle) * 90;
        return (
          <g key={l}>
            <rect x={x - 34} y={y - 12} width="68" height="24" fill="#FFF" stroke="#0050BD" strokeWidth="1"/>
            <text x={x} y={y + 4} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#1E1F26">{l}</text>
          </g>
        );
      })}

      {/* External LLM (outside perimeter, ghosted) */}
      <g transform="translate(490, 200)" opacity="0.55">
        <rect x="-40" y="-40" width="80" height="80" fill="#F2F5F9" stroke="#96A3B5" strokeWidth="1" strokeDasharray="4 4"/>
        <text y="-6" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="13" fill="#52557A">PUBLIC</text>
        <text y="10" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="13" fill="#52557A">LLM</text>
        <text y="26" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="8" letterSpacing="0.14em" fill="#96A3B5">NOT YOURS</text>
      </g>
      {/* Barrier line */}
      <line x1="440" y1="60" x2="440" y2="340" stroke="#EA384C" strokeWidth="1.5" strokeDasharray="4 4"/>
      <text x="440" y="360" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#EA384C">NO EGRESS · NO PROMPT LEAK</text>
    </svg>
  </div>
);

// PROBLEMA STORYBRAND
const IAsProblemV2 = () => (
  <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 problema con la IA rentada"/></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' }}>
            Un LLM público sirve a todos. Tu operación necesita algo que sólo sirva a <span style={{ color: '#F4024C' }}>ti</span>.
          </h2>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1.5px solid #1E1F26' }}>
        {[
          { k: 'EXTERNO',    t: 'Tu contexto entrena modelos ajenos.',   d: 'Cada prompt que enviaste está mejorando el modelo que también usan tus competidores. Tu vocabulario, tus reglas, tu telemetría — ninguna es tuya cuando vive en una API pública.' },
          { k: 'INTERNO',    t: 'Tu equipo se cansa de reiniciar.',      d: 'Cada RFP nueva empieza desde cero. Cada consultora reaprende lo mismo. La cognición no se acumula en tu empresa — se acumula en el proveedor que la sirve a tu industria completa.' },
          { k: 'FILOSÓFICO', t: 'La ventaja competitiva debería ser un activo.', d: 'Si la inteligencia con la que decides depende de un contrato de suscripción, tu ventaja también. La velocidad se compra. La cognición institucional se construye.' },
        ].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>
);

// QUÉ ES UN SDM
const IAsWhatIs = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'start' }}>
        <div>
          <Reveal><SectionMeta n="02" label="Qué es un SDM"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 48, lineHeight: 1.05, letterSpacing: '-0.025em', color: '#000', margin: '0 0 20px' }}>
              Un modelo entrenado sobre tu operación real. Nada más.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: '0 0 24px' }}>
              Un Specialized Domain Model (SDM) es una arquitectura de IA compacta (&lt; 20B parámetros)
              entrenada sobre cuatro fuentes específicas del cliente:
            </p>
          </Reveal>
          <Reveal delay={200}>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                { l: 'Tus datos operacionales',     d: 'Telemetría, transacciones, decisiones históricas' },
                { l: 'Tus reglas de negocio',       d: 'Políticas, umbrales, SLAs, restricciones legales' },
                { l: 'Tus procesos operacionales',  d: 'Workflows reales, no diagramas idealizados' },
                { l: 'Tu conocimiento experto',     d: 'Feedback de operadores, playbooks, criterios humanos' },
              ].map((it, i) => (
                <li key={it.l} style={{ display: 'flex', gap: 16, paddingBottom: 14, borderBottom: '1px solid #E4EBF3' }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: '#F4024C', letterSpacing: '0.14em' }}>0{i+1}</span>
                  <div>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, letterSpacing: '-0.01em', color: '#000', marginBottom: 4 }}>{it.l}</div>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#52557A' }}>{it.d}</div>
                  </div>
                </li>
              ))}
            </ul>
          </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' }}>
              SDM · SPEC SHEET
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
              {[
                { l: 'Parámetros',      v: '< 20B' },
                { l: 'Consumo · inferencia', v: '~13 W' },
                { l: 'Latencia · P95',  v: '< 200 ms' },
                { l: 'Costo relativo',  v: '30× menor' },
                { l: 'Velocidad',       v: '50× LLM base' },
                { l: 'Ubicación',       v: 'Tu VPC / on-prem' },
                { l: 'Auditabilidad',   v: 'Determinística' },
                { l: 'Reentrenamiento', v: 'A demanda' },
              ].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: 14, color: '#F4024C', fontWeight: 500 }}>{r.v}<ValidateMark/></div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

// SDM vs LLM — tabla comparativa con destaque de row
const IAsCompareV2 = () => {
  const [hover, setHover] = React.useState(-1);
  const rows = [
    { d: 'Dónde vive el modelo',           sdm: 'Tu VPC · on-premise · air-gap',    llm: 'Nube pública compartida' },
    { d: 'Parámetros',                      sdm: '< 20B',                             llm: '500B – 2T' },
    { d: 'Consumo energético · inferencia', sdm: '~13 W',                             llm: '~690 W' },
    { d: 'Costo por decisión',              sdm: 'hasta 30× menor',                   llm: 'base' },
    { d: 'Velocidad relativa',              sdm: 'hasta 50× más rápido',             llm: 'base' },
    { d: 'Entrenado sobre',                 sdm: 'Tus datos, reglas y procesos',      llm: 'Corpus web público' },
    { d: 'Auditabilidad',                   sdm: 'Determinística · logs por decisión',llm: 'Caja negra probabilística' },
    { d: 'Reentrenamiento',                 sdm: 'A demanda, en tu VPC',              llm: 'Cuando el proveedor decide' },
    { d: 'Dependencia del proveedor',       sdm: 'Transferible',                      llm: 'Permanente' },
    { d: 'Cuando alucina',                  sdm: 'Guardrail bloquea acción',          llm: 'Ejecuta como si estuviera cierto' },
  ];
  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="SDM vs LLM genérico"/></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 }}>
            Diez dimensiones que un board serio evalúa antes de firmar.
          </h2>
        </Reveal>
        <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr',
            background: '#000', color: '#FFF', padding: '18px 24px',
            fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
          }}>
            <div>DIMENSIÓN</div>
            <div style={{ color: '#F4024C' }}>OMNIX · SDM</div>
            <div style={{ color: '#96A3B5' }}>LLM GENÉRICO</div>
          </div>
          {rows.map((r, i) => (
            <SlideIn key={r.d} direction="right" delay={i * 40}>
              <div
                onMouseEnter={() => setHover(i)}
                onMouseLeave={() => setHover(-1)}
                style={{
                  display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr',
                  padding: '18px 24px', borderTop: '1px solid #E4EBF3',
                  background: hover === i ? '#FAFBFD' : (i % 2 === 0 ? '#FFF' : '#FAFBFD'),
                  transition: 'background 200ms',
                }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, color: '#1E1F26' }}>{r.d}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: '#F4024C', fontWeight: 500 }}>{r.sdm}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: '#96A3B5' }}>{r.llm}</div>
              </div>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

// CICLO COGNITIVO — 6 fases circulares
const IAsCycleV2 = () => {
  const steps = [
    { n: '01', t: 'COMPRENDE', d: 'Ingesta contexto operacional, telemetría, decisiones históricas. Construye representación del dominio.', icon: 'brain-circuit' },
    { n: '02', t: 'APRENDE',    d: 'Fine-tuning con datos etiquetados y feedback experto. Ajusta pesos sobre tus reglas.',                   icon: 'graduation-cap' },
    { n: '03', t: 'RAZONA',     d: 'Aplica el modelo a un evento en tiempo real. Genera opciones con score y explicación.',                icon: 'network' },
    { n: '04', t: 'EJECUTA',    d: 'Dispara acción sobre sistemas del cliente. Guardrails y policy match pre-ejecución.',                  icon: 'zap' },
    { n: '05', t: 'MIDE',       d: 'Registra resultado real, KPI de negocio, latencia y satisfacción del operador.',                        icon: 'gauge' },
    { n: '06', t: 'REENTRENA',  d: 'Feedback loop cierra el ciclo. El SDM aprende del resultado y mejora la próxima decisión.',              icon: 'refresh-cw' },
  ];
  return (
    <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="04" label="El ciclo cognitivo" 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 }}>
            Seis fases. Un loop que <span style={{ color: '#F4024C' }}>no se detiene</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.5, color: '#96A3B5', margin: '0 0 72px', maxWidth: 720 }}>
            Cada decisión ejecutada retroalimenta el modelo. Cada semana entiende tu operación mejor que la semana anterior.
          </p>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0, border: '1.5px solid #2E3140', background: '#0A0B10' }}>
          {steps.map((s, i) => (
            <SlideIn key={s.n} direction="up" delay={i * 100}>
              <div style={{
                padding: '28px 20px', borderRight: (i < 5) ? '1px solid #2E3140' : 'none',
                minHeight: 260, display: 'flex', flexDirection: 'column', gap: 14, position: 'relative',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#F4024C' }}>{s.n}</span>
                  <i data-lucide={s.icon} width="20" height="20" style={{ strokeWidth: 1.5, color: '#FFF' }}/>
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, letterSpacing: '-0.01em', color: '#FFF', marginTop: 8 }}>{s.t}</div>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.5, color: '#96A3B5', margin: 0 }}>{s.d}</p>
                {i < 5 && (
                  <div style={{ position: 'absolute', top: 40, right: -10, color: '#F4024C', fontFamily: 'var(--font-mono)', fontSize: 14 }}>→</div>
                )}
              </div>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

// BENEFICIOS — 6 cards
const IAsBenefits = () => {
  const b = [
    { i: 'zap',          t: 'Menor costo de inferencia', d: 'Hasta 30× menor que un LLM generalista. El costo baja con cada iteración del ciclo cognitivo.' },
    { i: 'battery-full', t: 'Menor consumo energético',  d: '~13 W por inferencia. Sostenibilidad y ROI a la vez.' },
    { i: 'target',       t: 'Mayor precisión en dominio',d: '+30% de precisión* frente a genéricos, porque conoce tu vocabulario, tus reglas y tus casos borde.' },
    { i: 'file-search',  t: 'Razonamiento auditable',    d: 'Determinístico. Cada decisión con inputs, pesos, política y output. Regulator-ready.' },
    { i: 'shield',       t: 'Despliegue soberano',       d: 'VPC · on-premise · air-gapped. Ningún byte de contexto sale del perímetro.' },
    { i: 'key-round',    t: 'Control del cliente',       d: 'Modelo transferible. Cero lock-in. Al final del programa, tu equipo lo opera.' },
  ];
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="05" label="Beneficios verificables"/></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 }}>
            Seis razones por las que un SDM es un activo — no un gasto.
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {b.map((c, i) => (
            <SlideIn key={c.t} direction="up" delay={i * 80}>
              <MagneticHover strength={3}>
                <div style={{
                  padding: '32px 28px', border: '1px solid #E4EBF3', background: '#FFF',
                  minHeight: 220, display: 'flex', flexDirection: 'column', gap: 14,
                  transition: 'border-color 220ms',
                }}
                onMouseEnter={(e) => e.currentTarget.style.borderColor = '#F4024C'}
                onMouseLeave={(e) => e.currentTarget.style.borderColor = '#E4EBF3'}>
                  <div style={{ width: 40, height: 40, border: '1.5px solid #F4024C', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <i data-lucide={c.i} width="20" height="20" style={{ color: '#F4024C', strokeWidth: 1.5 }}/>
                  </div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, letterSpacing: '-0.015em', color: '#000', margin: 0, lineHeight: 1.15 }}>{c.t}</h3>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.55, color: '#52557A', margin: 0 }}>{c.d}</p>
                </div>
              </MagneticHover>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

// CASOS POR INDUSTRIA
const IAsIndustryCases = () => {
  const [ind, setInd] = React.useState(0);
  const cases = [
    { n: 'Banca',        icon: 'landmark',    sdm: 'sdm.risk · sdm.fraud',   use: 'Scoring transaccional < 200ms con logs por decisión + case management autónomo.', kpi: '−58% falsos positivos*' },
    { n: 'Telco',        icon: 'radio-tower', sdm: 'sdm.noc · sdm.churn',   use: 'Correlación de alertas + auto-mitigación de incidentes NOC en producción.',       kpi: '−65% MTTR*' },
    { n: 'Retail',       icon: 'shopping-bag',sdm: 'sdm.demand · sdm.price',use: 'Forecast SKU × tienda + reprecio diario elástico + control de quiebres.',           kpi: '−22% quiebres*' },
    { n: 'Logística',    icon: 'truck',       sdm: 'sdm.route · sdm.supply', use: 'Re-ruteo automático + priorización de órdenes críticas multi-nodo.',              kpi: '−72% tiempo respuesta*' },
    { n: 'Manufactura',  icon: 'factory',     sdm: 'sdm.oee · sdm.maintain', use: 'Mantención predictiva + optimización de línea en tiempo real.',                    kpi: '+18% OEE*' },
    { n: 'Minería',      icon: 'mountain',    sdm: 'sdm.scada · sdm.safety', use: 'Correlación sensores OT + orquestación de respuesta operacional.',                  kpi: '−41% downtime*' },
    { n: 'Energía',      icon: 'zap',         sdm: 'sdm.grid · sdm.demand', use: 'Balance de red distribuida + optimización de despacho + forecasting.',              kpi: '+12% eficiencia*' },
    { n: 'Gobierno',     icon: 'building-2',  sdm: 'sdm.ops · sdm.priority',use: 'Priorización de casos operacionales + gobernanza soberana a escala nacional.',        kpi: '−58% MTTR*' },
  ];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <Reveal><SectionMeta n="06" label="Un SDM por industria"/></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 cognición cambia con el dominio. La arquitectura no.
          </h2>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: 24 }}>
          {/* Sidebar selector */}
          <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
            {cases.map((c, i) => (
              <button key={c.n} onClick={() => setInd(i)} style={{
                width: '100%', border: 'none', textAlign: 'left', cursor: 'pointer',
                padding: '18px 20px', display: 'flex', alignItems: 'center', gap: 14,
                background: ind === i ? '#000' : '#FFF',
                color: ind === i ? '#FFF' : '#1E1F26',
                borderBottom: (i < cases.length - 1) ? '1px solid #E4EBF3' : 'none',
                fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15,
                letterSpacing: '-0.005em', transition: 'all 220ms',
              }}>
                <i data-lucide={c.icon} width="18" height="18" style={{ strokeWidth: 1.5 }}/>
                {c.n}
                {ind === i && <span style={{ marginLeft: 'auto', color: '#F4024C' }}>→</span>}
              </button>
            ))}
          </div>
          {/* Detail panel */}
          <div key={ind} style={{
            border: '1.5px solid #1E1F26', background: '#FFF', padding: 40, minHeight: 460,
            display: 'flex', flexDirection: 'column', gap: 20,
            animation: 'omnix-slide-in 380ms cubic-bezier(0.2,0.7,0.2,1)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C' }}>INDUSTRIA · 0{ind+1}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#96A3B5' }}>PRODUCCIÓN · CLIENTE ANÓNIMO</span>
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 48, letterSpacing: '-0.025em', color: '#000', margin: 0, lineHeight: 1 }}>
              {cases[ind].n}
            </h3>
            <div style={{ padding: '14px 18px', background: '#000', color: '#FFF', display: 'inline-block', width: 'fit-content' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', marginBottom: 4 }}>SDMs ENTRENADOS</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: '#F4024C' }}>{cases[ind].sdm}</div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 8 }}>Caso operacional</div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#1E1F26', margin: 0 }}>{cases[ind].use}</p>
            </div>
            <div style={{ marginTop: 'auto', paddingTop: 20, borderTop: '1px solid #E4EBF3', display: 'flex', alignItems: 'baseline', gap: 12 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 40, letterSpacing: '-0.025em', color: '#F4024C', lineHeight: 1 }}>{cases[ind].kpi}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: '#52557A' }}>KPI · en operación</span>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

// GOVERNANCE + TRANSFER TEASERS
const IAsGovTransfer = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        <Reveal>
          <a href="seguridad.html" style={{ display: 'block', padding: '40px 36px', background: '#000', color: '#FFF', border: '1.5px solid #000', textDecoration: 'none', minHeight: 240, transition: 'transform 220ms' }}
            onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-4px)'}
            onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}>
            <Eyebrow color="#F4024C">GOBERNANZA DEL MODELO</Eyebrow>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 30, letterSpacing: '-0.02em', color: '#FFF', margin: '20px 0 16px', lineHeight: 1.15 }}>
              Approval flows · versionado · rollback · auditoría por decisión.
            </h3>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: '#96A3B5', lineHeight: 1.5, margin: '0 0 24px' }}>
              Cada SDM se gobierna como un artefacto crítico: firma criptográfica, versioning,
              rollback en minutos, human-in-the-loop configurable.
            </p>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              Ver seguridad completa <i data-lucide="arrow-right" width="14" height="14"></i>
            </span>
          </a>
        </Reveal>
        <Reveal delay={100}>
          <a href="transferencia.html" style={{ display: 'block', padding: '40px 36px', background: '#FAFBFD', color: '#1E1F26', border: '1.5px solid #1E1F26', textDecoration: 'none', minHeight: 240, transition: 'transform 220ms' }}
            onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-4px)'}
            onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}>
            <Eyebrow color="#F4024C">TRANSFERENCIA DE CONTROL</Eyebrow>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 30, letterSpacing: '-0.02em', color: '#000', margin: '20px 0 16px', lineHeight: 1.15 }}>
              Construimos, operamos y te entregamos las llaves.
            </h3>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: '#52557A', lineHeight: 1.5, margin: '0 0 24px' }}>
              Al final del programa, tu equipo interno controla el SDM, sus reentrenamientos y su
              gobernanza. Cero lock-in. Cero cláusula de renovación.
            </p>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              Ver transferencia <i data-lucide="arrow-right" width="14" height="14"></i>
            </span>
          </a>
        </Reveal>
      </div>
    </Container>
  </section>
);

Object.assign(window, {
  IAsHeroV2, IAsProblemV2, IAsWhatIs, IAsCompareV2, IAsCycleV2, IAsBenefits,
  IAsIndustryCases, IAsGovTransfer,
});
