/* ===========================================================
   Slide renderers — part 2 (slides 6–15)
   =========================================================== */

/* ---------- 9 · Share Link — animated link dispatch ---------- */
function ShareLinkSlide({ slide }) {
  const [fired, setFired] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setFired(true), 1800);
    return () => clearTimeout(t);
  }, []);

  const destPositions = [
    { x: 180, y: -90 },
    { x: 200, y: -10 },
    { x: 180, y: 70 },
    { x: 120, y: 130 },
  ];

  return React.createElement(
    "div",
    { className: "slide" },
    React.createElement(
      Stagger,
      { className: "slide-inner", style: { display: "flex", flexDirection: "column", gap: "clamp(16px,2.4vh,28px)" } },

      // top 2-col
      React.createElement("div", {
        style: { display: "grid", gridTemplateColumns: "minmax(0,0.8fr) minmax(0,1.2fr)", gap: "clamp(30px,4vw,60px)", alignItems: "center" },
      },
        // LEFT
        React.createElement("div", null,
          React.createElement(SlideHead, { slide }),
          React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "clamp(8px,1vh,12px)", marginTop: "clamp(16px,2vh,24px)" } },
            slide.items.map((it, i) =>
              React.createElement(motion.div, {
                key: i, className: "glass", variants: fadeUpV,
                style: { display: "flex", alignItems: "center", gap: "clamp(12px,1.2vw,16px)", padding: "clamp(12px,1.4vh,16px) clamp(14px,1.6vw,20px)" },
              },
                React.createElement("div", { className: "chip", style: { width: 38, height: 38, borderRadius: 10 } },
                  React.createElement(Icon, { name: it.icon, size: 18 })
                ),
                React.createElement("span", { style: { fontSize: "clamp(14px,1.3vw,19px)", fontWeight: 600 } }, it.text)
              )
            )
          )
        ),

        // RIGHT — invoice + share animation
        React.createElement(motion.div, {
          variants: scaleV,
          style: { display: "flex", justifyContent: "center", position: "relative" },
        },
          // destination chips (fly out)
          slide.destinations.map((dest, i) =>
            React.createElement(motion.div, {
              key: i,
              initial: { opacity: 0, scale: 0.3, x: 0, y: 0 },
              animate: fired ? { opacity: 1, scale: 1, x: destPositions[i].x, y: destPositions[i].y, transition: { delay: 0.2 + i * 0.18, duration: 0.6, type: "spring", stiffness: 120, damping: 14 } } : {},
              style: { position: "absolute", top: "50%", left: "50%", marginTop: "-20px", marginLeft: "-20px", zIndex: 20 },
            },
              React.createElement("div", {
                style: {
                  display: "flex", alignItems: "center", gap: "8px",
                  padding: "8px 14px", borderRadius: "999px",
                  background: "rgba(0,0,0,0.5)", backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)",
                  border: "1px solid " + dest.color + "44",
                  boxShadow: "0 4px 20px " + dest.color + "33",
                  whiteSpace: "nowrap",
                },
              },
                React.createElement(Icon, { name: dest.icon, size: 16, style: { color: dest.color } }),
                React.createElement("span", { style: { fontSize: "12px", fontWeight: 700, color: dest.color } }, dest.label)
              )
            )
          ),

          // trail lines SVG
          React.createElement("svg", {
            style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", pointerEvents: "none", zIndex: 15, overflow: "visible" },
            viewBox: "0 0 400 400",
          },
            slide.destinations.map((dest, i) =>
              React.createElement(motion.line, {
                key: i, x1: 200, y1: 200,
                x2: 200 + destPositions[i].x, y2: 200 + destPositions[i].y,
                stroke: dest.color, strokeWidth: 1.5, strokeLinecap: "round",
                initial: { pathLength: 0, opacity: 0 },
                animate: fired ? { pathLength: 1, opacity: 0.4, transition: { delay: 0.15 + i * 0.18, duration: 0.5 } } : {},
              })
            )
          ),

          // invoice card
          React.createElement(Tilt3D, { max: 8, style: { width: "100%", maxWidth: "360px", position: "relative", zIndex: 18 } },
            React.createElement(motion.div, {
              className: "glass glass-hi sheen-host",
              style: { width: "100%", padding: "clamp(18px,2vw,26px)", position: "relative" },
              animate: { y: [0, -8, 0] },
              transition: { duration: 6, repeat: Infinity, ease: "easeInOut" },
            },
              React.createElement("div", { className: "glare", key: "g" }),
              // doc header
              React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "clamp(14px,1.6vh,20px)" } },
                React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px" } },
                  React.createElement("div", { className: "chip", style: { width: 34, height: 34, borderRadius: 9 } },
                    React.createElement(Icon, { name: "FileText", size: 17 })
                  ),
                  React.createElement("span", { className: "mono-label" }, slide.invoice.doc)
                ),
                React.createElement("span", {
                  style: { fontSize: "11px", fontWeight: 700, color: "var(--yellow)", padding: "4px 10px", borderRadius: "6px", background: "rgba(255,204,0,0.08)", border: "1px solid rgba(255,204,0,0.15)" },
                }, "1С:СБП B2B")
              ),
              React.createElement("hr", { className: "hairline", style: { margin: "0 0 clamp(12px,1.4vh,16px)" } }),
              // product
              React.createElement("div", { style: { marginBottom: "clamp(6px,0.8vh,10px)" } },
                React.createElement("div", { className: "mono-label" }, "Товар"),
                React.createElement("div", { style: { fontWeight: 700, fontSize: "clamp(15px,1.4vw,20px)", marginTop: "5px" } }, slide.invoice.product)
              ),
              // amount
              React.createElement("div", { style: { marginBottom: "clamp(16px,1.8vh,22px)" } },
                React.createElement("div", { className: "mono-label" }, "Сумма к оплате"),
                React.createElement("div", { style: { fontWeight: 800, fontSize: "clamp(22px,2.2vw,32px)", marginTop: "5px", color: "var(--yellow)" } }, slide.invoice.amount)
              ),
              // share button
              React.createElement(motion.div, {
                onClick: () => setFired(f => !f),
                style: {
                  display: "flex", alignItems: "center", justifyContent: "center", gap: "10px",
                  padding: "clamp(12px,1.4vh,16px) clamp(20px,2vw,28px)",
                  borderRadius: "12px", cursor: "pointer",
                  background: fired ? "linear-gradient(150deg, rgba(95,220,138,0.2), rgba(95,220,138,0.06))" : "linear-gradient(150deg, var(--yellow), var(--yellow-deep))",
                  color: fired ? "#5fdc8a" : "#1a1505",
                  fontWeight: 800, fontSize: "clamp(14px,1.3vw,18px)",
                  boxShadow: fired ? "0 4px 20px rgba(95,220,138,0.2)" : "0 6px 24px rgba(255,204,0,0.35)",
                  border: fired ? "1px solid rgba(95,220,138,0.3)" : "none",
                  transition: "all 0.4s ease",
                },
                whileHover: { scale: 1.03 },
                whileTap: { scale: 0.97 },
              },
                React.createElement(Icon, { name: fired ? "Check" : "Share2", size: 20, stroke: 2.2 }),
                fired ? "Ссылка отправлена!" : "Поделиться ссылкой"
              )
            )
          )
        )
      ),

      // footnote
      React.createElement(motion.div, {
        variants: fadeUpV, className: "glass",
        style: {
          padding: "clamp(14px,1.6vh,20px) clamp(18px,2vw,28px)",
          display: "flex", alignItems: "center", gap: "clamp(12px,1.2vw,18px)",
          background: "linear-gradient(120deg, rgba(255,204,0,0.06), rgba(255,204,0,0.02))",
          borderColor: "rgba(255,204,0,0.16)",
        },
      },
        React.createElement(Icon, { name: "Send", size: 20, style: { color: "var(--yellow)", flex: "none" } }),
        React.createElement("p", {
          style: { margin: 0, fontSize: "clamp(12px,1.1vw,16px)", fontWeight: 500, lineHeight: 1.45, color: "var(--ink-soft)" },
        }, slide.footnote)
      )
    )
  );
}

/* ---------- 8 · Payment Journey — clean 2-col layout ---------- */
function PaymentJourneySlide({ slide }) {
  const [step, setStep] = React.useState(0);

  React.useEffect(() => {
    let alive = true;
    const run = async () => {
      setStep(0);  await new Promise(r => setTimeout(r, 4400)); if (!alive) return;
      setStep(1);  await new Promise(r => setTimeout(r, 3600)); if (!alive) return;
      setStep(2);  await new Promise(r => setTimeout(r, 4400)); if (!alive) return;
      setStep(3);  await new Promise(r => setTimeout(r, 4000)); if (!alive) return;
      setStep(4);  await new Promise(r => setTimeout(r, 4400)); if (!alive) return;
      setStep(5);
    };
    run();
    return () => { alive = false; };
  }, []);

  const chPos = [{ x: "50%", y: "-38%" }, { x: "52%", y: "-14%" }, { x: "50%", y: "14%" }, { x: "52%", y: "38%" }];

  const secs = [
    { icon: "FileText", title: "Формирование ссылки", items: slide.sources, color: "var(--yellow)", on: step >= 1 },
    { icon: "Share2", title: "Отправка клиенту", channels: slide.destinations, color: "#29a9eb", on: step >= 2 },
    { icon: "CheckCircle2", title: "Результат оплаты", items: slide.results, color: "#5fdc8a", on: step >= 5 },
  ];

  return React.createElement("div", { className: "slide" },
    React.createElement(Stagger, {
      className: "slide-inner",
      style: { display: "grid", gridTemplateColumns: "minmax(0,0.9fr) minmax(0,1.1fr)", gap: "clamp(30px,4vw,60px)", alignItems: "center" },
    },

      // ── LEFT COLUMN ──
      React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "clamp(14px,2vh,22px)" } },
        // Title block
        React.createElement("div", null,
          React.createElement(Kicker, { index: slide.id }, slide.kicker),
          React.createElement(Title, null, slide.title),
          React.createElement(motion.p, {
            className: "lead", variants: fadeUpV,
            style: { marginTop: "clamp(8px,1.2vh,14px)", fontSize: "clamp(13px,1.15vw,17px)", color: "var(--ink-soft)", maxWidth: "38ch", lineHeight: 1.45 },
          }, slide.subtitle)
        ),

        // 3 info sections
        React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "clamp(8px,1.1vh,14px)" } },
          secs.map((s, si) =>
            React.createElement(motion.div, {
              key: si, className: "glass", variants: fadeUpV,
              style: {
                padding: "clamp(12px,1.4vh,18px) clamp(14px,1.6vw,22px)",
                display: "flex", flexDirection: "column", gap: "clamp(6px,0.8vh,10px)",
                background: s.on ? "linear-gradient(150deg, " + s.color + "14, transparent)" : "transparent",
                border: "1px solid " + (s.on ? s.color + "44" : "var(--hairline)"),
                boxShadow: s.on ? "0 4px 20px " + s.color + "15" : "none",
                transition: "all 0.5s ease",
              },
            },
              React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "clamp(8px,0.9vw,12px)" } },
                React.createElement("div", { className: "chip", style: { width: "clamp(28px,2.2vw,34px)", height: "clamp(28px,2.2vw,34px)", borderRadius: 8, flex: "none" } },
                  React.createElement(Icon, { name: s.icon, size: 15 })
                ),
                React.createElement("span", { style: { fontSize: "clamp(13px,1.15vw,17px)", fontWeight: 800, color: s.on ? "var(--ink)" : "var(--ink-soft)" } }, s.title)
              ),
              s.items
                ? React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 3, paddingLeft: "clamp(36px,3.1vw,46px)" } },
                    s.items.map((it, ii) =>
                      React.createElement("div", { key: ii, style: { display: "flex", alignItems: "center", gap: 8, fontSize: "clamp(11px,0.95vw,14px)", fontWeight: 600, color: "var(--ink-soft)", lineHeight: 1.35 } },
                        React.createElement(Icon, { name: it.icon, size: 13, style: { color: s.color, flex: "none", opacity: 0.8 } }),
                        React.createElement("span", null, it.text)
                      )
                    )
                  )
                : s.channels
                ? React.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: 5, paddingLeft: "clamp(36px,3.1vw,46px)" } },
                    s.channels.map((ch, ci) =>
                      React.createElement("div", {
                        key: ci,
                        style: { display: "inline-flex", alignItems: "center", gap: 4, padding: "3px 9px", borderRadius: 999, background: ch.color + "12", border: "1px solid " + ch.color + "28", fontSize: "clamp(10px,0.85vw,12px)", fontWeight: 700, color: ch.color, whiteSpace: "nowrap" },
                      }, React.createElement("span", { style: { fontSize: 11 } }, ch.emoji), ch.label)
                    )
                  )
                : null
            )
          )
        ),

        // Thesis
        React.createElement(motion.div, {
          variants: fadeUpV,
          style: {
            display: "flex", alignItems: "center", gap: 10,
            padding: "clamp(10px,1.2vh,14px) clamp(12px,1.4vw,18px)", borderRadius: 12,
            background: "linear-gradient(120deg, rgba(95,220,138,0.08), rgba(95,220,138,0.02))",
            border: "1px solid rgba(95,220,138,0.2)",
            opacity: step >= 5 ? 1 : 0.3, transition: "opacity 0.6s ease",
          },
        },
          React.createElement(Icon, { name: "Sparkles", size: 18, style: { color: "#5fdc8a", flex: "none" } }),
          React.createElement("span", { style: { fontSize: "clamp(12px,1.05vw,15px)", fontWeight: 700, color: "#5fdc8a", lineHeight: 1.3 } }, slide.thesis)
        )
      ),

      // ── RIGHT COLUMN: animation ──
      React.createElement(motion.div, {
        variants: scaleV,
        style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "center", minHeight: "clamp(380px,50vh,540px)" },
      },

        // step dots
        React.createElement("div", { style: { position: "absolute", top: 0, right: 0, display: "flex", gap: 5, zIndex: 30 } },
          [0,1,2,3,4,5].map(i =>
            React.createElement("div", { key: i, style: {
              width: step === i ? 20 : 6, height: 6, borderRadius: 3,
              background: i <= step ? (i === step ? "var(--yellow)" : "rgba(255,204,0,0.35)") : "rgba(255,255,255,0.08)",
              boxShadow: i === step ? "0 0 10px rgba(255,204,0,0.4)" : "none", transition: "all 0.4s ease",
            }})
          )
        ),

        // glow ring
        React.createElement(motion.div, {
          style: { position: "absolute", width: "clamp(320px,28vw,440px)", height: "clamp(320px,28vw,440px)", borderRadius: "50%", border: "1px solid", pointerEvents: "none", zIndex: 0 },
          animate: {
            borderColor: step >= 5 ? "rgba(95,220,138,0.25)" : step >= 1 ? "rgba(255,204,0,0.12)" : "rgba(255,255,255,0.04)",
            boxShadow: step >= 5 ? "0 0 50px rgba(95,220,138,0.1)" : step >= 1 ? "0 0 30px rgba(255,204,0,0.05)" : "none",
            opacity: [0.4, 0.8, 0.4],
          },
          transition: { borderColor: { duration: 0.5 }, boxShadow: { duration: 0.5 }, opacity: { repeat: Infinity, duration: 3, ease: "easeInOut" } },
        }),

        // HERO card
        React.createElement(motion.div, {
          style: { position: "relative", zIndex: 20, width: "clamp(280px,24vw,380px)" },
          animate: step === 3 ? { scale: 0.72, x: "-30%", opacity: 0.35, filter: "blur(2px)" } : { scale: 1, x: "0%", opacity: 1, filter: "blur(0px)" },
          transition: { duration: 0.7, type: "spring", stiffness: 100, damping: 18 },
        },
          React.createElement(Tilt3D, { max: 7, style: { width: "100%" } },
            React.createElement(motion.div, {
              className: "glass glass-hi sheen-host",
              style: { width: "100%", padding: "clamp(20px,2vw,28px)", position: "relative", overflow: "hidden" },
              animate: { y: step < 5 ? [0, -6, 0] : 0 },
              transition: { duration: 5, repeat: step < 5 ? Infinity : 0, ease: "easeInOut" },
            },
              React.createElement("div", { className: "glare", key: "g" }),
              // header
              React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "clamp(14px,1.6vh,20px)" } },
                React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } },
                  React.createElement("div", { className: "chip", style: { width: 32, height: 32, borderRadius: 9 } }, React.createElement(Icon, { name: "FileText", size: 16 })),
                  React.createElement("span", { className: "mono-label" }, slide.invoice.doc)
                ),
                React.createElement("span", { style: { fontSize: 11, fontWeight: 700, color: "var(--yellow)", padding: "4px 10px", borderRadius: 6, background: "rgba(255,204,0,0.08)", border: "1px solid rgba(255,204,0,0.15)" } }, "1С:СБП B2B")
              ),
              React.createElement("hr", { className: "hairline", style: { margin: "0 0 clamp(12px,1.4vh,16px)" } }),
              React.createElement("div", { style: { marginBottom: "clamp(8px,1vh,12px)" } },
                React.createElement("div", { className: "mono-label" }, "Товар"),
                React.createElement("div", { style: { fontWeight: 700, fontSize: "clamp(15px,1.4vw,20px)", marginTop: 5 } }, slide.invoice.product)
              ),
              React.createElement("div", { style: { marginBottom: "clamp(16px,1.8vh,22px)" } },
                React.createElement("div", { className: "mono-label" }, "Сумма к оплате"),
                React.createElement("div", { style: { fontWeight: 800, fontSize: "clamp(24px,2.4vw,34px)", marginTop: 5, color: "var(--yellow)" } }, slide.invoice.amount)
              ),
              // status badge
              React.createElement(motion.div, {
                style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 8, padding: "clamp(12px,1.4vh,16px) clamp(18px,2vw,24px)", borderRadius: 12, fontWeight: 800, fontSize: "clamp(13px,1.2vw,17px)" },
                animate: step >= 5
                  ? { background: "linear-gradient(150deg, rgba(95,220,138,0.18), rgba(95,220,138,0.05))", color: "#5fdc8a", boxShadow: "0 4px 24px rgba(95,220,138,0.2)" }
                  : step >= 4
                  ? { background: "linear-gradient(150deg, rgba(255,180,0,0.12), rgba(255,180,0,0.04))", color: "var(--yellow)", boxShadow: "0 4px 16px rgba(255,204,0,0.12)" }
                  : step >= 1
                  ? { background: "linear-gradient(150deg, rgba(255,204,0,0.12), rgba(255,204,0,0.03))", color: "var(--yellow)", boxShadow: "0 2px 12px rgba(255,204,0,0.08)" }
                  : { background: "rgba(255,255,255,0.03)", color: "var(--ink-mute)", boxShadow: "none" },
                transition: { duration: 0.5, ease: "easeOut" },
              },
                React.createElement(Icon, { name: step >= 5 ? "CheckCircle2" : step >= 4 ? "Clock" : step >= 1 ? "Link2" : "FileText", size: 18, stroke: 2.2 }),
                step >= 5 ? "🟢 Оплачено" : step >= 4 ? "🟡 Ожидает оплату" : step >= 1 ? "Ссылка создана" : "Документ"
              )
            )
          )
        ),

        // link generation (step 1)
        step === 1 && React.createElement(motion.div, {
          style: { position: "absolute", zIndex: 25, top: "clamp(16px,2vh,28px)" },
          initial: { opacity: 0, scale: 0.6, y: 10 },
          animate: { opacity: 1, scale: 1, y: 0 },
          transition: { duration: 0.5, type: "spring", stiffness: 150, damping: 15 },
        },
          React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, padding: "10px 18px", borderRadius: 999, background: "rgba(255,204,0,0.1)", border: "1px solid rgba(255,204,0,0.25)", boxShadow: "0 6px 24px rgba(255,204,0,0.15)" } },
            React.createElement(motion.div, { animate: { rotate: [0, 360] }, transition: { duration: 1.5, repeat: Infinity, ease: "linear" } },
              React.createElement(Icon, { name: "Link2", size: 16, style: { color: "var(--yellow)" } })
            ),
            React.createElement("span", { style: { fontSize: "clamp(11px,1vw,14px)", fontWeight: 700, color: "var(--yellow)" } }, "Формирование ссылки...")
          )
        ),

        // channels (step 2-3) — vertical list on the right
        step >= 2 && step < 4 && React.createElement(motion.div, {
          style: { position: "absolute", right: "clamp(-8px,-1vw,-16px)", zIndex: 22, display: "flex", flexDirection: "column", gap: "clamp(8px,1vh,12px)", alignItems: "flex-start" },
          initial: { opacity: 0 },
          animate: { opacity: 1 },
        },
          slide.destinations.map((d, i) =>
            React.createElement(motion.div, {
              key: "ch" + i,
              initial: { opacity: 0, x: 30, scale: 0.8 },
              animate: { opacity: 1, x: 0, scale: 1 },
              transition: { delay: 0.15 + i * 0.12, duration: 0.5, type: "spring", stiffness: 140, damping: 15 },
            },
              React.createElement("div", {
                style: { display: "flex", alignItems: "center", gap: 8, padding: "clamp(8px,0.9vh,12px) clamp(12px,1.3vw,18px)", borderRadius: 12, background: "rgba(0,0,0,0.45)", backdropFilter: "blur(10px)", WebkitBackdropFilter: "blur(10px)", border: "1px solid " + d.color + "44", boxShadow: "0 4px 16px " + d.color + "18", whiteSpace: "nowrap" },
              },
                React.createElement("span", { style: { fontSize: "clamp(16px,1.5vw,20px)" } }, d.emoji),
                React.createElement("span", { style: { fontSize: "clamp(12px,1.05vw,15px)", fontWeight: 700, color: d.color } }, d.label)
              )
            )
          )
        ),

        // client payment (step 3)
        step === 3 && React.createElement(motion.div, {
          style: { position: "absolute", zIndex: 25, right: "clamp(-10px,0vw,10px)", width: "clamp(200px,17vw,270px)" },
          initial: { opacity: 0, x: 60, scale: 0.88 }, animate: { opacity: 1, x: 0, scale: 1 },
          transition: { duration: 0.5, type: "spring", stiffness: 130, damping: 16 },
        },
          React.createElement(Tilt3D, { max: 5, style: { width: "100%" } },
            React.createElement("div", { className: "glass glass-hi", style: { width: "100%", padding: "clamp(14px,1.4vw,20px)", borderRadius: 16, position: "relative", overflow: "hidden" } },
              React.createElement("div", { className: "glare", key: "g2" }),
              React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 4, marginBottom: "clamp(8px,1vh,12px)", padding: "5px 8px", borderRadius: 6, background: "rgba(255,255,255,0.03)", border: "1px solid var(--hairline)" } },
                React.createElement("span", { style: { width: 6, height: 6, borderRadius: "50%", background: "var(--red)" } }),
                React.createElement("span", { style: { width: 6, height: 6, borderRadius: "50%", background: "var(--yellow)" } }),
                React.createElement("span", { style: { width: 6, height: 6, borderRadius: "50%", background: "rgba(255,255,255,0.15)" } }),
                React.createElement("span", { className: "mono-label", style: { marginLeft: "auto", fontSize: 7 } }, "pay.1c.ru")
              ),
              React.createElement("div", { style: { textAlign: "center", marginBottom: "clamp(8px,1vh,12px)" } },
                React.createElement("div", { className: "mono-label", style: { fontSize: 9, marginBottom: 4 } }, "Страница оплаты"),
                React.createElement("div", { style: { fontWeight: 800, fontSize: "clamp(16px,1.6vw,22px)", color: "var(--yellow)" } }, slide.invoice.amount),
                React.createElement("div", { style: { fontSize: "clamp(9px,0.8vw,11px)", color: "var(--ink-mute)", marginTop: 3 } }, slide.invoice.product)
              ),
              React.createElement(motion.div, {
                style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 6, padding: "clamp(8px,1vh,12px)", borderRadius: 8, background: "linear-gradient(150deg, var(--yellow), var(--yellow-deep))", color: "#1a1505", fontWeight: 800, fontSize: "clamp(11px,1vw,14px)", boxShadow: "0 4px 18px rgba(255,204,0,0.35)" },
                animate: { scale: [1, 1.03, 1] }, transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" },
              }, React.createElement(Icon, { name: "CreditCard", size: 15, stroke: 2.2 }), "Оплатить")
            )
          )
        ),

        // notification (step 4)
        step === 4 && React.createElement(motion.div, {
          style: { position: "absolute", zIndex: 30, top: "clamp(12px,1.6vh,22px)", left: "50%" },
          initial: { opacity: 0, y: -20, x: "-50%", scale: 0.9 }, animate: { opacity: 1, y: 0, x: "-50%", scale: 1 },
          transition: { duration: 0.4, type: "spring", stiffness: 160, damping: 15, delay: 0.6 },
        },
          React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, padding: "10px 16px", borderRadius: 12, background: "rgba(95,220,138,0.1)", border: "1px solid rgba(95,220,138,0.3)", boxShadow: "0 6px 24px rgba(95,220,138,0.15)", whiteSpace: "nowrap" } },
            React.createElement(motion.div, { animate: { scale: [1, 1.25, 1] }, transition: { duration: 0.7, repeat: 2, ease: "easeInOut" } },
              React.createElement(Icon, { name: "BellRing", size: 17, style: { color: "#5fdc8a" } })
            ),
            React.createElement("span", { style: { fontSize: "clamp(11px,1vw,14px)", fontWeight: 700, color: "#5fdc8a" } }, "Получено подтверждение оплаты")
          )
        )
      )
    )
  );
}

/* small connecting glow line for horizontal schema (with travelling data dot) */
function FlowConnector({ vertical, delay = 0 }) {
  if (vertical) {
    return React.createElement(
      motion.div,
      {
        variants: fadeV,
        className: "flow-conn-v",
        style: { width: 2, height: "clamp(22px,3vh,40px)", margin: "0 auto", background: "linear-gradient(180deg, var(--yellow), rgba(255,204,0,0.15))", boxShadow: "0 0 10px var(--glow-yellow)", borderRadius: 2 },
      },
      React.createElement("span", { className: "flow-particle", style: { animationDelay: delay + "s" } })
    );
  }
  return React.createElement(
    motion.div,
    {
      variants: fadeV,
      className: "flow-conn-h",
      style: { height: 2, background: "linear-gradient(90deg, rgba(255,204,0,0.2), var(--yellow))", boxShadow: "0 0 10px var(--glow-yellow)", borderRadius: 2 },
    },
    React.createElement("span", { className: "flow-particle", style: { animationDelay: delay + "s" } })
  );
}

/* ---------- 6 · Ecosystem + flow schema ---------- */
function EcosystemSlide({ slide }) {
  return React.createElement(
    "div",
    { className: "slide" },
    React.createElement(
      Stagger,
      { className: "slide-inner" },
      React.createElement(SlideHead, { slide, style: { marginBottom: "clamp(30px,4.6vh,52px)" } }),
      // ecosystem products
      React.createElement(
        "div",
        { style: { display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: "clamp(12px,1.3vw,18px)", marginBottom: "clamp(26px,4vh,44px)" } },
        slide.ecosystem.map((p, i) =>
          React.createElement(
            motion.div,
            {
              key: i,
              variants: scaleV,
              className: "glass" + (p.key ? " " : ""),
              style: {
                padding: "clamp(18px,1.8vw,26px)",
                display: "flex", flexDirection: "column", gap: "16px",
                ...(p.key
                  ? { background: "linear-gradient(150deg, rgba(255,204,0,0.16), rgba(255,204,0,0.03))", borderColor: "rgba(255,204,0,0.32)", boxShadow: "0 0 46px rgba(255,204,0,0.14)" }
                  : {}),
              },
            },
            React.createElement(
              "div",
              { className: "chip" + (p.key ? "" : " chip--ghost"), style: { width: "clamp(46px,3.4vw,56px)", height: "clamp(46px,3.4vw,56px)", borderRadius: "14px" } },
              React.createElement(Icon, { name: p.icon, size: 26 })
            ),
            React.createElement(
              "div",
              { style: { fontSize: "clamp(15px,1.35vw,21px)", fontWeight: 700, color: p.key ? "var(--ink)" : "var(--ink-soft)" } },
              p.name
            ),
            p.key ? React.createElement("div", { className: "mono-label", style: { color: "var(--yellow)" } }, "● Наш сервис") : null
          )
        )
      ),
      // schema flow — cybernetic neural pipeline
      React.createElement(NeuralPipeline, {
        nodes: slide.schema.map((s, i) => ({ label: s, key: i === slide.schema.length - 1 })),
        height: 130,
      }),
      // thesis
      React.createElement(
        motion.p,
        {
          variants: fadeUpV,
          style: { marginTop: "clamp(22px,3.2vh,38px)", fontSize: "clamp(16px,1.55vw,24px)", fontWeight: 600, color: "var(--ink-soft)", display: "flex", alignItems: "center", gap: "14px" },
        },
        React.createElement(Icon, { name: "Sparkles", size: 26, style: { color: "var(--yellow)", flex: "none" } }),
        slide.thesis
      )
    )
  );
}

/* ---------- 7 · Steps process ---------- */
function StepsSlide({ slide }) {
  return React.createElement(
    "div",
    { className: "slide" },
    React.createElement(
      Stagger,
      { className: "slide-inner" },
      React.createElement(SlideHead, { slide, style: { marginBottom: "clamp(26px,4vh,46px)" } }),
      React.createElement(
        "div",
        { style: { display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "clamp(14px,1.6vw,22px)" } },
        slide.steps.map((s, i) =>
          React.createElement(
            motion.div,
            {
              key: i,
              className: "glass",
              variants: fadeUpV,
              style: { padding: "clamp(20px,2.2vw,30px)", display: "flex", flexDirection: "column", gap: "clamp(14px,1.8vh,22px)", minHeight: "clamp(150px,18vh,200px)" },
            },
            React.createElement(
              "div",
              { style: { display: "flex", alignItems: "center", justifyContent: "space-between" } },
              React.createElement("span", { className: "num-badge", style: { fontSize: "clamp(30px,3.4vw,50px)", opacity: 0.9 } }, s.n),
              React.createElement(
                "div",
                { className: "chip chip--ghost", style: { width: "clamp(44px,3.2vw,54px)", height: "clamp(44px,3.2vw,54px)", borderRadius: "13px" } },
                React.createElement(Icon, { name: s.icon, size: 24 })
              )
            ),
            React.createElement("div", { style: { fontSize: "clamp(16px,1.5vw,23px)", fontWeight: 700, lineHeight: 1.2, textWrap: "balance" } }, s.text)
          )
        )
      )
    )
  );
}

/* ---------- 8 · Demo setup ---------- */
function DemoSlide({ slide }) {
  return React.createElement(
    "div",
    { className: "slide" },
    React.createElement(
      Stagger,
      {
        className: "slide-inner",
        style: { display: "grid", gridTemplateColumns: "minmax(0,1.05fr) minmax(0,0.95fr)", gap: "clamp(40px,5vw,80px)", alignItems: "center" },
      },
      // left: head + checklist
      React.createElement(
        "div",
        null,
        React.createElement(Kicker, { index: slide.id }, slide.kicker),
        React.createElement(Title, null, slide.title),
        React.createElement(
          motion.p,
          { className: "lead", variants: fadeUpV, style: { marginTop: "clamp(12px,2vh,20px)", marginBottom: "clamp(22px,3vh,34px)", fontSize: "clamp(20px,2vw,32px)", fontWeight: 600, lineHeight: 1.35 } },
          slide.subtitle
        ),
        slide.items && slide.items.length > 0 && React.createElement(
          "div",
          { style: { display: "flex", flexDirection: "column", gap: "clamp(11px,1.5vh,15px)" } },
          slide.items.map((it, i) =>
            React.createElement(
              motion.div,
              { key: i, variants: fadeUpV, style: { display: "flex", alignItems: "center", gap: "16px" } },
              React.createElement(
                "div", { className: "chip", style: { width: "clamp(44px,3.2vw,52px)", height: "clamp(44px,3.2vw,52px)", borderRadius: "13px" } },
                React.createElement(Icon, { name: it.icon, size: 23 })
              ),
              React.createElement("span", { style: { fontSize: "clamp(16px,1.5vw,23px)", fontWeight: 600 } }, it.text)
            )
          )
        )
      ),
      // right: app window placeholder
      React.createElement(
        motion.div,
        { variants: scaleV },
        React.createElement(
          Tilt3D,
          { max: 0 },
          React.createElement(
        "div",
        { className: "glass glass-hi", style: { overflow: "hidden", aspectRatio: "4/3", position: "relative" } },
        React.createElement("div", { className: "glare", key: "g" }),
        // window bar
        React.createElement(
          "div",
          { style: { display: "flex", alignItems: "center", gap: "8px", padding: "14px 18px", borderBottom: "1px solid var(--hairline)", background: "rgba(255,255,255,0.02)" } },
          React.createElement("span", { style: { width: 11, height: 11, borderRadius: "50%", background: "var(--red)" } }),
          React.createElement("span", { style: { width: 11, height: 11, borderRadius: "50%", background: "var(--yellow)" } }),
          React.createElement("span", { style: { width: 11, height: 11, borderRadius: "50%", background: "rgba(255,255,255,0.18)" } }),
          React.createElement("span", { className: "mono-label", style: { marginLeft: "auto" } }, "ДЕМО · 1С:УНФ")
        ),
        // body: video or placeholder
        slide.videoSrc
          ? React.createElement(
              "div",
              { style: { position: "relative", height: "calc(100% - 50px)", background: "#0a0a0a" } },
              React.createElement("video", {
                src: slide.videoSrc,
                controls: true,
                playsInline: true,
                style: { width: "100%", height: "100%", objectFit: "contain", display: "block" },
              })
            )
          : React.createElement(
              "div",
              {
                style: {
                  position: "relative", height: "calc(100% - 50px)", display: "grid", placeItems: "center",
                  background: "repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 12px, transparent 12px 28px)",
                },
              },
              React.createElement(
                motion.div,
                {
                  style: { width: "clamp(64px,7vw,92px)", height: "clamp(64px,7vw,92px)", borderRadius: "50%", display: "grid", placeItems: "center", background: "linear-gradient(150deg, var(--yellow), var(--yellow-deep))", color: "#1a1505", boxShadow: "0 12px 40px rgba(255,204,0,0.35)" },
                  animate: { scale: [1, 1.07, 1] },
                  transition: { duration: 2.4, repeat: Infinity, ease: "easeInOut" },
                },
                React.createElement(Icon, { name: "Play", size: 34, stroke: 2.2, style: { marginLeft: 4 } })
              ),
              React.createElement("span", { className: "mono-label", style: { position: "absolute", bottom: 16, left: "50%", transform: "translateX(-50%)" } }, "запись экрана / демо")
            )
      )
      )
    )
    )
  );
}

/* ---------- 10 · Payment result (gooey elastic) ---------- */
function PaymentResultSlide({ slide }) {
  return React.createElement(
    "div",
    { className: "slide" },
    React.createElement(
      Stagger,
      {
        className: "slide-inner",
        style: { display: "grid", gridTemplateColumns: "minmax(0,0.95fr) minmax(0,1.05fr)", gap: "clamp(40px,5vw,90px)", alignItems: "center" },
      },
      // left: head + bullets
      React.createElement(
        "div",
        null,
        React.createElement(Kicker, { index: slide.id }, slide.kicker),
        React.createElement(Title, null, slide.title),
        React.createElement(motion.p, { className: "lead", variants: fadeUpV, style: { marginTop: "clamp(14px,2vh,22px)", marginBottom: "clamp(20px,3vh,30px)" } }, slide.lead),
        React.createElement(
          "div",
          { style: { display: "flex", flexDirection: "column", gap: "clamp(11px,1.5vh,15px)" } },
          slide.items.map((it, i) =>
            React.createElement(
              motion.div,
              { key: i, variants: fadeUpV, style: { display: "flex", alignItems: "center", gap: "16px" } },
              React.createElement(
                "div", { className: "chip", style: { width: "clamp(44px,3.2vw,52px)", height: "clamp(44px,3.2vw,52px)", borderRadius: "13px" } },
                React.createElement(Icon, { name: it.icon, size: 23 })
              ),
              React.createElement("span", { style: { fontSize: "clamp(16px,1.5vw,23px)", fontWeight: 600, lineHeight: 1.25 } }, it.text)
            )
          )
        )
      ),
      // right: live payment card
      React.createElement(
        motion.div,
        { variants: scaleV, style: { display: "flex", justifyContent: "center" } },
        React.createElement(
          Tilt3D,
          { style: { width: "100%", maxWidth: "440px" }, max: 8 },
          React.createElement(
            "div",
            { className: "glass glass-hi", style: { width: "100%", padding: "clamp(26px,2.8vw,40px)", position: "relative", overflow: "hidden" } },
            React.createElement("div", { className: "glare glare--auto", key: "g" }),
            React.createElement(
              "div",
              { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "clamp(22px,3vh,32px)" } },
              React.createElement("span", { className: "mono-label" }, "Счёт № 1С-04412"),
              React.createElement("span", { className: "mono-label", style: { color: "var(--ink-mute)" } }, "СБП · B2B")
            ),
            React.createElement(
              "div",
              { style: { textAlign: "center", marginBottom: "clamp(8px,1.2vh,12px)" } },
              React.createElement("div", { className: "mono-label" }, "К оплате"),
              React.createElement(AnimatedNumber, { value: 148500, duration: 1.6, format: (n) => Math.round(n).toLocaleString("ru-RU") + " ₽", style: { display: "block", fontWeight: 800, fontSize: "clamp(34px,3.8vw,56px)", marginTop: "6px", letterSpacing: "-0.02em" } })
            ),
            React.createElement("hr", { className: "hairline", style: { margin: "clamp(20px,2.6vh,28px) 0" } }),
            React.createElement(PaymentWidget, null),
            React.createElement(
              "div",
              { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "8px", marginTop: "clamp(18px,2.4vh,26px)" } },
              React.createElement(Icon, { name: "RefreshCw", size: 15, style: { color: "var(--ink-mute)" } }),
              React.createElement("span", { className: "mono-label", style: { color: "var(--ink-mute)" } }, "статус обновляется в 1С автоматически")
            )
          )
        )
      )
    )
  );
}

function VFlowSlide({ slide }) {
  const flowSteps = [
    { icon: "FileText", emoji: "📋", label: "Заказ в 1С", color: "#3498db", desc: "Формируем документ заказа в программе" },
    { icon: "Link2", emoji: "🔗", label: "Ссылка клиенту", color: "#9b59b6", desc: "Генерируем и отправляем ссылку" },
    { icon: "MonitorSmartphone", emoji: "🌐", label: "Страница заказа", color: "#00d2d3", desc: "Клиент видит персональную страницу" },
    { icon: "CreditCard", emoji: "💳", label: "Выбор способа оплаты", color: "#e67e22", desc: "СБП, карта, интернет-эквайринг" },
    { icon: "CheckCircle2", emoji: "✅", label: "Оплата", color: "#2ecc71", desc: "Моментальное подтверждение" },
    { icon: "BarChart3", emoji: "📊", label: "Статус в 1С", color: "var(--yellow)", desc: "Информация автоматически в программе" },
  ];

  const [active, setActive] = React.useState(0);

  React.useEffect(() => {
    let alive = true;
    const run = async () => {
      while (alive) {
        for (let i = 0; i < flowSteps.length; i++) {
          if (!alive) break;
          setActive(i);
          await new Promise(r => setTimeout(r, 4800));
        }
      }
    };
    run();
    return () => { alive = false; };
  }, []);

  return React.createElement(
    "div",
    { className: "slide" },
    React.createElement(
      Stagger,
      {
        className: "slide-inner",
        style: {
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          gap: "0",
          height: "100%"
        }
      },

      // Header
      React.createElement(
        "div",
        { style: { textAlign: "center", marginBottom: "clamp(28px, 4vh, 48px)" } },
        React.createElement(
          "div",
          { style: { display: "inline-flex" } },
          React.createElement(Kicker, { index: slide.id }, slide.kicker)
        ),
        React.createElement(Title, { style: { textAlign: "center" } }, slide.title)
      ),

      // Main animation area
      React.createElement(
        "div",
        {
          style: {
            position: "relative",
            width: "100%",
            maxWidth: "1000px",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            gap: "clamp(20px, 3vh, 36px)"
          }
        },

        // === Central focus card ===
        React.createElement(
          "div",
          {
            style: {
              position: "relative",
              width: "clamp(400px, 55vw, 680px)",
              height: "clamp(280px, 40vh, 420px)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center"
            }
          },

          // Outer glow ring
          React.createElement(motion.div, {
            style: {
              position: "absolute",
              inset: "-16px",
              borderRadius: "32px",
              border: "1.5px solid",
              pointerEvents: "none"
            },
            animate: {
              borderColor: flowSteps[active].color,
              boxShadow: "0 0 40px " + (flowSteps[active].color === "var(--yellow)" ? "rgba(255,204,0,0.15)" : flowSteps[active].color + "22"),
              opacity: [0.3, 0.7, 0.3]
            },
            transition: {
              borderColor: { duration: 0.5 },
              boxShadow: { duration: 0.5 },
              opacity: { repeat: Infinity, duration: 2.5, ease: "easeInOut" }
            }
          }),

          // Main card for each step (all rendered, only active one visible)
          flowSteps.map((step, i) =>
            React.createElement(
              motion.div,
              {
                key: i,
                style: {
                  position: "absolute",
                  inset: 0,
                  borderRadius: "24px",
                  background: "rgba(18, 18, 28, 0.6)",
                  border: "1px solid " + (i === active ? step.color + "44" : "var(--hairline)"),
                  backdropFilter: "blur(12px)",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "center",
                  gap: "clamp(16px, 2.5vh, 28px)",
                  padding: "clamp(28px, 4vw, 50px)"
                },
                animate: i === active
                  ? { opacity: 1, scale: 1, filter: "blur(0px)", y: 0 }
                  : { opacity: 0, scale: 0.85, filter: "blur(8px)", y: i < active ? -30 : 30 },
                transition: { duration: 0.6, ease: "easeOut" }
              },

              // Step number badge
              React.createElement(
                motion.div,
                {
                  style: {
                    position: "absolute",
                    top: "clamp(12px, 1.5vh, 18px)",
                    right: "clamp(14px, 1.5vw, 20px)",
                    fontSize: "clamp(10px, 0.85vw, 12px)",
                    fontWeight: 800,
                    color: step.color,
                    opacity: 0.7,
                    letterSpacing: "0.08em"
                  }
                },
                "ШАГ " + (i + 1) + " / " + flowSteps.length
              ),

              // Big icon circle
              React.createElement(
                motion.div,
                {
                  style: {
                    width: "clamp(88px, 9vw, 120px)",
                    height: "clamp(88px, 9vw, 120px)",
                    borderRadius: "50%",
                    background: step.color + "15",
                    border: "2px solid " + step.color + "40",
                    display: "grid",
                    placeItems: "center",
                    position: "relative"
                  },
                  animate: i === active ? { scale: [0.9, 1, 0.98], rotate: [0, 0] } : {},
                  transition: { scale: { duration: 0.5, ease: "easeOut" } }
                },
                React.createElement(Icon, { name: step.icon, size: 46, style: { color: step.color } }),
                // Inner pulse
                React.createElement(motion.div, {
                  style: {
                    position: "absolute",
                    inset: -6,
                    borderRadius: "50%",
                    border: "1px solid " + step.color + "20"
                  },
                  animate: i === active
                    ? { scale: [1, 1.2, 1], opacity: [0.5, 0, 0.5] }
                    : { scale: 1, opacity: 0 },
                  transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
                })
              ),

              // Label
              React.createElement(
                "div",
                {
                  style: {
                    fontSize: "clamp(22px, 2.4vw, 34px)",
                    fontWeight: 800,
                    color: "var(--ink)",
                    textAlign: "center",
                    lineHeight: 1.2
                  }
                },
                step.emoji + " " + step.label
              ),

              // Description
              React.createElement(
                "div",
                {
                  style: {
                    fontSize: "clamp(14px, 1.2vw, 18px)",
                    fontWeight: 500,
                    color: "var(--ink-mute)",
                    textAlign: "center"
                  }
                },
                step.desc
              )
            )
          )
        ),

        // === Bottom progress indicator ===
        React.createElement(
          "div",
          {
            style: {
              display: "flex",
              alignItems: "center",
              gap: "clamp(8px, 1vw, 14px)",
              justifyContent: "center"
            }
          },
          flowSteps.map((step, i) =>
            React.createElement(
              "div",
              {
                key: i,
                style: {
                  display: "flex",
                  alignItems: "center",
                  gap: "clamp(6px, 0.8vw, 10px)"
                }
              },
              // Step dot/pill
              React.createElement(
                motion.div,
                {
                  style: {
                    display: "flex",
                    alignItems: "center",
                    gap: "5px",
                    padding: i === active ? "8px 16px" : "8px 10px",
                    borderRadius: "20px",
                    cursor: "default",
                    border: "1px solid",
                    fontSize: "clamp(10px, 0.85vw, 13px)",
                    fontWeight: 700,
                    whiteSpace: "nowrap",
                    transition: "all 0.4s ease"
                  },
                  animate: {
                    background: i === active ? step.color + "20" : "rgba(255,255,255,0.03)",
                    borderColor: i === active ? step.color + "50" : "var(--hairline)",
                    color: i === active ? step.color : "var(--ink-mute)",
                    scale: i === active ? 1.08 : 0.95
                  },
                  transition: { duration: 0.4 }
                },
                React.createElement(Icon, { name: step.icon, size: 15, style: { color: i <= active ? step.color : "var(--ink-mute)" } }),
                i === active ? step.label : null
              ),
              // Connector line between dots
              i < flowSteps.length - 1 ? React.createElement(
                motion.div,
                {
                  style: {
                    width: "clamp(16px, 2vw, 32px)",
                    height: "2px",
                    borderRadius: "1px",
                    background: "var(--hairline)"
                  },
                  animate: {
                    background: i < active
                      ? flowSteps[i + 1].color
                      : "var(--hairline)",
                    opacity: i < active ? 0.6 : 0.2
                  },
                  transition: { duration: 0.4 }
                }
              ) : null
            )
          )
        )
      )
    )
  );
}

/* ---------- 13 · Two groups ---------- */
function GroupsSlide({ slide }) {
  return React.createElement(
    "div",
    { className: "slide" },
    React.createElement(
      Stagger,
      { className: "slide-inner" },
      React.createElement(SlideHead, { slide, style: { marginBottom: "clamp(28px,4vh,48px)", textAlign: "center" } }),
      React.createElement(
        "div",
        { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(18px,2.2vw,32px)" } },
        slide.groups.map((g, gi) => {
          const red = g.tone === "red";
          return React.createElement(
            motion.div,
            {
              key: gi,
              variants: scaleV,
              className: "glass",
              style: {
                padding: "clamp(26px,3vw,42px)",
                display: "flex", flexDirection: "column", gap: "clamp(20px,2.6vh,30px)",
                background: red ? "linear-gradient(155deg, rgba(226,35,26,0.1), rgba(226,35,26,0.02))" : "linear-gradient(155deg, rgba(255,204,0,0.1), rgba(255,204,0,0.02))",
                borderColor: red ? "rgba(226,35,26,0.26)" : "rgba(255,204,0,0.28)",
              },
            },
            React.createElement(
              "div",
              { style: { display: "flex", alignItems: "center", gap: "16px" } },
              React.createElement(
                "div", { className: "chip" + (red ? " chip--red" : ""), style: { width: "clamp(52px,4vw,64px)", height: "clamp(52px,4vw,64px)", borderRadius: "15px" } },
                React.createElement(Icon, { name: g.icon, size: 28 })
              ),
              React.createElement("div", { style: { fontSize: "clamp(20px,2vw,30px)", fontWeight: 800 } }, g.label)
            ),
            React.createElement("hr", { className: "hairline" }),
            React.createElement(
              "div",
              { style: { display: "flex", flexDirection: "column", gap: "clamp(11px,1.5vh,16px)" } },
              g.items.map((it, ii) =>
                React.createElement(
                  "div",
                  { key: ii, className: "flow-node", style: { gap: "14px" } },
                  React.createElement(Icon, { name: "Check", size: 22, style: { color: red ? "#ff5a51" : "var(--yellow)", flex: "none" } }),
                  React.createElement("span", { style: { fontSize: "clamp(16px,1.55vw,24px)", fontWeight: 600 } }, it)
                )
              )
            )
          );
        })
      )
    )
  );
}

/* ---------- 14 · Bento benefits ---------- */
function BentoBenefitsSlide({ slide }) {
  return React.createElement(
    "div",
    { className: "slide" },
    React.createElement(KineticWords, {
      words: [
        { text: "БЫСТРЕЕ", top: "8%", dur: 34, delay: 0 },
        { text: "ДЕШЕВЛЕ", top: "38%", dur: 42, delay: -8 },
        { text: "ПРОЩЕ", top: "68%", dur: 30, delay: -3 },
      ],
    }),
    React.createElement(
      Stagger,
      { className: "slide-inner", style: { position: "relative", zIndex: 1 } },
      React.createElement(SlideHead, { slide, style: { marginBottom: "clamp(24px,3.6vh,42px)" } }),
      React.createElement(
        "div",
        { style: { display: "grid", gridTemplateColumns: "repeat(3,1fr)", gridAutoRows: "1fr", gap: "clamp(12px,1.4vw,20px)" } },
        slide.items.map((it, i) =>
          React.createElement(
            motion.div,
            {
              key: i,
              className: "glass",
              variants: scaleV,
              style: {
                padding: "clamp(20px,2.2vw,32px)",
                display: "flex", alignItems: "center", gap: "clamp(16px,1.6vw,22px)",
                gridColumn: i === 0 ? "span 2" : "auto",
                ...(i === 0 ? { background: "linear-gradient(120deg, rgba(255,204,0,0.12), rgba(255,204,0,0.02))", borderColor: "rgba(255,204,0,0.28)" } : {}),
              },
            },
            React.createElement(
              "div",
              { className: "chip" + (i === 0 ? "" : ""), style: { width: "clamp(52px,4vw,64px)", height: "clamp(52px,4vw,64px)", borderRadius: "15px" } },
              React.createElement(Icon, { name: it.icon, size: 28 })
            ),
            React.createElement("div", { style: { fontSize: "clamp(17px,1.6vw,26px)", fontWeight: 700, lineHeight: 1.18, textWrap: "balance" } }, it.text)
          )
        )
      )
    )
  );
}

/* ---------- 11 · Online Order — browser mockup e-shop ---------- */
function OnlineOrderSlide({ slide }) {
  const [step, setStep] = React.useState(0);
  
  React.useEffect(() => {
    let active = true;
    const run = async () => {
      while (active) {
        setStep(0);
        await new Promise(r => setTimeout(r, 2200));
        if (!active) break;

        setStep(1); // link traveling
        await new Promise(r => setTimeout(r, 1200));
        if (!active) break;

        setStep(2); // browser rendering & items show
        await new Promise(r => setTimeout(r, 3000));
        if (!active) break;

        setStep(3); // click pay, send to client
        await new Promise(r => setTimeout(r, 1200));
        if (!active) break;

        setStep(4); // phone success, sync confirmation particle
        await new Promise(r => setTimeout(r, 1800));
        if (!active) break;

        setStep(5); // laptop updated status
        await new Promise(r => setTimeout(r, 3000));
      }
    };
    run();
    return () => { active = false; };
  }, []);

  return React.createElement(
    "div",
    { className: "slide" },
    React.createElement(
      Stagger,
      { className: "slide-inner", style: { display: "grid", gridTemplateColumns: "minmax(0,0.65fr) minmax(0,1.35fr)", gap: "clamp(24px,3vw,50px)", alignItems: "center" } },

      // LEFT — title + features
      React.createElement("div", null,
        React.createElement(Kicker, { index: slide.id }, slide.kicker),
        React.createElement(Title, null, slide.title),
        React.createElement(motion.p, {
          className: "subtitle", variants: fadeUpV,
          style: { marginTop: "clamp(12px,1.8vh,18px)", maxWidth: "38ch" },
        }, slide.subtitle),
        React.createElement("div", {
          style: { display: "flex", flexDirection: "column", gap: "clamp(10px,1.2vh,14px)", marginTop: "clamp(24px,3.5vh,34px)" },
        },
          slide.features.map((f, i) =>
            React.createElement(motion.div, {
              key: i, variants: fadeUpV,
              style: { display: "flex", alignItems: "center", gap: "14px" },
            },
              React.createElement("div", { className: "chip chip--ghost", style: { width: 38, height: 38, borderRadius: 10, flex: "none" } },
                React.createElement(Icon, { name: f.icon, size: 19 })
              ),
              React.createElement("span", { style: { fontSize: "clamp(13px,1.2vw,16px)", fontWeight: 600 } }, f.text)
            )
          )
        )
      ),

      // RIGHT — laptop → browser → client stage
      React.createElement(motion.div, {
        variants: scaleV,
        style: {
          position: "relative",
          width: "100%",
          height: "clamp(360px, 44vh, 490px)",
          borderRadius: "24px",
          background: "rgba(255,255,255,0.01)",
          border: "1px solid var(--hairline)",
          overflow: "hidden",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "0 clamp(20px, 3.5vw, 40px)"
        }
      },
        // SVG connecting lines with animated flow pulses
        React.createElement(
          "svg",
          {
            style: { position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none", overflow: "visible" },
            viewBox: "0 0 600 300",
            preserveAspectRatio: "none"
          },
          // Laptop to Browser path
          React.createElement("path", {
            d: "M 125 150 Q 180 100 235 150",
            fill: "none", stroke: "rgba(255,204,0,0.1)", strokeWidth: 2,
            strokeDasharray: "4 4"
          }),
          // Pulse Laptop -> Browser (step === 1)
          step === 1 && React.createElement(motion.path, {
            d: "M 125 150 Q 180 100 235 150",
            fill: "none", stroke: "var(--yellow)", strokeWidth: 3,
            initial: { pathLength: 0 },
            animate: { pathLength: 1 },
            transition: { duration: 1.2, ease: "easeInOut" },
            style: { filter: "drop-shadow(0 0 6px var(--glow-yellow))" }
          }),

          // Browser to Client path
          React.createElement("path", {
            d: "M 365 150 Q 420 100 475 150",
            fill: "none", stroke: "rgba(255,204,0,0.1)", strokeWidth: 2,
            strokeDasharray: "4 4"
          }),
          // Pulse Browser -> Client (step === 3)
          step === 3 && React.createElement(motion.path, {
            d: "M 365 150 Q 420 100 475 150",
            fill: "none", stroke: "var(--yellow)", strokeWidth: 3,
            initial: { pathLength: 0 },
            animate: { pathLength: 1 },
            transition: { duration: 1.2, ease: "easeInOut" },
            style: { filter: "drop-shadow(0 0 6px var(--glow-yellow))" }
          }),

          // Client to Laptop success path (bottom loop)
          React.createElement("path", {
            d: "M 475 160 Q 300 260 125 160",
            fill: "none", stroke: "rgba(95,220,138,0.08)", strokeWidth: 2,
            strokeDasharray: "4 4"
          }),
          // Pulse Client -> Laptop success (step === 4)
          step === 4 && React.createElement(motion.path, {
            d: "M 475 160 Q 300 260 125 160",
            fill: "none", stroke: "#5fdc8a", strokeWidth: 3,
            initial: { pathLength: 0 },
            animate: { pathLength: 1 },
            transition: { duration: 1.5, ease: "easeInOut" },
            style: { filter: "drop-shadow(0 0 6px rgba(95,220,138,0.5))" }
          })
        ),

        // Device 1: Laptop (Left)
        React.createElement(
          "div",
          {
            style: {
              position: "relative",
              zIndex: 5,
              width: "136px",
              display: "flex",
              flexDirection: "column",
              alignItems: "center"
            }
          },
          // Laptop Screen
          React.createElement(
            "div",
            {
              style: {
                width: "124px",
                height: "80px",
                borderRadius: "5px",
                background: "#121216",
                border: "3px solid #33333e",
                position: "relative",
                overflow: "hidden",
                boxShadow: "0 10px 25px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.8)",
                display: "flex",
                flexDirection: "column"
              }
            },
            // 1C Top bar (yellow)
            React.createElement(
              "div",
              {
                style: {
                  background: "linear-gradient(90deg, #ffcc00, #ffb300)",
                  height: "11px",
                  display: "flex",
                  alignItems: "center",
                  padding: "0 4px",
                  justifyContent: "space-between"
                }
              },
              React.createElement("span", { style: { fontSize: "7px", fontWeight: 900, color: "#1a1505" } }, slide.laptopTitle),
              React.createElement("span", { style: { width: 3, height: 3, borderRadius: "50%", background: "#ff0000" } })
            ),
            // 1C Screen Content (Document)
            React.createElement(
              "div",
              {
                style: {
                  padding: "5px",
                  display: "flex",
                  flexDirection: "column",
                  gap: "4px",
                  flex: 1,
                  justifyContent: "space-between"
                }
              },
              React.createElement(
                "div",
                null,
                React.createElement(
                  "div",
                  { style: { fontSize: "7px", fontWeight: 700, color: "var(--ink-mute)" } },
                  slide.documentName
                ),
                // simulated text lines
                React.createElement("div", { style: { width: "70%", height: "2px", background: "rgba(255,255,255,0.06)", marginTop: "2px" } }),
                React.createElement("div", { style: { width: "50%", height: "2px", background: "rgba(255,255,255,0.06)", marginTop: "2px" } }),
                React.createElement("div", { style: { width: "80%", height: "2px", background: "rgba(255,255,255,0.06)", marginTop: "2px" } })
              ),
              // Status Badge
              React.createElement(
                "div",
                {
                  style: {
                    alignSelf: "flex-start",
                    padding: "2px 5px",
                    borderRadius: "3px",
                    fontSize: "6px",
                    fontWeight: 800,
                    textTransform: "uppercase",
                    letterSpacing: "0.05em",
                    background: step === 5 ? "rgba(95,220,138,0.15)" : "rgba(255,204,0,0.1)",
                    border: step === 5 ? "1px solid rgba(95,220,138,0.3)" : "1px solid rgba(255,204,0,0.2)",
                    color: step === 5 ? "#5fdc8a" : "var(--yellow)",
                    transition: "all 0.5s ease"
                  }
                },
                step === 5 ? "Оплачен ✓" : "Черновик"
              )
            )
          ),
          // Laptop Base
          React.createElement("div", {
            style: {
              width: "144px",
              height: "5px",
              background: "linear-gradient(180deg, #444450, #22222a)",
              borderRadius: "0 0 5px 5px",
              borderTop: "1px solid #555562",
              boxShadow: "0 4px 8px rgba(0,0,0,0.3)"
            }
          }),
          React.createElement(
            "div",
            { className: "mono-label", style: { marginTop: "8px", fontSize: "10px", color: "var(--ink-mute)" } },
            "1С:УНФ"
          )
        ),

        // Device 2: Browser Mockup (Center, Large)
        React.createElement(
          motion.div,
          {
            style: {
              width: "305px",
              zIndex: 10,
              perspective: 800
            },
            animate: step >= 2 ? { scale: 1, filter: "none", opacity: 1 } : { scale: 0.95, filter: "blur(2px)", opacity: 0.75 },
            transition: { duration: 0.6 }
          },
          React.createElement(
            Tilt3D,
            { max: 5 },
            React.createElement(
              "div",
              {
                className: "glass glass-hi",
                style: {
                  width: "100%",
                  borderRadius: "14px",
                  overflow: "hidden",
                  boxShadow: step >= 2 ? "0 20px 40px rgba(0,0,0,0.4), 0 0 30px rgba(255,204,0,0.06)" : "0 10px 20px rgba(0,0,0,0.2)",
                  border: "1px solid var(--hairline)",
                  transition: "box-shadow 0.6s ease"
                }
              },
              // Browser Header
              React.createElement(
                "div",
                {
                  style: {
                    display: "flex",
                    alignItems: "center",
                    gap: "6px",
                    padding: "8px 12px",
                    borderBottom: "1px solid var(--hairline)",
                    background: "rgba(255,255,255,0.02)"
                  }
                },
                React.createElement("span", { style: { width: 7, height: 7, borderRadius: "50%", background: "#ff5f56" } }),
                React.createElement("span", { style: { width: 7, height: 7, borderRadius: "50%", background: "#ffbd2e" } }),
                React.createElement("span", { style: { width: 7, height: 7, borderRadius: "50%", background: "#27c93f" } }),
                React.createElement(
                  "div",
                  {
                    style: {
                      marginLeft: "auto",
                      padding: "2px 10px",
                      borderRadius: "4px",
                      background: "rgba(255,255,255,0.04)",
                      border: "1px solid var(--hairline)",
                      fontSize: "8.5px",
                      fontFamily: '"JetBrains Mono", monospace',
                      color: "var(--ink-mute)"
                    }
                  },
                  "online-orders.1c.ru/pay"
                )
              ),
              // Browser Body (Mini Internet-Shop)
              React.createElement(
                "div",
                {
                  style: {
                    padding: "12px",
                    display: "flex",
                    flexDirection: "column",
                    gap: "10px"
                  }
                },
                // Shop Header
                React.createElement(
                  "div",
                  { style: { display: "flex", alignItems: "center", justifyContent: "space-between" } },
                  React.createElement(
                    "div",
                    { style: { display: "flex", alignItems: "center", gap: "6px" } },
                    React.createElement(
                      "div",
                      {
                        style: {
                          width: 22,
                          height: 22,
                          borderRadius: "50%",
                          background: "linear-gradient(135deg, var(--yellow), var(--yellow-deep))",
                          display: "grid",
                          placeItems: "center",
                          color: "#1a1505"
                        }
                      },
                      React.createElement(Icon, { name: "ShoppingCart", size: 12, stroke: 2.5 })
                    ),
                    React.createElement("span", { style: { fontWeight: 800, fontSize: "12px" } }, "Страница заказа")
                  ),
                  React.createElement(
                    "span",
                    {
                      style: {
                        fontSize: "8px",
                        fontWeight: 700,
                        padding: "3px 8px",
                        borderRadius: "5px",
                        background: step >= 4 ? "rgba(95,220,138,0.12)" : "rgba(255,204,0,0.08)",
                        border: step >= 4 ? "1px solid rgba(95,220,138,0.2)" : "1px solid rgba(255,204,0,0.15)",
                        color: step >= 4 ? "#5fdc8a" : "var(--yellow)",
                        transition: "all 0.5s ease"
                      }
                    },
                    step >= 4 ? "Оплачен" : "Ожидает оплаты"
                  )
                ),
                // Products List
                React.createElement(
                  "div",
                  {
                    style: {
                      borderRadius: "8px",
                      overflow: "hidden",
                      border: "1px solid var(--hairline)"
                    }
                  },
                  slide.products.map((p, idx) =>
                    React.createElement(
                      motion.div,
                      {
                        key: idx,
                        initial: { opacity: 0, x: -10 },
                        animate: step >= 2 ? { opacity: 1, x: 0 } : { opacity: 0, x: -10 },
                        transition: { duration: 0.3, delay: idx * 0.15 },
                        style: {
                          display: "grid",
                          gridTemplateColumns: "1fr auto auto",
                          gap: "8px",
                          padding: "6px 10px",
                          borderTop: idx > 0 ? "1px solid var(--hairline)" : "none",
                          alignItems: "center"
                        }
                      },
                      React.createElement("span", { style: { fontSize: "10px", fontWeight: 600 } }, p.name),
                      React.createElement("span", { style: { fontSize: "9px", color: "var(--ink-mute)", fontFamily: '"JetBrains Mono", monospace' } }, p.qty),
                      React.createElement("span", { style: { fontSize: "10px", fontWeight: 700, textAlign: "right" } }, p.price)
                    )
                  ),
                  // Total price row
                  React.createElement(
                    "div",
                    {
                      style: {
                        display: "flex",
                        justifyContent: "space-between",
                        padding: "8px 10px",
                        borderTop: "1px solid var(--hairline-strong)",
                        background: "rgba(255,255,255,0.015)"
                      }
                    },
                    React.createElement("span", { style: { fontWeight: 800, fontSize: "10px" } }, "Итого"),
                    React.createElement(
                      motion.span,
                      {
                        style: { fontWeight: 800, fontSize: "12px", color: "var(--yellow)" },
                        animate: step >= 2 ? { scale: [1, 1.1, 1] } : {}
                      },
                      slide.total
                    )
                  )
                ),
                // Pay Button
                React.createElement(
                  motion.div,
                  {
                    style: {
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      gap: "6px",
                      padding: "10px",
                      borderRadius: "8px",
                      background: step >= 4 ? "rgba(95,220,138,0.15)" : "linear-gradient(135deg, var(--yellow), var(--yellow-deep))",
                      border: step >= 4 ? "1px solid rgba(95,220,138,0.2)" : "none",
                      color: step >= 4 ? "#5fdc8a" : "#1a1505",
                      fontWeight: 800,
                      fontSize: "11px",
                      cursor: "pointer",
                      boxShadow: step >= 4 ? "none" : "0 4px 15px rgba(255,204,0,0.2)"
                    },
                    animate: step === 2
                      ? { scale: [1, 1.02, 1], boxShadow: ["0 4px 12px rgba(255,204,0,0.2)", "0 6px 20px rgba(255,204,0,0.4)", "0 4px 12px rgba(255,204,0,0.2)"] }
                      : {},
                    transition: { duration: 2, repeat: Infinity }
                  },
                  React.createElement(Icon, { name: step >= 4 ? "Check" : "CreditCard", size: 13, stroke: 2.5 }),
                  React.createElement(
                    "span",
                    null,
                    step >= 4 ? "Оплачено через СБП" : step === 3 ? "Обработка..." : "Оплатить заказ"
                  )
                )
              )
            )
          ),
          React.createElement(
            "div",
            { className: "mono-label", style: { marginTop: "12px", fontSize: "10px", color: "var(--ink-mute)", textAlign: "center" } },
            "Веб-интерфейс заказа"
          )
        ),

        // Device 3: Smartphone Mockup (Right)
        React.createElement(
          motion.div,
          {
            style: {
              width: "115px",
              zIndex: 5
            },
            animate: step >= 3 ? { scale: 1, filter: "none", opacity: 1 } : { scale: 0.95, filter: "blur(2px)", opacity: 0.75 },
            transition: { duration: 0.6 }
          },
          React.createElement(
            Tilt3D,
            { max: 8 },
            React.createElement(
              "div",
              {
                style: {
                  width: "102px",
                  height: "186px",
                  borderRadius: "18px",
                  border: "3.5px solid #2d2d38",
                  background: "#0a0a0f",
                  position: "relative",
                  overflow: "hidden",
                  boxShadow: "0 12px 30px rgba(0,0,0,0.5)",
                  display: "flex",
                  flexDirection: "column"
                }
              },
              // Notch
              React.createElement("div", {
                style: {
                  width: "48px",
                  height: "6px",
                  background: "#2d2d38",
                  borderRadius: "0 0 5px 5px",
                  margin: "0 auto",
                  position: "relative",
                  zIndex: 20
                }
              }),
              // Phone Screen Content
              React.createElement(
                "div",
                {
                  style: {
                    flex: 1,
                    padding: "6px",
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    justifyContent: "center",
                    gap: "6px"
                  }
                },
                step < 4 ? React.createElement(
                  React.Fragment,
                  null,
                  // SBP Logo / QR Code mockup
                  React.createElement(
                    "div",
                    {
                      style: {
                        width: 50,
                        height: 50,
                        borderRadius: "6px",
                        background: "rgba(255,255,255,0.03)",
                        border: "1px solid var(--hairline)",
                        display: "grid",
                        placeItems: "center",
                        position: "relative"
                      }
                    },
                    React.createElement(Icon, { name: "QrCode", size: 34, style: { color: "var(--yellow)" } }),
                    step === 3 && React.createElement(motion.div, {
                      style: {
                        position: "absolute",
                        inset: 0,
                        border: "1.5px solid var(--yellow)",
                        borderRadius: "6px"
                      },
                      animate: { scale: [1, 1.2, 1], opacity: [1, 0, 1] },
                      transition: { duration: 1, repeat: Infinity }
                    })
                  ),
                  React.createElement(
                    "div",
                    { style: { fontSize: "6.5px", fontWeight: 700, color: "var(--ink-mute)", textAlign: "center" } },
                    "Отсканируйте для оплаты"
                  )
                ) : React.createElement(
                  motion.div,
                  {
                    initial: { scale: 0.6, opacity: 0 },
                    animate: { scale: 1, opacity: 1 },
                    transition: { type: "spring", stiffness: 150, damping: 12 },
                    style: {
                      display: "flex",
                      flexDirection: "column",
                      alignItems: "center",
                      gap: "6px"
                    }
                  },
                  // Success Circle
                  React.createElement(
                    motion.div,
                    {
                      style: {
                        width: 36,
                        height: 36,
                        borderRadius: "50%",
                        background: "rgba(95,220,138,0.15)",
                        border: "2px solid #5fdc8a",
                        display: "grid",
                        placeItems: "center",
                        color: "#5fdc8a",
                        boxShadow: "0 0 15px rgba(95,220,138,0.3)"
                      },
                      animate: { scale: [1, 1.1, 1] },
                      transition: { duration: 1.5, repeat: Infinity }
                    },
                    React.createElement(Icon, { name: "Check", size: 18, stroke: 3 })
                  ),
                  React.createElement(
                    "div",
                    { style: { fontSize: "7.5px", fontWeight: 800, color: "#5fdc8a", textAlign: "center" } },
                    "Успешно оплачено"
                  ),
                  React.createElement(
                    "div",
                    { style: { fontSize: "6px", color: "var(--ink-mute)", fontFamily: '"JetBrains Mono", monospace' } },
                    slide.total
                  )
                )
              )
            )
          ),
          React.createElement(
            "div",
            { className: "mono-label", style: { marginTop: "12px", fontSize: "10px", color: "var(--ink-mute)", textAlign: "center" } },
            "Смартфон клиента"
          )
        )
      ),

      // FOOTNOTE
      React.createElement(
        motion.div,
        {
          variants: fadeUpV,
          className: "glass",
          style: {
            gridColumn: "1 / -1",
            marginTop: "clamp(10px,1.5vh,18px)",
            padding: "clamp(12px,1.4vh,16px) clamp(16px,2vw,24px)",
            display: "flex",
            alignItems: "center",
            gap: "14px",
            background: "linear-gradient(120deg, rgba(255,204,0,0.06), rgba(255,204,0,0.02))",
            borderColor: "rgba(255,204,0,0.15)"
          }
        },
        React.createElement(Icon, { name: "Info", size: 20, style: { color: "var(--yellow)", flex: "none" } }),
        React.createElement("p", {
          style: {
            margin: 0, fontSize: "clamp(11px,1.1vw,14px)", fontWeight: 500,
            lineHeight: 1.45, color: "var(--ink-soft)"
          }
        }, slide.footnote)
      )
    )
  );
}

/* ---------- 13 · Payment Hub — premium SaaS/fintech layout ---------- */
function PaymentHubSlide({ slide }) {

  /* render one side's payment methods */
  function PayMethodGroup({ group, side }) {
    const isLeft = side === "left";
    return React.createElement(
      motion.div,
      {
        variants: fadeUpV,
        style: {
          display: "flex", flexDirection: "column", gap: "clamp(8px,1vh,12px)",
          alignItems: isLeft ? "flex-end" : "flex-start",
          width: "100%",
        },
      },
      // group label — always same order: icon + text
      React.createElement(
        "div",
        {
          style: {
            display: "flex", alignItems: "center", gap: "10px",
            marginBottom: "clamp(6px,1vh,10px)",
            width: "100%", maxWidth: "300px",
            justifyContent: "center",
          },
        },
        React.createElement(
          "div",
          { className: "chip", style: { width: 36, height: 36, borderRadius: 10, flex: "none" } },
          React.createElement(Icon, { name: group.icon, size: 18 })
        ),
        React.createElement("div", {
          style: { fontSize: "clamp(14px,1.3vw,20px)", fontWeight: 800, letterSpacing: "-0.01em" },
        }, group.label)
      ),
      // items — all same width, icon always left, text always left-aligned
      group.items.map((it, i) =>
        React.createElement(
          motion.div,
          {
            key: i,
            variants: fadeUpV,
            className: "glass",
            style: {
              display: "flex", alignItems: "center", gap: "clamp(10px,1vw,14px)",
              padding: "clamp(10px,1.1vh,14px) clamp(14px,1.4vw,20px)",
              width: "100%",
              maxWidth: "300px",
            },
          },
          React.createElement(
            "div",
            { className: "chip chip--ghost", style: { width: 34, height: 34, borderRadius: 9, flex: "none" } },
            React.createElement(Icon, { name: it.icon, size: 17 })
          ),
          React.createElement("span", {
            style: { fontSize: "clamp(12px,1.1vw,17px)", fontWeight: 600, lineHeight: 1.3 },
          }, it.name)
        )
      )
    );
  }

  return React.createElement(
    "div",
    { className: "slide" },
    React.createElement(
      Stagger,
      { className: "slide-inner", style: { display: "flex", flexDirection: "column", alignItems: "center" } },

      // header
      React.createElement(
        "div",
        { style: { textAlign: "center", marginBottom: "clamp(20px,3vh,36px)" } },
        React.createElement(
          "div", { style: { display: "inline-flex" } },
          React.createElement(Kicker, { index: slide.id }, slide.kicker)
        ),
        React.createElement(Title, { style: { textAlign: "center" } }, slide.title),
        React.createElement(
          motion.p,
          {
            className: "subtitle",
            variants: fadeUpV,
            style: { textAlign: "center", maxWidth: "52ch", margin: "clamp(10px,1.5vh,16px) auto 0" },
          },
          slide.subtitle
        )
      ),

      // main 3-column layout
      React.createElement(
        motion.div,
        {
          variants: fadeV,
          style: {
            display: "grid",
            gridTemplateColumns: "minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr)",
            gap: "clamp(16px,2vw,32px)",
            alignItems: "center",
            width: "100%",
            maxWidth: "1300px",
          },
        },

        // LEFT: physical persons
        React.createElement(PayMethodGroup, { group: slide.left, side: "left" }),

        // CENTER: browser mockup + orbital glow
        React.createElement(
          motion.div,
          { variants: scaleV, style: { display: "flex", justifyContent: "center" } },
          React.createElement(
            Tilt3D,
            { max: 6, style: { width: "100%" } },
            React.createElement(
              "div",
              {
                className: "glass glass-hi sheen-host",
                style: {
                  width: "100%",
                  overflow: "hidden",
                  position: "relative",
                  borderRadius: "clamp(14px,1.4vw,20px)",
                  boxShadow: "0 24px 80px rgba(0,0,0,0.35), 0 0 60px rgba(255,204,0,0.08)",
                },
              },
              React.createElement("div", { className: "glare", key: "g" }),
              // browser chrome bar
              React.createElement(
                "div",
                {
                  style: {
                    display: "flex", alignItems: "center", gap: "7px",
                    padding: "clamp(10px,1.1vh,14px) clamp(14px,1.4vw,18px)",
                    borderBottom: "1px solid var(--hairline)",
                    background: "rgba(255,255,255,0.02)",
                  },
                },
                React.createElement("span", { style: { width: 9, height: 9, borderRadius: "50%", background: "var(--red)" } }),
                React.createElement("span", { style: { width: 9, height: 9, borderRadius: "50%", background: "var(--yellow)" } }),
                React.createElement("span", { style: { width: 9, height: 9, borderRadius: "50%", background: "rgba(255,255,255,0.18)" } }),
                React.createElement(
                  "div",
                  {
                    style: {
                      marginLeft: "auto", padding: "4px 14px", borderRadius: "6px",
                      background: "rgba(255,255,255,0.04)", border: "1px solid var(--hairline)",
                      fontSize: "clamp(8px,0.7vw,10px)", fontFamily: '"JetBrains Mono", monospace',
                      color: "var(--ink-mute)", letterSpacing: "0.06em",
                    },
                  },
                  "online-orders.1c.ru"
                )
              ),
              // page body
              React.createElement(
                "div",
                {
                  style: {
                    padding: "clamp(18px,2vw,30px)",
                    display: "flex", flexDirection: "column", alignItems: "center", gap: "clamp(12px,1.4vh,18px)",
                    minHeight: "clamp(180px,22vh,280px)",
                    justifyContent: "center",
                    background: "repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 10px, transparent 10px 24px)",
                  },
                },
                // order page icon
                React.createElement(
                  motion.div,
                  {
                    style: {
                      width: "clamp(56px,5vw,72px)", height: "clamp(56px,5vw,72px)",
                      borderRadius: "50%", display: "grid", placeItems: "center",
                      background: "linear-gradient(150deg, var(--yellow), var(--yellow-deep))",
                      color: "#1a1505",
                      boxShadow: "0 8px 30px rgba(255,204,0,0.35)",
                    },
                    animate: { scale: [1, 1.06, 1], boxShadow: ["0 8px 30px rgba(255,204,0,0.35)", "0 12px 44px rgba(255,204,0,0.5)", "0 8px 30px rgba(255,204,0,0.35)"] },
                    transition: { duration: 3, repeat: Infinity, ease: "easeInOut" },
                  },
                  React.createElement(Icon, { name: "ShoppingCart", size: 28, stroke: 2.2 })
                ),
                React.createElement("div", {
                  style: { fontWeight: 800, fontSize: "clamp(14px,1.3vw,20px)", textAlign: "center" },
                }, "1С:Онлайн-заказы"),
                React.createElement("div", {
                  className: "mono-label",
                  style: { textAlign: "center", maxWidth: "26ch" },
                }, "Единая страница приёма платежей"),
                // status badge
                React.createElement(
                  "div",
                  {
                    style: {
                      display: "inline-flex", alignItems: "center", gap: "7px",
                      padding: "6px 14px", borderRadius: "999px",
                      background: "rgba(95,220,138,0.1)", border: "1px solid rgba(95,220,138,0.25)",
                      fontSize: "11px", fontWeight: 700, color: "#5fdc8a",
                    },
                  },
                  React.createElement("span", { className: "pulse-dot", style: { width: 6, height: 6, borderRadius: "50%", background: "#5fdc8a", boxShadow: "0 0 8px #5fdc8a" } }),
                  "Готов к приёму оплат"
                )
              )
            )
          )
        ),

        // RIGHT: legal entities
        React.createElement(PayMethodGroup, { group: slide.right, side: "right" })
      ),

      // SVG connecting lines
      React.createElement(
        motion.svg,
        {
          variants: fadeV,
          viewBox: "0 0 1300 40",
          preserveAspectRatio: "xMidYMid meet",
          style: {
            width: "100%", maxWidth: "1300px", height: "40px",
            marginTop: "-20px", overflow: "visible",
          },
        },
        // left flowing lines
        React.createElement("path", {
          d: "M 180 20 Q 400 20 500 20 L 650 20",
          fill: "none", stroke: "rgba(255,204,0,0.15)", strokeWidth: 1.5,
        }),
        React.createElement("path", {
          className: "neural-flow",
          d: "M 180 20 Q 400 20 500 20 L 650 20",
          style: { strokeDasharray: "20 280", animationDuration: "2.8s" },
        }),
        // right flowing lines
        React.createElement("path", {
          d: "M 1120 20 Q 900 20 800 20 L 650 20",
          fill: "none", stroke: "rgba(255,204,0,0.15)", strokeWidth: 1.5,
        }),
        React.createElement("path", {
          className: "neural-flow",
          d: "M 1120 20 Q 900 20 800 20 L 650 20",
          style: { strokeDasharray: "20 280", animationDuration: "3.2s", animationDelay: "-1.2s" },
        }),
        // center convergence point
        React.createElement("circle", { cx: 650, cy: 20, r: 4, fill: "var(--yellow)", style: { filter: "drop-shadow(0 0 8px var(--glow-yellow))" } })
      ),

      // footnote
      React.createElement(
        motion.div,
        {
          variants: fadeUpV,
          className: "glass",
          style: {
            marginTop: "clamp(12px,2vh,20px)",
            padding: "clamp(14px,1.6vh,20px) clamp(18px,2vw,30px)",
            display: "flex", alignItems: "center", gap: "16px",
            maxWidth: "900px", width: "100%",
            margin: "0 auto",
            background: "linear-gradient(120deg, rgba(255,204,0,0.06), rgba(255,204,0,0.02))",
            borderColor: "rgba(255,204,0,0.16)",
            textAlign: "center",
          },
        },
        React.createElement(Icon, { name: "Info", size: 22, style: { color: "var(--yellow)", flex: "none" } }),
        React.createElement("p", {
          style: {
            margin: 0, fontSize: "clamp(12px,1.1vw,16px)", fontWeight: 500,
            lineHeight: 1.45, color: "var(--ink-soft)",
          },
        }, slide.footnote)
      )
    )
  );
}

/* ---------- 15 · Contacts ---------- */
function ContactsSlide({ slide }) {
  /* detect theme for QR colors */
  const [dark, setDark] = React.useState(() => document.documentElement.getAttribute("data-theme") !== "light");
  React.useEffect(() => {
    const obs = new MutationObserver(() => setDark(document.documentElement.getAttribute("data-theme") !== "light"));
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
    return () => obs.disconnect();
  }, []);
  const qrFg = dark ? "#ffcc00" : "#2a2218";
  const qrBg = dark ? "#0c0c14" : "#f5f3ef";
  const borderBg = dark
    ? "linear-gradient(135deg, rgba(255,204,0,0.45), rgba(255,255,255,0.08), rgba(255,204,0,0.3))"
    : "linear-gradient(135deg, rgba(230,184,0,0.35), rgba(0,0,0,0.06), rgba(230,184,0,0.25))";
  const borderShadow = dark
    ? "0 4px 24px rgba(0,0,0,0.4), 0 0 30px rgba(255,204,0,0.08)"
    : "0 4px 20px rgba(0,0,0,0.08), 0 0 24px rgba(230,184,0,0.06)";

  return React.createElement(
    "div",
    { className: "slide" },
    React.createElement(
      Stagger,
      {
        className: "slide-inner",
        style: { display: "grid", gridTemplateColumns: "minmax(0,1.1fr) minmax(0,0.9fr)", gap: "clamp(40px,5vw,90px)", alignItems: "center" },
      },
      // left — speaker photo + info
      React.createElement(
        "div",
        null,
        React.createElement(Kicker, { index: slide.id }, slide.kicker),
        React.createElement(Title, null, slide.title),
        React.createElement(motion.hr, { className: "hairline", variants: fadeV, style: { margin: "clamp(24px,3.4vh,38px) 0", maxWidth: "420px" } }),
        React.createElement(
          motion.div,
          { variants: fadeUpV, style: { display: "flex", alignItems: "center", gap: "clamp(20px,2.2vw,30px)", marginBottom: "clamp(24px,3.4vh,36px)" } },
          // large speaker photo frame — same glass/3D/glare as QR blocks
          React.createElement(
            Tilt3D,
            { max: 14, style: { flex: "none" } },
            React.createElement(
              "div",
              {
                className: "qr",
                style: {
                  position: "relative",
                  overflow: "hidden",
                  width: "clamp(110px,9vw,140px)",
                  height: "clamp(110px,9vw,140px)",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                },
              },
              React.createElement("img", {
                src: "speaker.png",
                alt: slide.speaker,
                style: {
                  width: "100%",
                  height: "100%",
                  objectFit: "cover",
                  objectPosition: "center top",
                  borderRadius: "inherit",
                  display: "block",
                },
              }),
              React.createElement("div", { className: "glare glare--auto", key: "glare" })
            )
          ),
          React.createElement(
            "div",
            null,
            React.createElement("div", { style: { fontWeight: 800, fontSize: "clamp(20px,2vw,30px)", lineHeight: 1.15 } }, slide.speaker),
            React.createElement("div", { className: "mono-label", style: { marginTop: "8px", letterSpacing: "0.1em", fontSize: "clamp(14px,1.3vw,20px)", color: "var(--ink)" } }, slide.speakerRole)
          )
        ),
        React.createElement(
          "div",
          { style: { display: "flex", flexDirection: "column", gap: "clamp(10px,1.4vh,14px)" } },
          slide.contacts.map((c, i) =>
            React.createElement(
              motion.a,
              {
                key: i, href: "mailto:" + c.text, variants: fadeUpV,
                className: "glass",
                style: { display: "flex", alignItems: "center", gap: "14px", padding: "clamp(13px,1.6vh,18px) clamp(16px,1.8vw,24px)", textDecoration: "none", color: "var(--ink)", maxWidth: "440px" },
              },
              React.createElement(Icon, { name: c.icon, size: 22, style: { color: "var(--yellow)", flex: "none" } }),
              React.createElement("span", { style: { fontFamily: '"JetBrains Mono", monospace', fontSize: "clamp(15px,1.4vw,21px)", fontWeight: 500 } }, c.text)
            )
          )
        )
      ),
      // right: QR codes
      React.createElement(
        "div",
        { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(16px,1.8vw,24px)" } },
        slide.qr.map((q, i) =>
          React.createElement(
            motion.div,
            { key: i, variants: scaleV, style: { display: "flex", flexDirection: "column", gap: "14px" } },
            React.createElement(
              Tilt3D,
              { max: 14 },
              // gradient border wrapper
              React.createElement(
                "div",
                {
                  style: {
                    padding: "2px",
                    borderRadius: "18px",
                    background: borderBg,
                    boxShadow: borderShadow,
                  },
                },
                React.createElement(
                  q.url ? "a" : "div",
                  {
                    className: "qr",
                    style: {
                      position: "relative",
                      overflow: "hidden",
                      display: "block",
                      background: qrBg,
                    },
                    ...(q.url ? { href: q.url, target: "_blank", rel: "noopener noreferrer" } : {}),
                  },
                  React.createElement(QRCode, { url: q.url, size: 500, fgColor: qrFg, bgColor: qrBg }),
                  React.createElement("div", { className: "qr-scan", key: "scan" }),
                  React.createElement("div", { className: "glare glare--auto", key: "glare", style: { animationDelay: (i * -2.2) + "s" } })
                )
              )
            ),
            React.createElement("div", { className: "mono-label", style: { textAlign: "center", color: "var(--ink-mute)" } }, q.label)
          )
        )
      )
    )
  );
}

/* ---------- 13 · Online Order Showcase — animated feature highlights ---------- */
function OnlineOrderShowcaseSlide({ slide }) {
  const [active, setActive] = React.useState(-1); // -1 = intro, 0-4 = features, 5 = thesis
  const totalPhases = slide.features.length + 1; // features + thesis

  React.useEffect(() => {
    let alive = true;
    const run = async () => {
      // Intro pause
      setActive(-1);
      await new Promise(r => setTimeout(r, 3600));
      if (!alive) return;
      // Cycle through features
      for (let i = 0; i < slide.features.length; i++) {
        setActive(i);
        await new Promise(r => setTimeout(r, 5600));
        if (!alive) return;
      }
      // Thesis
      setActive(slide.features.length);
    };
    run();
    return () => { alive = false; };
  }, []);

  const featureColors = ["#e67e22", "#3498db", "#9b59b6", "#2ecc71", "var(--yellow)"];
  const showThesis = active === slide.features.length;

  // Order page mockup products
  const mockProducts = [
    { name: "Механическая клавиатура", price: "8 900 ₽", qty: "2" },
    { name: "Монитор 27\" IPS 4K", price: "42 500 ₽", qty: "1" },
    { name: "Беспроводная мышь", price: "3 200 ₽", qty: "3" },
  ];

  const channels = [
    { icon: "Mail", label: "Email", color: "#e67e22" },
    { icon: "Send", label: "Telegram", color: "#29a9eb" },
    { icon: "MessageCircle", label: "МАХ", color: "#9b59b6" },
  ];

  return React.createElement(
    "div",
    { className: "slide" },
    React.createElement(
      Stagger,
      {
        className: "slide-inner",
        style: {
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          height: "100%",
          gap: "0"
        }
      },

      // Header
      React.createElement(
        "div",
        { style: { textAlign: "center", marginBottom: "clamp(10px, 1.5vh, 18px)" } },
        React.createElement(
          "div",
          { style: { display: "inline-flex" } },
          React.createElement(Kicker, { index: slide.id }, slide.kicker)
        ),
        React.createElement(Title, { style: { textAlign: "center", fontSize: "clamp(22px, 2.2vw, 34px)" } }, slide.title)
      ),

      // Main content area: center mockup + orbiting cards
      React.createElement(
        "div",
        {
          style: {
            position: "relative",
            width: "100%",
            maxWidth: "1400px",
            display: "grid",
            gridTemplateColumns: "1fr clamp(340px, 38vw, 520px) 1fr",
            gap: "clamp(16px, 2vw, 30px)",
            alignItems: "center",
            minHeight: "clamp(380px, 52vh, 540px)"
          }
        },

        // LEFT feature cards (0, 1, 2)
        React.createElement(
          "div",
          {
            style: {
              display: "flex",
              flexDirection: "column",
              gap: "clamp(10px, 1.2vh, 16px)",
              alignItems: "flex-end"
            }
          },
          slide.features.slice(0, 3).map((feat, i) =>
            React.createElement(
              motion.div,
              {
                key: i,
                style: {
                  display: "flex",
                  alignItems: "flex-start",
                  gap: "clamp(12px, 1.2vw, 18px)",
                  padding: "clamp(14px, 1.6vh, 22px) clamp(16px, 1.8vw, 26px)",
                  borderRadius: "16px",
                  background: active === i ? featureColors[i] + "12" : "rgba(18,18,28,0.4)",
                  border: "1px solid " + (active === i ? featureColors[i] + "50" : "var(--hairline)"),
                  backdropFilter: "blur(8px)",
                  maxWidth: "clamp(280px, 26vw, 380px)",
                  width: "100%",
                  cursor: "default",
                  transition: "all 0.5s ease"
                },
                animate: {
                  scale: active === i ? 1.04 : 0.97,
                  opacity: active === i ? 1 : (active === -1 ? 0.5 : 0.35)
                },
                transition: { duration: 0.5 }
              },
              React.createElement(
                "div",
                {
                  style: {
                    width: "clamp(38px, 3.4vw, 48px)",
                    height: "clamp(38px, 3.4vw, 48px)",
                    borderRadius: "10px",
                    background: featureColors[i] + "18",
                    border: "1px solid " + featureColors[i] + "30",
                    display: "grid",
                    placeItems: "center",
                    flexShrink: 0
                  }
                },
                React.createElement(Icon, { name: feat.icon, size: 22, style: { color: featureColors[i] } })
              ),
              React.createElement(
                "div",
                { style: { display: "flex", flexDirection: "column", gap: "3px" } },
                React.createElement("div", {
                  style: {
                    fontSize: "clamp(13px, 1.2vw, 17px)",
                    fontWeight: 700,
                    color: active === i ? featureColors[i] : "var(--ink)",
                    lineHeight: 1.2,
                    transition: "color 0.4s"
                  }
                }, feat.emoji + " " + feat.label),
                React.createElement("div", {
                  style: {
                    fontSize: "clamp(10px, 0.9vw, 13px)",
                    color: "var(--ink-mute)",
                    lineHeight: 1.35
                  }
                }, feat.desc)
              )
            )
          )
        ),

        // CENTER: Order page mockup
        React.createElement(
          motion.div,
          {
            style: {
              borderRadius: "20px",
              background: "rgba(18, 18, 28, 0.7)",
              border: "1px solid var(--hairline)",
              backdropFilter: "blur(16px)",
              overflow: "hidden",
              display: "flex",
              flexDirection: "column",
              boxShadow: "0 8px 40px rgba(0,0,0,0.3)"
            },
            animate: {
              boxShadow: active >= 0 && !showThesis
                ? "0 8px 50px " + (featureColors[active] || "rgba(255,204,0,0.15)") + "25"
                : "0 8px 40px rgba(0,0,0,0.3)"
            },
            transition: { duration: 0.6 }
          },

          // Browser bar
          React.createElement(
            "div",
            {
              style: {
                padding: "clamp(10px,1vh,14px) clamp(14px,1.4vw,22px)",
                borderBottom: "1px solid var(--hairline)",
                display: "flex",
                alignItems: "center",
                gap: "8px"
              }
            },
            React.createElement("div", { style: { width: 10, height: 10, borderRadius: "50%", background: "#ff5f57" } }),
            React.createElement("div", { style: { width: 10, height: 10, borderRadius: "50%", background: "#febc2e" } }),
            React.createElement("div", { style: { width: 10, height: 10, borderRadius: "50%", background: "#28c840" } }),
            React.createElement("div", {
              style: {
                flex: 1,
                marginLeft: 8,
                padding: "4px 12px",
                borderRadius: "6px",
                background: "rgba(255,255,255,0.05)",
                fontSize: "clamp(10px, 0.85vw, 12px)",
                color: "var(--ink-mute)",
                textAlign: "center"
              }
            }, "online-orders.1c.ru/order/127")
          ),

          // Logo area (highlights on step 0)
          React.createElement(
            motion.div,
            {
              style: {
                padding: "clamp(12px,1.4vh,20px) clamp(16px,1.8vw,24px)",
                borderBottom: "1px solid var(--hairline)",
                display: "flex",
                alignItems: "center",
                gap: "10px",
                transition: "background 0.5s"
              },
              animate: {
                background: active === 0 ? featureColors[0] + "15" : "transparent"
              }
            },
            React.createElement("div", {
              style: {
                width: "clamp(34px, 3vw, 44px)",
                height: "clamp(34px, 3vw, 44px)",
                borderRadius: "8px",
                background: "linear-gradient(135deg, var(--yellow), var(--yellow-deep))",
                display: "grid",
                placeItems: "center"
              }
            }, React.createElement(Icon, { name: "Building2", size: 20, style: { color: "#1a1505" } })),
            React.createElement("div", { style: { fontSize: "clamp(12px, 1.1vw, 16px)", fontWeight: 700 } }, "ООО «Компания»"),
            React.createElement("div", {
              style: { marginLeft: "auto", fontSize: "clamp(10px, 0.85vw, 13px)", color: "var(--ink-mute)" }
            }, "Заказ №127")
          ),

          // Products area (highlights on step 1)
          React.createElement(
            motion.div,
            {
              style: {
                padding: "clamp(12px,1.3vh,18px) clamp(16px,1.8vw,24px)",
                borderBottom: "1px solid var(--hairline)",
                display: "flex",
                flexDirection: "column",
                gap: "6px",
                transition: "background 0.5s"
              },
              animate: {
                background: active === 1 ? featureColors[1] + "10" : "transparent"
              }
            },
            mockProducts.map((p, i) =>
              React.createElement("div", {
                key: i,
                style: {
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  fontSize: "clamp(11px, 1vw, 14px)",
                  padding: "3px 0",
                  borderBottom: i < mockProducts.length - 1 ? "1px solid rgba(255,255,255,0.04)" : "none"
                }
              },
                React.createElement("span", { style: { color: "var(--ink-soft)" } }, p.name),
                React.createElement("span", { style: { color: "var(--ink-mute)", fontWeight: 600 } }, p.qty + " × " + p.price)
              )
            ),
            React.createElement("div", {
              style: {
                display: "flex",
                justifyContent: "space-between",
                marginTop: "4px",
                fontSize: "clamp(12px, 1.1vw, 15px)",
                fontWeight: 800,
                color: "var(--yellow)"
              }
            },
              React.createElement("span", null, "Итого:"),
              React.createElement("span", null, "69 900 ₽")
            )
          ),

          // Attachments area (highlights on step 2)
          React.createElement(
            motion.div,
            {
              style: {
                padding: "clamp(10px,1vh,14px) clamp(16px,1.8vw,24px)",
                borderBottom: "1px solid var(--hairline)",
                display: "flex",
                gap: "6px",
                flexWrap: "wrap",
                transition: "background 0.5s"
              },
              animate: {
                background: active === 2 ? featureColors[2] + "10" : "transparent"
              }
            },
            ["Договор.pdf", "Спецификация.xlsx"].map((f, i) =>
              React.createElement("div", {
                key: i,
                style: {
                  display: "flex",
                  alignItems: "center",
                  gap: "5px",
                  padding: "6px 14px",
                  borderRadius: "8px",
                  background: "rgba(255,255,255,0.04)",
                  border: "1px solid var(--hairline)",
                  fontSize: "clamp(10px, 0.85vw, 13px)",
                  color: "var(--ink-mute)"
                }
              },
                React.createElement(Icon, { name: "Paperclip", size: 13 }),
                f
              )
            )
          ),

          // Share + 1C buttons area (highlights on steps 3,4)
          React.createElement(
            "div",
            {
              style: {
                padding: "clamp(12px,1.3vh,18px) clamp(16px,1.8vw,24px)",
                display: "flex",
                gap: "8px",
                justifyContent: "center",
                flexWrap: "wrap"
              }
            },
            // Share button (step 3)
            React.createElement(
              motion.div,
              {
                style: {
                  display: "flex",
                  alignItems: "center",
                  gap: "6px",
                  padding: "8px 18px",
                  borderRadius: "10px",
                  fontSize: "clamp(11px, 1vw, 14px)",
                  fontWeight: 700,
                  cursor: "default",
                  transition: "all 0.5s"
                },
                animate: {
                  background: active === 3 ? featureColors[3] + "25" : "rgba(255,255,255,0.06)",
                  color: active === 3 ? featureColors[3] : "var(--ink-soft)",
                  border: "1px solid " + (active === 3 ? featureColors[3] + "50" : "var(--hairline)")
                }
              },
              React.createElement(Icon, { name: "Share2", size: 15 }),
              "Поделиться"
            ),
            // Channel icons (fly out on step 3)
            channels.map((ch, i) =>
              React.createElement(
                motion.div,
                {
                  key: ch.label,
                  style: {
                    display: "flex",
                    alignItems: "center",
                    gap: "4px",
                    padding: "6px 14px",
                    borderRadius: "8px",
                    background: ch.color + "15",
                    border: "1px solid " + ch.color + "30",
                    fontSize: "clamp(10px, 0.85vw, 12px)",
                    fontWeight: 600,
                    color: ch.color
                  },
                  animate: {
                    opacity: active === 3 ? 1 : 0.3,
                    scale: active === 3 ? 1 : 0.8,
                    x: active === 3 ? 0 : -10
                  },
                  transition: { duration: 0.4, delay: active === 3 ? i * 0.12 : 0 }
                },
                React.createElement(Icon, { name: ch.icon, size: 13 }),
                ch.label
              )
            ),
            // Load to 1C button (step 4)
            React.createElement(
              motion.div,
              {
                style: {
                  display: "flex",
                  alignItems: "center",
                  gap: "6px",
                  padding: "8px 18px",
                  borderRadius: "10px",
                  fontSize: "clamp(11px, 1vw, 14px)",
                  fontWeight: 700,
                  cursor: "default",
                  transition: "all 0.5s"
                },
                animate: {
                  background: active === 4 ? "rgba(255,204,0,0.2)" : "rgba(255,255,255,0.06)",
                  color: active === 4 ? "var(--yellow)" : "var(--ink-soft)",
                  border: "1px solid " + (active === 4 ? "rgba(255,204,0,0.5)" : "var(--hairline)"),
                  scale: active === 4 ? 1.08 : 1
                }
              },
              React.createElement(Icon, { name: "Download", size: 15 }),
              "Загрузить в 1С"
            )
          )
        ),

        // RIGHT feature cards (3, 4)
        React.createElement(
          "div",
          {
            style: {
              display: "flex",
              flexDirection: "column",
              gap: "clamp(10px, 1.2vh, 16px)",
              alignItems: "flex-start"
            }
          },
          slide.features.slice(3, 5).map((feat, idx) => {
            const i = idx + 3;
            return React.createElement(
              motion.div,
              {
                key: i,
                style: {
                  display: "flex",
                  alignItems: "flex-start",
                  gap: "clamp(12px, 1.2vw, 18px)",
                  padding: "clamp(14px, 1.6vh, 22px) clamp(16px, 1.8vw, 26px)",
                  borderRadius: "16px",
                  background: active === i ? featureColors[i] + "12" : "rgba(18,18,28,0.4)",
                  border: "1px solid " + (active === i ? featureColors[i] + "50" : "var(--hairline)"),
                  backdropFilter: "blur(8px)",
                  maxWidth: "clamp(280px, 26vw, 380px)",
                  width: "100%",
                  cursor: "default",
                  transition: "all 0.5s ease"
                },
                animate: {
                  scale: active === i ? 1.04 : 0.97,
                  opacity: active === i ? 1 : (active === -1 ? 0.5 : 0.35)
                },
                transition: { duration: 0.5 }
              },
              React.createElement(
                "div",
                {
                  style: {
                    width: "clamp(38px, 3.4vw, 48px)",
                    height: "clamp(38px, 3.4vw, 48px)",
                    borderRadius: "10px",
                    background: featureColors[i] + "18",
                    border: "1px solid " + featureColors[i] + "30",
                    display: "grid",
                    placeItems: "center",
                    flexShrink: 0
                  }
                },
                React.createElement(Icon, { name: feat.icon, size: 22, style: { color: featureColors[i] } })
              ),
              React.createElement(
                "div",
                { style: { display: "flex", flexDirection: "column", gap: "3px" } },
                React.createElement("div", {
                  style: {
                    fontSize: "clamp(13px, 1.2vw, 17px)",
                    fontWeight: 700,
                    color: active === i ? featureColors[i] : "var(--ink)",
                    lineHeight: 1.2,
                    transition: "color 0.4s"
                  }
                }, feat.emoji + " " + feat.label),
                React.createElement("div", {
                  style: {
                    fontSize: "clamp(10px, 0.9vw, 13px)",
                    color: "var(--ink-mute)",
                    lineHeight: 1.35
                  }
                }, feat.desc)
              )
            );
          })
        )
      ),

      // Progress dots
      React.createElement(
        "div",
        {
          style: {
            display: "flex",
            alignItems: "center",
            gap: "clamp(6px, 0.6vw, 10px)",
            justifyContent: "center",
            marginTop: "clamp(14px, 2vh, 24px)"
          }
        },
        slide.features.map((feat, i) =>
          React.createElement(motion.div, {
            key: i,
            style: {
              width: active === i ? "clamp(24px, 2vw, 36px)" : "clamp(8px, 0.6vw, 10px)",
              height: "clamp(8px, 0.6vw, 10px)",
              borderRadius: "5px",
              transition: "all 0.4s ease"
            },
            animate: {
              background: i <= active ? featureColors[i] : "var(--hairline)",
              opacity: i <= active ? 1 : 0.4
            }
          })
        )
      ),

      // Thesis overlay
      React.createElement(
        motion.div,
        {
          style: {
            position: "absolute",
            inset: 0,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            background: "rgba(12, 12, 20, 0.92)",
            backdropFilter: "blur(20px)",
            borderRadius: "20px",
            padding: "clamp(30px, 5vw, 60px)",
            zIndex: 10,
            pointerEvents: showThesis ? "auto" : "none"
          },
          animate: {
            opacity: showThesis ? 1 : 0
          },
          transition: { duration: 0.7 }
        },
        React.createElement(motion.div, {
          style: {
            width: "clamp(80px, 10vw, 140px)",
            height: "2px",
            background: "linear-gradient(90deg, transparent, var(--yellow), transparent)",
            marginBottom: "clamp(20px, 3vh, 36px)"
          },
          animate: showThesis ? { scaleX: [0, 1], opacity: [0, 1] } : { scaleX: 0, opacity: 0 },
          transition: { duration: 0.6, delay: 0.3 }
        }),
        React.createElement(
          motion.div,
          {
            style: {
              fontSize: "clamp(20px, 2.2vw, 34px)",
              fontWeight: 800,
              textAlign: "center",
              lineHeight: 1.35,
              maxWidth: "700px",
              color: "var(--ink)"
            },
            animate: showThesis
              ? { opacity: 1, y: 0, filter: "blur(0px)" }
              : { opacity: 0, y: 20, filter: "blur(6px)" },
            transition: { duration: 0.6, delay: 0.5 }
          },
          "1С:Онлайн-заказы — это удобный инструмент взаимодействия с клиентом ",
          React.createElement("span", { style: { color: "var(--yellow)" } }, "на всех этапах"),
          " оформления заказа."
        )
      )
    )
  );
}

/* ---------- 2 · Biz Process Chain — traditional B2B payment flow ---------- */
function BizProcessChainSlide({ slide }) {
  const [phase, setPhase] = React.useState(0);
  // 0: nothing visible
  // 1: steps 1-2 appear (Счёт, Отправка)
  // 2: step 3 appears with green badge (Оплата ✅)
  // 3: steps 4-5 highlight orange (extra work)
  // 4: step 6 appears (Отгрузка) + thesis lights up

  React.useEffect(() => {
    let alive = true;
    const run = async () => {
      setPhase(0); await new Promise(r => setTimeout(r, 1600)); if (!alive) return;
      setPhase(1); await new Promise(r => setTimeout(r, 3200)); if (!alive) return;
      setPhase(2); await new Promise(r => setTimeout(r, 4000)); if (!alive) return;
      setPhase(3); await new Promise(r => setTimeout(r, 5600)); if (!alive) return;
      setPhase(4);
    };
    run();
    return () => { alive = false; };
  }, []);

  const stepColors = {
    done:  { bg: "rgba(255,204,0,0.06)",  border: "rgba(255,204,0,0.18)",  icon: "var(--yellow)",   text: "var(--ink)" },
    paid:  { bg: "rgba(95,220,138,0.08)",  border: "rgba(95,220,138,0.28)", icon: "#5fdc8a",         text: "#5fdc8a" },
    extra: { bg: "rgba(255,160,50,0.08)",  border: "rgba(255,160,50,0.28)", icon: "#ffa032",         text: "#ffa032" },
    final: { bg: "rgba(255,204,0,0.06)",  border: "rgba(255,204,0,0.18)",  icon: "var(--yellow)",   text: "var(--ink)" },
  };
  const inactiveStyle = { bg: "rgba(255,255,255,0.02)", border: "var(--hairline)", icon: "var(--ink-mute)", text: "var(--ink-mute)" };

  function isVisible(i) {
    if (i <= 1) return phase >= 1;
    if (i === 2) return phase >= 2;
    if (i <= 4) return phase >= 3;
    return phase >= 4;
  }
  function isActive(i) {
    if (i <= 1) return phase >= 1;
    if (i === 2) return phase >= 2;
    if (i <= 4) return phase >= 3;
    return phase >= 4;
  }
  function getStyle(i) {
    return isActive(i) ? stepColors[slide.steps[i].status] : inactiveStyle;
  }

  return React.createElement("div", { className: "slide" },
    React.createElement(Stagger, {
      className: "slide-inner",
      style: { display: "grid", gridTemplateColumns: "minmax(0,0.85fr) minmax(0,1.15fr)", gap: "clamp(30px,4vw,60px)", alignItems: "center" },
    },

      // ── LEFT COLUMN ──
      React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "clamp(20px,3vh,32px)" } },

        // Title block
        React.createElement("div", null,
          React.createElement(Kicker, { index: slide.id }, slide.kicker),
          React.createElement(Title, null, slide.title),
          slide.lead && React.createElement(motion.p, {
            className: "lead", variants: fadeUpV,
            style: { marginTop: "clamp(4px,0.6vh,8px)", fontSize: "clamp(18px,1.7vw,26px)", fontWeight: 500, color: "var(--ink-soft)", lineHeight: 1.3 },
          }, slide.lead),
          React.createElement(motion.p, {
            variants: fadeUpV,
            style: { marginTop: "clamp(8px,1vh,12px)", fontSize: "clamp(12px,1vw,15px)", fontWeight: 600, color: "var(--ink-mute)", lineHeight: 1.4, letterSpacing: "0.02em" },
          }, slide.subtitle)
        ),

        // Phase indicator
        React.createElement(motion.div, {
          variants: fadeUpV,
          style: { display: "flex", gap: 6 },
        },
          [1,2,3,4].map(p =>
            React.createElement("div", { key: p, style: {
              width: phase === p ? 24 : 8, height: 8, borderRadius: 4,
              background: p <= phase
                ? (p === 3 ? "#ffa032" : p === 2 ? "#5fdc8a" : "var(--yellow)")
                : "rgba(255,255,255,0.08)",
              boxShadow: p === phase ? "0 0 12px " + (p === 3 ? "rgba(255,160,50,0.5)" : p === 2 ? "rgba(95,220,138,0.5)" : "rgba(255,204,0,0.5)") : "none",
              transition: "all 0.4s ease",
            }})
          )
        ),

        // Thesis card — prominent
        React.createElement(motion.div, {
          variants: fadeUpV,
          style: {
            position: "relative",
            padding: "clamp(20px,2.4vh,30px) clamp(22px,2.6vw,34px)",
            borderRadius: 16,
            display: "flex", flexDirection: "row", alignItems: "center", gap: 14,
            background: phase >= 3
              ? "linear-gradient(135deg, rgba(255,160,50,0.12), rgba(255,120,20,0.04))"
              : "linear-gradient(135deg, rgba(255,255,255,0.03), transparent)",
            border: "1px solid " + (phase >= 3 ? "rgba(255,160,50,0.35)" : "var(--hairline)"),
            boxShadow: phase >= 3 ? "0 8px 32px rgba(255,160,50,0.12), inset 0 1px 0 rgba(255,160,50,0.15)" : "none",
            transition: "all 0.6s ease",
            overflow: "hidden",
          },
        },
          // Accent bar left
          React.createElement("div", {
            style: {
              position: "absolute", left: 0, top: 0, bottom: 0, width: 4, borderRadius: "4px 0 0 4px",
              background: phase >= 3 ? "linear-gradient(180deg, #ffa032, rgba(255,160,50,0.3))" : "var(--hairline)",
              boxShadow: phase >= 3 ? "0 0 12px rgba(255,160,50,0.4)" : "none",
              transition: "all 0.6s ease",
            },
          }),
          // Icon
          React.createElement(motion.div, {
            style: {
              width: 36, height: 36, borderRadius: 10, display: "grid", placeItems: "center", flex: "none",
              background: phase >= 3 ? "rgba(255,160,50,0.15)" : "rgba(255,255,255,0.04)",
              transition: "all 0.5s ease",
            },
          }, React.createElement(Icon, { name: "AlertTriangle", size: 20, style: { color: phase >= 3 ? "#ffa032" : "var(--ink-mute)", transition: "color 0.5s ease" } })),
          // Thesis text
          React.createElement("p", {
            style: {
              margin: 0, fontSize: "clamp(14px,1.3vw,20px)", fontWeight: 700,
              lineHeight: 1.5, color: phase >= 3 ? "var(--ink)" : "var(--ink-mute)",
              transition: "color 0.5s ease",
            },
          }, slide.thesis)
        )
      ),

      // ── RIGHT COLUMN: chain ──
      React.createElement(motion.div, {
        variants: scaleV,
        style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0 },
      },
        slide.steps.map((st, i) => {
          var vis = isVisible(i);
          var col = getStyle(i);
          return React.createElement(React.Fragment, { key: i },
            // Connector line (before each step except first)
            i > 0 && React.createElement(motion.div, {
              style: { width: 2, overflow: "hidden" },
              animate: {
                height: vis ? "clamp(16px,2vh,24px)" : 0,
                background: vis
                  ? (i <= 2 ? "linear-gradient(180deg, rgba(255,204,0,0.5), rgba(255,204,0,0.1))"
                    : i <= 4 ? "linear-gradient(180deg, rgba(255,160,50,0.5), rgba(255,160,50,0.1))"
                    : "linear-gradient(180deg, rgba(255,204,0,0.5), rgba(255,204,0,0.1))")
                  : "transparent",
                opacity: vis ? 1 : 0,
              },
              transition: { duration: 0.4, delay: vis ? 0.1 : 0 },
            },
              // Travelling particle
              vis && React.createElement(motion.div, {
                style: { width: 4, height: 4, borderRadius: "50%", background: col.icon, margin: "0 auto", boxShadow: "0 0 8px " + col.icon },
                animate: { y: [0, 20, 0] },
                transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut", delay: i * 0.2 },
              })
            ),

            // Step card
            React.createElement(motion.div, {
              className: "glass",
              style: {
                width: "100%", maxWidth: "clamp(360px,32vw,480px)",
                padding: "clamp(14px,1.5vh,20px) clamp(16px,1.8vw,24px)",
                display: "flex", alignItems: "center", gap: "clamp(12px,1.2vw,18px)",
                cursor: "default",
              },
              animate: {
                opacity: vis ? 1 : 0.15,
                scale: vis ? 1 : 0.95,
                y: vis ? 0 : 8,
                background: col.bg,
                borderColor: col.border,
              },
              transition: { duration: 0.5, ease: "easeOut", delay: vis ? (i <= 1 ? i * 0.15 : 0.1) : 0 },
            },
              // Step number circle
              React.createElement(motion.div, {
                style: {
                  width: "clamp(40px,3.5vw,52px)", height: "clamp(40px,3.5vw,52px)",
                  borderRadius: "50%", display: "grid", placeItems: "center", flex: "none",
                  fontSize: "clamp(13px,1.2vw,17px)", fontWeight: 800,
                },
                animate: {
                  background: isActive(i)
                    ? (st.status === "paid" ? "linear-gradient(150deg, rgba(95,220,138,0.2), rgba(95,220,138,0.06))"
                      : st.status === "extra" ? "linear-gradient(150deg, rgba(255,160,50,0.2), rgba(255,160,50,0.06))"
                      : "linear-gradient(150deg, rgba(255,204,0,0.15), rgba(255,204,0,0.04))")
                    : "rgba(255,255,255,0.04)",
                  color: col.icon,
                  boxShadow: isActive(i) ? "0 4px 18px " + col.icon + "25" : "none",
                },
                transition: { duration: 0.4 },
              },
                React.createElement(Icon, { name: st.icon, size: 20, stroke: 2 })
              ),

              // Text + badge
              React.createElement("div", { style: { flex: 1, minWidth: 0 } },
                React.createElement(motion.div, {
                  style: { fontSize: "clamp(14px,1.3vw,19px)", fontWeight: 700, lineHeight: 1.25 },
                  animate: { color: col.text },
                  transition: { duration: 0.4 },
                }, st.label),
                st.badge && isActive(i) && React.createElement(motion.div, {
                  initial: { opacity: 0, y: 4 },
                  animate: { opacity: 1, y: 0 },
                  transition: { duration: 0.4, delay: 0.3 },
                  style: {
                    marginTop: 6, display: "inline-flex", alignItems: "center", gap: 6,
                    padding: "4px 12px", borderRadius: 8,
                    fontSize: "clamp(11px,1vw,14px)", fontWeight: 700,
                    background: st.status === "paid"
                      ? "rgba(95,220,138,0.12)"
                      : "rgba(255,160,50,0.1)",
                    color: st.status === "paid" ? "#5fdc8a" : "#ffa032",
                    border: "1px solid " + (st.status === "paid" ? "rgba(95,220,138,0.25)" : "rgba(255,160,50,0.2)"),
                  },
                }, st.badge)
              ),

              // Step number
              React.createElement(motion.span, {
                style: { fontSize: "clamp(22px,2.2vw,32px)", fontWeight: 800, fontFamily: "var(--font-mono)", lineHeight: 1, flex: "none" },
                animate: { color: isActive(i) ? col.icon + "44" : "rgba(255,255,255,0.06)" },
                transition: { duration: 0.4 },
              }, "0" + (i + 1))
            )
          );
        })
      )
    )
  );
}

/* ---------- 3 · Invoice Flood — growing chaos of payments ---------- */
function InvoiceFloodSlide({ slide }) {
  const [phase, setPhase] = React.useState(0);
  // 0: title only
  // 1: first 4 invoices appear
  // 2: 8 invoices
  // 3: all 20 flood the screen
  // 4: attention zones overlay
  // 5: thesis

  React.useEffect(() => {
    let alive = true;
    const run = async () => {
      setPhase(0); await new Promise(r => setTimeout(r, 2000)); if (!alive) return;
      setPhase(1); await new Promise(r => setTimeout(r, 3200)); if (!alive) return;
      setPhase(2); await new Promise(r => setTimeout(r, 3200)); if (!alive) return;
      setPhase(3); await new Promise(r => setTimeout(r, 4000)); if (!alive) return;
      setPhase(4); await new Promise(r => setTimeout(r, 5600)); if (!alive) return;
      setPhase(5);
    };
    run();
    return () => { alive = false; };
  }, []);

  // Deterministic "random" statuses based on index
  var statuses = [1,0,1,1,0,0,1,0,1,1,0,1,0,0,1,1,0,1,0,1]; // 1=paid, 0=unknown

  var visibleCount = phase === 0 ? 0 : phase === 1 ? 4 : phase === 2 ? 10 : 20;

  // Pre-computed positions for scattered cards in a grid-like pattern
  var positions = [];
  for (var r = 0; r < 5; r++) {
    for (var c = 0; c < 4; c++) {
      positions.push({
        x: c * 25 + (r % 2 ? 5 : 0) + "%",
        y: r * 20 + "%",
        rot: ((r * 4 + c) * 7 % 11) - 5,
      });
    }
  }

  return React.createElement("div", { className: "slide" },
    React.createElement(Stagger, {
      className: "slide-inner",
      style: { display: "flex", flexDirection: "column", gap: "clamp(14px,2vh,22px)", height: "100%", justifyContent: "center" },
    },

      // ── HEADER ──
      React.createElement("div", { style: { textAlign: "center" } },
        React.createElement("div", { style: { display: "inline-flex" } },
          React.createElement(Kicker, { index: slide.id }, slide.kicker)
        ),
        React.createElement(Title, { style: { textAlign: "center" } }, slide.title),
        React.createElement(motion.p, {
          className: "lead", variants: fadeUpV,
          style: { textAlign: "center", marginTop: "clamp(6px,1vh,10px)", fontSize: "clamp(14px,1.25vw,19px)", color: "var(--ink-soft)", maxWidth: "50ch", marginLeft: "auto", marginRight: "auto" },
        }, slide.subtitle)
      ),

      // ── MAIN AREA: invoice flood ──
      React.createElement(motion.div, {
        variants: scaleV,
        style: {
          position: "relative",
          flex: "1 1 auto",
          minHeight: "clamp(300px,40vh,460px)",
          maxHeight: "clamp(340px,45vh,500px)",
          overflow: "hidden",
          borderRadius: 16,
        },
      },

        // Column headers
        React.createElement("div", {
          style: {
            display: "flex", justifyContent: "space-around",
            padding: "0 clamp(20px,3vw,40px)",
            position: "relative", zIndex: 15,
            pointerEvents: "none",
          },
        },
          React.createElement(motion.div, {
            style: { display: "flex", alignItems: "center", gap: 8, padding: "6px 16px", borderRadius: 8, background: "rgba(255,204,0,0.08)", border: "1px solid rgba(255,204,0,0.15)" },
            animate: { opacity: phase >= 1 ? 1 : 0 },
          },
            React.createElement(Icon, { name: "FileText", size: 16, style: { color: "var(--yellow)" } }),
            React.createElement("span", { style: { fontSize: "clamp(12px,1.1vw,16px)", fontWeight: 800, color: "var(--yellow)" } }, "Счета")
          ),
          React.createElement(motion.div, {
            style: { display: "flex", alignItems: "center", gap: 8, padding: "6px 16px", borderRadius: 8, background: "rgba(95,220,138,0.08)", border: "1px solid rgba(95,220,138,0.15)" },
            animate: { opacity: phase >= 1 ? 1 : 0 },
          },
            React.createElement(Icon, { name: "CreditCard", size: 16, style: { color: "#5fdc8a" } }),
            React.createElement("span", { style: { fontSize: "clamp(12px,1.1vw,16px)", fontWeight: 800, color: "#5fdc8a" } }, "Оплаты")
          )
        ),

        // Invoice cards grid
        React.createElement("div", {
          style: {
            position: "absolute", inset: "clamp(36px,4.5vh,50px) 0 0 0",
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gridTemplateRows: "repeat(5, 1fr)",
            gap: "clamp(6px,0.7vh,10px) clamp(6px,0.8vw,10px)",
            padding: "clamp(8px,1vh,14px) clamp(12px,1.5vw,20px)",
            zIndex: 5,
          },
        },
          slide.invoices.map((inv, i) => {
            var isPaid = statuses[i];
            var show = i < visibleCount;
            var isLeft = i % 4 < 2; // left 2 cols = invoices, right 2 = payments

            return React.createElement(motion.div, {
              key: i,
              className: "glass",
              style: {
                padding: "clamp(8px,0.9vh,12px) clamp(10px,1vw,14px)",
                display: "flex", flexDirection: "column", gap: 4,
                overflow: "hidden",
                cursor: "default",
              },
              initial: { opacity: 0, scale: 0.7, rotate: positions[i] ? positions[i].rot : 0 },
              animate: show
                ? {
                    opacity: phase >= 3 ? (isPaid ? 0.65 : 1) : 1,
                    scale: phase >= 3 ? 0.95 : 1,
                    rotate: phase >= 3 ? positions[i].rot * 0.3 : 0,
                    background: isLeft
                      ? "rgba(255,204,0,0.04)"
                      : (isPaid ? "rgba(95,220,138,0.06)" : "rgba(255,100,80,0.05)"),
                    borderColor: isLeft
                      ? "rgba(255,204,0,0.12)"
                      : (isPaid ? "rgba(95,220,138,0.18)" : "rgba(255,100,80,0.15)"),
                  }
                : { opacity: 0, scale: 0.6, rotate: 0 },
              transition: { duration: 0.4, delay: show ? Math.min(i * 0.06, 0.5) : 0, ease: "easeOut" },
            },
              // Invoice name
              React.createElement("div", {
                style: { fontSize: "clamp(10px,0.85vw,13px)", fontWeight: 700, color: "var(--ink)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" },
              }, isLeft ? inv : inv.replace("Счёт", "Платёж")),
              // Status
              React.createElement("div", {
                style: {
                  display: "flex", alignItems: "center", gap: 4,
                  fontSize: "clamp(9px,0.75vw,11px)", fontWeight: 700,
                  color: isLeft ? "var(--ink-mute)" : (isPaid ? "#5fdc8a" : "#ff6450"),
                },
              },
                isLeft
                  ? React.createElement(React.Fragment, null,
                      React.createElement(Icon, { name: "Clock", size: 10 }),
                      "Ожидает"
                    )
                  : isPaid
                  ? React.createElement(React.Fragment, null,
                      React.createElement(Icon, { name: "Check", size: 10 }),
                      "Оплачено"
                    )
                  : React.createElement(React.Fragment, null,
                      React.createElement(Icon, { name: "HelpCircle", size: 10 }),
                      "Не найден"
                    )
              )
            );
          })
        ),

        // Chaos overlay gradient (phase 3+)
        phase >= 3 && React.createElement(motion.div, {
          style: {
            position: "absolute", inset: 0, zIndex: 8,
            background: "radial-gradient(ellipse at center, rgba(12,12,20,0.3) 0%, rgba(12,12,20,0.7) 70%, rgba(12,12,20,0.9) 100%)",
            pointerEvents: "none",
          },
          initial: { opacity: 0 },
          animate: { opacity: 1 },
          transition: { duration: 0.8 },
        }),

        // Question mark overlay (phase 3)
        phase >= 3 && phase < 4 && React.createElement(motion.div, {
          style: {
            position: "absolute", inset: 0, zIndex: 12,
            display: "grid", placeItems: "center", pointerEvents: "none",
          },
          initial: { opacity: 0, scale: 0.5 },
          animate: { opacity: 1, scale: 1 },
          transition: { duration: 0.5, type: "spring", stiffness: 120, damping: 14 },
        },
          React.createElement("div", {
            style: {
              fontSize: "clamp(60px,7vw,100px)", fontWeight: 900,
              color: "rgba(255,160,50,0.3)",
              textShadow: "0 0 40px rgba(255,160,50,0.2)",
              fontFamily: "var(--font-mono)",
            },
          }, "?  ?  ?")
        ),

        // Attention zones (phase 4+)
        phase >= 4 && React.createElement(motion.div, {
          style: {
            position: "absolute", inset: 0, zIndex: 15,
            display: "flex", flexDirection: "column",
            alignItems: "center", justifyContent: "center",
            gap: "clamp(10px,1.4vh,16px)",
            pointerEvents: "none",
          },
          initial: { opacity: 0 },
          animate: { opacity: 1 },
          transition: { duration: 0.5 },
        },
          slide.zones.map((z, zi) =>
            React.createElement(motion.div, {
              key: zi,
              style: {
                display: "flex", alignItems: "center", gap: "clamp(10px,1vw,14px)",
                padding: "clamp(12px,1.4vh,18px) clamp(20px,2.2vw,32px)",
                borderRadius: 14,
                background: "rgba(0,0,0,0.6)",
                backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)",
                border: "1px solid " + z.color + "44",
                boxShadow: "0 6px 28px " + z.color + "22",
              },
              initial: { opacity: 0, x: zi % 2 === 0 ? -40 : 40, scale: 0.9 },
              animate: { opacity: 1, x: 0, scale: 1 },
              transition: { delay: 0.15 + zi * 0.2, duration: 0.5, type: "spring", stiffness: 130, damping: 15 },
            },
              React.createElement("span", { style: { fontSize: "clamp(22px,2.2vw,32px)" } }, z.emoji),
              React.createElement("span", {
                style: { fontSize: "clamp(14px,1.3vw,20px)", fontWeight: 800, color: z.color },
              }, z.label)
            )
          )
        )
      ),

      // ── THESIS — prominent ──
      React.createElement(motion.div, {
        variants: fadeUpV,
        style: {
          position: "relative",
          padding: "clamp(20px,2.4vh,30px) clamp(22px,2.6vw,34px)",
          borderRadius: 16,
          display: "flex", flexDirection: "row", alignItems: "center", gap: 14,
          background: phase >= 5
            ? "linear-gradient(135deg, rgba(255,160,50,0.12), rgba(255,120,20,0.04))"
            : "linear-gradient(135deg, rgba(255,255,255,0.03), transparent)",
          border: "1px solid " + (phase >= 5 ? "rgba(255,160,50,0.35)" : "var(--hairline)"),
          boxShadow: phase >= 5 ? "0 8px 32px rgba(255,160,50,0.12), inset 0 1px 0 rgba(255,160,50,0.15)" : "none",
          opacity: phase >= 5 ? 1 : 0.2,
          transition: "all 0.6s ease",
          overflow: "hidden",
        },
      },
        // Accent bar left
        React.createElement("div", {
          style: {
            position: "absolute", left: 0, top: 0, bottom: 0, width: 4, borderRadius: "4px 0 0 4px",
            background: phase >= 5 ? "linear-gradient(180deg, #ffa032, rgba(255,160,50,0.3))" : "var(--hairline)",
            boxShadow: phase >= 5 ? "0 0 12px rgba(255,160,50,0.4)" : "none",
            transition: "all 0.6s ease",
          },
        }),
        // Icon
        React.createElement("div", {
          style: {
            width: 36, height: 36, borderRadius: 10, display: "grid", placeItems: "center", flex: "none",
            background: phase >= 5 ? "rgba(255,160,50,0.15)" : "rgba(255,255,255,0.04)",
            transition: "all 0.5s ease",
          },
        }, React.createElement(Icon, { name: "AlertTriangle", size: 20, style: { color: phase >= 5 ? "#ffa032" : "var(--ink-mute)", transition: "color 0.5s ease" } })),
        // Thesis text
        React.createElement("p", {
          style: {
            margin: 0, fontSize: "clamp(14px,1.3vw,20px)", fontWeight: 700,
            lineHeight: 1.5, color: phase >= 5 ? "var(--ink)" : "var(--ink-mute)",
            transition: "color 0.5s ease",
          },
        }, slide.thesis)
      )
    )
  );
}

/* ---------- 4 · Process Compare — cinematic old→new transition ---------- */
function ProcessCompareSlide({ slide }) {
  var _s = React.useState(0), phase = _s[0], setPhase = _s[1];
  // 0: title
  // 1: both flows side by side
  // 2: highlight differences (old=orange bottleneck, new=green merged)
  // 3: old flow fades out, new flow centers + fork visible
  // 4: benefits appear around centered new flow
  // 5: thesis

  React.useEffect(function() {
    var alive = true;
    setPhase(0);
    setTimeout(function() { if (!alive) return; setPhase(1);
      setTimeout(function() { if (!alive) return; setPhase(2);
        setTimeout(function() { if (!alive) return; setPhase(3);
          setTimeout(function() { if (!alive) return; setPhase(4);
            setTimeout(function() { if (!alive) return; setPhase(5);
            }, 6400);
          }, 2600);
        }, 5600);
      }, 4400);
    }, 2400);
    return function() { alive = false; };
  }, []);

  function StepCard(st, opts) {
    var isBottleneck = opts.bottleneck && phase >= 2;
    var isMerged = opts.merged && phase >= 2;
    var isDimmed = opts.bottleneck && phase >= 3;
    var accent = opts.accent || "#ffcc00";
    var big = opts.big;

    var bg = isDimmed ? "rgba(255,160,50,0.03)"
      : isBottleneck ? "rgba(255,160,50,0.1)"
      : isMerged ? "rgba(95,220,138,0.1)"
      : "rgba(255,255,255,0.02)";
    var brd = isDimmed ? "rgba(255,160,50,0.08)"
      : isBottleneck ? "rgba(255,160,50,0.35)"
      : isMerged ? "rgba(95,220,138,0.35)"
      : accent + "18";
    var iconColor = isDimmed ? "#ffa03244"
      : isBottleneck ? "#ffa032"
      : isMerged ? "#5fdc8a"
      : accent;
    var textColor = isDimmed ? "rgba(255,160,50,0.3)"
      : isBottleneck ? "#ffa032"
      : isMerged ? "#5fdc8a"
      : "var(--ink)";

    return React.createElement("div", {
      style: {
        display: "flex", alignItems: "center", gap: big ? "clamp(12px,1.2vw,16px)" : "clamp(8px,0.8vw,12px)",
        padding: big ? "clamp(14px,1.5vh,18px) clamp(16px,1.8vw,22px)" : "clamp(8px,0.9vh,12px) clamp(10px,1.1vw,14px)",
        borderRadius: big ? 14 : 10,
        background: bg, border: "1px solid " + brd,
        boxShadow: isMerged ? "0 4px 20px rgba(95,220,138,0.15)" : isBottleneck ? "0 4px 14px rgba(255,160,50,0.1)" : "none",
        textDecoration: isDimmed ? "line-through" : "none",
        opacity: isDimmed ? 0.3 : 1,
        transition: "all 0.5s ease",
      },
    },
      React.createElement("div", {
        style: {
          width: big ? "clamp(36px,3.2vw,46px)" : "clamp(28px,2.4vw,34px)",
          height: big ? "clamp(36px,3.2vw,46px)" : "clamp(28px,2.4vw,34px)",
          borderRadius: "50%", display: "grid", placeItems: "center", flex: "none",
          background: isBottleneck ? "rgba(255,160,50,0.15)" : isMerged ? "rgba(95,220,138,0.15)" : accent + "0D",
          transition: "all 0.4s ease",
        },
      }, React.createElement(Icon, { name: st.icon, size: big ? 20 : 15, style: { color: iconColor, transition: "color 0.4s ease" } })),
      React.createElement("span", {
        style: {
          fontSize: big ? "clamp(14px,1.25vw,18px)" : "clamp(11px,0.95vw,14px)",
          fontWeight: 700, lineHeight: 1.25, color: textColor, transition: "all 0.4s ease",
        },
      }, st.label)
    );
  }

  function Conn(color, small) {
    return React.createElement("div", {
      style: { width: 2, height: small ? "clamp(4px,0.6vh,8px)" : "clamp(8px,1vh,14px)", margin: "0 auto", background: "linear-gradient(180deg, " + color + "55, " + color + "15)", borderRadius: 1 },
    });
  }




  return React.createElement("div", { className: "slide" },
    React.createElement(Stagger, {
      className: "slide-inner",
      style: { display: "flex", flexDirection: "column", gap: "clamp(12px,1.6vh,20px)", height: "100%", justifyContent: "center" },
    },

      // ── HEADER ──
      React.createElement("div", { style: { textAlign: "center" } },
        React.createElement("div", { style: { display: "inline-flex" } },
          React.createElement(Kicker, { index: slide.id }, slide.kicker)
        ),
        React.createElement(Title, { style: { textAlign: "center" } }, slide.title),
        React.createElement(motion.p, {
          className: "lead", variants: fadeUpV,
          style: { textAlign: "center", marginTop: "clamp(4px,0.6vh,8px)", fontSize: "clamp(13px,1.15vw,17px)", color: "var(--ink-soft)", maxWidth: "48ch", margin: "clamp(4px,0.6vh,8px) auto 0" },
        }, slide.subtitle)
      ),

      // ── MAIN AREA ──
      React.createElement("div", {
        style: { position: "relative", flex: "1 1 auto", display: "flex", justifyContent: "center", alignItems: "center" },
      },

        // === PHASE 1-2: Two columns side by side ===
        phase < 3 && React.createElement(motion.div, {
          initial: { opacity: 0 },
          animate: { opacity: 1 },
          exit: { opacity: 0 },
          style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(20px,3vw,44px)", width: "100%", maxWidth: "100%" },
        },
          // OLD FLOW
          React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 0 } },
            React.createElement("div", {
              style: { display: "flex", alignItems: "center", gap: 8, marginBottom: "clamp(8px,1vh,12px)", padding: "5px 12px", borderRadius: 8, background: "rgba(255,204,0,0.06)", border: "1px solid rgba(255,204,0,0.12)", alignSelf: "flex-start" },
            },
              React.createElement(Icon, { name: "Clock", size: 14, style: { color: "var(--yellow)" } }),
              React.createElement("span", { style: { fontSize: "clamp(11px,0.95vw,14px)", fontWeight: 800, color: "var(--yellow)" } }, "Привычный процесс")
            ),
            slide.oldFlow.map(function(st, i) {
              return React.createElement(React.Fragment, { key: "o" + i },
                i > 0 && Conn(st.highlight ? "#ffa032" : "#ffcc00", true),
                StepCard(st, { bottleneck: st.highlight, accent: "#ffcc00" })
              );
            }),
            phase >= 2 && React.createElement(motion.div, {
              initial: { opacity: 0, y: 6 },
              animate: { opacity: 1, y: 0 },
              style: { marginTop: "clamp(6px,0.8vh,10px)", textAlign: "center", padding: "5px 14px", borderRadius: 8, alignSelf: "center", background: "rgba(255,160,50,0.08)", border: "1px solid rgba(255,160,50,0.2)", fontSize: "clamp(10px,0.85vw,13px)", fontWeight: 700, color: "#ffa032" },
            }, "⏳ Ручные операции задерживают отгрузку")
          ),

          // NEW FLOW (compact, phase 1-2)
          React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 0 } },
            React.createElement("div", {
              style: { display: "flex", alignItems: "center", gap: 8, marginBottom: "clamp(8px,1vh,12px)", padding: "5px 12px", borderRadius: 8, background: "rgba(95,220,138,0.06)", border: "1px solid rgba(95,220,138,0.12)", alignSelf: "flex-start" },
            },
              React.createElement(Icon, { name: "Sparkles", size: 14, style: { color: "#5fdc8a" } }),
              React.createElement("span", { style: { fontSize: "clamp(11px,0.95vw,14px)", fontWeight: 800, color: "#5fdc8a" } }, "С 1С:СБП B2B")
            ),
            slide.newFlow.map(function(st, i) {
              return React.createElement(React.Fragment, { key: "n" + i },
                i > 0 && Conn("#5fdc8a", true),
                StepCard(st, { merged: st.merged, accent: "#5fdc8a" })
              );
            }),
            phase >= 2 && React.createElement(motion.div, {
              initial: { opacity: 0, y: 6 },
              animate: { opacity: 1, y: 0 },
              style: { marginTop: "clamp(6px,0.8vh,10px)", textAlign: "center", padding: "5px 14px", borderRadius: 8, alignSelf: "center", background: "rgba(95,220,138,0.08)", border: "1px solid rgba(95,220,138,0.12)", fontSize: "clamp(10px,0.85vw,13px)", fontWeight: 700, color: "#5fdc8a" },
            }, "⚡ Быстрее переход к отгрузке")
          )
        ),

        // === PHASE 3+: New flow with fork + benefits left ===
        phase >= 3 && React.createElement(motion.div, {
          initial: { opacity: 0, scale: 0.92 },
          animate: { opacity: 1, scale: 1 },
          transition: { duration: 0.6, type: "spring", stiffness: 100, damping: 18 },
          style: { display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1.8fr)", gap: "clamp(20px,3vw,40px)", alignItems: "center", width: "100%" },
        },

          // ─── LEFT: ALL BENEFITS ───
          React.createElement("div", {
            style: { display: "flex", flexDirection: "column", gap: "clamp(7px,0.9vh,11px)", justifyContent: "center", opacity: phase >= 4 ? 1 : 0, transform: phase >= 4 ? "translateX(0)" : "translateX(-20px)", transition: "all 0.5s ease" },
          },
            slide.benefits.map(function(b, idx) {
              return React.createElement("div", {
                key: "bl" + idx, className: "glass",
                style: {
                  display: "flex", alignItems: "center", gap: "clamp(8px,0.8vw,12px)",
                  padding: "clamp(9px,1vh,13px) clamp(12px,1.3vw,18px)",
                  fontSize: "clamp(11px,1vw,14px)", fontWeight: 600, color: "var(--ink-soft)",
                  opacity: phase >= 4 ? 1 : 0, transform: phase >= 4 ? "translateY(0)" : "translateY(10px)",
                  transition: "all 0.4s ease " + (idx * 0.07 + 0.1) + "s",
                },
              },
                React.createElement("span", { style: { fontSize: "clamp(18px,1.8vw,24px)", lineHeight: 1, flex: "none" } }, b.emoji),
                React.createElement("span", { style: { lineHeight: 1.35 } }, b.text)
              );
            })
          ),

          // ─── RIGHT: FLOW WITH FORK ───
          React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 0 } },
            React.createElement("div", {
              style: { display: "flex", alignItems: "center", gap: 10, marginBottom: "clamp(10px,1.3vh,16px)", padding: "7px 16px", borderRadius: 10, background: "rgba(95,220,138,0.08)", border: "1px solid rgba(95,220,138,0.18)", alignSelf: "flex-start" },
            },
              React.createElement(Icon, { name: "Sparkles", size: 16, style: { color: "#5fdc8a" } }),
              React.createElement("span", { style: { fontSize: "clamp(13px,1.15vw,17px)", fontWeight: 800, color: "#5fdc8a" } }, "\u0421 1\u0421:\u0421\u0411\u041f B2B")
            ),
            slide.newFlow.slice(0, 3).map(function(st, i) {
              return React.createElement(React.Fragment, { key: "c" + i },
                i > 0 && Conn("#5fdc8a", false),
                StepCard(st, { accent: "#5fdc8a", big: true })
              );
            }),
            // FORK starts right after Оплата — two parallel paths side by side
            React.createElement("div", {
              style: {
                display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(12px,1.4vw,20px)",
                marginTop: "clamp(8px,1vh,14px)",
              },
            },
              // LEFT: Бизнес path (green) — Автостатус → Отгрузка
              React.createElement("div", {
                style: {
                  display: "flex", flexDirection: "column", gap: 0, padding: "clamp(12px,1.4vh,18px)", borderRadius: 14,
                  background: "rgba(95,220,138,0.05)", border: "1px solid rgba(95,220,138,0.18)",
                },
              },
                React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: "clamp(8px,1vh,12px)" } },
                  React.createElement(Icon, { name: "Rocket", size: 14, style: { color: "#5fdc8a" } }),
                  React.createElement("span", { style: { fontSize: "clamp(10px,0.9vw,13px)", fontWeight: 800, color: "#5fdc8a", letterSpacing: "0.04em" } }, "\u0411\u0418\u0417\u041d\u0415\u0421")
                ),
                // Автостатус
                StepCard(slide.newFlow[3], { merged: true, accent: "#5fdc8a", big: false }),
                Conn("#5fdc8a", false),
                // Отгрузка
                React.createElement("div", {
                  style: { display: "flex", alignItems: "center", gap: "clamp(8px,0.8vw,12px)", padding: "clamp(10px,1.1vh,14px) clamp(12px,1.3vw,16px)", borderRadius: 10, background: "rgba(95,220,138,0.08)", border: "1px solid rgba(95,220,138,0.25)" },
                },
                  React.createElement("div", { style: { width: "clamp(28px,2.4vw,34px)", height: "clamp(28px,2.4vw,34px)", borderRadius: "50%", display: "grid", placeItems: "center", flex: "none", background: "rgba(95,220,138,0.15)" } },
                    React.createElement(Icon, { name: "Truck", size: 15, style: { color: "#5fdc8a" } })
                  ),
                  React.createElement("span", { style: { fontSize: "clamp(11px,1vw,14px)", fontWeight: 700, color: "#5fdc8a", lineHeight: 1.3 } }, "\u041e\u0442\u0433\u0440\u0443\u0437\u043a\u0430 \u0442\u043e\u0432\u0430\u0440\u0430 \u0438\u043b\u0438 \u043e\u043a\u0430\u0437\u0430\u043d\u0438\u0435 \u0443\u0441\u043b\u0443\u0433\u0438")
                )
              ),

              // RIGHT: Бухгалтерия path (blue) — starts at same level
              React.createElement("div", {
                style: {
                  display: "flex", flexDirection: "column", gap: "clamp(6px,0.7vh,10px)", padding: "clamp(12px,1.4vh,18px)", borderRadius: 14,
                  background: "rgba(41,169,235,0.04)", border: "1px solid rgba(41,169,235,0.15)",
                  opacity: phase >= 4 ? 1 : 0, transform: phase >= 4 ? "translateY(0)" : "translateY(16px)",
                  transition: "all 0.5s ease 0.2s",
                },
              },
                React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: "clamp(4px,0.5vh,8px)" } },
                  React.createElement(Icon, { name: "Calculator", size: 14, style: { color: "#29a9eb" } }),
                  React.createElement("span", { style: { fontSize: "clamp(10px,0.9vw,13px)", fontWeight: 800, color: "#29a9eb", letterSpacing: "0.04em" } }, "\u0411\u0423\u0425\u0413\u0410\u041b\u0422\u0415\u0420\u0418\u042f")
                ),
                React.createElement("div", {
                  style: { display: "flex", alignItems: "center", gap: "clamp(6px,0.6vw,10px)", padding: "clamp(8px,0.9vh,11px) clamp(10px,1.1vw,14px)", borderRadius: 9, background: "rgba(41,169,235,0.06)", border: "1px solid rgba(41,169,235,0.18)" },
                },
                  React.createElement("div", { style: { width: "clamp(26px,2.2vw,32px)", height: "clamp(26px,2.2vw,32px)", borderRadius: "50%", display: "grid", placeItems: "center", flex: "none", background: "rgba(41,169,235,0.12)" } },
                    React.createElement(Icon, { name: "Download", size: 13, style: { color: "#29a9eb" } })
                  ),
                  React.createElement("span", { style: { fontSize: "clamp(10px,0.9vw,13px)", fontWeight: 600, color: "#29a9eb", lineHeight: 1.3 } }, "\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u044b\u043f\u0438\u0441\u043e\u043a \u0438\u0437 \u0431\u0430\u043d\u043a\u0430")
                ),
                React.createElement("div", {
                  style: { display: "flex", alignItems: "center", gap: "clamp(6px,0.6vw,10px)", padding: "clamp(8px,0.9vh,11px) clamp(10px,1.1vw,14px)", borderRadius: 9, background: "rgba(41,169,235,0.06)", border: "1px solid rgba(41,169,235,0.18)" },
                },
                  React.createElement("div", { style: { width: "clamp(26px,2.2vw,32px)", height: "clamp(26px,2.2vw,32px)", borderRadius: "50%", display: "grid", placeItems: "center", flex: "none", background: "rgba(41,169,235,0.12)" } },
                    React.createElement(Icon, { name: "ClipboardList", size: 13, style: { color: "#29a9eb" } })
                  ),
                  React.createElement("span", { style: { fontSize: "clamp(10px,0.9vw,13px)", fontWeight: 600, color: "#29a9eb", lineHeight: 1.3 } }, "\u0420\u0430\u0437\u043d\u0435\u0441\u0435\u043d\u0438\u0435 \u043f\u043b\u0430\u0442\u0435\u0436\u0435\u0439 \u043f\u043e \u0441\u0447\u0435\u0442\u0430\u043c")
                )
              )
            ),
            // Independent label
            React.createElement("div", {
              style: {
                display: "flex", alignItems: "center", justifyContent: "center", gap: 8, marginTop: "clamp(8px,1vh,12px)",
                padding: "clamp(6px,0.7vh,10px) clamp(14px,1.6vw,22px)", borderRadius: 10, alignSelf: "center",
                background: "rgba(255,255,255,0.02)", border: "1px dashed rgba(255,255,255,0.12)",
                opacity: phase >= 4 ? 1 : 0, transition: "opacity 0.4s ease 0.5s",
              },
            },
              React.createElement(Icon, { name: "GitBranch", size: 14, style: { color: "var(--ink-mute)" } }),
              React.createElement("span", { style: { fontSize: "clamp(10px,0.9vw,13px)", fontWeight: 700, color: "var(--ink-mute)" } }, "\u041f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u0438 \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0442 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430")
            )
          )
        )
      ),

      // ── THESIS ──
      React.createElement(motion.div, {
        variants: fadeUpV,
        style: {
          position: "relative",
          padding: "clamp(16px,2vh,24px) clamp(18px,2.2vw,28px)",
          borderRadius: 14,
          display: "flex", alignItems: "center", gap: 12,
          background: phase >= 5 ? "linear-gradient(135deg, rgba(95,220,138,0.1), rgba(95,220,138,0.03))" : "rgba(255,255,255,0.02)",
          border: "1px solid " + (phase >= 5 ? "rgba(95,220,138,0.3)" : "var(--hairline)"),
          boxShadow: phase >= 5 ? "0 6px 28px rgba(95,220,138,0.1)" : "none",
          opacity: phase >= 5 ? 1 : 0.15,
          transition: "all 0.6s ease",
          overflow: "hidden",
        },
      },
        React.createElement("div", {
          style: { position: "absolute", left: 0, top: 0, bottom: 0, width: 4, borderRadius: "4px 0 0 4px", background: phase >= 5 ? "linear-gradient(180deg, #5fdc8a, rgba(95,220,138,0.3))" : "var(--hairline)", transition: "all 0.6s ease" },
        }),
        React.createElement("div", {
          style: { width: 34, height: 34, borderRadius: 9, display: "grid", placeItems: "center", flex: "none", background: phase >= 5 ? "rgba(95,220,138,0.15)" : "rgba(255,255,255,0.04)", transition: "all 0.5s ease" },
        }, React.createElement(Icon, { name: "Sparkles", size: 18, style: { color: phase >= 5 ? "#5fdc8a" : "var(--ink-mute)", transition: "color 0.5s ease" } })),
        React.createElement("p", {
          style: { margin: 0, fontSize: "clamp(13px,1.15vw,17px)", fontWeight: 700, lineHeight: 1.5, color: phase >= 5 ? "var(--ink)" : "var(--ink-mute)", transition: "color 0.5s ease" },
        }, slide.thesis)
      )
    )
  );
}
/* ---------- 17 · Raif Consult ---------- */
function RaifConsultSlide({ slide }) {
  const [dark, setDark] = React.useState(() => document.documentElement.getAttribute("data-theme") !== "light");
  React.useEffect(() => {
    const obs = new MutationObserver(() => setDark(document.documentElement.getAttribute("data-theme") !== "light"));
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
    return () => obs.disconnect();
  }, []);
  const qrFg = dark ? "#ffcc00" : "#2a2218";
  const qrBg = dark ? "#0c0c14" : "#f5f3ef";
  const borderBg = dark
    ? "linear-gradient(135deg, rgba(255,204,0,0.45), rgba(255,255,255,0.08), rgba(255,204,0,0.3))"
    : "linear-gradient(135deg, rgba(230,184,0,0.35), rgba(0,0,0,0.06), rgba(230,184,0,0.25))";
  const borderShadow = dark
    ? "0 4px 24px rgba(0,0,0,0.4), 0 0 30px rgba(255,204,0,0.08)"
    : "0 4px 20px rgba(0,0,0,0.08), 0 0 24px rgba(230,184,0,0.06)";

  return React.createElement(
    "div",
    { className: "slide" },
    React.createElement(
      Stagger,
      {
        className: "slide-inner",
        style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" },
      },
      React.createElement(
        "div",
        { style: { textAlign: "center", marginBottom: "clamp(30px, 5vh, 60px)" } },
        React.createElement(Kicker, { index: slide.id }, slide.kicker),
        React.createElement(Title, { style: { textAlign: "center" } }, slide.title)
      ),
      React.createElement(
        motion.div,
        { variants: fadeUpV, style: { display: "flex", alignItems: "center", gap: "clamp(40px, 6vw, 80px)", background: "rgba(255,255,255,0.02)", padding: "clamp(30px, 4vw, 50px)", borderRadius: "24px", border: "1px solid var(--hairline)" } },
        React.createElement(
          Tilt3D,
          { max: 12, style: { flex: "none" } },
          React.createElement(
            "div",
            { style: { padding: "2px", borderRadius: "18px", background: borderBg, boxShadow: borderShadow } },
            React.createElement(
              "a",
              { className: "qr", href: slide.url, target: "_blank", rel: "noopener noreferrer", style: { position: "relative", overflow: "hidden", display: "block", background: qrBg, width: "clamp(240px, 20vw, 320px)", height: "clamp(240px, 20vw, 320px)" } },
              React.createElement(QRCode, { url: slide.url, size: 600, fgColor: qrFg, bgColor: qrBg }),
              React.createElement("div", { className: "qr-scan", key: "scan" }),
              React.createElement("div", { className: "glare glare--auto", key: "glare" })
            )
          )
        ),
        React.createElement(
          "div",
          { style: { display: "flex", flexDirection: "column", gap: "16px", maxWidth: "440px" } },
          React.createElement("p", { style: { fontSize: "clamp(22px, 2.2vw, 30px)", fontWeight: 600, opacity: 0.9, margin: 0, whiteSpace: "pre-wrap", lineHeight: 1.4 } }, slide.desc),
          React.createElement(
            "div",
            { style: { marginTop: "24px", padding: "18px 24px", borderRadius: "16px", background: "rgba(255,204,0,0.1)", border: "1px solid rgba(255,204,0,0.2)" } },
            React.createElement("div", { style: { fontSize: "14px", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--yellow)" } }, slide.contactsTitle),
            React.createElement(
              "div",
              { style: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "10px", marginTop: "8px" } },
              React.createElement("span", { style: { fontSize: "18px", fontWeight: 600 } }, slide.contactsDesc + ":"),
              React.createElement("a", { href: "mailto:" + slide.email, style: { fontSize: "18px", fontWeight: 700, color: "var(--ink)", textDecoration: "none" } }, "📧 " + slide.email)
            )
          )
        )
      )
    )
  );
}

/* ---------- 18 · B2B Req Future ---------- */
function B2BReqSlide({ slide }) {
  const [dark, setDark] = React.useState(() => document.documentElement.getAttribute("data-theme") !== "light");
  React.useEffect(() => {
    const obs = new MutationObserver(() => setDark(document.documentElement.getAttribute("data-theme") !== "light"));
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
    return () => obs.disconnect();
  }, []);

  const cardV = {
    hidden: { opacity: 0, scale: 0.95, y: 20 },
    show: { opacity: 1, scale: 1, y: 0, transition: { type: "spring", stiffness: 300, damping: 24 } }
  };

  return React.createElement(
    "div",
    { className: "slide" }, // Removed custom padding to use standard slide layout and avoid logo overlap
    React.createElement(
      Stagger,
      {
        className: "slide-inner", // Added slide-inner for standard sizing
        style: { display: "flex", flexDirection: "column", height: "100%", gap: "clamp(24px, 3vh, 40px)" }
      },
      // Title
      React.createElement(
        "div",
        null,
        React.createElement(Kicker, { index: slide.id }, slide.kicker),
        React.createElement(Title, null, slide.title)
      ),

      // Top Info Panel
      React.createElement(
        motion.div,
        { 
          variants: fadeUpV, 
          className: "glass",
          style: { 
            display: "flex", alignItems: "center", justifyContent: "space-between", 
            padding: "clamp(20px, 3vh, 32px) clamp(24px, 3vw, 40px)", borderRadius: "20px",
            background: dark ? "linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01))" : "linear-gradient(135deg, rgba(0,0,0,0.02), rgba(0,0,0,0.005))",
            border: "1px solid var(--hairline)", flex: "none"
          }
        },
        React.createElement(
          "div",
          { style: { flex: 1, paddingRight: "clamp(20px, 3vw, 40px)", minWidth: 0 } },
          React.createElement("h3", { style: { margin: "0 0 12px 0", fontSize: "clamp(18px, 1.9vw, 28px)", fontWeight: 700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, slide.introTitle),
          React.createElement("p", { style: { margin: 0, fontSize: "clamp(18px, 1.6vw, 24px)", opacity: 0.8, lineHeight: 1.5 } }, slide.introDesc)
        ),
        React.createElement(
          motion.div,
          { 
            whileHover: { scale: 1.1, rotate: 15 },
            style: { 
              width: "clamp(56px, 5vw, 72px)", height: "clamp(56px, 5vw, 72px)", borderRadius: "50%", 
              background: "var(--yellow)", color: "#2a2218", 
              display: "flex", justifyContent: "center", alignItems: "center",
              boxShadow: "0 8px 24px rgba(255,204,0,0.25)", flex: "none"
            }
          },
          React.createElement(Icon, { name: "ArrowRight", size: 32, stroke: 2.5 })
        )
      ),

      // Bottom Cards
      React.createElement(
        "div",
        { style: { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "clamp(20px, 3vw, 40px)", flex: 1, paddingBottom: "clamp(10px, 2vh, 30px)" } },
        slide.cards.map((card, idx) => 
          React.createElement(
            motion.div,
            {
              key: idx,
              variants: cardV,
              whileHover: { y: -8, scale: 1.02, boxShadow: dark ? "0 20px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1)" : "0 20px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05)" },
              className: "glass",
              style: { 
                display: "flex", flexDirection: "column", padding: "clamp(16px, 2vw, 24px)", borderRadius: "24px",
                background: dark ? "linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%)" : "linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.5) 100%)",
                border: "1px solid var(--hairline)", transition: "all 0.3s ease",
                position: "relative", overflow: "hidden"
              }
            },
            React.createElement("h4", { style: { margin: "0 0 12px 0", fontSize: "clamp(22px, 1.9vw, 26px)", fontWeight: 700, lineHeight: 1.25 } }, card.title),
            React.createElement("p", { style: { margin: 0, fontSize: "clamp(16px, 1.4vw, 20px)", opacity: 0.8, lineHeight: 1.45, flex: 1, whiteSpace: "pre-wrap" } }, card.text),
            
            // Animation block
            React.createElement(
              "div",
              { style: { marginTop: "20px", height: "100px", position: "relative", display: "flex", justifyContent: "center", alignItems: "flex-end", overflow: "visible" } },
              
              // Decorative background glow
              React.createElement("div", { style: { position: "absolute", bottom: 0, left: "50%", transform: "translateX(-50%)", width: "100px", height: "40px", background: "var(--yellow)", opacity: 0.15, filter: "blur(30px)", borderRadius: "50%" } }),
              
              idx === 0 && React.createElement(
                "div", { style: { position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "flex-end", justifyContent: "center" } },
                React.createElement(
                  "div", { style: { width: "100px", height: "70px", background: "rgba(150,150,150,0.1)", borderRadius: "12px", border: "1px solid var(--hairline)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "10px", position: "relative", zIndex: 1 } },
                  React.createElement("div", { style: { width: "40px", height: "4px", background: "var(--hairline)", borderRadius: "2px", marginBottom: "8px" } }),
                  React.createElement("div", { style: { fontSize: "12px", fontWeight: 800, opacity: 0.5, letterSpacing: "2px" } }, "ИНН"),
                  React.createElement("div", { style: { width: "60px", height: "4px", background: "var(--hairline)", borderRadius: "2px", marginTop: "8px" } })
                ),
                React.createElement(
                  motion.div,
                  { animate: { x: [-20, 20, -20], y: [-5, 5, -5] }, transition: { duration: 4, repeat: Infinity, ease: "easeInOut" }, style: { position: "absolute", zIndex: 2, color: "var(--yellow)" } },
                  React.createElement(Icon, { name: "Search", size: 54, stroke: 2 })
                )
              ),

              idx === 1 && React.createElement(
                "div", { style: { position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "flex-end", justifyContent: "space-between", padding: "0 20px" } },
                React.createElement(Icon, { name: "Building2", size: 50, style: { opacity: 0.4 } }),
                React.createElement(
                  "div", { style: { position: "absolute", left: "60px", right: "60px", bottom: "25px", height: "2px", background: "var(--hairline)" } },
                  // Use 'left' instead of 'x' to animate across the parent container properly
                  React.createElement(motion.div, { animate: { left: ["0%", "calc(100% - 10px)", "0%"] }, transition: { duration: 3, repeat: Infinity, ease: "easeInOut" }, style: { position: "absolute", top: "-4px", width: "10px", height: "10px", background: "var(--yellow)", borderRadius: "50%", boxShadow: "0 0 12px var(--yellow)" } })
                ),
                React.createElement(Icon, { name: "Building", size: 50, style: { opacity: 0.4 } })
              ),

              idx === 2 && React.createElement(
                "div", { style: { position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "flex-end", justifyContent: "center" } },
                React.createElement(
                  motion.div, 
                  { animate: { scale: [1, 1.05, 1], y: [0, -5, 0] }, transition: { duration: 3, repeat: Infinity, ease: "easeInOut" }, style: { color: "var(--yellow)", display: "flex", alignItems: "center", justifyContent: "center" } },
                  React.createElement(Icon, { name: "Handshake", size: 64, stroke: 1.5 })
                ),
                React.createElement(
                  motion.div,
                  { animate: { opacity: [0.2, 0.8, 0.2] }, transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }, style: { position: "absolute", right: "30%", top: "40%" } },
                  React.createElement(Icon, { name: "Sparkles", size: 24, style: { color: "var(--yellow)" } })
                )
              )
            )
          )
        )
      )
    )
  );
}

Object.assign(window, {
  ShareLinkSlide, PaymentJourneySlide, OnlineOrderSlide, EcosystemSlide, StepsSlide, DemoSlide, PaymentResultSlide, VFlowSlide, GroupsSlide, BentoBenefitsSlide, PaymentHubSlide, ContactsSlide, OnlineOrderShowcaseSlide, BizProcessChainSlide, InvoiceFloodSlide, ProcessCompareSlide, RaifConsultSlide, B2BReqSlide,
});