// Reusable in-flow CTA banner and a mobile-only sticky CTA bar.
// Both invoke the same openCallback() handler passed from App.
// In-flow banner: full-bleed strip, Borderless palette.
// `variant`: 'dark' (default, charcoal) | 'light' (cream)
function CTABanner({ lang, openCallback, variant = 'dark', kicker, title, body, cta }) {
const t = (ru, en) => (lang === 'ru' ? ru : en);
const dark = variant === 'dark';
return (
// `dark-section` makes `.display em` render in the brand-book beige
// (rgba(255,232,192,.85)) instead of dark green — unreadable on #191C1F
// (Nastya, 11.06). Applies to the dark variant only.
{kicker && (
– {kicker}
)}
{title}
{body && (
{body}
)}
);
}
// Mobile-only sticky CTA bar – appears once user scrolls past hero.
function StickyCTA({ lang, openCallback }) {
const t = (ru, en) => (lang === 'ru' ? ru : en);
const [visible, setVisible] = React.useState(false);
React.useEffect(() => {
const onScroll = () => {
// Show after scrolling past first viewport height
setVisible(window.scrollY > window.innerHeight * 0.65);
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
<>