// SQSEO marketing — "Watch it work": a floating 3D dashboard, same cinematic
// treatment as the hero iPhone (nivk cinematic-landing-hero values):
//   entrance   fromTo(y:260 z:-400 rotX:38 rotY:-22 rotZ:-4 scale:0.7)
//              → settled pose (rotX:5 rotY:-8 rotZ:-1.5, expo.out, 3.0s)
//   widgets    .dash-widget stagger, back.out(1.2)
//   parallax   mousemove → window rotY ±7° / rotX ∓7°, power3.out 1.2s
// Inside, the dashboard runs the product on an infinite loop: a seed keyword
// types itself → every search surface is scanned (counter ticks to 847) →
// scored longtails cascade in → the winnable AI answer highlights → export
// toast → fade → again. Colors follow the dataviz method: intent identity =
// blue/amber/green (validated trio, always with text labels); magnitude =
// single blue.
(function init(){
if(!window.LongtailIQDesignSystem_ae8f12){return setTimeout(init,30);}
const React = window.React;
const DS = window.LongtailIQDesignSystem_ae8f12;
const { Icon } = DS;

const SEED = "standing desk";
const TOTAL = 847;
const INTENT = {
  Informational: "#3B82F6",
  Commercial:    "#D9820B",
  Transactional: "#30A46C",
};
const ROWS = [
  { k: "standing desk under 300 with drawers",        i: "Transactional", v: "1.3K", s: 92 },
  { k: "quietest electric standing desk motor",       i: "Commercial",    v: "590",  s: 89 },
  { k: "best standing desk for small spaces",         i: "Commercial",    v: "2.9K", s: 86 },
  { k: "standing desk vs sitting health benefits",    i: "Informational", v: "4.4K", s: 81 },
  { k: "how tall should a standing desk be",          i: "Informational", v: "6.1K", s: 78 },
  { k: "is a standing desk worth it for programmers", i: "Informational", v: "880",  s: 74 },
];
const SOURCES = ["Google", "ChatGPT", "Perplexity", "AI Overviews"];
const COUNT_STEPS = [3, 19, 74, 161, 289, 433, 588, 706, 791, 832, TOTAL];

// Settled 3D pose (also the no-GSAP / reduced-motion fallback state)
const DASH_POSE = "rotateX(5deg) rotateY(-8deg) rotateZ(-1.5deg)";

const MOVIE_CSS = `
/* Physical floating window (iPhone-bezel treatment for a dashboard) */
.lt-dash-window {
  background: var(--paper);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.35);
  box-shadow:
      0 0 0 1px rgba(255,255,255,0.6) inset,
      0 45px 90px -20px rgba(16,16,18,0.45),
      0 18px 30px -10px rgba(16,16,18,0.28);
  transform-style: preserve-3d;
  overflow: hidden;
}
/* screen glare sweeping the glass, like the phone */
.lt-dash-glare { position: absolute; inset: 0; pointer-events: none; z-index: 45;
  background: linear-gradient(110deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 42%); }
/* content swap between loops */
.lt-dash-fade { transition: opacity 0.45s ease; }
.lt-dash-fade.out { opacity: 0; }
/* fake cursor glide */
.lt-movie-cursor { position: absolute; z-index: 40; pointer-events: none;
  transition: left 0.9s cubic-bezier(0.45, 0.05, 0.2, 1), top 0.9s cubic-bezier(0.45, 0.05, 0.2, 1); }
.lt-movie-cursor-inner { transition: transform 0.15s ease; }
.lt-movie-cursor-inner.press { transform: scale(0.8); }
.lt-movie-click { position: absolute; z-index: 39; width: 34px; height: 34px; border-radius: 999px;
  border: 2px solid var(--ink-900); transform: translate(-50%,-50%) scale(0.3); opacity: 0; pointer-events: none;
  animation: lt-movie-click 0.5s ease-out; }
@keyframes lt-movie-click { 0% { opacity: 0.55; transform: translate(-50%,-50%) scale(0.3); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.25); } }
.lt-movie-spin { display: inline-block; animation: lt-movie-spin 0.8s linear infinite; }
@keyframes lt-movie-spin { to { transform: rotate(360deg); } }
.lt-movie-caret { display: inline-block; width: 1.5px; height: 14px; background: var(--ink-900); animation: lt-movie-caret 1.05s steps(1) infinite; }
@keyframes lt-movie-caret { 50% { opacity: 0; } }
/* entrances */
.lt-movie-rise { animation: lt-movie-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes lt-movie-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.lt-movie-pop { animation: lt-movie-pop 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) both; }
@keyframes lt-movie-pop { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }
.lt-movie-slide { animation: lt-movie-slide 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes lt-movie-slide { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.lt-movie-bar { width: 0; transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.lt-movie-scan { position: relative; overflow: hidden; }
.lt-movie-scan::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(59,130,246,0.10) 50%, transparent 70%);
  background-size: 220% 100%; animation: lt-movie-scan 1.4s linear infinite; }
@keyframes lt-movie-scan { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.lt-movie-spark { stroke-dasharray: 260; stroke-dashoffset: 260; animation: lt-movie-spark 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.35s forwards; }
@keyframes lt-movie-spark { to { stroke-dashoffset: 0; } }
.lt-movie-spot { animation: lt-movie-spot 0.6s ease-out both; }
@keyframes lt-movie-spot { from { background: rgba(59,130,246,0); } to { background: rgba(59,130,246,0.07); } }
.lt-movie-toast { animation: lt-movie-toast 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes lt-movie-toast { from { opacity: 0; transform: translateY(16px) scale(0.95); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lt-movie-rise, .lt-movie-pop, .lt-movie-slide, .lt-movie-spot, .lt-movie-toast,
  .lt-movie-click { animation: none !important; opacity: 1 !important; transform: none !important; }
  .lt-movie-scan::after { animation: none !important; }
  .lt-movie-spark { animation: none !important; stroke-dashoffset: 0 !important; }
  .lt-movie-bar { transition: none !important; }
  .lt-movie-cursor, .lt-movie-caret { display: none !important; }
}
`;

// Cursor positions per beat, in % of the window (x, y)
const CURSOR = {
  start: { x: 78, y: 88 }, input: { x: 40, y: 26 }, gen: { x: 71, y: 26 },
  exp: { x: 86, y: 13 }, rest: { x: 90, y: 70 },
};

function MacPointer() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" style={{ filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.35))" }}>
      <path d="M5.5 3.2l12.3 10.6-5.3 0.6 3 6.3-2.6 1.2-3-6.3-3.9 3.6z" fill="#fff" stroke="#111" strokeWidth="1.4" strokeLinejoin="round" />
    </svg>
  );
}

function IntentChip({ name }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 10.5, fontWeight: 600,
      color: "var(--ink-600)", background: "var(--ink-50)", border: "1px solid var(--border-subtle)",
      borderRadius: 999, padding: "2px 8px", whiteSpace: "nowrap" }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: INTENT[name] }} />{window.LTQM.t("intent." + name.toLowerCase())}
    </span>
  );
}

function DemoMovie() {
  const stageRef = React.useRef(null);   // perspective stage (IO target)
  const wrapperRef = React.useRef(null); // GSAP entrance target
  const windowRef = React.useRef(null);  // parallax target
  const rafRef = React.useRef(0);
  const [rm] = React.useState(() => window.matchMedia("(prefers-reduced-motion: reduce)").matches);
  const [started, setStarted] = React.useState(false);
  const [st, setSt] = React.useState(() => rm
    ? { scene: 2, typed: SEED, srcLit: 4, count: TOTAL, rowsIn: true, clickGen: false, clickExp: false, toast: false, cursor: "rest", fade: false, gen: 0 }
    : { scene: 0, typed: "", srcLit: 0, count: 0, rowsIn: false, clickGen: false, clickExp: false, toast: false, cursor: "start", fade: false, gen: 0 });

  // Entrance + parallax (hero-iPhone treatment, softened for a wide window)
  React.useLayoutEffect(() => {
    const gsap = window.gsap;
    if (!gsap || rm) { setStarted(true); return; } // static settled pose stays visible

    const wrapper = wrapperRef.current, win = windowRef.current, stage = stageRef.current;
    const widgets = stage.querySelectorAll(".dash-widget");
    gsap.set(wrapper, { autoAlpha: 0 });
    gsap.set(widgets, { autoAlpha: 0 });

    let played = false;
    const play = () => {
      if (played) return; played = true;
      const tl = gsap.timeline({ delay: 0.1, onComplete: () => setStarted(true) });
      tl.fromTo(wrapper,
        { y: 260, z: -400, rotationX: 38, rotationY: -22, rotationZ: -4, autoAlpha: 0, scale: 0.7 },
        { y: 0, z: 0, rotationX: 5, rotationY: -8, rotationZ: -1.5, autoAlpha: 1, scale: 1, ease: "expo.out", duration: 3.0 })
        .fromTo(widgets,
          { y: 34, autoAlpha: 0, scale: 0.96 },
          { y: 0, autoAlpha: 1, scale: 1, stagger: 0.1, ease: "back.out(1.2)", duration: 1.2 }, "-=1.6");
    };
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting) { play(); io.disconnect(); } });
    }, { threshold: 0.3 });
    io.observe(stage);

    const handleMouseMove = (e) => {
      cancelAnimationFrame(rafRef.current);
      rafRef.current = requestAnimationFrame(() => {
        if (!windowRef.current || !played) return;
        const r = stage.getBoundingClientRect();
        if (r.bottom < 0 || r.top > window.innerHeight) return;
        const xVal = (e.clientX / window.innerWidth - 0.5) * 2;
        const yVal = (e.clientY / window.innerHeight - 0.5) * 2;
        gsap.to(windowRef.current, { rotationY: xVal * 7, rotationX: -yVal * 7, ease: "power3.out", duration: 1.2 });
      });
    };
    const handlePointerLeave = () => {
      if (!windowRef.current) return;
      gsap.to(windowRef.current, { rotationX: 0, rotationY: 0, duration: 0.65, ease: "power2.out" });
    };
    window.addEventListener("mousemove", handleMouseMove);
    stage.addEventListener("pointerleave", handlePointerLeave);
    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
      stage.removeEventListener("pointerleave", handlePointerLeave);
      cancelAnimationFrame(rafRef.current);
      io.disconnect();
      gsap.killTweensOf([wrapper, win, widgets]);
      gsap.set([wrapper, widgets], { clearProps: "all" });
    };
  }, [rm]);

  // The infinite product loop
  React.useEffect(() => {
    if (!started || rm) return;
    let alive = true;
    const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
    const set = (patch) => { if (alive) setSt((s) => ({ ...s, ...(typeof patch === "function" ? patch(s) : patch) })); };
    (async () => {
      while (alive) {
        set((s) => ({ scene: 0, typed: "", srcLit: 0, count: 0, rowsIn: false,
          clickGen: false, clickExp: false, toast: false, cursor: "start", fade: false, gen: s.gen + 1 }));
        await sleep(150); set({ cursor: "input" }); await sleep(1000);
        for (let c = 1; c <= SEED.length; c++) { if (!alive) return; set({ typed: SEED.slice(0, c) }); await sleep(64); }
        await sleep(250); set({ cursor: "gen" }); await sleep(950);
        set({ clickGen: true }); await sleep(550);
        set({ scene: 1, cursor: "rest" });
        for (let j = 1; j <= SOURCES.length; j++) { if (!alive) return; await sleep(420); set({ srcLit: j }); }
        for (const n of COUNT_STEPS) { if (!alive) return; set({ count: n }); await sleep(130); }
        await sleep(500);
        set({ scene: 2, rowsIn: false }); await sleep(60); set({ rowsIn: true });
        await sleep(4300);
        set({ scene: 3 }); await sleep(3800);
        set({ scene: 4, cursor: "exp" }); await sleep(950);
        set({ clickExp: true }); await sleep(300); set({ toast: true });
        await sleep(1400); set({ fade: true }); await sleep(480);
      }
    })();
    return () => { alive = false; };
  }, [started, rm]);

  const sc = st.scene;
  const showResults = sc >= 2;
  const cur = CURSOR[st.cursor] || CURSOR.rest;
  const t = window.LTQM.t;

  return (
    <section id="watch" style={{ maxWidth: 1080, margin: "0 auto", padding: "24px 24px 96px" }}>
      <style dangerouslySetInnerHTML={{ __html: MOVIE_CSS }} />
      <div style={{ textAlign: "center", marginBottom: 40 }}>
        <span className="lt-pill-label lt-reveal">{t("movie.pill")}</span>
        <h2 className="lt-display lt-reveal" style={{ fontFamily: "var(--font-display)", fontSize: "clamp(1.7rem,1.3rem+1.4vw,2.5rem)", fontWeight: 700, letterSpacing: "-0.025em", marginTop: 14 }}>
          {t("movie.title")} <span style={{ color: "var(--ink-400)" }}>{t("movie.title_gray")}</span>
        </h2>
      </div>

      {/* 3D stage (like the phone: perspective → entrance wrapper → device) */}
      <div ref={stageRef} style={{ perspective: "1400px", perspectiveOrigin: "center top" }}>
        <div ref={wrapperRef} style={{ transform: DASH_POSE, transformStyle: "preserve-3d", willChange: "transform" }}>
          <div ref={windowRef} className="lt-dash-window" style={{ position: "relative", maxWidth: 920, margin: "0 auto", willChange: "transform" }}>
            <div className="lt-dash-glare" aria-hidden />

            {/* browser chrome */}
            <div className="dash-widget" style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 14px", borderBottom: "1px solid var(--border-subtle)", background: "var(--ink-50)" }}>
              {["#FF5F57","#FEBC2E","#28C840"].map((c) => <span key={c} style={{ width: 10, height: 10, borderRadius: 999, background: c, opacity: 0.9 }} />)}
              <div style={{ flex: 1, maxWidth: 340, margin: "0 auto", height: 24, borderRadius: 7, background: "var(--paper)",
                border: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
                fontSize: 11.5, color: "var(--text-muted)", fontFamily: "var(--font-mono)" }}>
                <Icon name="lock" size={10} style={{ color: "var(--viz-green)" }} />app.sqseo.com
              </div>
              <button tabIndex={-1} style={{ display: "inline-flex", alignItems: "center", gap: 6, height: 26, padding: "0 10px",
                borderRadius: 7, fontSize: 11.5, fontWeight: 600, cursor: "default", fontFamily: "var(--font-sans)",
                border: "1px solid var(--border-strong)", color: "var(--text-strong)",
                background: st.clickExp ? "var(--ink-100)" : "var(--paper)", transition: "background 0.2s" }}>
                <Icon name="download" size={12} />{t("movie.export_csv")}
              </button>
            </div>

            {/* app body */}
            <div style={{ display: "flex", minHeight: 430 }}>
              {/* sidebar */}
              <div className="lt-demo-side dash-widget" style={{ width: 168, flex: "none", borderRight: "1px solid var(--border-subtle)", padding: "16px 12px", background: "var(--ink-50)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 18 }}>
                  <img src="/assets/logo-mark.svg" width="20" height="20" alt="" style={{ borderRadius: 6 }} />
                  <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: "-0.02em" }}>SQ<span style={{ color: "var(--ink-400)" }}>SEO</span></span>
                </div>
                {[["search",t("movie.nav.1"),true],["sparkles",t("movie.nav.2"),false],["git-compare",t("movie.nav.3"),false],["lightbulb",t("movie.nav.4"),false],["calendar",t("movie.nav.5"),false]].map(([ic, l, on]) => (
                  <div key={l} style={{ display: "flex", alignItems: "center", gap: 8, padding: "7px 9px", borderRadius: 8, marginBottom: 2,
                    fontSize: 12, fontWeight: on ? 600 : 500, color: on ? "var(--ink-900)" : "var(--text-muted)",
                    background: on ? "var(--paper)" : "transparent", border: on ? "1px solid var(--border-subtle)" : "1px solid transparent" }}>
                    <Icon name={ic} size={13} />{l}
                  </div>
                ))}
              </div>

              {/* main area (fades between loops) */}
              <div className={"lt-dash-fade" + (st.fade ? " out" : "")} style={{ flex: 1, padding: "20px 22px", position: "relative", minWidth: 0 }}>
                {/* search row */}
                <div className="dash-widget" style={{ display: "flex", gap: 10, marginBottom: 18 }}>
                  <div className={sc === 1 ? "lt-movie-scan" : ""} style={{ flex: 1, height: 40, borderRadius: 10, background: "var(--paper)",
                    border: sc === 0 && st.cursor !== "start" ? "1.5px solid var(--ink-900)" : "1px solid var(--border-strong)",
                    boxShadow: sc === 0 && st.cursor !== "start" ? "0 0 0 3px var(--ink-100)" : "none",
                    display: "flex", alignItems: "center", gap: 8, padding: "0 14px", transition: "border 0.3s, box-shadow 0.3s" }}>
                    <Icon name="search" size={14} style={{ color: "var(--ink-400)", flex: "none" }} />
                    <span style={{ fontSize: 13.5, color: st.typed ? "var(--text-strong)" : "var(--text-faint)", whiteSpace: "nowrap", overflow: "hidden" }}>
                      {st.typed || t("movie.search_placeholder")}
                    </span>
                    {sc === 0 && st.cursor === "input" && <span className="lt-movie-caret" />}
                  </div>
                  <button tabIndex={-1} style={{ height: 40, padding: "0 16px", borderRadius: 10, border: "none", cursor: "default",
                    background: "var(--ink-900)", color: "#fff", fontSize: 13, fontWeight: 600, fontFamily: "var(--font-sans)",
                    display: "inline-flex", alignItems: "center", gap: 7, flex: "none",
                    transform: st.clickGen && sc === 0 ? "scale(0.96)" : "none", transition: "transform 0.15s" }}>
                    {sc === 1
                      ? <span className="lt-movie-spin" style={{ width: 13, height: 13, border: "2px solid rgba(255,255,255,0.35)", borderTopColor: "#fff", borderRadius: 999 }} />
                      : <Icon name="sparkles" size={13} style={{ color: "#fff" }} />}
                    {t("movie.generate")}
                  </button>
                </div>

                {/* scan */}
                {sc === 1 && (
                  <div style={{ paddingTop: 26, textAlign: "center" }}>
                    <div style={{ display: "flex", justifyContent: "center", gap: 8, flexWrap: "wrap", marginBottom: 34 }}>
                      {SOURCES.map((s, j) => (
                        <span key={s} className={j < st.srcLit ? "lt-movie-pop" : ""} style={{ display: "inline-flex", alignItems: "center", gap: 6,
                          padding: "7px 13px", borderRadius: 999, fontSize: 12.5, fontWeight: 600,
                          opacity: j < st.srcLit ? 1 : 0.28, transition: "opacity 0.3s",
                          background: "var(--paper)", border: "1px solid var(--border-strong)", color: "var(--text-strong)" }}>
                          {j < st.srcLit
                            ? <Icon name="check" size={12} style={{ color: "var(--viz-green)" }} />
                            : <span className="lt-movie-spin" style={{ width: 11, height: 11, border: "2px solid var(--ink-200)", borderTopColor: "var(--ink-500)", borderRadius: 999 }} />}
                          {s}
                        </span>
                      ))}
                    </div>
                    <div className="lt-num" style={{ fontFamily: "var(--font-mono)", fontSize: 54, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1 }}>
                      {st.count.toLocaleString()}
                    </div>
                    <div style={{ fontSize: 13, color: "var(--text-muted)", marginTop: 8 }}>{t("movie.found", { seed: SEED })}</div>
                  </div>
                )}

                {/* results */}
                {showResults && (
                  <div style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 10 }}>
                        <span style={{ fontSize: 12.5, fontWeight: 600, color: "var(--text-strong)" }}>
                          {t("movie.results_header", { n: TOTAL })}
                        </span>
                        <span style={{ fontSize: 11, color: "var(--text-faint)" }}>{t("movie.col_header")}</span>
                      </div>
                      {ROWS.map((r, i) => (
                        <div key={r.k + st.gen} className={(st.rowsIn ? "lt-movie-rise" : "") + (sc >= 3 && i === 0 ? " lt-movie-spot" : "")}
                          style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 10px", borderRadius: 10,
                            animationDelay: st.rowsIn && !(sc >= 3 && i === 0) ? (i * 110) + "ms" : "0ms",
                            opacity: st.rowsIn ? undefined : 0,
                            border: sc >= 3 && i === 0 ? "1px solid rgba(59,130,246,0.35)" : "1px solid transparent" }}>
                          <span style={{ flex: "1 1 46%", fontSize: 12.5, fontWeight: 500, color: "var(--text-strong)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r.k}</span>
                          <span style={{ flex: "none" }}><IntentChip name={r.i} /></span>
                          <span className="lt-num" style={{ flex: "0 0 44px", textAlign: "right", fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)" }}>{r.v}</span>
                          <span style={{ flex: "0 0 86px", display: "flex", alignItems: "center", gap: 7 }}>
                            <span style={{ flex: 1, height: 5, borderRadius: 999, background: "var(--ink-100)", overflow: "hidden" }}>
                              <span className="lt-movie-bar" style={{ display: "block", height: "100%", borderRadius: 999, background: "var(--viz-blue)",
                                width: st.rowsIn ? r.s + "%" : 0, transitionDelay: (200 + i * 110) + "ms" }} />
                            </span>
                            <span className="lt-num" style={{ fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600, width: 20, textAlign: "right" }}>{r.s}</span>
                          </span>
                        </div>
                      ))}
                    </div>

                    {/* insight panel */}
                    {sc >= 3 && (
                      <div className="lt-movie-slide" style={{ width: 218, flex: "none", border: "1px solid var(--border-strong)", borderRadius: 12,
                        padding: 14, background: "var(--paper)", boxShadow: "var(--shadow-md)" }}>
                        <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-500)", marginBottom: 10 }}>
                          <Icon name="sparkles" size={12} />{t("movie.ai_answer")}
                        </div>
                        <p style={{ fontSize: 12.5, lineHeight: 1.5, color: "var(--text-strong)", fontWeight: 500, margin: 0 }}>
                          {t("movie.ai_question")}
                        </p>
                        <div style={{ fontSize: 11, color: "var(--text-muted)", margin: "8px 0 12px" }}>{t("movie.asked")}</div>
                        <svg width="100%" height="44" viewBox="0 0 190 44" style={{ display: "block" }}>
                          <path className="lt-movie-spark" d="M2 38 L26 34 L50 35 L74 28 L98 24 L122 25 L146 14 L170 10 L188 4"
                            fill="none" stroke="var(--viz-blue)" strokeWidth="2" strokeLinecap="round" />
                          <circle cx="188" cy="4" r="3" fill="var(--viz-blue)" />
                        </svg>
                        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "var(--text-faint)", marginTop: 2 }}>
                          <span>{t("movie.demand")}</span><span className="lt-num" style={{ fontFamily: "var(--font-mono)", fontWeight: 600, color: "var(--viz-green)" }}>+212%</span>
                        </div>
                      </div>
                    )}
                  </div>
                )}

                {/* export toast */}
                {st.toast && (
                  <div className="lt-movie-toast" style={{ position: "absolute", bottom: 16, left: "50%", transform: "translateX(-50%)",
                    display: "flex", alignItems: "center", gap: 8, background: "var(--ink-900)", color: "#fff",
                    borderRadius: 10, padding: "10px 16px", fontSize: 12.5, fontWeight: 600, boxShadow: "var(--shadow-lg)", whiteSpace: "nowrap" }}>
                    <Icon name="check-circle" size={14} style={{ color: "var(--viz-green)" }} />{t("movie.exported", { n: TOTAL })}
                  </div>
                )}
              </div>
            </div>

            {/* fake cursor */}
            {!rm && started && (
              <>
                <div className="lt-movie-cursor" style={{ left: cur.x + "%", top: cur.y + "%" }}>
                  <div className={"lt-movie-cursor-inner" + ((st.clickGen && sc === 0) || (st.clickExp && sc === 4) ? " press" : "")}>
                    <MacPointer />
                  </div>
                </div>
                {st.clickGen && sc === 0 && <span key={"cg" + st.gen} className="lt-movie-click" style={{ left: cur.x + "%", top: cur.y + "%" }} />}
                {st.clickExp && sc === 4 && <span key={"ce" + st.gen} className="lt-movie-click" style={{ left: cur.x + "%", top: cur.y + "%" }} />}
              </>
            )}
          </div>
        </div>
      </div>
      <div style={{ height: 24 }} />{/* room for the window's drop shadow */}
    </section>
  );
}

window.LTQM = window.LTQM || {};
window.LTQM.DemoMovie = DemoMovie;
})();