const TOTAL_SLIDES = 12;

function Slide01_Cover() {
  return (
    <>
      <ChromeTop section="PROPUESTA IFAD" slideNum={1} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="grid-bg"></div>
        <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", height: "100%", gap: 34 }}>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <span className="tag orange">IFAD</span>
            <span className="tag cyan">AEAS</span>
            <span className="tag">4 países</span>
            <span className="tag green">10.000 productores</span>
            <span className="tag orange">WAKA AXIOM</span>
          </div>
          <div>
            <div className="eyebrow">AI RESULTS FOR IMPACT</div>
            <div className="title-xl" style={{ maxWidth: 1260 }}>WAKA para IFAD</div>
            <div className="subtitle" style={{ maxWidth: 1120, marginTop: 18 }}>
              Propuesta ampliada para Agricultural Extension and Advisory Services.
            </div>
          </div>
          <div className="card surface" style={{ maxWidth: 1320, padding: 34 }}>
            <div className="body-l">
              Infraestructura industrial de IA omnicanal para convertir conocimiento agrícola validado en asesoría accesible, segura, personalizada, trazable y escalable.
            </div>
          </div>
          <div className="strip" style={{ marginTop: 8 }}>
            <span>IA gobernada</span>
            <span>·</span>
            <span>última milla</span>
            <span>·</span>
            <span>canales rurales</span>
            <span>·</span>
            <span>medición de impacto</span>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Cover" />
    </>
  );
}

function Slide02_Convocatoria() {
  return (
    <>
      <ChromeTop section="EXIGENCIA IFAD" slideNum={2} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">LO QUE PIDE REALMENTE LA CONVOCATORIA</div>
        <div className="title-l" style={{ maxWidth: 1320 }}>
          No es una app. Es IA aplicada a servicios agrícolas reales.
        </div>
        <div className="subtitle" style={{ maxWidth: 1160, marginTop: 16 }}>
          El ToR busca soluciones funcionales, localizadas, medibles y escalables para AEAS.
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr 1fr", gap: 28, marginTop: 58 }}>
          <div className="card surface">
            <div className="kpi">
              <div className="label">Alcance indicativo</div>
              <div className="val orange">10.000</div>
              <div className="delta">productores objetivo</div>
            </div>
          </div>
          <div className="card">
            <div className="kpi">
              <div className="label">Cobertura</div>
              <div className="val cyan">4</div>
              <div className="delta">Brasil · México · Sierra Leona · Côte d’Ivoire</div>
            </div>
          </div>
          <div className="card">
            <div className="kpi">
              <div className="label">Referencia por país</div>
              <div className="val green">2.500</div>
              <div className="delta">productores aproximadamente</div>
            </div>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18, marginTop: 30 }}>
          <div className="card"><div className="label">FUNCIONAL</div><div className="body-m" style={{ marginTop: 12 }}>Debe operar en campo.</div></div>
          <div className="card"><div className="label">LOCALIZADA</div><div className="body-m" style={{ marginTop: 12 }}>Por país, idioma y perfil.</div></div>
          <div className="card"><div className="label">MEDIBLE</div><div className="body-m" style={{ marginTop: 12 }}>Con datos, reporting e impacto.</div></div>
          <div className="card"><div className="label">ESCALABLE</div><div className="body-m" style={{ marginTop: 12 }}>Más allá del piloto técnico.</div></div>
        </div>
      </div>
      <ChromeBottom chapter="Exigencias IFAD" />
    </>
  );
}

function Slide03_Tesis() {
  return (
    <>
      <ChromeTop section="POSICIONAMIENTO" slideNum={3} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">LA TESIS DE POSICIONAMIENTO</div>
        <div className="quote-block" style={{ marginTop: 54, maxWidth: 1500 }}>
          WAKA convierte conocimiento agrícola validado por IFAD, FAO, Africa Rice Center, ministerios, proyectos locales y socios técnicos en servicios de asesoría agrícola accesibles, personalizados, trazables y escalables a través de voz, WhatsApp, SMS, agentes y otros canales de última milla.
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 58 }}>
          <div className="card">
            <div className="label">NO</div>
            <div className="title-m" style={{ marginTop: 10 }}>Agritech pura</div>
          </div>
          <div className="card">
            <div className="label">NO</div>
            <div className="title-m" style={{ marginTop: 10 }}>Prototipo aislado</div>
          </div>
          <div className="card surface">
            <div className="label">NO</div>
            <div className="title-m" style={{ marginTop: 10 }}>Chatbot genérico</div>
          </div>
        </div>

        <div className="strip" style={{ marginTop: 32 }}>
          <span>plataforma industrial</span>
          <span>·</span>
          <span>IA gobernada</span>
          <span>·</span>
          <span>operación multi-canal</span>
          <span>·</span>
          <span>última milla</span>
        </div>
      </div>
      <ChromeBottom chapter="Posicionamiento" />
    </>
  );
}

function Slide04_Encaje() {
  return (
    <>
      <ChromeTop section="ENCAJE WAKA" slideNum={4} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">POR QUÉ WAKA ENCAJA</div>
        <div className="title-l" style={{ maxWidth: 1280 }}>
          IFAD no necesita financiar WAKA desde cero.
        </div>
        <div className="subtitle" style={{ maxWidth: 1120, marginTop: 14 }}>
          La oportunidad está en adaptar, integrar y desplegar una plataforma ya existente.
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 34, marginTop: 58 }}>
          <div className="card">
            <div className="card-header">Lo que IFAD necesita</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 22 }}>
              <div className="body-m">IA aplicada a AEAS, no demostración tecnológica.</div>
              <div className="body-m">Localización por país, idioma, cultura y perfil.</div>
              <div className="body-m">Despliegue en campo, medición y escalabilidad.</div>
              <div className="body-m">Uso de tecnologías y partnerships existentes.</div>
            </div>
          </div>
          <div className="card surface">
            <div className="card-header">Lo que WAKA aporta</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 22 }}>
              <div className="body-m">Plataforma existente con AXIOM/RAG.</div>
              <div className="body-m">Omnicanalidad, integraciones y dashboards.</div>
              <div className="body-m">Seguridad, trazabilidad y gobernanza.</div>
              <div className="body-m">Experiencia con telcos, Mobile Money, IMFs y agentes.</div>
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Encaje estratégico" />
    </>
  );
}

function Slide05_AXIOM() {
  return (
    <>
      <ChromeTop section="ARQUITECTURA IA" slideNum={5} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">WAKA AXIOM COMO CAPA DE IA GOBERNADA</div>
        <div className="title-l" style={{ maxWidth: 1280 }}>
          De fuentes verificadas a recomendaciones trazables.
        </div>
        <div className="subtitle" style={{ maxWidth: 1140, marginTop: 16 }}>
          AXIOM/RAG permite controlar contenido, contexto y uso operativo de la IA.
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28, marginTop: 58 }}>
          <div className="card">
            <div className="step-num">1</div>
            <div className="title-m" style={{ marginTop: 24 }}>Conocimiento validado</div>
            <div className="body-m" style={{ marginTop: 16 }}>
              IFAD, FAO, Africa Rice Center, ministerios, universidades, cooperativas, agrónomos y socios técnicos.
            </div>
          </div>
          <div className="card surface">
            <div className="step-num">2</div>
            <div className="title-m" style={{ marginTop: 24 }}>Recomendaciones controladas</div>
            <div className="body-m" style={{ marginTop: 16 }}>
              Evitar respuestas no verificadas; adaptar por país, cultivo, idioma y perfil; trazar fuentes.
            </div>
          </div>
          <div className="card">
            <div className="step-num">3</div>
            <div className="title-m" style={{ marginTop: 24 }}>Operación híbrida</div>
            <div className="body-m" style={{ marginTop: 16 }}>
              Voz, texto, audio o imagen; derivación a extensionistas humanos; datos para dashboards.
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="WAKA AXIOM" />
    </>
  );
}

function Slide06_Omnicanalidad() {
  return (
    <>
      <ChromeTop section="ACCESO RURAL" slideNum={6} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">OMNICANALIDAD Y ACCESO RURAL</div>
        <div className="title-l" style={{ maxWidth: 1320 }}>
          La mejor IA no sirve si el productor no puede acceder a ella.
        </div>
        <div className="subtitle" style={{ maxWidth: 1120, marginTop: 16 }}>
          El diseño debe combinar canales digitales, baja conectividad e instituciones.
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28, marginTop: 62 }}>
          <div className="card surface">
            <div className="tag cyan">Digital</div>
            <div className="title-m" style={{ marginTop: 24 }}>Canales disponibles</div>
            <div className="body-m" style={{ marginTop: 16 }}>
              WhatsApp, audio, formularios ligeros y fotos de cultivos si resulta viable.
            </div>
          </div>
          <div className="card">
            <div className="tag orange">Baja conectividad</div>
            <div className="title-m" style={{ marginTop: 24 }}>Canales rurales</div>
            <div className="body-m" style={{ marginTop: 16 }}>
              Voz, SMS, shortcodes, IVR y agentes para llegar más allá del smartphone.
            </div>
          </div>
          <div className="card">
            <div className="tag green">Institucional</div>
            <div className="title-m" style={{ marginTop: 24 }}>Canales de gestión</div>
            <div className="body-m" style={{ marginTop: 16 }}>
              Dashboards para técnicos, proyectos IFAD y gobiernos, con seguimiento operativo.
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Omnicanalidad" />
    </>
  );
}

function Slide07_UltimaMilla() {
  return (
    <>
      <ChromeTop section="ÚLTIMA MILLA" slideNum={7} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">CONVERTIR REDES EXISTENTES EN INFRAESTRUCTURA AGRÍCOLA</div>
        <div className="title-l" style={{ maxWidth: 1320 }}>
          La ventaja está en activar lo que ya llega al productor.
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "0.95fr 1.05fr", gap: 34, marginTop: 56 }}>
          <div className="card">
            <div className="card-header">Redes ya presentes</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 24 }}>
              <span className="tag">GSM</span>
              <span className="tag">voz/SMS</span>
              <span className="tag cyan">WhatsApp</span>
              <span className="tag green">Mobile Money</span>
              <span className="tag">microfinancieras</span>
              <span className="tag orange">agentes</span>
              <span className="tag">servicios telco</span>
            </div>
            <div className="body-m" style={{ marginTop: 30 }}>
              Productores conectan con servicios móviles, financieros y de agente antes que con plataformas agrícolas especializadas.
            </div>
          </div>
          <div className="card surface">
            <div className="card-header">Tesis WAKA</div>
            <div className="body-l" style={{ marginTop: 20 }}>
              Transformar redes móviles y financieras en infraestructura operativa para asesoría agrícola con IA.
            </div>
            <div className="body-m" style={{ marginTop: 20 }}>
              Onboarding, comunicación, seguimiento, pagos, incentivos, seguros, crédito y soporte de última milla.
            </div>
            <div className="label" style={{ marginTop: 28 }}>
              Sin asumir acuerdos garantizados: la experiencia WAKA reduce riesgo de ejecución.
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Última milla" />
    </>
  );
}

function Slide08_FieldDeployment() {
  return (
    <>
      <ChromeTop section="IMPLEMENTACIÓN" slideNum={8} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">LOCAL PARTNER ACTIVATION AND FIELD DEPLOYMENT</div>
        <div className="title-l" style={{ maxWidth: 1320 }}>
          El despliegue depende de socios locales activados y medidos.
        </div>
        <div className="subtitle" style={{ maxWidth: 1160, marginTop: 16 }}>
          El Implementing Partner coordina y responde por la ejecución en campo.
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 18, marginTop: 70 }}>
          <div className="card">
            <div className="step-num">1</div>
            <div className="title-m" style={{ marginTop: 22 }}>Identificar</div>
            <div className="body-s" style={{ marginTop: 12 }}>Socios por país.</div>
          </div>
          <div className="card">
            <div className="step-num">2</div>
            <div className="title-m" style={{ marginTop: 22 }}>Seleccionar</div>
            <div className="body-s" style={{ marginTop: 12 }}>Cooperativas, extensionistas, ONG, IMFs, agentes y entidades técnicas.</div>
          </div>
          <div className="card surface">
            <div className="step-num">3</div>
            <div className="title-m" style={{ marginTop: 22 }}>Formar</div>
            <div className="body-s" style={{ marginTop: 12 }}>Capacitar y certificar.</div>
          </div>
          <div className="card">
            <div className="step-num">4</div>
            <div className="title-m" style={{ marginTop: 22 }}>Retribuir</div>
            <div className="body-s" style={{ marginTop: 12 }}>Onboarding, soporte y trabajo de campo.</div>
          </div>
          <div className="card">
            <div className="step-num">5</div>
            <div className="title-m" style={{ marginTop: 22 }}>Medir</div>
            <div className="body-s" style={{ marginTop: 12 }}>Calidad, trazabilidad, resultados y reporting.</div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Field deployment" />
    </>
  );
}

function Slide09_Novatech() {
  return (
    <>
      <ChromeTop section="PARTNERS" slideNum={9} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">ROL COMPLEMENTARIO DE NOVATECH / E-KOKARI</div>
        <div className="title-l" style={{ maxWidth: 1320 }}>
          Útil para voz rural; no debe ser el corazón industrial.
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 34, marginTop: 58 }}>
          <div className="card surface">
            <div className="card-header">Valor potencial</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 22 }}>
              <div className="body-m">Rural ICT4D e IVR en Níger.</div>
              <div className="body-m">Agricultores, ganaderos y compradores.</div>
              <div className="body-m">Información, consejos, alertas y precios por teléfono.</div>
              <div className="body-m">Francés, hausa, zarma; baja alfabetización y teléfonos básicos.</div>
              <div className="body-m">Referencia FAO/e-Agriculture.</div>
            </div>
          </div>
          <div className="card">
            <div className="card-header">Límites del rol</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 22 }}>
              <div className="body-m">No posicionarlo como pieza central de escala industrial.</div>
              <div className="body-m">Puede complementar canales de voz y lenguas locales.</div>
              <div className="body-m">WAKA aporta escala, IA, seguridad e integración.</div>
              <div className="body-m">WAKA concentra omnicanalidad, dashboards y operación multi-país.</div>
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Ecosistema de partners" />
    </>
  );
}

function Slide10_Seguridad() {
  return (
    <>
      <ChromeTop section="PLATAFORMA" slideNum={10} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">SEGURIDAD, INTEGRACIÓN Y ESCALABILIDAD</div>
        <div className="title-l" style={{ maxWidth: 1320 }}>
          WAKA no solo aporta IA: aporta infraestructura segura e interoperable.
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28, marginTop: 56 }}>
          <div className="card">
            <div className="tag orange">Integraciones</div>
            <div className="body-m" style={{ marginTop: 22 }}>
              APIs de telcos, Mobile Money, microfinancieras, proyectos IFAD, gobiernos, CRMs y canales de comunicación.
            </div>
          </div>
          <div className="card surface">
            <div className="tag cyan">Conocimiento</div>
            <div className="body-m" style={{ marginTop: 22 }}>
              Bases de conocimiento, sistemas de extensión agrícola, dashboards y trazabilidad de fuentes.
            </div>
          </div>
          <div className="card">
            <div className="tag green">Base operativa</div>
            <div className="body-m" style={{ marginTop: 22 }}>
              Azure, gobernanza de datos, interoperabilidad, seguridad bancaria y respeto a GDPR.
            </div>
          </div>
        </div>

        <div className="card surface" style={{ marginTop: 30, padding: 30 }}>
          <div className="body-l">
            Orientación ISO 27001 / ISO 9001 para sostener seguridad, calidad y operación multi-país.
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Seguridad e integración" />
    </>
  );
}

function Slide11_Presupuesto() {
  return (
    <>
      <ChromeTop section="FINANCIACIÓN" slideNum={11} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">PRESUPUESTO, COFINANCIACIÓN Y REGLA DEL 70%</div>
        <div className="title-l" style={{ maxWidth: 1320 }}>
          La propuesta financiera debe reflejar despliegue local, no solo tecnología.
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr 1fr", gap: 24, marginTop: 48 }}>
          <div className="card surface">
            <div className="kpi">
              <div className="label">Presupuesto esperado</div>
              <div className="val orange">1,6–2,0 M</div>
              <div className="delta">USD incluyendo cofinanciación</div>
            </div>
          </div>
          <div className="card">
            <div className="kpi">
              <div className="label">Cofinanciación mínima</div>
              <div className="val cyan">20%</div>
              <div className="delta">25% para for-profit en propuesta financiera</div>
            </div>
          </div>
          <div className="card">
            <div className="kpi">
              <div className="label">Regla de asignación</div>
              <div className="val green">70%</div>
              <div className="delta">desarrollo/despliegue local IA y field testing</div>
            </div>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 28 }}>
          <div className="card">
            <div className="card-header">Cofinanciación WAKA en especie</div>
            <div className="body-s" style={{ marginTop: 18 }}>
              Plataforma, AXIOM, conectores, infraestructura, dashboards base, equipo senior, soporte operativo, know-how telco/MoMo/IMF, arquitectura y seguridad.
            </div>
          </div>
          <div className="card surface">
            <div className="card-header">Uso del 70%</div>
            <div className="body-s" style={{ marginTop: 18 }}>
              Adaptación IA, knowledge bases, fuentes verificadas, canales, localización lingüística, onboarding, formación, soporte, feedback, dashboards y medición.
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Presupuesto y cofinanciación" />
    </>
  );
}

function Slide12_Cierre() {
  return (
    <>
      <ChromeTop section="CIERRE" slideNum={12} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="grid-bg"></div>
        <div className="eyebrow">ALINEACIÓN FINAL Y PRÓXIMOS PASOS</div>
        <div className="title-xl" style={{ maxWidth: 1320 }}>
          Competir como plataforma industrial de <span style={{ color: "var(--waka-orange)" }}>impacto</span>.
        </div>
        <div className="subtitle" style={{ maxWidth: 1320, marginTop: 20 }}>
          El reto no es tecnológico ni de escala: es consorcio, conocimiento validado, partners locales, field testing, medición y sostenibilidad.
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.15fr", gap: 28, marginTop: 46 }}>
          <div className="card surface">
            <div className="card-header">Mensaje final</div>
            <div className="body-m" style={{ marginTop: 20 }}>
              WAKA tiene opción competitiva si se posiciona como plataforma industrial de IA, omnicanalidad, integración, seguridad y última milla.
            </div>
          </div>
          <div className="card">
            <div className="card-header">Próximos pasos</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 20 }}>
              <div className="body-s">1. Cerrar narrativa y roles.</div>
              <div className="body-s">2. Mapear partners y conocimiento por país.</div>
              <div className="body-s">3. Estructurar presupuesto, cofinanciación y 70%.</div>
              <div className="body-s">4. Definir indicadores de impacto y governance.</div>
              <div className="body-s">5. Preparar respuesta: Technical 50%.</div>
              <div className="body-s">Implementation 25% · Financial 25%.</div>
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Alineación final" />
    </>
  );
}

Object.assign(window, {
  Slide01_Cover,
  Slide02_Convocatoria,
  Slide03_Tesis,
  Slide04_Encaje,
  Slide05_AXIOM,
  Slide06_Omnicanalidad,
  Slide07_UltimaMilla,
  Slide08_FieldDeployment,
  Slide09_Novatech,
  Slide10_Seguridad,
  Slide11_Presupuesto,
  Slide12_Cierre
});