/* =========================================================== Slide renderers — part 1 (slides 1–5) =========================================================== */ function SlideHead({ slide, style }) { return React.createElement( "div", { style: { ...style } }, 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(14px,2vh,22px)", maxWidth: "46ch", ...(slide.id === 3 ? { fontSize: "clamp(20px, 2vw, 30px)", fontWeight: 700, color: "var(--ink)", letterSpacing: "0.01em" } : {}) } }, slide.lead ) : null ); } /* ---------- 1 · Cover — 3D Digital City ---------- */ function CoverSlide({ slide }) { /* data-particle canvas between nodes */ function ParticleFlow({ width, height, count, color, direction }) { const canvasRef = React.useRef(null); React.useEffect(() => { const cvs = canvasRef.current; if (!cvs || !window.__animOK) return; cvs.width = width * 2; cvs.height = height * 2; const ctx = cvs.getContext("2d"); ctx.scale(2, 2); const particles = Array.from({ length: count }, () => ({ x: Math.random() * width, y: Math.random() * height, speed: 0.4 + Math.random() * 1.2, size: 1.5 + Math.random() * 2.5, opacity: 0.3 + Math.random() * 0.7, })); let raf; function frame() { ctx.clearRect(0, 0, width, height); for (const p of particles) { p.y += (direction === "down" ? p.speed : -p.speed); if (direction === "down" && p.y > height) { p.y = -4; p.x = width * 0.25 + Math.random() * width * 0.5; } if (direction === "up" && p.y < 0) { p.y = height + 4; p.x = width * 0.25 + Math.random() * width * 0.5; } ctx.globalAlpha = p.opacity * (1 - Math.abs(p.y - height / 2) / (height / 2)); ctx.fillStyle = color; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fill(); ctx.globalAlpha = p.opacity * 0.3; ctx.beginPath(); ctx.arc(p.x, p.y, p.size * 3, 0, Math.PI * 2); ctx.fill(); } raf = requestAnimationFrame(frame); } raf = requestAnimationFrame(frame); return () => cancelAnimationFrame(raf); }, []); return React.createElement("canvas", { ref: canvasRef, style: { width, height, display: "block", pointerEvents: "none" }, }); } return React.createElement( "div", { className: "slide" }, React.createElement("div", { className: "laser", key: "laser1" }), React.createElement("div", { className: "laser l2", key: "laser2" }), React.createElement( Stagger, { className: "slide-inner", style: { display: "grid", gridTemplateColumns: "minmax(0,1.1fr) minmax(0,0.9fr)", gap: "clamp(30px,4vw,70px)", alignItems: "center", position: "relative", zIndex: 2, }, }, // LEFT — title + subtitle React.createElement( "div", null, React.createElement(Kicker, null, slide.kicker), React.createElement( "h1", { className: "title", style: { fontSize: "clamp(52px,8.2vw,128px)", lineHeight: 0.96, letterSpacing: "-0.04em", display: "flex", flexWrap: "wrap", alignItems: "baseline", gap: "0 0.18em" }, }, React.createElement(LetterReveal, { text: "1С:СБП", delay: 0.15 }), React.createElement(LetterReveal, { text: "B2B", delay: 0.5, style: { color: "var(--yellow)", textShadow: "0 0 38px rgba(255,204,0,0.4)" } }) ), React.createElement( motion.p, { className: "subtitle", variants: fadeUpV, style: { marginTop: "clamp(20px,3vh,34px)" } }, slide.subtitle ), React.createElement(motion.hr, { className: "hairline", variants: fadeV, style: { margin: "clamp(26px,4vh,40px) 0", maxWidth: "440px" } }), React.createElement( motion.div, { variants: fadeUpV, style: { display: "flex", alignItems: "center", gap: "16px" } }, React.createElement("div", { className: "chip", style: { width: "clamp(46px,4vw,58px)", height: "clamp(46px,4vw,58px)" } }, React.createElement(Icon, { name: "Mic", size: 24 }) ), React.createElement("div", null, React.createElement("div", { style: { fontWeight: 700, fontSize: "clamp(16px,1.5vw,21px)" } }, "Павел Завялик"), React.createElement("div", { className: "mono-label", style: { marginTop: "5px", color: "var(--ink)", fontSize: "clamp(13px,1.2vw,18px)" } }, "Фирма «1С»") ) ) ), // RIGHT — vertical flow: Company A → Payment Card → Company B React.createElement( motion.div, { variants: scaleV, style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0 } }, // Company A — sender React.createElement(Tilt3D, { max: 10, style: { width: "100%", maxWidth: "340px" } }, React.createElement(motion.div, { className: "glass sheen-host", style: { padding: "clamp(12px,1.4vh,18px) clamp(16px,1.8vw,24px)", display: "flex", alignItems: "center", gap: "12px", position: "relative" }, animate: { y: [0, -5, 0] }, transition: { duration: 5, repeat: Infinity, ease: "easeInOut" }, }, React.createElement("div", { className: "glare", key: "g1" }), React.createElement("div", { className: "chip", style: { width: 40, height: 40, borderRadius: 11 } }, React.createElement(Icon, { name: "Building2", size: 20 }) ), React.createElement("div", { style: { flex: 1 } }, React.createElement("div", { style: { fontWeight: 800, fontSize: "clamp(14px,1.3vw,18px)" } }, "Компания А"), React.createElement("div", { className: "mono-label", style: { marginTop: "3px" } }, "Плательщик") ), React.createElement("div", { className: "mono-label", style: { color: "var(--yellow)" } }, "Отправка →") ) ), // particle connector 1 — gold React.createElement(motion.div, { variants: fadeV, style: { position: "relative", height: "clamp(36px,4.5vh,56px)", width: "100%", maxWidth: "340px", display: "flex", justifyContent: "center" } }, React.createElement("div", { style: { position: "absolute", top: 0, bottom: 0, left: "50%", width: "2px", marginLeft: "-1px", background: "linear-gradient(180deg, rgba(255,204,0,0.35), rgba(255,204,0,0.08))" } }), React.createElement(ParticleFlow, { width: 100, height: 56, count: 14, color: "#ffcc00", direction: "down" }) ), // CENTER — Payment card hub (the product showcase) React.createElement(Tilt3D, { max: 6, style: { width: "100%", maxWidth: "340px" } }, React.createElement(motion.div, { className: "glass glass-hi sheen-host", style: { width: "100%", padding: "clamp(16px,1.8vw,24px)", position: "relative", background: "linear-gradient(150deg, rgba(255,204,0,0.1), rgba(255,204,0,0.02))", borderColor: "rgba(255,204,0,0.35)", boxShadow: "0 20px 64px rgba(0,0,0,0.35), 0 0 50px rgba(255,204,0,0.1)", }, animate: { y: [0, -8, 0] }, transition: { duration: 6, repeat: Infinity, ease: "easeInOut" }, }, React.createElement("div", { className: "glare", key: "g2" }), // header row: label + badge React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "clamp(12px,1.4vh,18px)" } }, // СБП B2B label with pulsing orb React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px" } }, React.createElement(motion.div, { style: { width: 32, height: 32, borderRadius: "50%", display: "grid", placeItems: "center", background: "linear-gradient(150deg, var(--yellow), var(--yellow-deep))", color: "#1a1505", flex: "none", boxShadow: "0 4px 16px rgba(255,204,0,0.4)", }, animate: { scale: [1, 1.1, 1], boxShadow: ["0 4px 16px rgba(255,204,0,0.4)", "0 6px 28px rgba(255,204,0,0.6)", "0 4px 16px rgba(255,204,0,0.4)"] }, transition: { duration: 2.5, repeat: Infinity, ease: "easeInOut" }, }, React.createElement(Icon, { name: "Zap", size: 16, stroke: 2.5 }) ), React.createElement("span", { style: { fontWeight: 800, fontSize: "clamp(14px,1.3vw,19px)", color: "var(--yellow)" } }, "СБП B2B") ), // Оплачено badge React.createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: "6px", fontSize: "11px", fontWeight: 700, color: "#5fdc8a", padding: "5px 11px", borderRadius: "999px", background: "rgba(95,220,138,0.1)", border: "1px solid rgba(95,220,138,0.25)", }, }, React.createElement("span", { className: "pulse-dot", style: { width: 6, height: 6, borderRadius: "50%", background: "#5fdc8a", boxShadow: "0 0 8px #5fdc8a" } }), "Оплачено" ) ), // QR code block React.createElement("div", { className: "qr", style: { position: "relative", overflow: "hidden", maxWidth: "clamp(100px,10vw,140px)", margin: "0 auto clamp(12px,1.4vh,18px)", padding: "clamp(12px,1.2vw,18px)" }, }, React.createElement(Icon, { name: "QrCode", size: 72, stroke: 1.1, style: { color: "var(--yellow)", opacity: 0.85, display: "block", margin: "0 auto" } }), React.createElement("div", { className: "qr-scan" }) ), // payment details React.createElement("hr", { className: "hairline", style: { margin: "0 0 clamp(10px,1.2vh,14px)" } }), React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-end" } }, React.createElement("div", null, React.createElement("div", { className: "mono-label" }, "Получатель"), React.createElement("div", { style: { fontWeight: 700, fontSize: "clamp(13px,1.2vw,16px)", marginTop: "4px" } }, "ООО «Контрагент»") ), React.createElement("div", { style: { textAlign: "right" } }, React.createElement("div", { className: "mono-label" }, "Сумма"), React.createElement(AnimatedNumber, { value: 148500, duration: 1.8, format: (n) => Math.round(n).toLocaleString("ru-RU") + " ₽", style: { display: "block", fontWeight: 800, fontSize: "clamp(16px,1.5vw,22px)", marginTop: "4px", color: "var(--yellow)" }, }) ) ) ) ), // particle connector 2 — green React.createElement(motion.div, { variants: fadeV, style: { position: "relative", height: "clamp(36px,4.5vh,56px)", width: "100%", maxWidth: "340px", display: "flex", justifyContent: "center" } }, React.createElement("div", { style: { position: "absolute", top: 0, bottom: 0, left: "50%", width: "2px", marginLeft: "-1px", background: "linear-gradient(180deg, rgba(255,204,0,0.08), rgba(95,220,138,0.3))" } }), React.createElement(ParticleFlow, { width: 100, height: 56, count: 14, color: "#5fdc8a", direction: "down" }) ), // Company B — receiver React.createElement(Tilt3D, { max: 10, style: { width: "100%", maxWidth: "340px" } }, React.createElement(motion.div, { className: "glass sheen-host", style: { padding: "clamp(12px,1.4vh,18px) clamp(16px,1.8vw,24px)", display: "flex", alignItems: "center", gap: "12px", position: "relative", background: "linear-gradient(150deg, rgba(95,220,138,0.08), rgba(95,220,138,0.02))", borderColor: "rgba(95,220,138,0.2)", }, animate: { y: [0, -5, 0] }, transition: { duration: 5, repeat: Infinity, ease: "easeInOut", delay: 1.5 }, }, React.createElement("div", { className: "glare", key: "g3" }), React.createElement("div", { className: "chip", style: { width: 40, height: 40, borderRadius: 11, background: "linear-gradient(160deg, rgba(95,220,138,0.16), rgba(95,220,138,0.04))", borderColor: "rgba(95,220,138,0.25)", color: "#5fdc8a" }, }, React.createElement(Icon, { name: "Building2", size: 20 }) ), React.createElement("div", { style: { flex: 1 } }, React.createElement("div", { style: { fontWeight: 800, fontSize: "clamp(14px,1.3vw,18px)" } }, "Компания Б"), React.createElement("div", { className: "mono-label", style: { marginTop: "3px", color: "#5fdc8a" } }, "Получатель") ), React.createElement("div", { style: { fontSize: "clamp(16px,1.5vw,22px)", color: "#5fdc8a" }, }, "✓") ) ) ) ), // bottom caption React.createElement(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1, transition: { delay: 2.5, duration: 1 } }, style: { position: "absolute", bottom: "clamp(52px,6vh,72px)", left: 0, right: 0, textAlign: "center", zIndex: 10 }, }, React.createElement("div", { className: "mono-label", style: { fontSize: "clamp(11px,1vw,14px)", letterSpacing: "0.18em", color: "var(--ink-mute)" }, }, "Платежи становятся частью бизнес-процесса") ) ); } /* ---------- Shared list slide (2,3,9,10,11) ---------- */ function ListSlide({ slide, variant }) { // variant: "icon" | "number" return React.createElement( "div", { className: "slide" }, React.createElement( Stagger, { className: "slide-inner", style: { display: "flex", flexDirection: "column", gap: "clamp(20px,3vh,32px)", }, }, // main 2-col grid React.createElement( "div", { style: { display: "grid", gridTemplateColumns: "minmax(0,0.82fr) minmax(0,1.18fr)", gap: "clamp(40px,6vw,100px)", alignItems: "center", }, }, React.createElement(SlideHead, { slide }), React.createElement( "div", { style: { display: "flex", flexDirection: "column", gap: "clamp(12px,1.5vh,16px)" } }, slide.items.map((it, i) => React.createElement( motion.div, { key: i, className: "glass", variants: fadeUpV, style: { display: "flex", alignItems: "center", gap: "clamp(16px,1.6vw,22px)", padding: "clamp(16px,1.8vh,24px) clamp(18px,2vw,28px)", }, }, variant === "number" ? React.createElement( "div", { className: "chip", style: { width: "clamp(44px,3.4vw,54px)", height: "clamp(44px,3.4vw,54px)", borderRadius: "13px" }, }, React.createElement("span", { className: "num-badge", style: { fontSize: "clamp(17px,1.5vw,21px)" } }, String(i + 1).padStart(2, "0")) ) : React.createElement( "div", { className: "chip", style: { width: "clamp(46px,3.6vw,58px)", height: "clamp(46px,3.6vw,58px)", borderRadius: "14px" }, }, React.createElement(Icon, { name: it.icon, size: 24 }) ), React.createElement( "span", { style: { fontSize: "clamp(17px,1.7vw,26px)", fontWeight: 600, lineHeight: 1.25 } }, it.text ) ) ) ) ), // optional footnote with channel icons slide.footnote ? React.createElement( motion.div, { variants: fadeUpV, className: "glass", style: { padding: "clamp(16px,1.8vh,22px) clamp(20px,2.4vw,32px)", display: "flex", alignItems: "center", gap: "clamp(14px,1.6vw,22px)", flexWrap: "wrap", 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: 22, style: { color: "var(--yellow)", flex: "none" } }), React.createElement("p", { style: { margin: 0, fontSize: "clamp(13px,1.15vw,17px)", fontWeight: 500, lineHeight: 1.45, color: "var(--ink-soft)", flex: "1 1 300px", }, }, slide.footnote), // channel chips slide.channels ? React.createElement( "div", { style: { display: "flex", gap: "clamp(8px,0.8vw,12px)", flexWrap: "wrap" } }, slide.channels.map((ch, i) => React.createElement( "div", { key: i, style: { display: "flex", alignItems: "center", gap: "8px", padding: "7px 14px", borderRadius: "999px", background: "var(--panel-2)", border: "1px solid var(--hairline)", fontSize: "clamp(10px,0.9vw,13px)", fontWeight: 600, color: "var(--ink-soft)", whiteSpace: "nowrap", }, }, React.createElement(Icon, { name: ch.icon, size: 15, stroke: 1.8, style: { color: "var(--yellow)" } }), ch.label ) ) ) : null ) : null ) ); } /* ---------- Accountant Transform — chaos to unified ---------- */ function AccountantSlide({ slide }) { const [step, setStep] = React.useState(0); // 0=chaos, 1=aggregating, 2=unified React.useEffect(() => { let active = true; const run = async () => { while (active) { setStep(0); await new Promise(r => setTimeout(r, 3500)); if (!active) break; setStep(1); // aggregation flight + particle stream await new Promise(r => setTimeout(r, 1500)); if (!active) break; setStep(2); // unified 1C glow & process tree reveal await new Promise(r => setTimeout(r, 4500)); } }; run(); return () => { active = false; }; }, []); const chaosBadges = [ { label: "Почта", icon: "Mail", color: "#3498db" }, { label: "Excel", icon: "FileSpreadsheet", color: "#2ecc71" }, { label: "Банк-клиент", icon: "Landmark", color: "#00d2d3" }, { label: "Счета", icon: "FileText", color: "#e74c3c" }, { label: "Мессенджеры", icon: "MessageSquare", color: "#9b59b6" }, { label: "Сверка оплат", icon: "ClipboardCheck", color: "#f1c40f" }, { label: "Поиск платежей", icon: "Search", color: "#e67e22" }, { label: "Контроль долгов", icon: "Clock", color: "#1abc9c" }, ]; 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(24px, 3vw, 48px)", alignItems: "stretch", position: "relative" } }, // LEFT COLUMN: Standard kicker, title, lead, and 5 compact bullet points React.createElement( "div", { style: { display: "flex", flexDirection: "column", gap: "clamp(14px, 2vh, 22px)" } }, React.createElement(SlideHead, { slide }), React.createElement( "div", { style: { display: "flex", flexDirection: "column", gap: "clamp(6px, 1vh, 10px)" } }, slide.items.map((it, i) => React.createElement( motion.div, { key: i, className: "glass", variants: fadeUpV, style: { display: "flex", alignItems: "center", gap: "clamp(10px, 1.2vw, 16px)", padding: "clamp(8px, 1.1vh, 14px) clamp(12px, 1.4vw, 18px)" } }, React.createElement( "div", { className: "chip", style: { width: "clamp(32px, 2.6vw, 40px)", height: "clamp(32px, 2.6vw, 40px)", borderRadius: "10px", flexShrink: 0 } }, React.createElement(Icon, { name: it.icon, size: 16 }) ), React.createElement( "span", { style: { fontSize: "clamp(13px, 1.15vw, 16px)", fontWeight: 600, lineHeight: 1.25, color: "var(--ink-soft)" } }, it.text ) ) ) ) ), // RIGHT COLUMN: "До vs Стало" transformation animation — uses flex layout to stay in bounds React.createElement( motion.div, { variants: scaleV, style: { position: "relative", background: "rgba(18, 18, 28, 0.45)", border: "1px solid var(--hairline)", borderRadius: "24px", padding: "clamp(20px, 2.5vw, 32px) clamp(12px, 1.5vw, 20px)", boxShadow: "0 15px 40px rgba(0,0,0,0.25)", display: "flex", flexDirection: "column", alignItems: "stretch", gap: "0" } }, // Row of labels: "До" and "Стало" React.createElement( "div", { style: { display: "flex", justifyContent: "space-between", padding: "0 10px", marginBottom: "clamp(12px, 2vh, 24px)" } }, React.createElement("span", { style: { color: "#e74c3c", fontSize: "clamp(10px, 0.9vw, 13px)", fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.15em" } }, "⚠ До"), React.createElement("span", { style: { color: "var(--yellow)", fontSize: "clamp(10px, 0.9vw, 13px)", fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.15em" } }, "✦ Стало") ), // Main animation area: 3-column flex (chaos | arrow | 1C) React.createElement( "div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "clamp(8px, 1.5vw, 20px)", flex: 1, position: "relative", minHeight: "clamp(280px, 38vh, 440px)" } }, // === LEFT SECTION: Chaos zone === React.createElement( "div", { style: { position: "relative", width: "clamp(180px, 16vw, 260px)", height: "clamp(240px, 32vh, 380px)", flexShrink: 0 } }, // Stressed manager icon in center React.createElement( "div", { style: { position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)", width: "clamp(56px, 5vw, 72px)", height: "clamp(56px, 5vw, 72px)", borderRadius: "50%", background: "rgba(235, 94, 85, 0.06)", border: "1.5px dashed rgba(235, 94, 85, 0.3)", display: "grid", placeItems: "center", zIndex: 5 } }, React.createElement(Icon, { name: "UserX", size: 28, style: { color: "#e74c3c" } }), React.createElement(motion.div, { style: { position: "absolute", inset: -8, borderRadius: "50%", border: "1px solid rgba(235,94,85,0.15)" }, animate: { scale: [1, 1.3, 1], opacity: [0.5, 0, 0.5] }, transition: { duration: 2.2, repeat: Infinity, ease: "easeInOut" } }) ), // Orbital badges — positioned relative to this container's center chaosBadges.map((item, idx) => { const R = Math.min(90, window.innerWidth * 0.07); const angle = (idx * 360 / 8) * (Math.PI / 180); const xVal = Math.cos(angle) * R; const yVal = Math.sin(angle) * R; let animState = {}; if (step === 1) { animState = { x: 0, y: 0, scale: 0.15, opacity: 0, filter: "blur(3px)", transition: { duration: 0.8, ease: "easeIn", delay: idx * 0.04 } }; } else if (step === 2) { animState = { opacity: 0, scale: 0.15 }; } else { const floatX = [0, 3, -2, 0]; const floatY = [0, -4, 3, 0]; animState = { x: [xVal, xVal + floatX[idx % 4], xVal - floatX[idx % 4] * 0.5, xVal], y: [yVal, yVal - floatY[idx % 4], yVal + floatY[idx % 4] * 0.5, yVal], scale: 1, opacity: 1, filter: "blur(0px)", transition: { x: { repeat: Infinity, duration: 3.5 + idx * 0.3, ease: "easeInOut" }, y: { repeat: Infinity, duration: 3.1 + idx * 0.4, ease: "easeInOut" }, scale: { duration: 0.3 }, opacity: { duration: 0.3 } } }; } return React.createElement( motion.div, { key: idx, style: { position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)", display: "inline-flex", alignItems: "center", gap: "5px", padding: "5px 9px", borderRadius: "7px", background: "rgba(18, 18, 26, 0.85)", border: "1px solid rgba(255,255,255,0.08)", boxShadow: "0 4px 12px rgba(0,0,0,0.35)", fontSize: "clamp(9px, 0.8vw, 11px)", fontWeight: 700, color: "var(--ink)", whiteSpace: "nowrap", zIndex: 6 }, animate: animState }, React.createElement(Icon, { name: item.icon, size: 13, style: { color: item.color } }), React.createElement("span", null, item.label) ); }) ), // === CENTER: Transformation arrow === React.createElement( "div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "6px", flexShrink: 0, position: "relative", zIndex: 12 } }, React.createElement( motion.div, { style: { width: "clamp(40px, 3.5vw, 52px)", height: "clamp(40px, 3.5vw, 52px)", borderRadius: "50%", background: step === 1 ? "rgba(255,204,0,0.15)" : "rgba(255,255,255,0.03)", border: step === 1 ? "1.5px solid var(--yellow)" : "1px solid var(--hairline)", display: "grid", placeItems: "center", color: step === 1 ? "var(--yellow)" : "var(--ink-mute)", boxShadow: step === 1 ? "0 0 24px rgba(255,204,0,0.35)" : "none", transition: "all 0.5s ease" }, animate: step === 1 ? { rotate: [0, 360], scale: [1, 1.1, 1] } : {}, transition: { rotate: { repeat: Infinity, duration: 2, ease: "linear" }, scale: { repeat: Infinity, duration: 1.2, ease: "easeInOut" } } }, React.createElement(Icon, { name: "RefreshCcw", size: 20, stroke: 2.5 }) ), // Particle stream overlay step === 1 && Array.from({ length: 8 }).map((_, i) => React.createElement(motion.div, { key: "p" + i, style: { position: "absolute", width: "4px", height: "4px", borderRadius: "50%", background: "var(--yellow)", boxShadow: "0 0 8px var(--glow-yellow)", zIndex: 15 }, initial: { opacity: 0, x: -60, y: 0, scale: 0.6 }, animate: { opacity: [0, 1, 1, 0], x: [-60, 60], y: [Math.random() * 20 - 10, Math.random() * 20 - 10], scale: [0.6, 1.2, 0.5] }, transition: { duration: 1, repeat: Infinity, delay: i * 0.1, ease: "easeInOut" } }) ) ), // === RIGHT SECTION: 1С:УНФ Screen === React.createElement( motion.div, { style: { width: "clamp(180px, 16vw, 260px)", flexShrink: 0, zIndex: 10 }, animate: step === 2 ? { scale: 1.02, opacity: 1, filter: "none" } : { scale: 0.96, opacity: 0.35, filter: "grayscale(30%) blur(0.5px)" }, transition: { duration: 0.6 } }, React.createElement( Tilt3D, { max: 5 }, React.createElement( "div", { className: "glass", style: { width: "100%", borderRadius: "14px", overflow: "hidden", border: step === 2 ? "1.5px solid var(--yellow)" : "1px solid var(--hairline)", background: step === 2 ? "rgba(18, 18, 28, 0.9)" : "rgba(18, 18, 26, 0.6)", boxShadow: step === 2 ? "0 12px 40px rgba(255,204,0,0.08)" : "none", transition: "all 0.6s ease" } }, // 1C window header React.createElement( "div", { style: { background: "linear-gradient(90deg, #ffcc00, #ffb300)", height: "clamp(20px, 2vh, 28px)", display: "flex", alignItems: "center", padding: "0 12px", justifyContent: "space-between" } }, React.createElement("span", { style: { fontSize: "clamp(10px, 0.9vw, 13px)", fontWeight: 900, color: "#1a1505" } }, "1С:УНФ"), React.createElement( "div", { style: { display: "flex", gap: "4px" } }, React.createElement("span", { style: { width: 7, height: 7, borderRadius: "50%", background: "#27ae60" } }), React.createElement("span", { style: { width: 7, height: 7, borderRadius: "50%", background: "#f39c12" } }), React.createElement("span", { style: { width: 7, height: 7, borderRadius: "50%", background: "#e74c3c" } }) ) ), // screen body (vertical process tree) React.createElement( "div", { style: { padding: "clamp(12px, 1.8vh, 20px) clamp(10px, 1vw, 16px)", display: "flex", flexDirection: "column", alignItems: "center", gap: "clamp(4px, 0.6vh, 8px)", justifyContent: "center" } }, // Process nodes ...[ { icon: "FileText", label: "📄 Счёт на оплату", color: "var(--yellow)", delay: 0.15 }, { icon: "Zap", label: "⚡ Оплата по СБП", color: "var(--yellow)", delay: 0.55 }, { icon: "CheckCircle", label: "✅ Мгновенный статус", color: "#5fdc8a", delay: 0.95 }, { icon: "BarChart3", label: "📊 Полный контроль", color: "var(--yellow)", delay: 1.35 }, ].flatMap((node, ni) => { const els = [ React.createElement(motion.div, { key: "n" + ni, initial: { opacity: 0, y: 5 }, animate: step === 2 ? { opacity: 1, y: 0 } : { opacity: 0.15, y: 5 }, transition: { duration: 0.4, delay: node.delay }, className: "glass", style: { width: "clamp(140px, 13vw, 200px)", height: "clamp(24px, 2.6vh, 32px)", display: "flex", alignItems: "center", justifyContent: "center", gap: "6px", fontSize: "clamp(10px, 0.85vw, 12px)", fontWeight: 700, borderColor: step === 2 ? "rgba(255,204,0,0.3)" : "var(--hairline)" } }, React.createElement(Icon, { name: node.icon, size: 12, style: { color: node.color } }), node.label ) ]; if (ni < 3) { els.push( React.createElement(motion.div, { key: "a" + ni, initial: { opacity: 0 }, animate: step === 2 ? { opacity: 0.5 } : { opacity: 0.05 }, transition: { duration: 0.3, delay: node.delay + 0.2 }, style: { fontSize: "clamp(10px, 1vw, 14px)", color: "var(--ink-mute)" } }, "↓") ); } return els; }) ) ) ) ) ), // === FINAL TEXT: appears after 1C interface assembles === React.createElement( motion.div, { initial: { opacity: 0, y: 16 }, animate: step === 2 ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }, transition: { duration: 0.7, delay: step === 2 ? 1.8 : 0, ease: "easeOut" }, style: { textAlign: "center", padding: "clamp(14px, 2vh, 24px) clamp(16px, 2vw, 32px) 0", position: "relative" } }, // Decorative line above React.createElement(motion.div, { style: { width: "60px", height: "2px", background: "linear-gradient(90deg, transparent, var(--yellow), transparent)", margin: "0 auto clamp(10px, 1.5vh, 16px)", borderRadius: "2px" }, animate: step === 2 ? { width: "60px", opacity: 1 } : { width: "0px", opacity: 0 }, transition: { duration: 0.5, delay: step === 2 ? 2.0 : 0 } }), // Main phrase React.createElement( "span", { style: { fontSize: "clamp(13px, 1.15vw, 17px)", fontWeight: 700, lineHeight: 1.4, color: "var(--ink)", letterSpacing: "0.01em" } }, "Единый процесс в вашей ", React.createElement("span", { style: { color: "var(--yellow)", fontWeight: 800 } }, "1С"), " — вместо множества действий" ) ) ) ) ); } /* ---------- 4 · Transform ---------- */ function TransformSlide({ slide }) { return React.createElement( "div", { className: "slide" }, React.createElement( Stagger, { className: "slide-inner" }, React.createElement(SlideHead, { slide, style: { marginBottom: "clamp(26px,4vh,44px)", maxWidth: "60ch" } }), React.createElement( "div", { style: { display: "flex", flexDirection: "column", gap: "clamp(10px,1.4vh,14px)" } }, slide.rows.map((r, i) => React.createElement( motion.div, { key: i, variants: fadeUpV, style: { display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: "clamp(14px,2vw,28px)" }, }, // from React.createElement( "div", { className: "flow-node", style: { justifyContent: "flex-start" } }, React.createElement( "div", { className: "chip chip--ghost", style: { width: 44, height: 44, borderRadius: 11 } }, React.createElement(Icon, { name: r.iconFrom, size: 22 }) ), React.createElement("span", { style: { fontSize: "clamp(14px,1.35vw,21px)", fontWeight: 600, color: "var(--ink-soft)" } }, r.from) ), // arrow React.createElement(Icon, { name: "ArrowRight", size: 28, className: "glow-line" }), // to React.createElement( "div", { className: "flow-node is-key", style: { justifyContent: "flex-start" } }, React.createElement( "div", { className: "chip", style: { width: 44, height: 44, borderRadius: 11 } }, React.createElement(Icon, { name: r.iconTo, size: 22 }) ), React.createElement("span", { style: { fontSize: "clamp(14px,1.35vw,21px)", fontWeight: 700 } }, r.to) ) ) ) ), // thesis React.createElement( motion.div, { variants: fadeUpV, className: "glass", style: { marginTop: "clamp(22px,3.4vh,40px)", padding: "clamp(20px,2.4vh,30px) clamp(22px,2.6vw,36px)", display: "flex", alignItems: "center", gap: "20px", background: "linear-gradient(120deg, rgba(255,204,0,0.1), rgba(226,35,26,0.05))", borderColor: "rgba(255,204,0,0.25)", }, }, React.createElement(Icon, { name: "Sparkles", size: 30, style: { color: "var(--yellow)", flex: "none" } }), React.createElement( "p", { style: { margin: 0, fontSize: "clamp(16px,1.7vw,26px)", fontWeight: 600, lineHeight: 1.35 } }, slide.thesis ) ) ) ); } /* ---------- 5 · Bento audience ---------- */ function BentoAudienceSlide({ slide }) { return React.createElement( "div", { className: "slide" }, React.createElement( Stagger, { className: "slide-inner", style: { display: "flex", flexDirection: "column", gap: "0" } }, React.createElement(SlideHead, { slide, style: { marginBottom: "clamp(22px, 3vh, 36px)" } }), // Cards grid React.createElement( "div", { style: { display: "flex", flexWrap: "wrap", gap: "clamp(14px, 2vw, 24px)", justifyContent: "center", marginTop: "clamp(20px, 4vh, 40px)" } }, slide.useCases.map((it, i) => React.createElement( motion.div, { key: i, className: "glass", variants: scaleV, style: { flex: "1 1 calc(33.333% - 24px)", minWidth: "280px", maxWidth: "360px", padding: "clamp(20px, 2.5vw, 32px)", display: "flex", flexDirection: "column", gap: "clamp(16px, 2vh, 24px)", minHeight: "clamp(140px, 18vh, 190px)", justifyContent: "space-between", background: "linear-gradient(135deg, rgba(255,204,0,0.04), rgba(255,204,0,0.01))", borderColor: "rgba(255,204,0,0.12)" } }, React.createElement( "div", { className: "chip", style: { width: "clamp(52px, 4vw, 64px)", height: "clamp(52px, 4vw, 64px)", borderRadius: "16px" } }, React.createElement(Icon, { name: it.icon, size: 28 }) ), React.createElement( "div", { style: { fontSize: "clamp(18px, 1.6vw, 26px)", fontWeight: 700, lineHeight: 1.2 } }, it.text ) ) ) ) ) ); } Object.assign(window, { SlideHead, CoverSlide, ListSlide, AccountantSlide, TransformSlide, BentoAudienceSlide });