// PharmIQ — Video promocional (escenas compartidas 16:9 / 9:16)
// Requiere: animations.jsx (Stage, Sprite, Easing, interpolate, animate, clamp)
// El HTML host define window.PROMO = { w, h, vertical, key } antes de cargar esto.

const CFG = window.PROMO;
const V = CFG.vertical;
const W = CFG.w, H = CFG.h;

// ── Tokens de marca ──────────────────────────────────────────────────────────
const INK    = '#0A0A0C';
const PAPER  = '#FCFCFC';
const GRAY   = '#F4F4F5';
const LINE   = '#E6E6E3';
const MUTE   = '#71717A';
const YELLOW = '#FACC15';
const HEAD = "'Plus Jakarta Sans', 'Inter', system-ui, sans-serif";
const SANS = "'Inter', system-ui, sans-serif";
const MONO = "'JetBrains Mono', ui-monospace, monospace";

const IMG = {
  turnos:     'uploads/pharmiq/05-turnos-malla-mensual.jpg',
  inventario: 'uploads/pharmiq/07-inventario-medicamentos.jpg',
  asistente:  'uploads/pharmiq/08-asistente-rag-documentos.jpg',
};

// ── Utilidades de animación ─────────────────────────────────────────────────

function SceneFade({ start, end, fadeIn = 0.35, fadeOut = 0.4, bg = PAPER, children }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const o = Math.min(clamp(localTime / fadeIn, 0, 1), clamp((duration - localTime) / fadeOut, 0, 1));
        return (
          <div style={{ position: 'absolute', inset: 0, background: bg, opacity: o, overflow: 'hidden' }}>
            {children}
          </div>
        );
      }}
    </Sprite>
  );
}

function Rise({ at = 0, dur = 0.55, dy = 26, children, style }) {
  const { localTime } = useSprite();
  const p = Easing.easeOutCubic(clamp((localTime - at) / dur, 0, 1));
  return (
    <div style={{ opacity: p, transform: `translateY(${(1 - p) * dy}px)`, ...style }}>
      {children}
    </div>
  );
}

function Pop({ at = 0, dur = 0.5, children, style }) {
  const { localTime } = useSprite();
  const lp = clamp((localTime - at) / dur, 0, 1);
  const s = 0.78 + 0.22 * Easing.easeOutBack(lp);
  return (
    <div style={{ opacity: Math.min(lp * 3, 1), transform: `scale(${s})`, transformOrigin: 'center', ...style }}>
      {children}
    </div>
  );
}

function Zoomer({ from = 1, to = 1.06, t0 = 0, t1 = 5, origin = '50% 50%', children }) {
  const { localTime } = useSprite();
  const s = animate({ from, to, start: t0, end: t1, ease: Easing.linear })(localTime);
  return (
    <div style={{ position: 'absolute', inset: 0, transform: `scale(${s})`, transformOrigin: origin }}>
      {children}
    </div>
  );
}

// Resaltado amarillo que barre detrás del texto
function HL({ at = 0, children }) {
  const { localTime } = useSprite();
  const p = Easing.easeOutCubic(clamp((localTime - at) / 0.5, 0, 1));
  return (
    <span style={{ position: 'relative', whiteSpace: 'nowrap' }}>
      <span style={{
        position: 'absolute', left: '-0.06em', right: '-0.06em', top: '0.5em', bottom: '0.02em',
        background: YELLOW, transform: `scaleX(${p})`, transformOrigin: 'left center', borderRadius: 4,
      }}></span>
      <span style={{ position: 'relative' }}>{children}</span>
    </span>
  );
}

// Líneas grandes que entran escalonadas; segmentos pueden llevar resaltado.
function StagedLines({ lines, size, y, x = 0, lineH = 1.14, align = 'left', weight = 700, color = INK, baseDelay = 0.4, step = 0.2 }) {
  return (
    <div style={{
      position: 'absolute', top: y,
      left: align === 'center' ? 0 : x,
      right: align === 'center' ? 0 : undefined,
      textAlign: align, fontFamily: HEAD, fontWeight: weight, fontSize: size,
      lineHeight: lineH, letterSpacing: '-0.028em', color, whiteSpace: 'pre-wrap',
    }}>
      {lines.map((segs, i) => (
        <Rise key={i} at={baseDelay + i * step}>
          <div>
            {segs.map((sg, j) => sg.hl != null
              ? <HL key={j} at={sg.hl}>{sg.t}</HL>
              : <span key={j}>{sg.t}</span>)}
          </div>
        </Rise>
      ))}
    </div>
  );
}

function Kicker({ text, style }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      fontFamily: MONO, fontSize: V ? 24 : 21, letterSpacing: '0.14em',
      textTransform: 'uppercase', color: MUTE, ...style,
    }}>
      <span style={{ width: 9, height: 9, borderRadius: '50%', background: YELLOW, flexShrink: 0 }}></span>
      <span>{text}</span>
    </div>
  );
}

const Check = ({ size = 13, color = INK }) => (
  <svg width={size} height={size} viewBox="0 0 12 12" fill="none">
    <path d="M2 6.4L4.8 9.2L10 3.2" stroke={color} strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"></path>
  </svg>
);

function GridBG() {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: 'linear-gradient(rgba(10,10,12,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,12,0.035) 1px, transparent 1px)',
      backgroundSize: '56px 56px',
    }}></div>
  );
}

// ── Marca ───────────────────────────────────────────────────────────────────

function LogoMark({ size = 96 }) {
  return (
    <div style={{
      width: size, height: size, background: INK, borderRadius: size * 0.27,
      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
    }}>
      <div style={{ width: size * 0.33, height: size * 0.33, background: YELLOW, borderRadius: '50%' }}></div>
    </div>
  );
}

// Subtítulo / leyenda inferior (es-419)
function Caption({ text, at = 1.0 }) {
  return (
    <Pop at={at} style={{
      position: 'absolute', left: 0, right: 0,
      top: V ? H - 310 : H - 122,
      display: 'flex', justifyContent: 'center',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 14,
        background: INK, color: '#fff', borderRadius: 999,
        padding: V ? '18px 36px' : '15px 32px',
        fontFamily: HEAD, fontWeight: 600, fontSize: V ? 36 : 30, letterSpacing: '-0.01em',
        boxShadow: '0 14px 40px rgba(10,10,12,0.22)',
      }}>
        <span style={{ width: 11, height: 11, borderRadius: '50%', background: YELLOW }}></span>
        <span>{text}</span>
      </div>
    </Pop>
  );
}

// Pastilla flotante (etiqueta de verificación)
function VerifyPill({ children, style }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      background: INK, color: '#fff', borderRadius: 999, padding: V ? '14px 26px' : '12px 24px',
      fontFamily: SANS, fontWeight: 600, fontSize: V ? 27 : 24,
      boxShadow: '0 12px 32px rgba(10,10,12,0.25)', ...style,
    }}>
      <span style={{
        width: V ? 28 : 25, height: V ? 28 : 25, borderRadius: '50%', background: YELLOW,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><Check size={V ? 15 : 13} /></span>
      {children}
    </div>
  );
}

// ── Cámara sobre captura de pantalla ────────────────────────────────────────
// La imagen vive en un lienzo imgW×imgH dentro de una tarjeta w×h con
// overflow oculto; s/fx/fy guían el zoom tipo Ken Burns hacia un punto focal.

function ScreenZoom({ src, w, h, imgW, sFn, fxFn, fyFn, children }) {
  const { localTime: t } = useSprite();
  const imgH = imgW * (920 / 1960);
  const s = sFn(t), fx = fxFn(t), fy = fyFn(t);
  let px = w / 2 - fx * imgW * s;
  let py = h / 2 - fy * imgH * s;
  px = clamp(px, Math.min(0, w - imgW * s), 0);
  py = clamp(py, Math.min(0, h - imgH * s), 0);
  return (
    <div style={{
      width: w, height: h, borderRadius: 20, overflow: 'hidden',
      border: `1px solid ${LINE}`, background: '#fff',
      boxShadow: '0 28px 70px rgba(10,10,12,0.13)', position: 'relative',
    }}>
      <div style={{
        position: 'absolute', left: 0, top: 0, width: imgW, height: imgH,
        transform: `translate(${px}px, ${py}px) scale(${s})`, transformOrigin: '0 0',
        willChange: 'transform',
      }}>
        <img src={src} alt="" style={{ width: '100%', height: '100%', display: 'block' }} />
        {children}
      </div>
    </div>
  );
}

// ── Andamiaje de escena de producto ─────────────────────────────────────────

const FEAT_CARD = V
  ? { x: 60, y: 480, w: 960, h: 1020, imgW: 1500 }
  : { x: 120, y: 212, w: 1680, h: 688, imgW: 1680 };

function FeatureScene({ start, end, kicker, title, caption, src, cam, imageOverlays, screenOverlays }) {
  const dur = end - start;
  const card = FEAT_CARD;
  const M = V ? 72 : 120;
  const win = [1.0, dur - 0.7];
  const sFn  = interpolate(win, [cam.s0, cam.s1], Easing.easeInOutSine);
  const fxFn = interpolate(win, [cam.f0[0], cam.f1[0]], Easing.easeInOutSine);
  const fyFn = interpolate(win, [cam.f0[1], cam.f1[1]], Easing.easeInOutSine);
  return (
    <SceneFade start={start} end={end} bg={PAPER}>
      <GridBG />
      <div style={{ position: 'absolute', left: M, top: V ? 160 : 64, right: M }}>
        <Rise at={0.15}><Kicker text={kicker} /></Rise>
        <Rise at={0.3}>
          <div style={{
            fontFamily: HEAD, fontWeight: 700, fontSize: V ? 56 : 46,
            letterSpacing: '-0.025em', color: INK, lineHeight: 1.08, marginTop: V ? 22 : 14,
          }}>{title}</div>
        </Rise>
      </div>
      <Rise at={0.35} dy={46} style={{ position: 'absolute', left: card.x, top: card.y }}>
        <ScreenZoom src={src} w={card.w} h={card.h} imgW={card.imgW} sFn={sFn} fxFn={fxFn} fyFn={fyFn}>
          {imageOverlays}
        </ScreenZoom>
      </Rise>
      {screenOverlays ? screenOverlays(card) : null}
      <Caption text={caption} at={1.1} />
    </SceneFade>
  );
}

// ── Escena 1 · Dolor (0–5.4s) ───────────────────────────────────────────────

const PAIN_LINES = V ? [
  [{ t: '¿Cuántas horas pierde' }],
  [{ t: 'tu farmacia cuadrando' }],
  [{ t: 'turnos', hl: 1.9 }, { t: ', controlando' }],
  [{ t: 'vencimientos', hl: 2.35 }, { t: ' y' }],
  [{ t: 'buscando ' }, { t: 'normativa', hl: 2.8 }, { t: '?' }],
] : [
  [{ t: '¿Cuántas horas pierde tu farmacia' }],
  [{ t: 'cuadrando ' }, { t: 'turnos', hl: 1.9 }, { t: ',' }],
  [{ t: 'controlando ' }, { t: 'vencimientos', hl: 2.35 }],
  [{ t: 'y buscando ' }, { t: 'normativa', hl: 2.8 }, { t: '?' }],
];

function ScenePain({ start, end }) {
  const M = V ? 72 : 140;
  return (
    <SceneFade start={start} end={end} bg={GRAY}>
      <GridBG />
      <Zoomer from={1} to={1.06} t0={0} t1={end - start} origin="42% 38%">
        <Rise at={0.2} style={{ position: 'absolute', left: M, top: V ? 580 : 230 }}>
          <Kicker text="Operación diaria · Farmacia PyME" />
        </Rise>
        <StagedLines
          lines={PAIN_LINES}
          size={V ? 72 : 78}
          x={M} y={V ? 668 : 320}
          baseDelay={0.45} step={0.22}
        />
      </Zoomer>
    </SceneFade>
  );
}

// ── Escena 2 · Marca (5.1–8.5s) ─────────────────────────────────────────────

function SceneBrand({ start, end }) {
  return (
    <SceneFade start={start} end={end} bg={PAPER}>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', gap: 0,
      }}>
        <Pop at={0.25} dur={0.6}>
          <LogoMark size={V ? 150 : 124} />
        </Pop>
        <Rise at={0.55} style={{ textAlign: 'center', marginTop: 36 }}>
          <div style={{ fontFamily: HEAD, fontWeight: 800, fontSize: V ? 104 : 92, letterSpacing: '-0.03em', color: INK, lineHeight: 1 }}>
            PharmIQ
          </div>
          <div style={{ fontFamily: MONO, fontSize: V ? 26 : 22, letterSpacing: '0.32em', color: MUTE, marginTop: 16, textTransform: 'uppercase' }}>
            Clinical · OS
          </div>
        </Rise>
        <Rise at={0.95}>
          <div style={{ width: V ? 320 : 380, height: 1, background: LINE, margin: '44px 0' }}></div>
        </Rise>
        <Rise at={1.2} style={{ textAlign: 'center', padding: '0 80px' }}>
          <div style={{ fontFamily: HEAD, fontWeight: 500, fontSize: V ? 46 : 44, letterSpacing: '-0.015em', color: INK, lineHeight: 1.3 }}>
            {V ? (
              <span>La operación de tu farmacia,{'\n'}<HL at={1.9}>matemáticamente optimizada</HL>.</span>
            ) : (
              <span>La operación de tu farmacia, <HL at={1.9}>matemáticamente optimizada</HL>.</span>
            )}
          </div>
        </Rise>
      </div>
    </SceneFade>
  );
}

// ── Escena 3a · Turnos (8.2–13.2s) ──────────────────────────────────────────

function TurnosImageOverlays() {
  const { localTime: lt } = useSprite();
  const topFn = interpolate([1.9, 2.7, 3.5], [27.0, 34.3, 41.6], Easing.easeInOutCubic);
  const o = clamp((lt - 1.7) / 0.4, 0, 1);
  return (
    <div style={{
      position: 'absolute', left: '9.3%', width: '70%',
      top: `${topFn(lt)}%`, height: '6.9%',
      border: `3px solid ${YELLOW}`, borderRadius: 12,
      boxShadow: '0 0 0 6px rgba(250,204,21,0.16)', opacity: o,
    }}></div>
  );
}

function turnosScreenOverlays(card) {
  return (
    <Pop at={3.2} style={{ position: 'absolute', left: card.x + 30, top: card.y + card.h - (V ? 100 : 90) }}>
      <VerifyPill>Ley 40 Horas · Cumplimiento verificado</VerifyPill>
    </Pop>
  );
}

// ── Escena 3b · Inventario (12.9–17.8s) ─────────────────────────────────────

function ScanPanel() {
  const { localTime: lt } = useSprite();
  const scanP = clamp((lt - 1.15) / 1.1, 0, 1);
  const scanVisible = lt > 1.1 && lt < 2.3;
  const scanTop = 8 + 84 * ((scanP * 2) % 1);
  const chips = ['Paracetamol · 500 mg', 'Lote LOT-2134124', 'Vence 25/05/2026'];
  const fs = V ? 25 : 22;
  return (
    <Pop at={0.95} style={{ width: V ? 430 : 440 }}>
      <div style={{
        background: '#fff', border: `1px solid ${LINE}`, borderRadius: 18,
        boxShadow: '0 22px 56px rgba(10,10,12,0.18)', padding: 20,
        fontFamily: SANS,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: MONO, fontSize: V ? 18 : 16, letterSpacing: '0.12em', color: MUTE, textTransform: 'uppercase' }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: YELLOW }}></span>
          Escanear con IA
        </div>
        {/* "Foto" del medicamento */}
        <div style={{
          position: 'relative', height: V ? 185 : 175, marginTop: 14, borderRadius: 12, overflow: 'hidden',
          background: 'repeating-linear-gradient(135deg, #F0F0EE 0 12px, #E8E8E5 12px 24px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          border: `1px solid ${LINE}`,
        }}>
          {/* cápsula */}
          <div style={{ width: 116, height: 42, borderRadius: 21, overflow: 'hidden', display: 'flex', transform: 'rotate(-16deg)', boxShadow: '0 8px 18px rgba(10,10,12,0.18)' }}>
            <div style={{ flex: 1, background: INK }}></div>
            <div style={{ flex: 1, background: YELLOW }}></div>
          </div>
          {scanVisible && (
            <div style={{
              position: 'absolute', left: 0, right: 0, top: `${scanTop}%`, height: 4,
              background: YELLOW, boxShadow: `0 0 18px 4px rgba(250,204,21,0.65)`,
            }}></div>
          )}
          <div style={{ position: 'absolute', left: 12, bottom: 8, fontFamily: MONO, fontSize: 14, color: MUTE }}>IMG_2034.jpg</div>
        </div>
        {/* Datos extraídos */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 16 }}>
          {chips.map((c, i) => (
            <Pop key={i} at={2.25 + i * 0.28}>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 12,
                border: `1px solid ${LINE}`, background: GRAY, borderRadius: 10,
                padding: '10px 16px', fontFamily: MONO, fontSize: fs, color: INK,
              }}>
                <Check size={14} />
                {c}
              </div>
            </Pop>
          ))}
        </div>
        <Pop at={3.4} style={{ marginTop: 16 }}>
          <VerifyPill style={{ width: '100%', justifyContent: 'center', boxSizing: 'border-box', whiteSpace: 'nowrap', fontSize: V ? 22 : 23, padding: '12px 16px' }}>
            Registrado en inventario
          </VerifyPill>
        </Pop>
      </div>
    </Pop>
  );
}

function inventarioScreenOverlays(card) {
  const pos = V
    ? { left: card.x + card.w - 490, top: card.y + 150 }
    : { left: card.x + card.w - 500, top: card.y + 95 };
  return (
    <div style={{ position: 'absolute', ...pos }}>
      <ScanPanel />
    </div>
  );
}

// ── Escena 3c · Asistente normativo (17.5–22.6s) ────────────────────────────

function useTyped(text, at, cps = 30) {
  const { localTime } = useSprite();
  const n = clamp(Math.floor((localTime - at) * cps), 0, text.length);
  return { typed: text.slice(0, n), full: n >= text.length };
}

function AsistChat() {
  const { localTime: lt } = useSprite();
  const q = '¿Cuál es el plazo de retención de recetas controladas?';
  const { typed, full } = useTyped(q, 1.0, 34);
  const caret = Math.sin(lt * 9) > 0 && !full;
  const bw = V ? 640 : 620;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 18, width: bw }}>
      <Pop at={0.85}>
        <div style={{
          background: INK, color: '#fff', borderRadius: '20px 20px 6px 20px',
          padding: V ? '18px 26px' : '16px 24px', maxWidth: bw,
          fontFamily: SANS, fontWeight: 500, fontSize: V ? 30 : 27, lineHeight: 1.35,
          boxShadow: '0 16px 40px rgba(10,10,12,0.22)', minHeight: '1.4em',
        }}>
          {typed}<span style={{ opacity: caret ? 1 : 0 }}>|</span>
        </div>
      </Pop>
      <Pop at={2.85} style={{ alignSelf: 'stretch' }}>
        <div style={{
          background: '#fff', border: `1px solid ${LINE}`, borderRadius: '20px 20px 20px 6px',
          padding: 22, boxShadow: '0 22px 56px rgba(10,10,12,0.16)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: MONO, fontSize: V ? 18 : 16, letterSpacing: '0.12em', color: MUTE, textTransform: 'uppercase' }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: YELLOW }}></span>
            Respuesta · cita auditable
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 16 }}>
            {[0.92, 0.74, 0.5].map((wd, i) => (
              <Rise key={i} at={3.05 + i * 0.15} dy={8}>
                <div style={{ width: `${wd * 100}%`, height: V ? 15 : 13, borderRadius: 7, background: '#E9E9E6' }}></div>
              </Rise>
            ))}
          </div>
          <Rise at={3.5} dy={10} style={{ display: 'flex', gap: 10, marginTop: 18, flexWrap: 'wrap' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, border: `1px solid ${LINE}`, background: GRAY, borderRadius: 999, padding: '8px 18px', fontFamily: MONO, fontSize: V ? 22 : 20, color: INK }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: YELLOW }}></span>
              Fuente: Minsal
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, border: `1px solid ${LINE}`, background: GRAY, borderRadius: 999, padding: '8px 18px', fontFamily: MONO, fontSize: V ? 22 : 20, color: INK }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: YELLOW }}></span>
              ISP
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: INK, color: '#fff', borderRadius: 999, padding: '8px 18px', fontFamily: SANS, fontWeight: 600, fontSize: V ? 22 : 20 }}>
              <Check size={13} color={YELLOW} />
              Verificada
            </span>
          </Rise>
        </div>
      </Pop>
    </div>
  );
}

function asistenteScreenOverlays(card) {
  const pos = V
    ? { left: card.x + card.w - 700, top: card.y + 330 }
    : { left: card.x + card.w - 700, top: card.y + 165 };
  return (
    <div style={{ position: 'absolute', ...pos }}>
      <AsistChat />
    </div>
  );
}

// ── Escena 4 · Valor (22.3–28s) ─────────────────────────────────────────────

const VALUE_LINES = V ? [
  [{ t: 'PharmIQ reduce' }],
  [{ t: 'drásticamente' }],
  [{ t: 'el tiempo', hl: 1.7 }, { t: ' y' }],
  [{ t: 'los errores', hl: 2.1 }],
  [{ t: 'de tu farmacia.' }],
] : [
  [{ t: 'PharmIQ reduce drásticamente' }],
  [{ t: 'el tiempo', hl: 1.7 }, { t: ' y ' }, { t: 'los errores', hl: 2.1 }],
  [{ t: 'de tu farmacia.' }],
];

function SceneValor({ start, end }) {
  const modules = ['Turnos IA', 'Inventario IA', 'Asistente Normativo'];
  const chipFs = V ? 30 : 28;
  return (
    <SceneFade start={start} end={end} bg={GRAY}>
      <GridBG />
      <StagedLines
        lines={VALUE_LINES}
        size={V ? 76 : 84}
        y={V ? 420 : 280}
        align="center"
        baseDelay={0.35} step={0.2}
      />
      <div style={{
        position: 'absolute', left: 0, right: 0, top: V ? 1080 : 680,
        display: 'flex', flexDirection: V ? 'column' : 'row', alignItems: 'center',
        justifyContent: 'center', gap: V ? 20 : 24,
      }}>
        {modules.map((m, i) => (
          <Pop key={i} at={2.7 + i * 0.18}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 14,
              background: '#fff', border: `1px solid ${LINE}`, borderRadius: 999,
              padding: '16px 32px', fontFamily: HEAD, fontWeight: 600, fontSize: chipFs, color: INK,
              boxShadow: '0 10px 28px rgba(10,10,12,0.08)',
            }}>
              <span style={{
                width: 28, height: 28, borderRadius: '50%', background: YELLOW,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}><Check size={14} /></span>
              {m}
            </div>
          </Pop>
        ))}
      </div>
      <Rise at={3.6} style={{
        position: 'absolute', left: 0, right: 0, top: V ? 1430 : 810, textAlign: 'center',
        fontFamily: MONO, fontSize: V ? 26 : 24, letterSpacing: '0.22em',
        textTransform: 'uppercase', color: MUTE,
      }}>
        Todo en una sola consola
      </Rise>
    </SceneFade>
  );
}

// ── Escena 5 · CTA (27.7–30s) ───────────────────────────────────────────────

function SceneCTA({ start, end }) {
  return (
    <SceneFade start={start} end={end} bg={PAPER} fadeOut={0.01}>
      <CTAInner />
    </SceneFade>
  );
}

function CTAInner() {
  const { localTime: lt } = useSprite();
  const pulse = 1 + 0.022 * Math.sin(Math.max(0, lt - 0.8) * 3.2);
  return (
    <div style={{
      position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
    }}>
      <Pop at={0.15} dur={0.55}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 26 }}>
          <LogoMark size={V ? 110 : 92} />
          <div>
            <div style={{ fontFamily: HEAD, fontWeight: 800, fontSize: V ? 76 : 64, letterSpacing: '-0.03em', color: INK, lineHeight: 1 }}>PharmIQ</div>
            <div style={{ fontFamily: MONO, fontSize: V ? 21 : 18, letterSpacing: '0.3em', color: MUTE, marginTop: 10, textTransform: 'uppercase' }}>Clinical · OS</div>
          </div>
        </div>
      </Pop>
      <Pop at={0.5} style={{ marginTop: V ? 80 : 64 }}>
        <div style={{
          transform: `scale(${pulse})`,
          display: 'flex', alignItems: 'center', gap: 16,
          background: YELLOW, color: INK, borderRadius: 16,
          padding: V ? '26px 58px' : '22px 52px',
          fontFamily: HEAD, fontWeight: 700, fontSize: V ? 44 : 38, letterSpacing: '-0.01em',
          boxShadow: '0 18px 44px rgba(250,204,21,0.45)',
        }}>
          Comenzar gratis
          <span style={{ fontWeight: 600 }}>→</span>
        </div>
      </Pop>
      <Rise at={0.85} style={{ marginTop: V ? 48 : 38 }}>
        <div style={{ fontFamily: MONO, fontSize: V ? 28 : 25, color: MUTE, letterSpacing: '0.05em' }}>
          pharm-iq.vercel.app
        </div>
      </Rise>
    </div>
  );
}

// ── Composición ─────────────────────────────────────────────────────────────

function TimecodeLabel({ children }) {
  const t = useTime();
  return (
    <div data-screen-label={`t≈${Math.floor(t)}s`} style={{ position: 'absolute', inset: 0 }}>
      {children}
    </div>
  );
}

function PromoVideo() {
  return (
    <Stage width={W} height={H} duration={30} background={PAPER} persistKey={CFG.key} loop={true}>
      <TimecodeLabel>
        {/* Precarga de capturas */}
        <div style={{ display: 'none' }}>
          {Object.values(IMG).map((s, i) => <img key={i} src={s} alt="" />)}
        </div>

        <ScenePain start={0} end={5.4} />
        <SceneBrand start={5.1} end={8.5} />

        <FeatureScene
          start={8.2} end={13.2}
          kicker="01 · Motor de turnos IA"
          title="La malla del mes cumple la Ley 40 Horas"
          caption="Turnos legales en minutos."
          src={IMG.turnos}
          cam={V ? { s0: 1.55, s1: 2.15, f0: [0.45, 0.42], f1: [0.34, 0.5] }
                 : { s0: 1.02, s1: 1.7,  f0: [0.5, 0.45],  f1: [0.35, 0.48] }}
          imageOverlays={<TurnosImageOverlays />}
          screenOverlays={turnosScreenOverlays}
        />

        <FeatureScene
          start={12.9} end={17.8}
          kicker="02 · Inventario IA"
          title="De una foto al lote registrado"
          caption="Inventario con una foto."
          src={IMG.inventario}
          cam={V ? { s0: 1.6, s1: 2.25, f0: [0.45, 0.3], f1: [0.34, 0.24] }
                 : { s0: 1.04, s1: 1.75, f0: [0.5, 0.32], f1: [0.38, 0.24] }}
          screenOverlays={inventarioScreenOverlays}
        />

        <FeatureScene
          start={17.5} end={22.6}
          kicker="03 · Asistente normativo"
          title="Respuestas con cita Minsal · ISP"
          caption="Normativa al instante."
          src={IMG.asistente}
          cam={V ? { s0: 1.55, s1: 1.9, f0: [0.49, 0.4], f1: [0.45, 0.42] }
                 : { s0: 1.04, s1: 1.42, f0: [0.5, 0.42], f1: [0.44, 0.44] }}
          screenOverlays={asistenteScreenOverlays}
        />

        <SceneValor start={22.3} end={28.0} />
        <SceneCTA start={27.7} end={30.01} />
      </TimecodeLabel>
    </Stage>
  );
}

window.PromoVideo = PromoVideo;