// SME Cloud ERP demo scenes
// 30s total · 1920×1080 · 16:9
// Scenes:
//   01 [0–5s]   Caos · paper/cream "before"
//   02 [5–11s]  Activación · dashboard appears, 2 modules
//   03 [11–17s] Crecimiento · more modules + KPIs animate
//   04 [17–23s] Multi-sede + IA · map with pins, IA glow
//   05 [23–30s] Reveal final · big statement + logo

const { Sprite, useSprite, useTime, TextSprite, RectSprite, Easing, interpolate, animate, clamp } = window;

/* ─────────────── shared brand ─────────────── */
const BRAND = {
  base:   "#05060d",
  ink:    "#fafafa",
  mute:   "rgba(255,255,255,0.6)",
  mute2:  "rgba(255,255,255,0.35)",
  violet: "#7c5cff",
  cyan:   "#22d3ee",
  blue:   "#3b82f6",
  paper:  "#f4efe6",
  paperInk: "#0d0d0d",
  gradAurora: "linear-gradient(120deg,#c4b5fd 0%,#93c5fd 35%,#67e8f9 70%,#c4b5fd 100%)",
  gradAccent: "linear-gradient(135deg,#7c5cff,#22d3ee)",
};

const W = 1920, H = 1080;

/* ─────────────── helpers ─────────────── */
function AuroraBg({ opacity = 1 }) {
  return (
    <div style={{
      position: "absolute", inset: 0, pointerEvents: "none",
      background: BRAND.base,
      opacity,
    }}>
      <div style={{
        position: "absolute", inset: 0,
        background:
          "radial-gradient(45% 45% at 15% 25%, rgba(124,92,255,0.40), transparent 60%)," +
          "radial-gradient(40% 40% at 85% 15%, rgba(34,211,238,0.30), transparent 60%)," +
          "radial-gradient(50% 55% at 60% 90%, rgba(59,130,246,0.25), transparent 65%)",
        filter: "blur(40px)",
      }} />
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage:
          "linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),"+
          "linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px)",
        backgroundSize: "80px 80px",
        maskImage: "radial-gradient(ellipse at center, black 30%, transparent 80%)",
        WebkitMaskImage: "radial-gradient(ellipse at center, black 30%, transparent 80%)",
      }} />
    </div>
  );
}

function GradText({ children, size = 80, weight = 800, italic = false, style = {}, font }) {
  return (
    <span style={{
      background: BRAND.gradAurora,
      WebkitBackgroundClip: "text",
      backgroundClip: "text",
      WebkitTextFillColor: "transparent",
      fontFamily: italic ? "'Instrument Serif', Georgia, serif" : (font || "'Geist', system-ui, sans-serif"),
      fontWeight: italic ? 400 : weight,
      fontStyle: italic ? "italic" : "normal",
      fontSize: size,
      letterSpacing: italic ? "-0.025em" : "-0.04em",
      lineHeight: 0.95,
      ...style,
    }}>{children}</span>
  );
}

function ChapterLabel({ chapter, title }) {
  return (
    <div style={{
      display: "flex", alignItems: "center", gap: 16,
      fontFamily: "'Geist Mono', monospace",
      fontSize: 18,
      letterSpacing: "0.22em",
      textTransform: "uppercase",
      color: BRAND.mute,
    }}>
      <span style={{ width: 32, height: 1, background: "rgba(255,255,255,0.4)" }}></span>
      <span style={{ color: "#c4b5fd" }}>{chapter}</span>
      <span>—</span>
      <span>{title}</span>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────────────────
   SCENE 01 — Día 1: el caos (paper background)
   ────────────────────────────────────────────────────────────────────────── */
function Scene01_Chaos() {
  const { localTime, progress } = useSprite();

  // Slight zoom in
  const scale = 1 + progress * 0.04;

  return (
    <div style={{
      position: "absolute", inset: 0,
      background: BRAND.paper,
      overflow: "hidden",
    }}>
      {/* paper texture */}
      <div style={{
        position: "absolute", inset: 0, opacity: 0.4,
        backgroundImage:
          "repeating-linear-gradient(0deg, rgba(13,13,13,0.04) 0 1px, transparent 1px 4px)," +
          "radial-gradient(at 30% 30%, rgba(13,13,13,0.05), transparent 60%)",
      }} />

      <div style={{
        position: "absolute", inset: 0,
        transform: `scale(${scale})`,
        transformOrigin: "center",
      }}>
        {/* Excel chaos in background */}
        <ExcelMess x={140} y={220} t={localTime} />

        {/* Sticky notes */}
        <StickyNote x={1180} y={180} rotate={-6} delay={0.3}
          title="PEDIDOS" lines={["Vázquez x 200u", "TexAndina urgente!", "Llamar a Pedro"]} />
        <StickyNote x={1380} y={340} rotate={4} delay={0.5}
          title="PROVEEDOR" lines={["Hilo PE — viene viernes", "Pagar S/ 2,800", "Cotizar PVC"]} />
        <StickyNote x={1240} y={520} rotate={-3} delay={0.7}
          title="PRODUCCIÓN" lines={["OP-1039 atrasada", "Falta tela azul", "Turno noche?"]} />

        {/* WhatsApp messages on the right */}
        <WhatsAppBubble x={1500} y={720} delay={1.1} text="¿Llegó mi pedido?" from="Cliente" />
        <WhatsAppBubble x={1330} y={820} delay={1.3} text="Me das una factura?" from="Cliente" />
        <WhatsAppBubble x={1500} y={920} delay={1.5} text="¿Cuánto cuesta x mayor?" from="Cliente" />

        {/* Calculator */}
        <Calculator x={520} y={780} delay={0.4} />

        {/* Pain captions appearing */}
        <PainTag x={300} y={120} t={localTime} start={2.2} label="Stock disperso" />
        <PainTag x={900} y={140} t={localTime} start={2.5} label="Cobranzas por WhatsApp" />
        <PainTag x={620} y={950} t={localTime} start={2.8} label="Sin control de producción" />
      </div>

      {/* Big chapter label */}
      <div style={{
        position: "absolute", left: 100, top: 100,
        opacity: animate({ from: 0, to: 1, start: 0.2, end: 1, ease: Easing.easeOutCubic })(localTime),
        transform: `translateY(${(1 - animate({from:0,to:1,start:0.2,end:1,ease:Easing.easeOutCubic})(localTime)) * 20}px)`,
      }}>
        <div style={{
          fontFamily: "'Geist Mono', monospace",
          fontSize: 18,
          letterSpacing: "0.22em",
          textTransform: "uppercase",
          color: "rgba(13,13,13,0.5)",
          display: "flex", alignItems: "center", gap: 16,
        }}>
          <span style={{ width: 32, height: 1, background: "rgba(13,13,13,0.4)" }}></span>
          <span>Capítulo 01 — Día 1</span>
        </div>
      </div>

      {/* Bottom statement */}
      <div style={{
        position: "absolute", left: 100, bottom: 120,
        opacity: animate({ from: 0, to: 1, start: 3.2, end: 4.2, ease: Easing.easeOutCubic })(localTime),
        transform: `translateY(${(1 - animate({from:0,to:1,start:3.2,end:4.2,ease:Easing.easeOutCubic})(localTime)) * 24}px)`,
      }}>
        <div style={{
          fontFamily: "'Geist', sans-serif",
          fontSize: 84,
          fontWeight: 800,
          letterSpacing: "-0.04em",
          color: BRAND.paperInk,
          lineHeight: 0.94,
        }}>
          Tu negocio crece.
        </div>
        <div style={{
          fontFamily: "'Instrument Serif', serif",
          fontStyle: "italic",
          fontSize: 96,
          color: BRAND.paperInk,
          letterSpacing: "-0.02em",
          marginTop: 8,
          opacity: animate({ from: 0, to: 1, start: 3.7, end: 4.5, ease: Easing.easeOutCubic })(localTime),
        }}>
          tu Excel no.
        </div>
      </div>
    </div>
  );
}

function ExcelMess({ x, y, t }) {
  const rows = 14, cols = 8;
  const cellW = 110, cellH = 38;
  // staggered reveal
  const visible = Math.min(rows * cols, Math.floor(t * 40));
  return (
    <div style={{ position: "absolute", left: x, top: y, width: cols * cellW, height: rows * cellH, opacity: 0.5 }}>
      <div style={{
        position: "absolute", inset: 0,
        background: "white",
        border: "1px solid rgba(13,13,13,0.15)",
        boxShadow: "0 10px 30px -10px rgba(13,13,13,0.15)",
        transform: "rotate(-2deg)",
      }}>
        {/* header */}
        <div style={{ display: "flex", borderBottom: "1px solid rgba(13,13,13,0.2)", background: "rgba(13,13,13,0.04)" }}>
          {["SKU","Nombre","Stock","Costo","Precio","Cliente","Fecha","Estado"].map((h, i) => (
            <div key={i} style={{ width: cellW, height: cellH, padding: "10px 8px", fontSize: 12, fontWeight: 700, color: "#0d0d0d", borderRight: "1px solid rgba(13,13,13,0.1)" }}>
              {h}
            </div>
          ))}
        </div>
        {/* rows */}
        {Array.from({ length: rows }).map((_, r) => (
          <div key={r} style={{ display: "flex", borderBottom: "1px solid rgba(13,13,13,0.06)" }}>
            {Array.from({ length: cols }).map((_, c) => {
              const idx = r * cols + c;
              const isVisible = idx < visible;
              const sample = c === 0 ? `SKU-${1000+r}` :
                c === 1 ? ["Hilo PE","Tela Azul","PVC 32","Polialgodón","Boton X4"][r % 5] :
                c === 2 ? Math.floor(Math.random() * 200) :
                c === 3 ? "S/ " + (10 + r * 3) :
                c === 4 ? "S/ " + (25 + r * 4) :
                c === 5 ? ["TexAndina","Vázquez","Don Pepe"][r % 3] :
                c === 6 ? "12/04" :
                ["OK","??","??!","OK"][r % 4];
              return (
                <div key={c} style={{
                  width: cellW, height: cellH, padding: "10px 8px",
                  fontSize: 11, fontFamily: "'Geist Mono', monospace",
                  color: c === 7 && (sample === "??" || sample === "??!") ? "#dc2626" : "#3a3a3a",
                  borderRight: "1px solid rgba(13,13,13,0.08)",
                  opacity: isVisible ? 1 : 0,
                  background: r % 5 === 4 && c > 1 ? "rgba(244,176,32,0.18)" : "transparent",
                }}>{sample}</div>
              );
            })}
          </div>
        ))}
      </div>
    </div>
  );
}

function StickyNote({ x, y, rotate, delay, title, lines }) {
  const { localTime } = useSprite();
  const t = animate({ from: 0, to: 1, start: delay, end: delay + 0.5, ease: Easing.easeOutBack })(localTime);
  return (
    <div style={{
      position: "absolute", left: x, top: y,
      width: 220, padding: 18,
      background: "#fde68a",
      transform: `rotate(${rotate}deg) scale(${0.85 + t * 0.15})`,
      transformOrigin: "center",
      opacity: t,
      boxShadow: "0 18px 40px -10px rgba(13,13,13,0.3)",
      fontFamily: "'Caveat', 'Geist', sans-serif",
    }}>
      <div style={{ fontSize: 14, fontWeight: 800, color: "#92400e", textTransform: "uppercase", letterSpacing: "0.12em" }}>{title}</div>
      <div style={{ marginTop: 8, borderTop: "1px dashed rgba(146,64,14,0.4)" }}></div>
      {lines.map((l, i) => (
        <div key={i} style={{ fontSize: 18, color: "#451a03", marginTop: 6, fontWeight: 600, lineHeight: 1.3 }}>· {l}</div>
      ))}
    </div>
  );
}

function WhatsAppBubble({ x, y, delay, text, from }) {
  const { localTime } = useSprite();
  const t = animate({ from: 0, to: 1, start: delay, end: delay + 0.35, ease: Easing.easeOutCubic })(localTime);
  return (
    <div style={{
      position: "absolute", left: x, top: y,
      opacity: t,
      transform: `translateX(${(1 - t) * 30}px)`,
    }}>
      <div style={{ fontSize: 12, color: "#075e54", fontWeight: 700, marginBottom: 4, marginLeft: 12 }}>{from}</div>
      <div style={{
        background: "#dcf8c6",
        padding: "12px 16px",
        borderRadius: "18px 4px 18px 18px",
        fontSize: 18, color: "#0d0d0d", fontWeight: 500,
        maxWidth: 320,
        boxShadow: "0 8px 20px -10px rgba(13,13,13,0.2)",
      }}>{text}</div>
    </div>
  );
}

function Calculator({ x, y, delay }) {
  const { localTime } = useSprite();
  const t = animate({ from: 0, to: 1, start: delay, end: delay + 0.5, ease: Easing.easeOutCubic })(localTime);
  return (
    <div style={{
      position: "absolute", left: x, top: y,
      width: 220, padding: 12,
      background: "#1f2937", borderRadius: 14,
      transform: `rotate(8deg) scale(${0.9 + t * 0.1})`,
      opacity: t,
      boxShadow: "0 20px 40px -12px rgba(13,13,13,0.45)",
    }}>
      <div style={{ background: "#d1fae5", padding: 12, fontFamily: "'Geist Mono', monospace", fontSize: 22, textAlign: "right", color: "#065f46", borderRadius: 6, marginBottom: 8 }}>
        2,847.20
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 4 }}>
        {["7","8","9","÷","4","5","6","×","1","2","3","−","0",".","=","+"].map((k, i) => (
          <div key={i} style={{
            background: ["÷","×","−","+","="].includes(k) ? "#f59e0b" : "#374151",
            color: "white",
            padding: "10px 0", borderRadius: 4,
            fontWeight: 700, textAlign: "center", fontSize: 14,
          }}>{k}</div>
        ))}
      </div>
    </div>
  );
}

function PainTag({ x, y, t, start, label }) {
  const op = animate({ from: 0, to: 1, start, end: start + 0.4, ease: Easing.easeOutCubic })(t);
  return (
    <div style={{
      position: "absolute", left: x, top: y,
      opacity: op,
      transform: `translateY(${(1 - op) * 16}px)`,
    }}>
      <div style={{
        display: "inline-flex", alignItems: "center", gap: 10,
        padding: "10px 18px",
        background: "rgba(220,38,38,0.95)",
        color: "white",
        borderRadius: 999,
        fontFamily: "'Geist', sans-serif",
        fontSize: 22, fontWeight: 800, letterSpacing: "-0.01em",
        boxShadow: "0 14px 28px -8px rgba(220,38,38,0.4)",
      }}>
        <span style={{ width: 8, height: 8, background: "white", borderRadius: 999 }}></span>
        {label}
      </div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────────────────
   SCENE 02 — Día 1: activación
   ────────────────────────────────────────────────────────────────────────── */
function Scene02_Activate() {
  const { localTime, progress } = useSprite();

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
      <AuroraBg />

      <div style={{ position: "absolute", inset: 0, color: BRAND.ink, padding: "100px 100px 80px" }}>
        {/* Chapter */}
        <div style={{
          opacity: animate({ from: 0, to: 1, start: 0, end: 0.5, ease: Easing.easeOutCubic })(localTime),
        }}>
          <ChapterLabel chapter="Capítulo 02" title="Día 1 — Activación" />
        </div>

        {/* Headline */}
        <div style={{
          marginTop: 50,
          opacity: animate({ from: 0, to: 1, start: 0.3, end: 1, ease: Easing.easeOutCubic })(localTime),
          transform: `translateY(${(1 - animate({from:0,to:1,start:0.3,end:1,ease:Easing.easeOutCubic})(localTime)) * 30}px)`,
        }}>
          <div style={{ fontSize: 100, fontWeight: 800, color: BRAND.ink, letterSpacing: "-0.04em", lineHeight: 0.92 }}>
            Activas lo esencial.
          </div>
          <div style={{ marginTop: 8 }}>
            <GradText size={120} italic>Hoy mismo.</GradText>
          </div>
        </div>

        {/* Two modules card row */}
        <div style={{
          position: "absolute", left: 100, bottom: 200,
          right: 100,
          display: "flex", gap: 28,
        }}>
          <ModuleCard delay={1.0} t={localTime} code="M01" name="Inventario" desc="Stock · lotes · trazabilidad" price="49" />
          <ModuleCard delay={1.4} t={localTime} code="M02" name="Ventas & Facturación" desc="Cotizaciones · pedidos · cobranzas" price="59" />
          <BillCard delay={1.8} t={localTime} amount="99" sub="usuarios 4 · sedes 1" />
        </div>

        {/* Footer tagline */}
        <div style={{
          position: "absolute", left: 100, bottom: 90,
          opacity: animate({ from: 0, to: 1, start: 3.5, end: 4.2, ease: Easing.easeOutCubic })(localTime),
        }}>
          <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 18, letterSpacing: "0.22em", textTransform: "uppercase", color: BRAND.mute }}>
            sin instalación · sin compromiso · activación &lt; 24h
          </div>
        </div>
      </div>
    </div>
  );
}

function ModuleCard({ delay, t, code, name, desc, price, glow = true }) {
  const tt = animate({ from: 0, to: 1, start: delay, end: delay + 0.6, ease: Easing.easeOutBack })(t);
  const pulse = Math.sin(t * 4) * 0.05 + 1;
  return (
    <div style={{
      flex: 1,
      padding: 30,
      borderRadius: 24,
      background: "linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02))",
      border: "1px solid rgba(255,255,255,0.12)",
      backdropFilter: "blur(20px)",
      opacity: tt,
      transform: `translateY(${(1 - tt) * 40}px) scale(${0.92 + tt * 0.08})`,
      position: "relative", overflow: "hidden",
    }}>
      {glow && (
        <div style={{
          position: "absolute", top: -80, right: -80, width: 220, height: 220,
          background: BRAND.gradAccent,
          borderRadius: "50%",
          filter: "blur(60px)",
          opacity: 0.4 * pulse,
        }} />
      )}
      <div style={{ position: "relative" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 16, color: "#c4b5fd", letterSpacing: "0.22em" }}>{code}</span>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            padding: "6px 12px", borderRadius: 999,
            background: "rgba(16,185,129,0.15)", border: "1px solid rgba(16,185,129,0.4)",
            color: "#6ee7b7", fontFamily: "'Geist Mono', monospace", fontSize: 13, textTransform: "uppercase", letterSpacing: "0.16em",
          }}>
            <span style={{ width: 8, height: 8, background: "#10b981", borderRadius: 999 }}></span>
            activado
          </span>
        </div>
        <div style={{ marginTop: 30, fontSize: 44, fontWeight: 800, letterSpacing: "-0.025em", color: BRAND.ink }}>{name}</div>
        <div style={{ marginTop: 10, fontSize: 22, color: BRAND.mute }}>{desc}</div>
        <div style={{ marginTop: 40, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.08)", display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 14, color: BRAND.mute2, textTransform: "uppercase", letterSpacing: "0.18em" }}>Desde</span>
          <div>
            <GradText italic size={64}>{price}</GradText>
            <span style={{ marginLeft: 8, fontFamily: "'Geist Mono', monospace", fontSize: 14, color: BRAND.mute2, textTransform: "uppercase", letterSpacing: "0.18em" }}>S/ mes</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function BillCard({ delay, t, amount, sub }) {
  const tt = animate({ from: 0, to: 1, start: delay, end: delay + 0.6, ease: Easing.easeOutBack })(t);
  // Count-up animation
  const num = Math.floor(parseInt(amount) * animate({ from: 0, to: 1, start: delay + 0.3, end: delay + 1.2, ease: Easing.easeOutCubic })(t));
  return (
    <div style={{
      flex: 1.1,
      padding: 30,
      borderRadius: 24,
      background: BRAND.gradAccent,
      color: "white",
      opacity: tt,
      transform: `translateY(${(1 - tt) * 40}px) scale(${0.92 + tt * 0.08})`,
      position: "relative", overflow: "hidden",
      boxShadow: "0 30px 60px -20px rgba(124,92,255,0.6)",
    }}>
      <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 16, textTransform: "uppercase", letterSpacing: "0.22em", opacity: 0.75 }}>
        tu factura del mes
      </div>
      <div style={{ marginTop: 30, display: "flex", alignItems: "baseline" }}>
        <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontSize: 220, lineHeight: 0.8, letterSpacing: "-0.04em" }} className="nums">
          {num}
        </span>
      </div>
      <div style={{ marginTop: 10, fontFamily: "'Geist Mono', monospace", fontSize: 18, textTransform: "uppercase", letterSpacing: "0.22em", opacity: 0.75 }}>
        S/ por mes
      </div>
      <div style={{ marginTop: 40, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.25)", fontSize: 20, fontWeight: 600 }}>
        {sub}
      </div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────────────────
   SCENE 03 — Mes 6: crecimiento
   ────────────────────────────────────────────────────────────────────────── */
function Scene03_Growth() {
  const { localTime, progress } = useSprite();

  // Camera slowly drifts/zooms
  const camScale = 1 + progress * 0.02;

  // KPI count-up values
  const ventas = Math.floor(animate({ from: 12000, to: 184520, start: 0.8, end: 4.5, ease: Easing.easeOutCubic })(localTime));
  const ops = Math.floor(animate({ from: 4, to: 37, start: 0.8, end: 4.5, ease: Easing.easeOutCubic })(localTime));
  const margen = animate({ from: 18.2, to: 31.6, start: 0.8, end: 4.5, ease: Easing.easeOutCubic })(localTime).toFixed(1);

  // chart bar reveal
  const weeks = [42, 48, 55, 61, 58, 65, 72, 76, 78, 84, 88, 94];
  const revealed = Math.floor(animate({ from: 0, to: weeks.length, start: 1.5, end: 4.5, ease: Easing.easeOutCubic })(localTime));

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", transform: `scale(${camScale})`, transformOrigin: "center" }}>
      <AuroraBg />

      <div style={{ position: "absolute", inset: 0, padding: "100px 100px 80px", color: BRAND.ink }}>
        {/* Chapter */}
        <div style={{
          opacity: animate({ from: 0, to: 1, start: 0, end: 0.4, ease: Easing.easeOutCubic })(localTime),
        }}>
          <ChapterLabel chapter="Capítulo 03" title="Mes 6 — Crecimiento" />
        </div>

        {/* Headline */}
        <div style={{
          marginTop: 32,
          opacity: animate({ from: 0, to: 1, start: 0.2, end: 0.9, ease: Easing.easeOutCubic })(localTime),
          transform: `translateY(${(1 - animate({from:0,to:1,start:0.2,end:0.9})(localTime)) * 24}px)`,
        }}>
          <div style={{ fontSize: 76, fontWeight: 800, letterSpacing: "-0.04em", lineHeight: 0.94 }}>
            Tu operación crece.
          </div>
          <div style={{ marginTop: 8 }}>
            <GradText size={88} italic>Sumas los módulos que te piden.</GradText>
          </div>
        </div>

        {/* New modules row appearing */}
        <div style={{ position: "absolute", left: 100, top: 460, right: 100, display: "flex", gap: 14, flexWrap: "nowrap" }}>
          <MiniModule delay={1.2} t={localTime} code="M03" name="Compras"      first={false} />
          <MiniModule delay={1.5} t={localTime} code="M04" name="Producción"   first={false} />
          <MiniModule delay={1.8} t={localTime} code="M07" name="Costos"        first={false} />
          <MiniModule delay={2.1} t={localTime} code="M08" name="Dashboard"     first={false} />
          <MiniModule delay={2.4} t={localTime} code="M09" name="IA"            highlight />
        </div>

        {/* KPIs row */}
        <div style={{ position: "absolute", left: 100, bottom: 220, right: 100, display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 18 }}>
          {/* Chart */}
          <div style={{
            padding: 24, borderRadius: 20,
            background: "linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02))",
            border: "1px solid rgba(255,255,255,0.1)",
            opacity: animate({ from: 0, to: 1, start: 1.3, end: 2, ease: Easing.easeOutCubic })(localTime),
            transform: `translateY(${(1 - animate({from:0,to:1,start:1.3,end:2})(localTime)) * 30}px)`,
          }}>
            <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 12, textTransform: "uppercase", letterSpacing: "0.22em", color: BRAND.mute2 }}>Ventas semanales</div>
            <div style={{ marginTop: 4, fontSize: 20, fontWeight: 700 }}>Tendencia 12 semanas</div>
            <div style={{ marginTop: 18, height: 130, display: "flex", alignItems: "flex-end", gap: 6 }}>
              {weeks.map((h, i) => (
                <div key={i} style={{
                  flex: 1,
                  height: (i < revealed ? h : 0) + "%",
                  background: BRAND.gradAccent,
                  borderRadius: 3,
                  transition: "height 200ms",
                }} />
              ))}
            </div>
          </div>

          <KPICard label="Ventas del mes" value={"S/ " + ventas.toLocaleString("es-PE")} delta="+312%" delay={1.8} t={localTime} />
          <KPICard label="OP cumplidas"   value={ops + " / 42"}                          delta="+88%"   delay={2.0} t={localTime} />
          <KPICard label="Margen bruto"   value={margen + "%"}                            delta="+13 p" delay={2.2} t={localTime} />
        </div>

        {/* Bill */}
        <div style={{
          position: "absolute", left: 100, bottom: 160,
          display: "flex", alignItems: "center", gap: 24,
          opacity: animate({ from: 0, to: 1, start: 3.4, end: 4.2, ease: Easing.easeOutCubic })(localTime),
          transform: `translateY(${(1 - animate({from:0,to:1,start:3.4,end:4.2})(localTime)) * 16}px)`,
        }}>
          <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 16, textTransform: "uppercase", letterSpacing: "0.22em", color: BRAND.mute }}>
            Factura del mes →
          </div>
          <GradText italic size={120}>320</GradText>
          <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 16, textTransform: "uppercase", letterSpacing: "0.22em", color: BRAND.mute2 }}>
            S/ mes · usuarios 18 · sedes 1
          </div>
        </div>
      </div>
    </div>
  );
}

function MiniModule({ delay, t, code, name, highlight = false }) {
  const tt = animate({ from: 0, to: 1, start: delay, end: delay + 0.4, ease: Easing.easeOutBack })(t);
  return (
    <div style={{
      flex: 1,
      padding: "18px 20px",
      borderRadius: 18,
      background: highlight ? BRAND.gradAccent : "rgba(255,255,255,0.04)",
      border: highlight ? "1px solid transparent" : "1px solid rgba(255,255,255,0.1)",
      opacity: tt,
      transform: `translateY(${(1 - tt) * 30}px) scale(${0.92 + tt * 0.08})`,
      position: "relative", overflow: "hidden",
      boxShadow: highlight ? "0 20px 50px -15px rgba(124,92,255,0.6)" : "none",
    }}>
      <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, letterSpacing: "0.2em", color: highlight ? "rgba(255,255,255,0.75)" : "#c4b5fd" }}>{code}</div>
      <div style={{ marginTop: 8, fontSize: 24, fontWeight: 800, color: BRAND.ink, letterSpacing: "-0.02em" }}>{name}</div>
      <div style={{ marginTop: 6, fontSize: 11, fontFamily: "'Geist Mono', monospace", textTransform: "uppercase", letterSpacing: "0.18em", color: highlight ? "rgba(255,255,255,0.85)" : "#6ee7b7" }}>
        ● activado
      </div>
    </div>
  );
}

function KPICard({ label, value, delta, delay, t }) {
  const tt = animate({ from: 0, to: 1, start: delay, end: delay + 0.5, ease: Easing.easeOutCubic })(t);
  return (
    <div style={{
      padding: 22, borderRadius: 20,
      background: "linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02))",
      border: "1px solid rgba(255,255,255,0.1)",
      opacity: tt,
      transform: `translateY(${(1 - tt) * 30}px)`,
    }}>
      <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 12, textTransform: "uppercase", letterSpacing: "0.22em", color: BRAND.mute2 }}>{label}</div>
      <div className="nums" style={{ marginTop: 12, fontSize: 38, fontWeight: 800, letterSpacing: "-0.03em" }}>{value}</div>
      <div className="nums" style={{ marginTop: 8, fontSize: 16, fontWeight: 700, color: "#6ee7b7" }}>▲ {delta}</div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────────────────
   SCENE 04 — Año 1: multi-sede + IA
   ────────────────────────────────────────────────────────────────────────── */
function Scene04_Empire() {
  const { localTime, progress } = useSprite();

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
      <AuroraBg />

      <div style={{ position: "absolute", inset: 0, padding: "100px 100px 80px", color: BRAND.ink }}>
        {/* Chapter */}
        <div style={{
          opacity: animate({ from: 0, to: 1, start: 0, end: 0.4, ease: Easing.easeOutCubic })(localTime),
        }}>
          <ChapterLabel chapter="Capítulo 04" title="Año 1 — Multi-sede + IA" />
        </div>

        {/* Headline */}
        <div style={{
          marginTop: 32,
          opacity: animate({ from: 0, to: 1, start: 0.2, end: 0.9 })(localTime),
          transform: `translateY(${(1 - animate({from:0,to:1,start:0.2,end:0.9})(localTime)) * 24}px)`,
        }}>
          <div style={{ fontSize: 76, fontWeight: 800, letterSpacing: "-0.04em", lineHeight: 0.94 }}>
            Tres sedes.
          </div>
          <div style={{ marginTop: 8 }}>
            <GradText size={88} italic>El mismo sistema.</GradText>
          </div>
        </div>

        {/* Map with sedes */}
        <SedesMap t={localTime} />

        {/* AI panel */}
        <AIPanel t={localTime} />

        {/* Bill */}
        <div style={{
          position: "absolute", left: 100, bottom: 160,
          display: "flex", alignItems: "center", gap: 24,
          opacity: animate({ from: 0, to: 1, start: 3.8, end: 4.6 })(localTime),
        }}>
          <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 16, textTransform: "uppercase", letterSpacing: "0.22em", color: BRAND.mute }}>
            Factura del mes →
          </div>
          <GradText italic size={120}>680</GradText>
          <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 16, textTransform: "uppercase", letterSpacing: "0.22em", color: BRAND.mute2 }}>
            S/ mes · usuarios 38 · sedes 3
          </div>
        </div>
      </div>
    </div>
  );
}

function SedesMap({ t }) {
  const cities = [
    { x: 250,  y: 220, label: "Lima",      pop: "sede principal",  delay: 0.8 },
    { x: 580, y: 140, label: "Arequipa",  pop: "+ 12 usuarios",   delay: 1.6 },
    { x: 720, y: 360, label: "Trujillo",  pop: "+ 8 usuarios",    delay: 2.2 },
  ];
  return (
    <div style={{
      position: "absolute", right: 100, top: 320,
      width: 880, height: 480,
      borderRadius: 24,
      background: "linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01))",
      border: "1px solid rgba(255,255,255,0.08)",
      padding: 30,
    }}>
      <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 12, textTransform: "uppercase", letterSpacing: "0.22em", color: BRAND.mute2 }}>
        Multi-sede · sincronizado
      </div>

      {/* connecting lines */}
      <svg style={{ position: "absolute", inset: 30, width: "calc(100% - 60px)", height: "calc(100% - 60px)" }} viewBox="0 0 820 420" preserveAspectRatio="none">
        {/* line 1: Lima → Arequipa */}
        <line x1={cities[0].x} y1={cities[0].y} x2={cities[1].x} y2={cities[1].y}
          stroke="url(#g1)" strokeWidth="2" strokeDasharray="4 6"
          style={{
            strokeDashoffset: 200 - animate({ from: 0, to: 200, start: 1.0, end: 1.6 })(t),
            opacity: animate({ from: 0, to: 1, start: 1.0, end: 1.6 })(t),
          }} />
        {/* line 2: Lima → Trujillo */}
        <line x1={cities[0].x} y1={cities[0].y} x2={cities[2].x} y2={cities[2].y}
          stroke="url(#g1)" strokeWidth="2" strokeDasharray="4 6"
          style={{
            opacity: animate({ from: 0, to: 1, start: 1.6, end: 2.2 })(t),
          }} />
        <defs>
          <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#7c5cff" />
            <stop offset="100%" stopColor="#22d3ee" />
          </linearGradient>
        </defs>
      </svg>

      {/* city pins */}
      {cities.map((c, i) => (
        <CityPin key={c.label} t={t} {...c} />
      ))}
    </div>
  );
}

function CityPin({ x, y, label, pop, delay, t }) {
  const tt = animate({ from: 0, to: 1, start: delay, end: delay + 0.5, ease: Easing.easeOutBack })(t);
  const pulse = 1 + Math.sin(t * 5 + delay) * 0.2;
  return (
    <div style={{
      position: "absolute", left: x, top: y,
      transform: `translate(-50%, -50%) scale(${tt})`,
      opacity: tt,
    }}>
      {/* outer pulse ring */}
      <div style={{
        position: "absolute", left: "50%", top: "50%",
        transform: `translate(-50%, -50%) scale(${pulse})`,
        width: 60, height: 60,
        borderRadius: 999,
        background: BRAND.gradAccent,
        opacity: 0.25,
      }} />
      {/* inner dot */}
      <div style={{
        width: 22, height: 22,
        borderRadius: 999,
        background: BRAND.gradAccent,
        boxShadow: "0 0 30px rgba(124,92,255,0.7)",
        position: "relative", zIndex: 2,
      }} />
      {/* label */}
      <div style={{
        position: "absolute", left: 36, top: -10,
        padding: "8px 14px",
        background: "rgba(255,255,255,0.08)",
        border: "1px solid rgba(255,255,255,0.15)",
        borderRadius: 12,
        backdropFilter: "blur(20px)",
        whiteSpace: "nowrap",
      }}>
        <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: "-0.02em", color: BRAND.ink }}>{label}</div>
        <div style={{ fontSize: 11, fontFamily: "'Geist Mono', monospace", textTransform: "uppercase", letterSpacing: "0.18em", color: BRAND.mute2, marginTop: 2 }}>{pop}</div>
      </div>
    </div>
  );
}

function AIPanel({ t }) {
  const tt = animate({ from: 0, to: 1, start: 2.8, end: 3.6, ease: Easing.easeOutBack })(t);
  return (
    <div style={{
      position: "absolute", left: 100, top: 460,
      width: 720,
      padding: 28,
      borderRadius: 24,
      background: "linear-gradient(135deg, rgba(124,92,255,0.18), rgba(34,211,238,0.06))",
      border: "1px solid rgba(124,92,255,0.4)",
      opacity: tt,
      transform: `translateY(${(1 - tt) * 30}px)`,
      boxShadow: "0 30px 60px -20px rgba(124,92,255,0.4)",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <div style={{
          width: 48, height: 48, borderRadius: 12,
          background: BRAND.gradAccent,
          display: "grid", placeItems: "center",
          fontSize: 24, color: "white", fontFamily: "'Geist', sans-serif",
        }}>✦</div>
        <div>
          <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 13, textTransform: "uppercase", letterSpacing: "0.22em", color: "#c4b5fd" }}>IA · alerta predictiva</div>
          <div style={{ marginTop: 4, fontSize: 26, fontWeight: 800, letterSpacing: "-0.02em", color: BRAND.ink }}>Detecté un riesgo en producción</div>
        </div>
      </div>
      <div style={{
        marginTop: 20,
        padding: "16px 18px",
        background: "rgba(255,255,255,0.04)",
        borderRadius: 14,
        fontSize: 19, color: BRAND.ink, lineHeight: 1.5,
      }}>
        OP-1042 (Textiles San Jorge) tiene <span style={{ color: "#fca5a5", fontWeight: 700 }}>18h de retraso</span>. Sugiero mover el lote a Arequipa, donde hay capacidad libre.
      </div>
      <div style={{ marginTop: 18, display: "flex", gap: 10 }}>
        <div style={{ padding: "8px 16px", borderRadius: 999, background: "rgba(124,92,255,0.25)", border: "1px solid rgba(124,92,255,0.4)", color: "#c4b5fd", fontSize: 14, fontFamily: "'Geist Mono', monospace", textTransform: "uppercase", letterSpacing: "0.16em" }}>
          aplicar sugerencia
        </div>
        <div style={{ padding: "8px 16px", borderRadius: 999, border: "1px solid rgba(255,255,255,0.15)", color: BRAND.mute, fontSize: 14, fontFamily: "'Geist Mono', monospace", textTransform: "uppercase", letterSpacing: "0.16em" }}>
          ver detalle
        </div>
      </div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────────────────
   SCENE 05 — Reveal final
   ────────────────────────────────────────────────────────────────────────── */
function Scene05_Reveal() {
  const { localTime, progress } = useSprite();

  // Lines slowly rise
  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
      <AuroraBg />

      {/* Big radial glow center */}
      <div style={{
        position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)",
        width: 1400, height: 1400, borderRadius: "50%",
        background: "radial-gradient(circle, rgba(124,92,255,0.35) 0%, rgba(34,211,238,0.12) 30%, transparent 60%)",
        filter: "blur(40px)",
        opacity: animate({ from: 0, to: 1, start: 0.2, end: 1.5 })(localTime),
      }} />

      {/* Stack of statement lines */}
      <div style={{
        position: "absolute", inset: 0,
        display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center",
        textAlign: "center",
        padding: "0 100px",
      }}>
        {/* line 1: "Pagas por" */}
        <div style={{
          opacity: animate({ from: 0, to: 1, start: 0.4, end: 1.2, ease: Easing.easeOutCubic })(localTime),
          transform: `translateY(${(1 - animate({from:0,to:1,start:0.4,end:1.2,ease:Easing.easeOutCubic})(localTime)) * 30}px)`,
          fontSize: 110, fontWeight: 800, color: BRAND.ink, letterSpacing: "-0.045em", lineHeight: 1.0,
          whiteSpace: "nowrap",
        }}>
          Pagas por
        </div>
        {/* line 2: italic "lo que usas." */}
        <div style={{
          opacity: animate({ from: 0, to: 1, start: 0.7, end: 1.5, ease: Easing.easeOutCubic })(localTime),
          transform: `translateY(${(1 - animate({from:0,to:1,start:0.7,end:1.5,ease:Easing.easeOutCubic})(localTime)) * 30}px)`,
          fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontWeight: 400,
          fontSize: 180, letterSpacing: "-0.03em", lineHeight: 1.05,
          background: BRAND.gradAurora,
          WebkitBackgroundClip: "text", backgroundClip: "text", WebkitTextFillColor: "transparent",
          whiteSpace: "nowrap",
          marginTop: 12,
        }}>
          lo que usas.
        </div>

        {/* divider dot */}
        <div style={{
          width: 10, height: 10, background: "#c4b5fd", borderRadius: 999,
          margin: "60px 0",
          opacity: animate({ from: 0, to: 1, start: 1.2, end: 1.8 })(localTime),
          boxShadow: "0 0 20px rgba(196,181,253,0.8)",
        }} />

        {/* line 3: "Creces" */}
        <div style={{
          opacity: animate({ from: 0, to: 1, start: 1.4, end: 2.2, ease: Easing.easeOutCubic })(localTime),
          transform: `translateY(${(1 - animate({from:0,to:1,start:1.4,end:2.2,ease:Easing.easeOutCubic})(localTime)) * 30}px)`,
          fontSize: 110, fontWeight: 800, color: BRAND.ink, letterSpacing: "-0.045em", lineHeight: 1.0,
          whiteSpace: "nowrap",
        }}>
          Creces
        </div>
        {/* line 4: italic "sin migrar." */}
        <div style={{
          opacity: animate({ from: 0, to: 1, start: 1.7, end: 2.5, ease: Easing.easeOutCubic })(localTime),
          transform: `translateY(${(1 - animate({from:0,to:1,start:1.7,end:2.5,ease:Easing.easeOutCubic})(localTime)) * 30}px)`,
          fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontWeight: 400,
          fontSize: 180, letterSpacing: "-0.03em", lineHeight: 1.05,
          background: BRAND.gradAurora,
          WebkitBackgroundClip: "text", backgroundClip: "text", WebkitTextFillColor: "transparent",
          whiteSpace: "nowrap",
          marginTop: 12,
        }}>
          sin migrar.
        </div>
      </div>

      {/* logo lockup bottom */}
      <div style={{
        position: "absolute", left: "50%", bottom: 90,
        transform: `translateX(-50%) translateY(${(1 - animate({from:0,to:1,start:3.5,end:4.5,ease:Easing.easeOutCubic})(localTime)) * 24}px)`,
        opacity: animate({ from: 0, to: 1, start: 3.5, end: 4.5, ease: Easing.easeOutCubic })(localTime),
        display: "flex", flexDirection: "column", alignItems: "center", gap: 16,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
          <div style={{
            width: 52, height: 52, position: "relative",
          }}>
            <div style={{ position: "absolute", inset: 0, borderRadius: 12, background: BRAND.gradAccent }}></div>
            <div style={{ position: "absolute", inset: 4, borderRadius: 9, background: BRAND.base, display: "grid", placeItems: "center" }}>
              <span style={{
                fontFamily: "'Geist', sans-serif", fontWeight: 900, fontSize: 22,
                background: BRAND.gradAurora, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text",
              }}>A</span>
            </div>
          </div>
          <div style={{ textAlign: "left" }}>
            <div style={{ fontSize: 32, fontWeight: 800, color: BRAND.ink, letterSpacing: "-0.02em" }}>SME Cloud ERP</div>
            <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 13, textTransform: "uppercase", letterSpacing: "0.22em", color: BRAND.mute2, marginTop: 2 }}>by anahui</div>
          </div>
        </div>
        <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 16, textTransform: "uppercase", letterSpacing: "0.28em", color: BRAND.mute }}>
          sme-cloud-erp.com
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Scene01_Chaos, Scene02_Activate, Scene03_Growth, Scene04_Empire, Scene05_Reveal });