const TOTAL_SLIDES = 9;

function Slide01_HeroFund() {
  return (
    <>
      <ChromeTop section="Fund" 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: 80, top: 150, opacity: 0.35 }}></div>

        <div style={{ display: "grid", gridTemplateColumns: "1.08fr 0.92fr", gap: 56, alignItems: "center", height: "100%" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 26 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
              <div
                style={{
                  width: 106,
                  height: 106,
                  borderRadius: "50%",
                  background: "rgba(255,255,255,0.88)",
                  boxShadow: "0 0 46px rgba(255,255,255,0.55), 0 0 110px rgba(255,255,255,0.22)",
                  backdropFilter: "blur(8px)",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  flexShrink: 0
                }}
              >
                <img
                  src="assets/4B4A9FB.png"
                  alt="WAKA"
                  style={{ maxWidth: 78, maxHeight: 78, objectFit: "contain", display: "block" }}
                />
              </div>
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                <span className="tag orange">INICIATIVA PRIVADA LIMITADA</span>
                <span className="tag cyan">MÉXICO · LATAM</span>
              </div>
            </div>

            <div className="eyebrow">IA PARA FINANZAS E INCLUSIÓN</div>

            <div>
              <div className="title-xl" style={{ lineHeight: 0.92, letterSpacing: -4, maxWidth: 920 }}>
                WAKA AI Accelerator Fund
              </div>
            </div>

            <div>
              <span
                className="tag orange"
                style={{
                  fontSize: 20,
                  padding: "18px 28px",
                  letterSpacing: 2,
                  display: "inline-flex"
                }}
              >
                SOLICITA TU AYUDA
              </span>
            </div>

            <div className="subtitle" style={{ maxWidth: 880 }}>
              Si la IA avanza y tu entidad espera, la brecha crece. Postula para activar un primer agente IA sobre un producto financiero concreto.
            </div>

            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <span className="tag">SOFOMES</span>
              <span className="tag">IMF</span>
              <span className="tag">COOPERATIVAS</span>
              <span className="tag">FINTECHS DE CRÉDITO</span>
            </div>

            <div className="body-s" style={{ color: "var(--orbit-text-2)", maxWidth: 760 }}>
              Connecting the Next Billion to Possibility.
            </div>
          </div>

          <div className="card surface" style={{ padding: 22, display: "flex", flexDirection: "column", gap: 18 }}>
            <div style={{ position: "relative", width: "100%", paddingTop: "56.25%", borderRadius: 18, overflow: "hidden", border: "1px solid var(--orbit-border-strong)", background: "var(--orbit-bg)" }}>
              <iframe
                src="https://www.youtube.com/embed/indbd5bvosM"
                title="WAKA AI Accelerator Fund"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowFullScreen
                style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }}
              ></iframe>
            </div>
            <div className="quote-block" style={{ margin: 0 }}>
              La IA no debe ser una ventaja reservada solo para las grandes corporaciones.
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Hero" />
    </>
  );
}

function Slide02_WAKAGrandesImpacto() {
  return (
    <>
      <ChromeTop section="Contexto" slideNum={2} total={TOTAL_SLIDES} />
      <div className="slide-body" style={{ position: "relative" }}>
        <div className="grid-bg"></div>

        <div style={{ display: "flex", flexDirection: "column", gap: 42, height: "100%", justifyContent: "center" }}>
          <div>
            <div className="eyebrow">WAKA · TECNOLOGÍA CON MISIÓN</div>
            <div className="title-l" style={{ maxWidth: 1320 }}>
              Experiencia con grandes actores. Propósito de impacto social.
            </div>
          </div>

          <div className="bento" style={{ gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            <div className="card surface" style={{ padding: 34 }}>
              <div className="tag cyan">TELECOM</div>
              <div className="title-m" style={{ marginTop: 22 }}>Corporaciones</div>
              <div className="body-m" style={{ color: "var(--orbit-text-2)", marginTop: 16 }}>
                WAKA trabaja tecnología para organizaciones con operaciones exigentes.
              </div>
            </div>

            <div className="card surface" style={{ padding: 34 }}>
              <div className="tag green">MOBILE MONEY</div>
              <div className="title-m" style={{ marginTop: 22 }}>Servicios digitales</div>
              <div className="body-m" style={{ color: "var(--orbit-text-2)", marginTop: 16 }}>
                Aplicamos inteligencia artificial en finanzas, telecomunicaciones y servicios financieros.
              </div>
            </div>

            <div className="card surface" style={{ padding: 34 }}>
              <div className="tag orange">IMPACTO</div>
              <div className="title-m" style={{ marginTop: 22 }}>Inclusión</div>
              <div className="body-m" style={{ color: "var(--orbit-text-2)", marginTop: 16 }}>
                Nunca hemos olvidado que somos una tecnológica de impacto social.
              </div>
            </div>
          </div>

          <div className="strip" style={{ padding: "24px 32px" }}>
            <div className="body-l">
              La tecnología avanzada también debe llegar a quienes quedan fuera de las grandes transformaciones digitales.
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Contexto" />
    </>
  );
}

function Slide03_VentajaIA() {
  return (
    <>
      <ChromeTop section="Ventaja IA" slideNum={3} total={TOTAL_SLIDES} />
      <div className="slide-body" style={{ position: "relative" }}>
        <div className="grid-bg"></div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, height: "100%", alignItems: "center" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            <div className="eyebrow">LA BRECHA SE ABRE AHORA</div>
            <div className="title-l">
              La IA ya mejora venta, atención, activación y datos.
            </div>
            <div className="subtitle">
              Los grandes actores avanzan más rápido porque tienen presupuesto, equipos y tiempo.
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            <div className="card surface" style={{ padding: 32 }}>
              <div className="tag orange">BARRERA 01</div>
              <div className="body-l" style={{ marginTop: 18 }}>Falta presupuesto para probar IA en un caso real.</div>
            </div>
            <div className="card surface" style={{ padding: 32 }}>
              <div className="tag cyan">BARRERA 02</div>
              <div className="body-l" style={{ marginTop: 18 }}>Falta equipo técnico para diseñar y lanzar.</div>
            </div>
            <div className="card surface" style={{ padding: 32 }}>
              <div className="tag green">BARRERA 03</div>
              <div className="body-l" style={{ marginTop: 18 }}>Falta tiempo para convertir intención en ejecución.</div>
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Ventaja IA" />
    </>
  );
}

function Slide04_PorQueExisteFund() {
  return (
    <>
      <ChromeTop section="Fund" slideNum={4} total={TOTAL_SLIDES} />
      <div className="slide-body" style={{ position: "relative" }}>
        <div className="grid-bg"></div>

        <div style={{ display: "flex", flexDirection: "column", gap: 38, height: "100%", justifyContent: "center" }}>
          <div>
            <div className="eyebrow">POR QUÉ EXISTE EL FUND</div>
            <div className="title-l" style={{ maxWidth: 1360 }}>
              Una partida especial para pasar de planear IA a probarla.
            </div>
            <div className="subtitle" style={{ maxWidth: 1200, marginTop: 22 }}>
              Ayuda económica, tecnológica y operacional privada para un caso real de negocio.
            </div>
          </div>

          <div className="bento" style={{ gridTemplateColumns: "1fr 1fr", gap: 24 }}>
            <div className="card surface" style={{ padding: 36 }}>
              <div className="tag orange">LÓGICA SIMPLE</div>
              <div className="title-m" style={{ marginTop: 22 }}>
                Una entidad. Un producto. Un agente IA. Un resultado medible.
              </div>
            </div>

            <div className="card surface" style={{ padding: 36 }}>
              <div className="tag green">ACCESO TECNOLÓGICO</div>
              <div className="body-l" style={{ marginTop: 22 }}>
                Puede postular cualquier entidad elegible, independientemente de su nivel tecnológico o digital.
              </div>
              <div className="body-m" style={{ color: "var(--orbit-text-2)", marginTop: 18 }}>
                Incluso si no cuenta con core, CRM o infraestructura avanzada.
              </div>
            </div>
          </div>

          <div className="quote-block">
            Iniciativa privada limitada, sujeta a postulación, evaluación, aceptación y disponibilidad.
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Fund" />
    </>
  );
}

function Slide05_QueRecibeEntidad() {
  return (
    <>
      <ChromeTop section="Beneficios" slideNum={5} total={TOTAL_SLIDES} />
      <div className="slide-body" style={{ position: "relative" }}>
        <div className="grid-bg"></div>

        <div style={{ display: "flex", flexDirection: "column", gap: 38, height: "100%", justifyContent: "center" }}>
          <div>
            <div className="eyebrow">QUÉ RECIBE LA ENTIDAD</div>
            <div className="title-l" style={{ maxWidth: 1350 }}>
              Acompañamiento para lanzar un primer agente IA aplicado.
            </div>
          </div>

          <div className="bento" style={{ gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            <div className="card surface" style={{ padding: 34 }}>
              <div className="tag orange">DISEÑO</div>
              <div className="title-m" style={{ marginTop: 22 }}>Caso de uso</div>
              <div className="body-m" style={{ color: "var(--orbit-text-2)", marginTop: 16 }}>
                Definición del producto, campaña o proceso donde el agente puede ayudar.
              </div>
            </div>

            <div className="card surface" style={{ padding: 34 }}>
              <div className="tag cyan">CONFIGURACIÓN</div>
              <div className="title-m" style={{ marginTop: 22 }}>Agente IA</div>
              <div className="body-m" style={{ color: "var(--orbit-text-2)", marginTop: 16 }}>
                Puesta en marcha inicial con soporte WAKA y enfoque práctico.
              </div>
            </div>

            <div className="card surface" style={{ padding: 34 }}>
              <div className="tag green">MEDICIÓN</div>
              <div className="title-m" style={{ marginTop: 22 }}>Resultado</div>
              <div className="body-m" style={{ color: "var(--orbit-text-2)", marginTop: 16 }}>
                Seguimiento del desempeño sobre el caso elegido por la entidad.
              </div>
            </div>
          </div>

          <div className="strip" style={{ padding: "24px 30px" }}>
            <div className="body-m">
              Sin transformar toda la organización. Sin equipo técnico avanzado. Sin core ni CRM obligatorio. Sin compromiso de largo plazo desde el primer día.
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Beneficios" />
    </>
  );
}

function Slide06_ProcesoSimple() {
  return (
    <>
      <ChromeTop section="Proceso" slideNum={6} total={TOTAL_SLIDES} />
      <div className="slide-body" style={{ position: "relative" }}>
        <div className="grid-bg"></div>

        <div style={{ display: "flex", flexDirection: "column", gap: 52, height: "100%", justifyContent: "center" }}>
          <div>
            <div className="eyebrow">PROCESO SIMPLE</div>
            <div className="title-l">Cuatro pasos para empezar.</div>
            <div className="subtitle" style={{ marginTop: 20 }}>
              WAKA puede empezar en modo ligero, sin integraciones complejas.
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
            <div className="card surface" style={{ padding: 30 }}>
              <div className="step-num">1</div>
              <div className="title-m" style={{ marginTop: 22 }}>Formulario</div>
              <div className="body-m" style={{ color: "var(--orbit-text-2)", marginTop: 14 }}>
                La entidad solicita la ayuda.
              </div>
            </div>

            <div className="card surface" style={{ padding: 30 }}>
              <div className="step-num">2</div>
              <div className="title-m" style={{ marginTop: 22 }}>Evaluación</div>
              <div className="body-m" style={{ color: "var(--orbit-text-2)", marginTop: 14 }}>
                WAKA revisa elegibilidad y disponibilidad.
              </div>
            </div>

            <div className="card surface" style={{ padding: 30 }}>
              <div className="step-num">3</div>
              <div className="title-m" style={{ marginTop: 22 }}>Intercambio</div>
              <div className="body-m" style={{ color: "var(--orbit-text-2)", marginTop: 14 }}>
                Se define producto, campaña o proceso.
              </div>
            </div>

            <div className="card surface" style={{ padding: 30 }}>
              <div className="step-num">4</div>
              <div className="title-m" style={{ marginTop: 22 }}>Inicio</div>
              <div className="body-m" style={{ color: "var(--orbit-text-2)", marginTop: 14 }}>
                Se configura y lanza el primer agente.
              </div>
            </div>
          </div>

          <div style={{ display: "flex", justifyContent: "center" }}>
            <span className="tag orange" style={{ fontSize: 18, padding: "16px 26px" }}>
              SOLICITA TU AYUDA
            </span>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Proceso" />
    </>
  );
}

function Slide07_AgenteCasoReal() {
  return (
    <>
      <ChromeTop section="Agente IA" slideNum={7} total={TOTAL_SLIDES} />
      <div className="slide-body" style={{ position: "relative" }}>
        <div className="grid-bg"></div>

        <div style={{ display: "grid", gridTemplateColumns: "0.95fr 1.05fr", gap: 42, height: "100%", alignItems: "center" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            <div className="eyebrow">UN AGENTE PARA UN CASO REAL</div>
            <div className="title-l">
              Informa, responde, capta, califica y deriva.
            </div>
            <div className="subtitle">
              Aplicado a un producto financiero, campaña o proceso concreto.
            </div>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
              <span className="tag orange">Sin core ni CRM obligatorio</span>
              <span className="tag">Modo ligero</span>
            </div>
          </div>

          <div className="bento" style={{ gridTemplateColumns: "1fr 1fr", gap: 20 }}>
            <div className="card surface" style={{ padding: 28 }}>
              <div className="tag cyan">FAQ</div>
              <div className="body-l" style={{ marginTop: 18 }}>Responde dudas frecuentes y requisitos.</div>
            </div>
            <div className="card surface" style={{ padding: 28 }}>
              <div className="tag green">CAPTACIÓN</div>
              <div className="body-l" style={{ marginTop: 18 }}>Recibe interés y ordena información inicial.</div>
            </div>
            <div className="card surface" style={{ padding: 28 }}>
              <div className="tag orange">DERIVACIÓN</div>
              <div className="body-l" style={{ marginTop: 18 }}>Dirige al canal o equipo correspondiente.</div>
            </div>
            <div className="card surface" style={{ padding: 28 }}>
              <div className="tag">SEGURIDAD</div>
              <div className="body-l" style={{ marginTop: 18 }}>No aprueba crédito ni reemplaza riesgo interno.</div>
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Agente IA" />
    </>
  );
}

function Slide08_ElegibilidadFAQ() {
  return (
    <>
      <ChromeTop section="Elegibilidad" slideNum={8} total={TOTAL_SLIDES} />
      <div className="slide-body" style={{ position: "relative" }}>
        <div className="grid-bg"></div>

        <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 42, height: "100%", alignItems: "center" }}>
          <div>
            <div className="eyebrow">ELEGIBILIDAD + FAQ</div>
            <div className="title-l">
              Para entidades financieras de impacto.
            </div>
            <div className="subtitle" style={{ marginTop: 22 }}>
              Postulación sujeta a evaluación, aceptación y disponibilidad del Fund.
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <div className="card surface" style={{ padding: 28 }}>
              <div className="tag orange">QUIÉN PUEDE POSTULAR</div>
              <div className="body-l" style={{ marginTop: 16 }}>
                SOFOMES, IMF, cooperativas, microfinancieras, fintechs de crédito y entidades de inclusión financiera.
              </div>
            </div>

            <div className="card surface" style={{ padding: 28 }}>
              <div className="tag cyan">FAQ</div>
              <div className="title-m" style={{ marginTop: 16 }}>
                ¿Necesito core bancario, CRM o infraestructura avanzada?
              </div>
              <div className="body-m" style={{ color: "var(--orbit-text-2)", marginTop: 14 }}>
                No. Puede optar cualquier entidad con independencia de su nivel tecnológico o digital; WAKA puede iniciar en modo ligero.
              </div>
            </div>

            <div className="card surface" style={{ padding: 28 }}>
              <div className="tag green">ALCANCE</div>
              <div className="body-l" style={{ marginTop: 16 }}>
                No es ayuda pública, demo gratuita ni oferta abierta.
              </div>
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Elegibilidad" />
    </>
  );
}

function Slide09_FormularioDisclaimer() {
  return (
    <>
      <ChromeTop section="Postulación" slideNum={9} total={TOTAL_SLIDES} />
      <div className="slide-body" style={{ position: "relative" }}>
        <div className="grid-bg"></div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 44, height: "100%", alignItems: "center" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            <div className="eyebrow">APLICA AHORA</div>
            <div className="title-xl" style={{ lineHeight: 0.92, letterSpacing: -4 }}>
              Solicita tu ayuda
            </div>
            <div className="subtitle">
              Completa el formulario de postulación para que WAKA evalúe el caso.
            </div>
            <div>
              <span className="tag orange" style={{ fontSize: 20, padding: "18px 28px" }}>
                SOLICITA TU AYUDA
              </span>
            </div>
            <div className="body-m" style={{ color: "var(--orbit-text-2)", maxWidth: 760 }}>
              No necesita core, CRM ni equipo técnico avanzado para postular.
            </div>
          </div>

          <div className="card surface" style={{ padding: 34, display: "flex", flexDirection: "column", gap: 18 }}>
            <div className="title-m">Formulario</div>

            <div className="card" style={{ padding: 20 }}>
              <div className="label">ENTIDAD</div>
              <div className="body-m" style={{ color: "var(--orbit-text-2)", marginTop: 8 }}>Nombre de la organización</div>
            </div>

            <div className="card" style={{ padding: 20 }}>
              <div className="label">CONTACTO</div>
              <div className="body-m" style={{ color: "var(--orbit-text-2)", marginTop: 8 }}>Nombre, correo y teléfono</div>
            </div>

            <div className="card" style={{ padding: 20 }}>
              <div className="label">CASO DE USO</div>
              <div className="body-m" style={{ color: "var(--orbit-text-2)", marginTop: 8 }}>Producto, campaña o proceso candidato</div>
            </div>

            <div className="quote-block" style={{ margin: 0 }}>
              Campaña privada limitada, sujeta a condiciones, evaluación, aceptación y disponibilidad.
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Postulación" />
    </>
  );
}

Object.assign(window, {
  Slide01_HeroFund,
  Slide02_WAKAGrandesImpacto,
  Slide03_VentajaIA,
  Slide04_PorQueExisteFund,
  Slide05_QueRecibeEntidad,
  Slide06_ProcesoSimple,
  Slide07_AgenteCasoReal,
  Slide08_ElegibilidadFAQ,
  Slide09_FormularioDisclaimer
});