/* global React, WA, TG, MAX, PHONE_TEL */
const { useState, useEffect, useRef } = React;
// Reusable "Message us" button that opens a popover with WhatsApp / Telegram / Max
// Supports two variants: 'accent' (yellow) and 'white'.
function MessengerButton({ label = 'Написать в мессенджер', variant = 'white', size = 'lg' }) {
const [open, setOpen] = useState(false);
const wrapRef = useRef(null);
useEffect(() => {
if (!open) return;
function onDoc(e) {
if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
}
function onEsc(e) { if (e.key === 'Escape') setOpen(false); }
document.addEventListener('mousedown', onDoc);
document.addEventListener('keydown', onEsc);
return () => {
document.removeEventListener('mousedown', onDoc);
document.removeEventListener('keydown', onEsc);
};
}, [open]);
const opts = [
{ id: 'wa', name: 'WhatsApp', sub: 'ответим за 15 минут', href: WA, color: '#25D366', icon: (
)},
{ id: 'tg', name: 'Telegram', sub: '@veselkin_lubertsy', href: TG, color: '#229ED9', icon: (
)},
{ id: 'max', name: 'MAX', sub: 'мессенджер', href: MAX, color: '#FF7A2F', icon: (
)},
];
const btnClass = variant === 'accent' ? 'btn btn--accent' : variant === 'primary' ? 'btn btn--primary' : 'btn btn--white';
const sizeClass = size === 'lg' ? ' btn--lg' : size === 'sm' ? ' btn--sm' : '';
return (
{open && (
)}
);
}
Object.assign(window, { MessengerButton });