// RETAIL — Secciones 9-13: seguridad · transferencia · prueba · plan · CTA final · objeciones

// SECCIÓN 9 — SEGURIDAD Y SOBERANÍA (breve)
const RetailSecurity = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>
        <div>
          <Reveal><SectionMeta n="08" label="Seguridad y soberanía" dark color="#F4024C"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 48, lineHeight: 1.05, letterSpacing: '-0.025em', color: '#FFF', margin: '0 0 24px' }}>
              Su información comercial nunca sale del perímetro.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#96A3B5', margin: '0 0 32px', maxWidth: 500 }}>
              Datos de demanda, márgenes, promociones y clientes son activos sensibles. OMNIX
              opera dentro de tu VPC / on-prem. Cero llamadas a APIs públicas. Cero telemetría cross-tenant.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <Button variant="ghost" dark icon="arrow-right" href="seguridad.html">Revisar Seguridad y Gobernanza</Button>
          </Reveal>
        </div>

        <Reveal delay={200} y={0}>
          <div style={{ border: '1.5px solid #2E3140', background: '#0A0B10' }}>
            <div style={{ padding: '14px 20px', borderBottom: '1px solid #2E3140', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase' }}>
              CONTROLES ACTIVOS
            </div>
            {[
              { i: 'shield',       t: 'Despliegue VPC / on-prem', d: 'SDM Retail vive en tu infraestructura, nunca en la nuestra.' },
              { i: 'lock',         t: 'Segregación por tenant',    d: 'Ningún dato cruza perímetros. Modelo aislado por cliente.' },
              { i: 'file-search',  t: 'Trazabilidad por decisión', d: 'Cada acción con logs firmados. Reproducible bit-exacto.' },
              { i: 'git-compare',  t: 'Governance del SDM',        d: 'Approval flows, versioning, rollback. Auditables por Legal / Compliance.' },
              { i: 'users',        t: 'Acceso por roles',          d: 'RBAC granular. Segregación planner / operador / governance / audit.' },
              { i: 'file-lock-2',  t: 'Protección comercial',       d: 'Márgenes, pricing y clientes anonimizados en entrenamiento.' },
            ].map((c, i, arr) => (
              <div key={c.t} style={{
                padding: '16px 20px', display: 'grid', gridTemplateColumns: '28px 1fr', gap: 14,
                borderBottom: (i < arr.length - 1) ? '1px solid #2E3140' : 'none',
              }}>
                <i data-lucide={c.i} width="18" height="18" style={{ color: '#F4024C', strokeWidth: 1.5 }}/>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, color: '#FFF', marginBottom: 4, letterSpacing: '-0.005em' }}>{c.t}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#96A3B5', lineHeight: 1.5 }}>{c.d}</div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

// SECCIÓN 10 — TRANSFERENCIA DE CONTROL
const RetailTransfer = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="09" label="Transferencia de control"/></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' }}>
            La capacidad se queda en su empresa.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: 0, maxWidth: 720 }}>
            OMNIX construye, opera y transfiere progresivamente la capacidad al equipo interno del retailer.
            Sin contratos eternos. Sin dependencia forzada.
          </p>
        </Reveal>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1.5px solid #1E1F26', marginBottom: 40 }}>
        {[
          { k: 'ASSESSMENT',    dur: '2 – 3 semanas',   f: 'Mapeamos disrupción y datos', o: 90, c: 10 },
          { k: 'PILOTO',        dur: '8 – 12 semanas',   f: '1 caso vivo en producción',    o: 70, c: 30 },
          { k: 'ESCALAMIENTO',  dur: '3 – 6 meses',      f: '5+ casos + certificación',     o: 45, c: 55 },
          { k: 'TRANSFERENCIA', dur: 'Cuando digas',     f: 'Autonomía del cliente',        o: 15, c: 85 },
        ].map((p, i) => (
          <Reveal key={p.k} delay={i * 100}>
            <div style={{
              padding: '28px 24px', borderRight: (i < 3) ? '1px solid #E4EBF3' : 'none',
              minHeight: 280, display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5' }}>FASE 0{i+1}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#F4024C' }}>{p.dur}</span>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.015em', color: '#F4024C' }}>{p.k}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: '#1E1F26', lineHeight: 1.4 }}>{p.f}</div>
              {/* Mini split bar */}
              <div style={{ marginTop: 'auto', paddingTop: 16, borderTop: '1px solid #E4EBF3' }}>
                <div style={{ display: 'flex', height: 8, background: '#F2F5F9', marginBottom: 8 }}>
                  <div style={{ width: `${p.o}%`, background: '#F4024C' }}/>
                  <div style={{ width: `${p.c}%`, background: '#0050BD' }}/>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#52557A' }}>
                  <span><span style={{ color: '#F4024C' }}>■</span> OMNIX {p.o}%</span>
                  <span><span style={{ color: '#0050BD' }}>■</span> CLIENT {p.c}%</span>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>

      {/* Qué se transfiere */}
      <div style={{ padding: 40, background: '#FAFBFD', border: '1.5px solid #1E1F26' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 20 }}>QUÉ SE TRANSFIERE</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
          {[
            'Documentación completa',
            'Reglas de negocio configuradas',
            'Runbooks operacionales',
            'Gobierno del modelo',
            'Protocolos de monitoreo',
            'Criterios de reentrenamiento',
            'Roles y responsabilidades',
            'Operación cotidiana',
          ].map((it) => (
            <div key={it} style={{
              padding: '12px 14px', background: '#FFF', border: '1px solid #E4EBF3',
              display: 'flex', gap: 10, alignItems: 'center',
            }}>
              <i data-lucide="check" width="14" height="14" style={{ color: '#0F5132', strokeWidth: 2 }}/>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26' }}>{it}</span>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 20 }}>
          <Button variant="ghost" icon="arrow-right" href="transferencia.html">Ver modelo de transferencia completo</Button>
        </div>
      </div>
    </Container>
  </section>
);

// SECCIÓN 11 — PRUEBA Y RESULTADOS
const RetailProof = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <Reveal><SectionMeta n="10" label="Prueba · KPIs · caso"/></Reveal>
      <Reveal delay={80}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 40px', color: '#000', maxWidth: 900 }}>
          Estos son los KPIs que un retailer debe medir.
        </h2>
      </Reveal>

      {/* KPI grid — los indicadores a medir */}
      <div style={{ marginBottom: 72 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 20 }}>
          Métricas objetivo · antes de firmar contrato
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          border: '1.5px solid #1E1F26', background: '#FFF',
        }}>
          {[
            { k: 'DISPONIBILIDAD',       d: 'en góndola / eCommerce' },
            { k: 'STOCKOUT RATE',        d: 'por SKU × ubicación' },
            { k: 'VENTA PERDIDA',        d: 'estimada por quiebre' },
            { k: 'MARGEN BRUTO',         d: 'por categoría · vs plan' },
            { k: 'MARKDOWN',             d: 'depth × frecuencia' },
            { k: 'INVENTARIO INMOVIL.',  d: 'por SKU y ubicación' },
            { k: 'ROTACIÓN',             d: 'días de cobertura' },
            { k: 'FILL RATE',            d: 'de órdenes' },
            { k: 'OTIF',                 d: 'entregas a tiempo' },
            { k: 'TIEMPO ALERTA → ACCIÓN', d: 'lag operativo' },
            { k: '% DECISIONES AUTOM.',   d: 'sobre volumen total' },
            { k: 'INTERVENC. MANUALES', d: 'evitadas por semana' },
          ].map((k, i) => (
            <div key={k.k} style={{
              padding: '20px 22px',
              borderRight: (i % 4 !== 3) ? '1px solid #E4EBF3' : 'none',
              borderBottom: (i < 8) ? '1px solid #E4EBF3' : 'none',
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#F4024C', marginBottom: 6 }}>KPI · {String(i+1).padStart(2, '0')}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: '#000', letterSpacing: '-0.005em', marginBottom: 4 }}>{k.k}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#52557A' }}>{k.d}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Caso de éxito estructurado */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 24 }}>
        <div style={{ padding: 32, background: '#000', color: '#FFF', border: '1.5px solid #000' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 16 }}>CASO ESTRUCTURA · REFERENCIA</div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, letterSpacing: '-0.02em', color: '#FFF', margin: '0 0 16px', lineHeight: 1.15 }}>
            Cadena de retail omnicanal <span style={{ color: '#B8860B' }}>[VALIDAR CLIENTE]</span>
          </h3>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 15, lineHeight: 1.55, color: '#96A3B5', margin: '0 0 20px' }}>
            "Antes cada disrupción de supply-chain nos costaba 3 días de análisis manual entre 4 equipos. Ahora la respuesta es automática dentro de umbrales que nosotros definimos." <span style={{ color: '#B8860B' }}>[VALIDAR TESTIMONIO]</span>
          </p>
          <div style={{ borderTop: '1px solid #2E3140', paddingTop: 16, display: 'flex', gap: 24 }}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase' }}>SECTOR</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: '#FFF' }}>eCommerce Top-10 IB</div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase' }}>DEPLOY</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: '#FFF' }}>VPC · 6 países</div>
            </div>
          </div>
        </div>

        <div style={{ padding: 32, background: '#FFF', border: '1.5px solid #E4EBF3' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 20 }}>ESTRUCTURA DEL CASO</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
            {[
              { l: 'CONTEXTO',           d: 'Cadena omnicanal · tiendas + eCommerce + DCs' },
              { l: 'DISRUPCIÓN',          d: 'Promociones + demanda variable + roturas de supply' },
              { l: 'SITUACIÓN ANTERIOR',  d: 'Coordinación manual entre 4 equipos y 6 sistemas' },
              { l: 'IMPLEMENTACIÓN',      d: 'SDM Retail + Runtime + integraciones OMS/WMS/ERP/TMS' },
              { l: 'DECISIONES AUTOM.',   d: 'Rebalanceo, prioridad de fulfillment, alertas de pricing' },
              { l: 'SISTEMAS CONECTADOS', d: 'ERP · OMS · WMS · TMS · pricing · promo · BI' },
              { l: 'IMPACTO',             d: '−72% tiempo respuesta · +11% disponibilidad [VALIDAR]' },
              { l: 'TIEMPO DE IMPLEM.',    d: '11 semanas · piloto a producción' },
            ].map((c) => (
              <div key={c.l}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>{c.l}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.4 }}>{c.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div style={{ marginTop: 20, fontFamily: 'var(--font-mono)', fontSize: 11, color: '#B8860B', letterSpacing: '0.06em' }}>
        * Todas las métricas cuantitativas y testimonio marcados como [VALIDAR] deben confirmarse con cliente y auditor antes de publicación pública.
      </div>
    </Container>
  </section>
);

// SECCIÓN 12 — PLAN SIMPLE
const RetailPlan = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="11" label="Plan simple"/></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 pasos · sin proyecto largo · sin reemplazar tu arquitectura.
        </h2>
      </Reveal>
      <div style={{ position: 'relative' }}>
        <div style={{ position: 'absolute', top: 32, left: '5%', right: '5%', height: 1.5, background: '#E4EBF3' }}/>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, position: 'relative' }}>
          {[
            { n: '01', t: 'Identificamos una decisión de alto impacto', d: 'Una disrupción operacional específica: quiebres, mispricing, rebalanceo.' },
            { n: '02', t: 'Conectamos señales y reglas necesarias',      d: 'Adapters certificados a OMS/WMS/ERP/TMS. Reglas del cliente. Sin migración.' },
            { n: '03', t: 'Desplegamos un piloto productivo controlado', d: 'SDM entrenado sobre operación real. 8 – 12 semanas hasta primera acción viva.' },
            { n: '04', t: 'Escalamos y transferimos la operación',        d: 'Nuevos casos, mayor autonomía, certificación de tu equipo, handover final.' },
          ].map((s, i) => (
            <SlideIn key={s.n} direction="up" delay={i * 120}>
              <div style={{ padding: '0 12px' }}>
                <div style={{
                  width: 64, height: 64, background: i === 3 ? '#F4024C' : '#FFF',
                  border: '1.5px solid #1E1F26',
                  borderColor: i === 3 ? '#F4024C' : '#1E1F26',
                  borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600, letterSpacing: '0.05em',
                  color: i === 3 ? '#FFF' : '#1E1F26', marginBottom: 24, position: 'relative', zIndex: 1,
                }}>{s.n}</div>
                <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, letterSpacing: '-0.015em', color: '#000', margin: '0 0 10px', lineHeight: 1.2 }}>
                  {s.t}
                </h4>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
                  {s.d}
                </p>
              </div>
            </SlideIn>
          ))}
        </div>
      </div>
    </Container>
  </section>
);

// SECCIÓN 13 — CTA FINAL
const RetailFinalCTA = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128, position: 'relative', overflow: 'hidden' }}>
    <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', opacity: 0.4 }} viewBox="0 0 1440 700" preserveAspectRatio="none">
      <g stroke="#F4024C" strokeWidth="1" fill="none" opacity="0.35">
        <path d="M 0 200 Q 400 350 720 350" className="omnix-flow-dash"/>
        <path d="M 1440 200 Q 1040 350 720 350" className="omnix-flow-dash"/>
        <path d="M 0 500 Q 400 350 720 350" className="omnix-flow-dash"/>
        <path d="M 1440 500 Q 1040 350 720 350" className="omnix-flow-dash"/>
      </g>
      <circle cx="720" cy="350" r="6" fill="#F4024C"/>
      <circle cx="720" cy="350" r="24" fill="none" stroke="#F4024C" strokeWidth="1" opacity="0.4"/>
    </svg>

    <Container narrow>
      <div style={{ textAlign: 'center', position: 'relative' }}>
        <Reveal>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.24em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 24 }}>
            — Identifique qué decisiones puede automatizar primero —
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 76, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#FFF' }}>
            De la señal a la acción operacional.
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.5, color: '#96A3B5', maxWidth: 640, margin: '0 auto 36px' }}>
            Mapeamos una disrupción, los sistemas involucrados y el impacto potencial.
            Sin reemplazar su arquitectura actual.
          </p>
        </Reveal>
        <Reveal delay={220}>
          <div style={{ display: 'inline-flex', gap: 12, alignItems: 'center' }}>
            <Button variant="primary" icon="arrow-right" href="diagnostico.html">Solicitar diagnóstico Retail</Button>
          </div>
        </Reveal>
        <Reveal delay={280}>
          <div style={{ marginTop: 56, paddingTop: 28, borderTop: '1px solid #2E3140', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase' }}>
            30 minutos · sin propuesta estándar · NDA upfront · en menos de 24 horas hábiles
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

// OBJECTIONS — 12 objeciones respondidas
const RetailObjections = () => {
  const items = [
    { q: 'Ya tenemos un forecasting engine.',
      a: 'OMNIX no reemplaza tu forecast. Toma sus proyecciones + inventario real + margen + capacidad y produce una acción coordinada. El forecast dice qué va a pasar. OMNIX decide qué hacer al respecto.' },
    { q: 'Ya tenemos un pricing engine.',
      a: 'Tu pricing engine sigue operando. OMNIX le entrega contexto que hoy no tiene: inventario proyectado, riesgo de quiebre, margen agregado y elasticidad. Sólo recomienda ajustes dentro de las políticas que apruebe tu Governance Board.' },
    { q: 'Nuestro ERP ya tiene automatizaciones.',
      a: 'Las automatizaciones del ERP siguen operando. OMNIX opera sobre los casos que requieren razonamiento multi-sistema y cambio de contexto — donde el ERP por diseño no llega.' },
    { q: 'No queremos reemplazar el WMS.',
      a: 'No lo reemplazamos. El WMS ejecuta operación de almacén. OMNIX prioriza y coordina múltiples WMS bajo una lógica cognitiva común. Adapters certificados. Sin data migration.' },
    { q: 'Los datos no están perfectos.',
      a: 'No los necesitamos perfectos. OMNIX Ingest normaliza, imputa faltantes documentados y flagea datos sucios como parte del pipeline. El SDM aprende de tu operación real — con sus imperfecciones.' },
    { q: 'No podemos automatizar decisiones de pricing sin aprobación.',
      a: 'Correcto. Por defecto, pricing opera en N2 – N3: recomendación con approval flow. Sólo dentro de los rangos y políticas que Governance Board apruebe explícitamente el sistema puede autoejecutar.' },
    { q: 'Esto parece otro proyecto largo de IA.',
      a: '8 – 12 semanas desde firma hasta primer caso vivo en producción. Diagnóstico previo de 2 – 3 semanas. Y si al final del piloto no hay ROI demostrable en tu operación, no hay escalamiento.' },
    { q: 'No queremos quedar atrapados con un proveedor.',
      a: 'La transferencia de control es parte del contrato — no una promesa. Al cierre del programa, entregamos código, modelos, gobernanza y runbooks. Tu equipo interno opera sin nosotros. Sin cláusula de reversibilidad.' },
    { q: 'No podemos enviar información comercial a modelos públicos.',
      a: 'Por diseño no lo hacemos. El SDM Retail se entrena y opera dentro de tu VPC / on-prem. Cero llamadas a APIs externas de LLMs. Cero telemetría cross-tenant. Márgenes, precios y clientes anonimizados en entrenamiento.' },
    { q: '¿Cómo se mide el ROI?',
      a: 'En los mismos KPIs que ya mides: disponibilidad, stockout rate, margen bruto, markdown, inventario inmovilizado, fill rate, OTIF, tiempo alerta → acción. Baseline pre-implementación firmado por finanzas del cliente.' },
    { q: '¿Cómo se gobierna una decisión equivocada?',
      a: 'Cada decisión pasa por 5 gates: policy match, confidence threshold, guardrails, approval flow y logs firmados. Rollback en < 5 min a cualquier versión. Governance Board interno recibe métricas de accuracy y disputas semanales.' },
    { q: '¿Qué ocurre cuando la situación está fuera de los parámetros conocidos?',
      a: 'El SDM escala automáticamente a humano cuando su confidence cae bajo umbral definido, cuando aparecen features fuera de distribución o cuando la política lo exige. En modo air-gapped, kill switch disponible desde un único comando.' },
  ];
  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="12" label="Objeciones · comité de compra Retail"/></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 }}>
            Doce preguntas que un board de Retail hará.
          </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: '20px 28px', display: 'grid', gridTemplateColumns: '52px 1fr auto', gap: 20, alignItems: 'center',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.18em', color: '#F4024C' }}>Q · {String(i+1).padStart(2, '0')}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, letterSpacing: '-0.01em', 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="18" height="18"></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 24px 28px', display: 'grid', gridTemplateColumns: '52px 1fr', gap: 20 }}>
                  <div/>
                  <p style={{ fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.6, color: '#1E1F26', margin: 0, maxWidth: 900 }}>{it.a}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, { RetailSecurity, RetailTransfer, RetailProof, RetailPlan, RetailFinalCTA, RetailObjections });
