const TOTAL_SLIDES = 10;

function Slide01_Cover() {
  return (
    <>
      <ChromeTop section="Portada" slideNum={1} total={TOTAL_SLIDES} />
      <div className="slide-body" style={{ position: 'relative', overflow: 'hidden' }}>
        <div className="grid-bg"></div>
        <div className="orbit-ring" style={{ position: 'absolute', right: 120, top: 130, width: 520, height: 520, opacity: 0.35 }}></div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 90 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
            <img src="assets/4B4A9FB.png" style={{ height: 72, width: 'auto', objectFit: 'contain' }} />
            <div>
              <div className="label" style={{ color: 'var(--orbit-text-3)', marginBottom: 10 }}>MEMORIA PARA CONVOCATORIA PÚBLICA</div>
              <div className="body-m" style={{ color: 'var(--orbit-text-2)' }}>Gobierno de Navarra</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'flex-end', maxWidth: 620 }}>
            <span className="tag orange">IA aplicada</span>
            <span className="tag cyan">Omnicanalidad</span>
            <span className="tag green">Seguridad</span>
            <span className="tag">Compliance</span>
          </div>
        </div>

        <div style={{ maxWidth: 1240 }}>
          <div className="eyebrow">01 · WAKA ORBIT</div>
          <div className="title-xl" style={{ marginTop: 30, marginBottom: 34 }}>Waka Orbit</div>
          <div className="subtitle" style={{ maxWidth: 1040 }}>
            Plataforma agéntica omnicanal para sectores regulados
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 28, marginTop: 78, maxWidth: 1260 }}>
          <div className="card surface">
            <div className="label" style={{ color: 'var(--waka-orange)', marginBottom: 14 }}>CONTEXTO</div>
            <div className="body-m">Presentación institucional para evaluación de una convocatoria pública.</div>
          </div>
          <div className="card">
            <div className="label" style={{ color: 'var(--orbit-text-3)', marginBottom: 14 }}>PROPÓSITO</div>
            <div className="body-m">Explicar alcance, arquitectura, seguridad e impacto territorial.</div>
          </div>
        </div>

        <div className="strip" style={{ position: 'absolute', left: 80, right: 80, bottom: 86 }}>
          <span>Cloud-native</span>
          <span>Agentes inteligentes</span>
          <span>Interconexión segura</span>
          <span>Sectores regulados</span>
        </div>
      </div>
      <ChromeBottom chapter="Portada" />
    </>
  );
}

function Slide02_Problema() {
  return (
    <>
      <ChromeTop section="Diagnóstico" slideNum={2} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">02 · PROBLEMA A RESOLVER</div>
        <div className="title-l" style={{ marginTop: 24, maxWidth: 1320 }}>
          Sectores con mucha comunicación operan con sistemas fragmentados
        </div>
        <div className="subtitle" style={{ marginTop: 24, maxWidth: 1120 }}>
          El reto no es solo atender más canales: es convertir cada interacción en una operación trazable y segura.
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28, marginTop: 68 }}>
          <div className="card surface">
            <div className="card-header">
              <span className="step-num">1</span>
              <span>Volumen operativo</span>
            </div>
            <div className="body-m" style={{ marginTop: 26 }}>
              Telcos, banca, mobile money, IMF y aseguradoras gestionan flujos intensivos de atención.
            </div>
          </div>

          <div className="card surface">
            <div className="card-header">
              <span className="step-num">2</span>
              <span>Fragmentación</span>
            </div>
            <div className="body-m" style={{ marginTop: 26 }}>
              Canales, CRM, core systems y operaciones suelen funcionar como silos difíciles de coordinar.
            </div>
          </div>

          <div className="card surface">
            <div className="card-header">
              <span className="step-num">3</span>
              <span>Regulación estricta</span>
            </div>
            <div className="body-m" style={{ marginTop: 26 }}>
              Cada decisión exige control, evidencias, trazabilidad y gestión responsable del dato.
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Diagnóstico" />
    </>
  );
}

function Slide03_Solucion() {
  return (
    <>
      <ChromeTop section="Solución" slideNum={3} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">03 · PROPUESTA</div>
        <div className="title-l" style={{ marginTop: 24, maxWidth: 1280 }}>
          Waka Orbit actúa como capa inteligente entre canales, sistemas core y operaciones
        </div>
        <div className="subtitle" style={{ marginTop: 24, maxWidth: 1140 }}>
          Una plataforma cloud-native de agentes inteligentes para coordinar interacción, decisión y ejecución.
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28, marginTop: 62 }}>
          <div className="card surface">
            <div className="tag orange">Pilar 1</div>
            <div className="title-m" style={{ marginTop: 28, fontSize: 38 }}>Agentes especializados</div>
            <div className="body-m" style={{ marginTop: 22 }}>
              Agentes orientados a tareas, dominios y flujos operativos concretos.
            </div>
          </div>

          <div className="card surface">
            <div className="tag cyan">Pilar 2</div>
            <div className="title-m" style={{ marginTop: 28, fontSize: 38 }}>Interconexión end-to-end</div>
            <div className="body-m" style={{ marginTop: 22 }}>
              Integración segura entre canales digitales, voz, sistemas empresariales y back office.
            </div>
          </div>

          <div className="card surface">
            <div className="tag green">Pilar 3</div>
            <div className="title-m" style={{ marginTop: 28, fontSize: 38 }}>Seguridad y trazabilidad</div>
            <div className="body-m" style={{ marginTop: 22 }}>
              Evidencias, registros, separación de servicios y control de secretos.
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Solución" />
    </>
  );
}

function Slide04_Innovacion() {
  return (
    <>
      <ChromeTop section="Innovación" slideNum={4} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">04 · ENFOQUE DIFERENCIAL</div>
        <div className="title-l" style={{ marginTop: 24, maxWidth: 1260 }}>
          No es un chatbot: es una plataforma agéntica distribuida
        </div>
        <div className="subtitle" style={{ marginTop: 24, maxWidth: 1120 }}>
          La comunicación se transforma en acción operativa mediante microservicios orbit-* sobre Azure.
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 34, marginTop: 72 }}>
          <div className="card surface">
            <div className="label" style={{ color: 'var(--orbit-text-3)' }}>INTERACCIÓN AISLADA</div>
            <div className="title-m" style={{ marginTop: 24 }}>Chatbot tradicional</div>
            <div className="body-m" style={{ marginTop: 24 }}>
              Responde en un canal, pero no necesariamente coordina sistemas, evidencias y operaciones.
            </div>
          </div>

          <div className="card surface">
            <div className="label" style={{ color: 'var(--waka-orange)' }}>CAPA OPERATIVA</div>
            <div className="title-m" style={{ marginTop: 24 }}>Waka Orbit</div>
            <div className="body-m" style={{ marginTop: 24 }}>
              Orquesta agentes, servicios cloud, datos y acciones sobre procesos empresariales regulados.
            </div>
          </div>
        </div>

        <div className="quote-block" style={{ marginTop: 42 }}>
          “El valor institucional reside en pasar de conversación a operación segura, trazable y escalable.”
        </div>
      </div>
      <ChromeBottom chapter="Innovación" />
    </>
  );
}

function Slide05_ArquitecturaAzure() {
  const services = ['orbit-command', 'orbit-sentinel', 'orbit-brain', 'orbit-crew', 'orbit-archive'];
  const azure = ['Container Apps', 'Key Vault', 'Cosmos DB', 'Azure AI', 'Storage', 'Log Analytics'];

  return (
    <>
      <ChromeTop section="Arquitectura" slideNum={5} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">05 · ARQUITECTURA AZURE</div>
        <div className="title-l" style={{ marginTop: 24, maxWidth: 1260 }}>
          Un núcleo cloud observado en rg-orbit-platform, France Central
        </div>
        <div className="subtitle" style={{ marginTop: 24, maxWidth: 1180 }}>
          El inventario Azure muestra servicios orbit-* en ejecución sobre una base de plataforma compartida.
        </div>

        <div className="card surface" style={{ marginTop: 52, padding: 38 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.2fr 1.1fr', gap: 28, alignItems: 'stretch' }}>
            <div className="card">
              <div className="label" style={{ color: 'var(--waka-orange)', marginBottom: 22 }}>CANALES</div>
              <div style={{ display: 'grid', gap: 12 }}>
                {['Voz', 'Mensajería', 'Web', 'Email'].map((item) => (
                  <span key={item} className="tag">{item}</span>
                ))}
              </div>
            </div>

            <div className="card">
              <div className="label" style={{ color: 'var(--waka-cyan)', marginBottom: 22 }}>MICROSERVICIOS ORBIT-*</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                {services.map((item) => (
                  <div key={item} className="card surface" style={{ padding: 18 }}>
                    <div className="body-s" style={{ color: 'var(--orbit-text-1)' }}>{item}</div>
                  </div>
                ))}
              </div>
            </div>

            <div className="card">
              <div className="label" style={{ color: 'var(--red-green)', marginBottom: 22 }}>SERVICIOS AZURE</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                {azure.map((item) => (
                  <span key={item} className="tag green">{item}</span>
                ))}
              </div>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22, marginTop: 30 }}>
            <div className="kpi">
              <div className="label">Inventario observado</div>
              <div className="val orange" style={{ fontSize: 42 }}>rg-orbit-platform</div>
              <div className="delta">Grupo principal de plataforma en France Central</div>
            </div>
            <div className="kpi">
              <div className="label">Modelo técnico</div>
              <div className="val cyan" style={{ fontSize: 42 }}>serverless / containerizado</div>
              <div className="delta">Azure Container Apps con servicios orbit-* en ejecución</div>
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Arquitectura Azure" />
    </>
  );
}

function Slide06_Omnicanalidad() {
  return (
    <>
      <ChromeTop section="Omnicanalidad" slideNum={6} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">06 · INTERCONEXIÓN SEGURA</div>
        <div className="title-l" style={{ marginTop: 24, maxWidth: 1320 }}>
          Omnicanalidad orientada a procesos, no solo a atención
        </div>
        <div className="subtitle" style={{ marginTop: 24, maxWidth: 1160 }}>
          Posicionamiento objetivo: conectar canales, sistemas corporativos y operaciones reguladas.
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 34, marginTop: 64 }}>
          <div className="card surface">
            <div className="label" style={{ color: 'var(--waka-orange)', marginBottom: 24 }}>CANALES</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
              {['SMS', 'USSD', 'Inbound', 'Outbound', 'WhatsApp', 'Telegram', 'Instagram', 'Messenger', 'Web chat', 'Email'].map((item) => (
                <span key={item} className="tag orange">{item}</span>
              ))}
            </div>
          </div>

          <div className="card surface">
            <div className="label" style={{ color: 'var(--waka-cyan)', marginBottom: 24 }}>SISTEMAS</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
              {['CRM', 'ERP', 'BSS/OSS', 'Core banking', 'Wallets', 'KYC/AML', 'Core insurance', 'Ticketing', 'SIP trunk'].map((item) => (
                <span key={item} className="tag cyan">{item}</span>
              ))}
            </div>
          </div>
        </div>

        <div className="quote-block" style={{ marginTop: 48 }}>
          “La plataforma se plantea como una capa de interconexión segura entre experiencia de usuario y sistemas críticos.”
        </div>
      </div>
      <ChromeBottom chapter="Omnicanalidad e integración" />
    </>
  );
}

function Slide07_Seguridad() {
  return (
    <>
      <ChromeTop section="Seguridad" slideNum={7} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">07 · BUENAS PRÁCTICAS</div>
        <div className="title-l" style={{ marginTop: 24, maxWidth: 1280 }}>
          Base de seguridad existente y hoja de hardening empresarial
        </div>
        <div className="subtitle" style={{ marginTop: 24, maxWidth: 1160 }}>
          La arquitectura observada combina controles ya presentes con mejoras previstas para entornos regulados.
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 34, marginTop: 62 }}>
          <div className="card surface">
            <div className="label" style={{ color: 'var(--red-green)', marginBottom: 26 }}>BASE OBSERVADA</div>
            <div style={{ display: 'grid', gap: 18 }}>
              {['Key Vault por dominio o servicio', 'Identidades gestionadas en múltiples servicios', 'Ingress HTTPS sin allowInsecure', 'Cifrado y logs habilitados', 'Backups Cosmos DB geo-redundantes'].map((item) => (
                <div key={item} className="body-m">• {item}</div>
              ))}
            </div>
          </div>

          <div className="card surface">
            <div className="label" style={{ color: 'var(--waka-orange)', marginBottom: 26 }}>HOJA DE HARDENING</div>
            <div style={{ display: 'grid', gap: 18 }}>
              {['Private Endpoints y VNet', 'mTLS y cifrado de tráfico entre pares', 'Defender / Sentinel', 'Azure Policy', 'Corrección de secretos en variables de entorno'].map((item) => (
                <div key={item} className="body-m">• {item}</div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Seguridad y hardening" />
    </>
  );
}

function Slide08_Compliance() {
  return (
    <>
      <ChromeTop section="Compliance" slideNum={8} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">08 · SECTORES Y REGIONES</div>
        <div className="title-l" style={{ marginTop: 24, maxWidth: 1260 }}>
          Diseño adaptable a exigencias regulatorias por mercado
        </div>
        <div className="subtitle" style={{ marginTop: 24, maxWidth: 1160 }}>
          El enfoque no declara certificaciones: se alinea con buenas prácticas y requisitos aplicables.
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.25fr 0.95fr', gap: 34, marginTop: 54 }}>
          <div className="card surface">
            <div className="label" style={{ color: 'var(--waka-orange)', marginBottom: 24 }}>MATRIZ SECTORIAL</div>
            <div style={{ display: 'grid', gap: 14 }}>
              <div className="card" style={{ padding: 18 }}><span className="tag orange">Telcos</span><span className="body-s" style={{ marginLeft: 16 }}>Consentimiento y trazabilidad</span></div>
              <div className="card" style={{ padding: 18 }}><span className="tag cyan">Banca / MoMo</span><span className="body-s" style={{ marginLeft: 16 }}>KYC, AML y secreto bancario</span></div>
              <div className="card" style={{ padding: 18 }}><span className="tag green">IMF</span><span className="body-s" style={{ marginLeft: 16 }}>Datos y crédito responsable</span></div>
              <div className="card" style={{ padding: 18 }}><span className="tag">Aseguradoras</span><span className="body-s" style={{ marginLeft: 16 }}>Siniestros y documentación</span></div>
            </div>
          </div>

          <div className="card surface">
            <div className="label" style={{ color: 'var(--waka-cyan)', marginBottom: 24 }}>MATRIZ REGIONAL</div>
            <div style={{ display: 'grid', gap: 18 }}>
              <div>
                <div className="tag cyan">Europa</div>
                <div className="body-s" style={{ marginTop: 10 }}>RGPD, ISO y DORA si aplica.</div>
              </div>
              <div>
                <div className="tag cyan">África / LATAM</div>
                <div className="body-s" style={{ marginTop: 10 }}>Bancos centrales y supervisores locales.</div>
              </div>
              <div>
                <div className="tag cyan">MENA</div>
                <div className="body-s" style={{ marginTop: 10 }}>Residencia de datos y regulación sectorial.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Compliance sectorial" />
    </>
  );
}

function Slide09_ImpactoNavarra() {
  return (
    <>
      <ChromeTop section="Impacto" slideNum={9} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">09 · IMPACTO PARA NAVARRA</div>
        <div className="title-l" style={{ marginTop: 24, maxWidth: 1290 }}>
          Una oportunidad para generar capacidades IA exportables desde Navarra
        </div>
        <div className="subtitle" style={{ marginTop: 24, maxWidth: 1160 }}>
          La propuesta se orienta a conocimiento, tecnología y posicionamiento en sectores regulados.
        </div>

        <div className="bento" style={{ marginTop: 60 }}>
          <div className="card surface">
            <div className="tag orange">Capacidades IA</div>
            <div className="body-m" style={{ marginTop: 22 }}>Desarrollo de know-how aplicado a agentes inteligentes y operaciones seguras.</div>
          </div>
          <div className="card surface">
            <div className="tag cyan">Tecnología exportable</div>
            <div className="body-m" style={{ marginTop: 22 }}>Plataforma orientada a mercados con alta regulación y alta demanda operativa.</div>
          </div>
          <div className="card surface">
            <div className="tag green">Empleo cualificado</div>
            <div className="body-m" style={{ marginTop: 22 }}>Base para perfiles cloud, IA, seguridad, integración y producto.</div>
          </div>
          <div className="card surface">
            <div className="tag">Transferencia</div>
            <div className="body-m" style={{ marginTop: 22 }}>Conocimiento técnico reutilizable en ecosistemas empresariales e institucionales.</div>
          </div>
          <div className="card surface">
            <div className="tag orange">Soberanía digital</div>
            <div className="body-m" style={{ marginTop: 22 }}>Mayor control sobre datos, trazabilidad y seguridad de servicios críticos.</div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Impacto territorial" />
    </>
  );
}

function Slide10_Cierre() {
  return (
    <>
      <ChromeTop section="Cierre" slideNum={10} total={TOTAL_SLIDES} />
      <div className="slide-body" style={{ position: 'relative', overflow: 'hidden' }}>
        <div className="grid-bg"></div>
        <div className="orbit-ring" style={{ position: 'absolute', right: 120, top: 150, width: 560, height: 560, opacity: 0.28 }}></div>

        <div className="eyebrow">10 · CIERRE INSTITUCIONAL</div>
        <div className="title-xl" style={{ marginTop: 34, maxWidth: 1280 }}>
          Plataforma IA segura para sectores regulados
        </div>
        <div className="subtitle" style={{ marginTop: 28, maxWidth: 1080 }}>
          Waka Orbit combina omnicanalidad, agentes inteligentes, arquitectura Azure y trazabilidad operativa.
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 34, marginTop: 66, maxWidth: 1320 }}>
          <div className="card surface">
            <div className="label" style={{ color: 'var(--waka-orange)', marginBottom: 24 }}>PROPUESTA DE VALOR</div>
            <div className="body-m">
              Interconectar comunicación, sistemas core y operaciones con una capa agéntica cloud-native.
            </div>
          </div>

          <div className="card surface">
            <div className="label" style={{ color: 'var(--red-green)', marginBottom: 24 }}>PRÓXIMOS PASOS</div>
            <div style={{ display: 'grid', gap: 14 }}>
              {['Validar convocatoria', 'Completar memoria técnica', 'Plan de hardening', 'Pilotos sectoriales', 'Matriz compliance'].map((item, index) => (
                <div key={item} className="body-s">
                  <span className="step-num" style={{ width: 28, height: 28, fontSize: 13, marginRight: 12 }}>{index + 1}</span>
                  {item}
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="strip" style={{ position: 'absolute', left: 80, right: 80, bottom: 86 }}>
          <span>Waka Orbit</span>
          <span>Gobierno de Navarra</span>
          <span>Memoria de subvención</span>
          <span>Plataforma agéntica omnicanal</span>
        </div>
      </div>
      <ChromeBottom chapter="Cierre" />
    </>
  );
}

Object.assign(window, {
  Slide01_Cover,
  Slide02_Problema,
  Slide03_Solucion,
  Slide04_Innovacion,
  Slide05_ArquitecturaAzure,
  Slide06_Omnicanalidad,
  Slide07_Seguridad,
  Slide08_Compliance,
  Slide09_ImpactoNavarra,
  Slide10_Cierre
});