// slides12.jsx — Hijos de la Intimidad · Capítulo 12
// "La revolución de los hijos de Dios"
// Layout: título + texto corto a la izquierda, animación grande a la derecha.

// ─── Paleta (azul nocturno profundo + acento cálido) — igual que cap. 8 ───
const PALETTES = {
  noche: {
    name: 'Azul nocturno',
    bg: '#edeef3',
    panel: '#f4f5f8',
    soft: '#bcc4d8',
    medium: '#5a6688',
    deep: '#2a2f4a',
    abyss: '#0f1226',
    warm: '#e6c89a',
    warmDeep: '#b8916a',
    credit: '#b5321c',
    ink: '#1a1d2e',
    inkSoft: '#4d5470',
  },
};

const T = {
  display: 116, title: 74, subtitle: 48, lead: 38, body: 31,
  small: 26, micro: 22, caption: 24,
};
const PAD = { top: 104, bottom: 96, x: 128 };

// ─── Marco oscuro de slide ────────────────────────────────────────────────
function Frame12({ pal, children, label, vignette = true }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: pal.abyss,
      color: pal.bg,
      padding: `${PAD.top}px ${PAD.x}px ${PAD.bottom}px`,
      display: 'flex', flexDirection: 'column', overflow: 'hidden',
      fontFamily: "'Manrope', system-ui, sans-serif",
    }}>
      {vignette &&
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: `radial-gradient(ellipse 85% 65% at 28% 24%, ${pal.deep}88, transparent 64%), radial-gradient(ellipse 70% 90% at 92% 60%, ${pal.warm}12, transparent 60%)`,
        }} />}
      {label &&
        <div style={{
          position: 'absolute', top: 54, left: PAD.x,
          fontSize: T.caption, letterSpacing: '0.24em', textTransform: 'uppercase',
          color: pal.warm, fontWeight: 500,
        }}>{label}</div>}
      <div style={{ position: 'relative', flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, paddingTop: 28 }}>
        {children}
      </div>
      <div style={{
        position: 'absolute', bottom: 34, left: PAD.x, right: PAD.x,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontSize: T.caption, letterSpacing: '0.18em',
        color: pal.soft + '88', fontWeight: 500, whiteSpace: 'nowrap',
      }}>
        <span>HIJOS DE LA INTIMIDAD</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: pal.warm }} />
          CAPÍTULO 12
        </span>
      </div>
    </div>
  );
}

// ─── Plantilla reutilizable: texto izquierda / animación derecha ──────────
function SceneSlide({ pal, t, label, title, text, verse, verses, scene }) {
  const k = t.fontScale || 1;
  const verseList = verses || (verse ? [verse] : []);
  return (
    <Frame12 pal={pal} label={label}>
      <div style={{
        flex: 1, display: 'grid', gridTemplateColumns: '1fr 1.12fr',
        gap: 92, alignItems: 'center',
      }}>
        {/* Columna izquierda — título + texto corto */}
        <div style={{ maxWidth: 780, display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>
          <h2 style={{
            margin: 0, flexShrink: 0,
            fontFamily: "'Fraunces', serif",
            fontSize: T.title * k, lineHeight: 1.16, letterSpacing: '-0.02em',
            color: pal.bg, fontWeight: 300,
          }}>{title}</h2>
          <p style={{
            marginTop: 36, marginBottom: 0, flexShrink: 0,
            fontSize: T.body * k, lineHeight: 1.55,
            color: pal.bg + 'c4', fontWeight: 300, textWrap: 'pretty',
          }}>{text}</p>
          {verseList.length > 0 && t.showVerses &&
            <div style={{
              marginTop: 36, paddingTop: 24, borderTop: `1px solid ${pal.deep}`, alignSelf: 'stretch',
              display: 'flex', flexDirection: 'column', gap: 22,
            }}>
              {verseList.map((v, i) => (
                <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <div style={{
                    fontFamily: "'Fraunces', serif", fontStyle: 'italic',
                    fontSize: T.small * k, lineHeight: 1.4, color: pal.bg + 'aa', fontWeight: 300,
                  }}>"{v.text}"</div>
                  <div style={{
                    fontSize: T.caption, letterSpacing: '0.2em', textTransform: 'uppercase',
                    color: pal.warm, fontWeight: 500,
                  }}>{v.ref}</div>
                </div>
              ))}
            </div>}
        </div>

        {/* Columna derecha — animación */}
        <div style={{ height: '100%', maxHeight: 820, display: 'flex', alignItems: 'center' }}>
          <div style={{ width: '100%', height: '100%' }}>{scene}</div>
        </div>
      </div>
    </Frame12>
  );
}

// ─── 00 · Portada del capítulo ────────────────────────────────────────────
function SlidePortada({ pal, t, active }) {
  const k = t.fontScale || 1;
  return (
    <Frame12 pal={pal} label="El último capítulo">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
        {/* Título */}
        <div style={{ flexShrink: 0, textAlign: 'center', paddingTop: 6 }}>
          <div style={{
            fontSize: T.caption, letterSpacing: '0.28em', textTransform: 'uppercase',
            color: pal.warm, fontWeight: 500,
          }}>Hijos de la intimidad · Capítulo 12</div>
          <h1 style={{
            margin: '22px 0 0', fontFamily: "'Fraunces', serif",
            fontSize: 92 * k, lineHeight: 1.04, letterSpacing: '-0.025em',
            color: pal.bg, fontWeight: 300,
          }}>
            La revolución<br/>de <em style={{ color: pal.warm }}>los hijos de Dios</em>
          </h1>
          <p style={{
            margin: '26px auto 0', maxWidth: 1180,
            fontSize: 27 * k, lineHeight: 1.5, color: pal.bg + 'bc', fontWeight: 300, textWrap: 'pretty',
          }}>
            El último capítulo del libro — donde la intimidad con el Padre se vuelve misión: salir de la casa y encender el mundo.
          </p>
        </div>

        {/* Animación: enviado con una misión */}
        <div style={{ flex: 1, minHeight: 0, marginTop: 26, display: 'flex', alignItems: 'center' }}>
          <div style={{ width: '100%', height: '100%' }}>
            <ScenePortada pal={pal} active={active} />
          </div>
        </div>
      </div>
    </Frame12>
  );
}

// ─── 01 · La luz en las naciones ──────────────────────────────────────────
function SlideMundo({ pal, t, active }) {
  return (
    <SceneSlide
      pal={pal} t={t}
      label="02 · Una luz en las naciones"
      title={<>El mundo <em style={{ color: pal.warm }}>se enciende</em>,<br/>casa por casa</>}
      text={<>En medio de la oscuridad del mundo, los hijos de Dios se encienden uno a uno en cada nación. Y al brillar, se reconocen y se buscan: una sola luz repartida por toda la tierra.</>}
      verses={[
        { text: 'Vosotros sois la luz del mundo; una ciudad asentada sobre un monte no se puede esconder.', ref: 'Mateo 5:14' },
        { text: 'La creación aguarda con ansiedad la manifestación de los hijos de Dios.', ref: 'Romanos 8:19' },
      ]}
      scene={<SceneMundo pal={pal} active={active} />}
    />
  );
}

// ─── 02 · La creación espera ──────────────────────────────────────────────
function SlideOrbita({ pal, t, active }) {
  return (
    <SceneSlide
      pal={pal} t={t}
      label="05 · La creación espera"
      title={<>Dios mismo<br/><em style={{ color: pal.warm }}>desciende a la tierra</em></>}
      text={<>El tiempo no corre en vano: avanza hacia el día en que el Cielo toca la tierra. Toda la creación gime esperando ese momento — cuando Dios desciende, entra en su mundo y lo llena de Su presencia.</>}
      verse={{ text: 'La creación misma será libertada de la esclavitud de corrupción, a la libertad gloriosa de los hijos de Dios.', ref: 'Romanos 8:21' }}
      scene={<SceneOrbita pal={pal} active={active} />}
    />
  );
}

// ─── 03 · Colombia gime hoy (cifras de la realidad) ───────────────────────
function SlideColombia({ pal, t, active }) {
  const k = t.fontScale || 1;
  const stats = [
    {
      big: '8,6', unit: 'millones',
      label: 'desplazados por la violencia',
      detail: 'Una de las mayores crisis de desplazamiento interno del planeta: casi 1 de cada 5 colombianos.',
      src: 'Reg. Único de Víctimas · 2024',
    },
    {
      big: '2,8', unit: 'millones',
      label: 'venezolanos refugiados',
      detail: '1 de cada 3 sin afiliación a salud ni seguridad social; muchos, sin redes de apoyo.',
      src: 'R4V · DANE · 2024',
    },
    {
      big: '+102', unit: 'mil',
      label: 'niños abusados sexualmente',
      detail: 'Contra niñas, niños y adolescentes en cinco años: cerca de 56 cada día; 8 de cada 10, niñas.',
      src: 'Min. de Salud · 2020–2024',
    },
    {
      big: '38', unit: 'al día',
      label: 'mujeres violentadas sexualmente',
      detail: 'Acuden cada día a Medicina Legal por presunto delito sexual; muchas, apenas niñas.',
      src: 'Medicina Legal · 2024',
    },
    {
      big: '3.145', unit: 'en un año',
      label: 'vidas perdidas por suicidio',
      detail: 'Cerca de 9 cada día — y más de 40.000 intentos registrados en el mismo año.',
      src: 'Medicina Legal · 2023',
    },
    {
      big: '5,8', unit: 'millones',
      label: 'en la pobreza extrema',
      detail: 'Más de uno de cada diez colombianos vive con serias dificultades para acceder a los servicios básicos.',
      src: 'DANE · 2023',
    },
    {
      big: '4', unit: 'de cada 10',
      label: 'en el campo, sin salud cerca',
      detail: 'En zonas rurales viven en pobreza, muchas veces a horas del hospital o el médico más cercano.',
      src: 'DANE · 2023 · rural',
    },
    {
      big: '50/50', unit: 'en las urnas',
      label: 'un país partido en dos',
      detail: 'La elección de 2022 se definió por ~3 puntos (50,4% vs 47,3%): una nación dividida casi por mitades, enfrentada por su visión política.',
      src: 'Registraduría · 2022',
    },
  ];

  return (
    <Frame12 pal={pal} label="01 · La creación gime entre nosotros">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', minHeight: 0 }}>
        {/* Encabezado */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 72, alignItems: 'end' }}>
          <h2 style={{
            margin: 0, fontFamily: "'Fraunces', serif",
            fontSize: 50 * k, lineHeight: 1.08, letterSpacing: '-0.02em', color: pal.bg, fontWeight: 300,
          }}>
            El mundo gime hoy.<br/>No vayamos lejos: <em style={{ color: pal.warm }}>Colombia gime</em>.
          </h2>
          <p style={{
            margin: 0, fontSize: 24 * k, lineHeight: 1.46,
            color: pal.bg + 'b8', fontWeight: 300, textWrap: 'pretty',
          }}>
            No han temblado nuestras montañas como en Japón, pero la tierra gime bajo otro dolor. Detrás de cada cifra hay un rostro que espera, en la oscuridad, que alguien encienda una luz.
          </p>
        </div>

        {/* Cifras */}
        <div style={{
          marginTop: 40, display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)', columnGap: 30, rowGap: 30,
        }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              display: 'flex', flexDirection: 'column',
              paddingLeft: 20, borderLeft: `2px solid ${pal.warm}66`,
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span style={{
                  fontFamily: "'Fraunces', serif", fontSize: 50 * k, lineHeight: 0.9,
                  color: pal.warm, fontWeight: 300, letterSpacing: '-0.02em',
                }}>{s.big}</span>
                <span style={{
                  fontSize: 19 * k, color: pal.bg + 'aa', fontWeight: 400,
                }}>{s.unit}</span>
              </div>
              <div style={{
                marginTop: 12, fontSize: 18 * k, lineHeight: 1.22,
                color: pal.bg, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.03em',
              }}>{s.label}</div>
              <p style={{
                margin: '9px 0 0', fontSize: 15 * k, lineHeight: 1.38,
                color: pal.bg + '9c', fontWeight: 300, textWrap: 'pretty', flex: 1,
              }}>{s.detail}</p>
              <div style={{
                marginTop: 11, fontSize: 12.5, letterSpacing: '0.1em', textTransform: 'uppercase',
                color: pal.soft + '88', fontWeight: 500,
              }}>{s.src}</div>
            </div>
          ))}
        </div>

        {/* Cierre */}
        <div style={{
          marginTop: 36, paddingTop: 24, borderTop: `1px solid ${pal.deep}`,
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 60,
        }}>
          <p style={{
            margin: 0, maxWidth: 1000, fontFamily: "'Fraunces', serif", fontStyle: 'italic',
            fontSize: 26 * k, lineHeight: 1.3, color: pal.bg + 'e0', fontWeight: 300, textWrap: 'pretty',
          }}>
            Estas cifras no piden lástima: piden <em style={{ color: pal.warm, fontStyle: 'italic' }}>luz</em>. Piden hijos de Dios que se enciendan — aquí y ahora.
          </p>
          {t.showVerses &&
            <div style={{ flexShrink: 0, textAlign: 'right', maxWidth: 470 }}>
              <div style={{
                fontFamily: "'Fraunces', serif", fontStyle: 'italic',
                fontSize: 22 * k, lineHeight: 1.34, color: pal.bg + 'aa', fontWeight: 300,
              }}>"Toda la creación gime a una, y a una está con dolores de parto hasta ahora."</div>
              <div style={{
                marginTop: 9, fontSize: T.caption, letterSpacing: '0.2em', textTransform: 'uppercase',
                color: pal.warm, fontWeight: 500,
              }}>Romanos 8:22</div>
            </div>}
        </div>
      </div>
    </Frame12>
  );
}

// ─── 04 · La mirada fija ──────────────────────────────────────────────────
function SlideMirada({ pal, t, active }) {
  return (
    <SceneSlide
      pal={pal} t={t}
      label="03 · Una mirada que no se mueve"
      title={<>Los ojos fijos<br/><em style={{ color: pal.warm }}>en Jesús</em></>}
      text={<>Afán, distracción, entretenimiento barato, caos. Todo grita por tu atención. Pero el hijo aprende a fijar la mirada en una sola Persona — y todo lo demás pierde su poder.</>}
      verse={{ text: 'Puestos los ojos en Jesús, el autor y consumador de la fe.', ref: 'Hebreos 12:2' }}
      scene={<SceneMirada pal={pal} active={active} />}
    />
  );
}

// ─── 05 · Del altar lejano a Su regazo ────────────────────────────────────
function SlideRegazo({ pal, t, active }) {
  return (
    <SceneSlide
      pal={pal} t={t}
      label="04 · Un verdadero adorador es Hijo"
      title={<>Se sentó a los pies<br/>de la cruz, <em style={{ color: pal.warm }}>a contemplar</em></>}
      text={<>Vio la cruz — y detrás de ella reconoció al Padre. Ya no adora de lejos: se acerca, se sienta a Sus pies y se queda contemplándolo. Cara a cara, unidos como familia.</>}
      verses={[
        { text: 'No puede el Hijo hacer nada por sí mismo, sino lo que ve hacer al Padre; porque el Padre ama al Hijo, y le muestra todo lo que Él hace.', ref: 'Juan 5:19-20' },
        { text: 'No recibisteis el espíritu de esclavitud para estar otra vez en temor, sino el espíritu de adopción, por el cual clamamos: ¡Abba, Padre!', ref: 'Romanos 8:15' },
      ]}
      scene={<SceneRegazo pal={pal} active={active} />}
    />
  );
}

// ─── 06 · Un altar en medio de ellos ──────────────────────────────────────
function SlideCirculo({ pal, t, active }) {
  return (
    <SceneSlide
      pal={pal} t={t}
      label="06 · Un altar en medio de ellos"
      title={<>Tomados de la mano,<br/>levantan <em style={{ color: pal.warm }}>un altar</em></>}
      text={<>De rodillas, en círculo, tomados de la mano. Una generación que no adora sola: levanta junta un altar a Dios — y Él se sienta en medio de ellos.</>}
      verse={{ text: 'Donde están dos o tres congregados en mi nombre, allí estoy yo en medio de ellos.', ref: 'Mateo 18:20' }}
      scene={<SceneCirculo pal={pal} active={active} />}
    />
  );
}

// ─── 06 · Preguntas para compartir ────────────────────────────────────────
function SlidePreguntas({ pal, t, active }) {
  const k = t.fontScale || 1;
  const qs = [
    '¿Cuáles son las señales en el mundo que reflejan el clamor de la creación por la manifestación de los hijos de Dios?',
    '¿Cuáles son las características de los hijos de Dios que deben ser vistas y expresadas en cada ciudad y nación?',
    '¿Cuál es la estrategia de Satanás para intentar abortar espiritualmente a los hijos de la intimidad?',
    '¿Cómo podemos manifestar el Reino de Dios en nuestra ciudad?',
  ];

  return (
    <Frame12 pal={pal} label="Para compartir · grupos, células y liderazgo">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', maxWidth: 1640 }}>
        <h2 style={{
          margin: 0, fontFamily: "'Fraunces', serif",
          fontSize: 62 * k, lineHeight: 1.08, letterSpacing: '-0.02em', color: pal.bg, fontWeight: 300,
        }}>Cuatro preguntas para <em style={{ color: pal.warm }}>mirarnos juntos</em></h2>

        <div style={{
          marginTop: 52, display: 'grid', gridTemplateColumns: '1fr 1fr',
          columnGap: 80, rowGap: 40,
        }}>
          {qs.map((q, i) => (
            <div key={i} style={{
              display: 'flex', gap: 28, alignItems: 'flex-start',
              paddingTop: 26, borderTop: `1px solid ${i < 2 ? pal.warm + '66' : pal.deep}`,
            }}>
              <span style={{
                fontFamily: "'Fraunces', serif", fontSize: 56 * k, lineHeight: 0.9,
                color: pal.warm, fontWeight: 300, fontStyle: 'italic', flexShrink: 0,
              }}>{`0${i + 1}`}</span>
              <p style={{
                margin: 0, fontSize: 27 * k, lineHeight: 1.42,
                color: pal.bg + 'cc', fontWeight: 300, textWrap: 'pretty',
              }}>{q}</p>
            </div>
          ))}
        </div>
      </div>
    </Frame12>
  );
}

// ─── 07 · Ejercicio de aplicación personal (testimonio) ────────────────────
function SlideTestimonio({ pal, t, active }) {
  const k = t.fontScale || 1;
  // Motivo: un testimonio que se enciende y se propaga a muchos
  const nodes = Array.from({ length: 13 }, (_, i) => {
    const a = (i / 13) * Math.PI * 2 + 0.4;
    const r = 120 + (i % 3) * 56;
    return { x: 250 + Math.cos(a) * r, y: 300 + Math.sin(a) * r * 0.92, d: (i % 6) * 0.5, rr: 3 + (i % 3) };
  });
  return (
    <Frame12 pal={pal} label="Ejercicio de aplicación personal">
      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 80, alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', maxWidth: 880 }}>
          <h2 style={{
            margin: 0, flexShrink: 0, fontFamily: "'Fraunces', serif",
            fontSize: 66 * k, lineHeight: 1.06, letterSpacing: '-0.02em', color: pal.bg, fontWeight: 300,
          }}>Escribe tu <em style={{ color: pal.warm }}>testimonio</em></h2>

          <p style={{
            marginTop: 34, marginBottom: 0, flexShrink: 0,
            fontFamily: "'Fraunces', serif", fontStyle: 'italic',
            fontSize: 32 * k, lineHeight: 1.34, color: pal.bg + 'dd', fontWeight: 300, textWrap: 'pretty',
          }}>
            ¿Qué circunstancias ha usado Satanás para intentar destruir tu vida, pero que Dios ha redimido como un testimonio que <em style={{ color: pal.warm, fontStyle: 'italic' }}>transformará a cientos</em>?
          </p>

          <p style={{
            marginTop: 28, marginBottom: 0, flexShrink: 0,
            fontSize: 25 * k, lineHeight: 1.5, color: pal.bg + 'b0', fontWeight: 300, textWrap: 'pretty',
          }}>
            Escribe tu experiencia al leer este libro y ser transformado en un hijo de la intimidad. Cuéntalo a todos los que te cruces, publícalo, hazlo público en todo lugar.
          </p>

          <p style={{
            marginTop: 26, marginBottom: 0, flexShrink: 0,
            fontFamily: "'Fraunces', serif", fontStyle: 'italic',
            fontSize: 26 * k, lineHeight: 1.34, color: pal.warm, fontWeight: 300,
          }}>
            Que todos sepan que un nuevo hijo de la intimidad está listo para manifestar la paternidad de Dios en la tierra.
          </p>
        </div>

        <div style={{ height: '100%', maxHeight: 760, display: 'flex', alignItems: 'center' }}>
          <SceneFrame pal={pal} viewBox="0 0 500 600">
            <SkyBackdrop pal={pal} w={500} h={600} n={28} />
            <defs>
              <radialGradient id="testiGlow" cx="50%" cy="50%">
                <stop offset="0%" stopColor="#fff3d4" stopOpacity="0.95" />
                <stop offset="45%" stopColor={pal.warm} stopOpacity="0.5" />
                <stop offset="100%" stopColor={pal.warm} stopOpacity="0" />
              </radialGradient>
            </defs>
            {/* líneas a cada persona */}
            {nodes.map((n, i) => (
              <line key={'l' + i} x1="250" y1="300" x2={n.x} y2={n.y} stroke={pal.warm} strokeWidth="1"
                opacity="0.35" strokeDasharray="2 6" style={{ animation: `c12-glowS ${3 + (i % 4) * 0.6}s ease-in-out ${n.d}s infinite` }} />
            ))}
            {/* personas alcanzadas por el testimonio */}
            {nodes.map((n, i) => (
              <circle key={'n' + i} cx={n.x} cy={n.y} r={n.rr} fill="#fff3d4"
                style={{ animation: `c12-glow ${2.4 + (i % 4) * 0.5}s ease-in-out ${n.d}s infinite` }} />
            ))}
            {/* el testimonio (centro) */}
            <circle cx="250" cy="300" r="60" fill="url(#testiGlow)"
              style={{ animation: 'c12-glow 4s ease-in-out infinite', transformOrigin: '250px 300px' }} />
            <circle cx="250" cy="300" r="13" fill="#fffaf0"
              style={{ animation: 'c12-pulse 3s ease-in-out infinite', transformOrigin: '250px 300px' }} />
          </SceneFrame>
        </div>
      </div>
    </Frame12>
  );
}

Object.assign(window, {
  PALETTES, SlidePortada, SlideMundo, SlideOrbita, SlideColombia, SlideMirada, SlideRegazo, SlideCirculo,
  SlidePreguntas, SlideTestimonio,
});