);
}
// ---------- CTA button ----------
// По умолчанию ведёт к форме внизу страницы (секция id="Контакты").
// Если передан href с http(s) — открывается в новой вкладке как внешняя ссылка.
function DSButton({ href = "#Контакты", children = DS_CTA.primary, size = "md", variant = "primary", target }) {
const sizes = {
sm: { pad: "12px 18px", fs: 13, gap: 10, arrowBox: 22, arrowSize: 10 },
md: { pad: "16px 24px", fs: 14, gap: 12, arrowBox: 28, arrowSize: 12 },
lg: { pad: "24px 38px", fs: 18, gap: 16, arrowBox: 40, arrowSize: 17 },
};
const s = sizes[size] || sizes.md;
const primary = variant === "primary";
const isExternal = /^https?:\/\//.test(href);
const isAnchor = href && href.startsWith("#");
function onClick(e) {
if (!isAnchor) return;
const id = decodeURIComponent(href.slice(1));
// секции обёрнуты в через DSSection; fallback на форму внутри
const el = document.getElementById(id)
|| document.querySelector(`[id="${id}"]`)
|| document.querySelector(`a[name="${id}"]`);
if (!el) return;
e.preventDefault();
const header = document.querySelector("[data-ds-header]");
const offset = (header ? header.getBoundingClientRect().height : 0) + 16;
const top = el.getBoundingClientRect().top + window.scrollY - offset;
window.scrollTo({ top, behavior: "smooth" });
history.replaceState(null, "", href);
}
return (
{children}
);
}
// ---------- Eyebrow label ----------
function DSEyebrow({ children }) {
return (
{children}
);
}
// ---------- Reveal on scroll ----------
function DSReveal({ children, delay = 0, as = "div", style = {}, ...rest }) {
const ref = React.useRef(null);
const [shown, setShown] = React.useState(false);
React.useEffect(() => {
const el = ref.current; if (!el) return;
if (typeof IntersectionObserver === "undefined") { setShown(true); return; }
const obs = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) { setShown(true); obs.disconnect(); } });
}, { rootMargin: "-8% 0px" });
obs.observe(el);
// Страховка: при мгновенном прыжке по якорю (#Контакты) наблюдатель иногда не
// срабатывает, и блок остаётся с opacity:0 навсегда — человек видит пустой экран
// вместо формы. Раз в полсекунды сверяем сами; как только блок в зоне видимости,
// показываем его. Ловля 20.09.2026 на мобильном.
let timer = 0;
const stop = () => { if (timer) clearInterval(timer); obs.disconnect(); };
const check = () => {
const node = ref.current; if (!node) return;
const r = node.getBoundingClientRect();
if (r.top < window.innerHeight && r.bottom > 0) { setShown(true); stop(); }
};
timer = setInterval(check, 500);
window.addEventListener("hashchange", check);
return () => { stop(); window.removeEventListener("hashchange", check); };
}, []);
const Tag = as;
return (
{children}
);
}
// ---------- Section wrapper ----------
function DSSection({ id, children, style = {}, pad = "clamp(60px, 9vh, 120px)", bg = "transparent" }) {
return (
{children}
);
}
// ---------- Header ----------
function DSHeader({ active, hideNav = false, ctaLabel, ctaHref, hideBottomCta = false, revealOnScroll = false }) {
const [scrolled, setScrolled] = React.useState(false);
const [revealed, setRevealed] = React.useState(false);
React.useEffect(() => {
let raf = 0;
const apply = () => {
raf = 0;
const y = window.scrollY;
const s = y > 20;
const r = y > window.innerHeight * 0.55;
setScrolled((p) => (p !== s ? s : p));
setRevealed((p) => (p !== r ? r : p));
};
// rAF-троттлинг: не дёргаем setState на каждый scroll-кадр, и обновляем стейт только при смене значения
const onScroll = () => { if (!raf) raf = requestAnimationFrame(apply); };
apply();
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll, { passive: true });
return () => { if (raf) cancelAnimationFrame(raf); window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); };
}, []);
// На reveal-страницах шапка (лого + CTA) скрыта на первом экране и появляется при скролле вниз.
const activeScroll = revealOnScroll ? revealed : scrolled;
const barActive = revealOnScroll ? revealed : true;
const [menuOpen, setMenuOpen] = React.useState(false);
// Попап с формой открылся — мобильное меню закрываем, иначе оно останется под ним.
React.useEffect(() => {
const close = () => setMenuOpen(false);
window.addEventListener("ds-form-open", close);
return () => window.removeEventListener("ds-form-open", close);
}, []);
// Нижняя мобильная CTA прячется, когда форма «Контакты» уже на экране —
// чтобы не перекрывать собственную кнопку формы и не дублировать действие.
const [atContact, setAtContact] = React.useState(false);
React.useEffect(() => {
const el = document.getElementById("Контакты");
if (!el) return;
const obs = new IntersectionObserver(
([e]) => setAtContact(e.isIntersecting),
{ rootMargin: "0px 0px -35% 0px" }
);
obs.observe(el);
return () => obs.disconnect();
}, []);
const bottomVisible = activeScroll && !menuOpen && !atContact;
return (
<>
{/* desktop nav */}
{!hideNav && (
)}
{ctaLabel || DS_CTA.short}
{/* mobile burger */}
{!hideNav && (
)}
{/* mobile fullscreen menu */}
{!hideNav && menuOpen && (
{
/* Закрываем меню когда кликнули по ссылке или кнопке внутри:
тогда пользователь сразу видит, куда его перенесло (форма, раздел) */
if (e.target.closest("a, button")) setMenuOpen(false);
}}
style={{
position: "fixed", inset: 0, zIndex: 200,
background: DS_THEME.bg,
display: "flex", flexDirection: "column",
padding: "24px clamp(20px, 5vw, 40px)",
}}>
{DS_CTA.primary}
)}
{/* Мобильная нижняя CTA — крупная, «под пальцем». Появляется при скролле,
прячется когда форма «Контакты» на экране. Видима только на мобиле (CSS).
На юр-страницах (оферта/политика/privacy/VOP) скрыта: там нет секции
id="Контакты", поэтому плашка не пряталась бы и перекрывала текст внизу,
плюс её ссылка вела бы в никуда. См. hideBottomCta. */}
{!hideBottomCta && (
{ctaLabel || DS_CTA.short}
)}
);
}
// sticky CTA removed — header already has a fixed CTA
// ---------- Footer ----------
function DSFooter({ hideNav = false }) {
return (
);
}
function FooterCol({ title, items }) {
return (