// WhatsApp — floating contact widget pinned bottom-right.
// Tap to open a small card with quick-start message options that deep-link
// into WhatsApp with the text prefilled.
const WA_PHONE = "601170068801"; // no '+' for wa.me
const WA_DISPLAY = "+60 11-7006 8801";
const WA_QUICK = [
{
label: "Schedule a 30-min intro call",
kind: "INTRO",
msg: "Hi Promefy — I'd like to book a 30-minute intro call to discuss a project.",
},
{
label: "I have a project to scope",
kind: "SCOPE",
msg: "Hi Promefy — I have a project in mind and would like to discuss scoping options.",
},
{
label: "Question about your services",
kind: "Q&A",
msg: "Hi Promefy — I have a question about your services.",
},
];
function WhatsAppIcon({ size = 22, color = "currentColor" }) {
return (
);
}
function Whatsapp() {
const [open, setOpen] = React.useState(false);
const [hint, setHint] = React.useState(true); // initial nudge bubble
const panelRef = React.useRef(null);
// Dismiss the initial hint after a few seconds
React.useEffect(() => {
const t = setTimeout(() => setHint(false), 4500);
return () => clearTimeout(t);
}, []);
// Close on outside click + Esc
React.useEffect(() => {
if (!open) return;
const onDown = (e) => {
if (panelRef.current && !panelRef.current.contains(e.target)) setOpen(false);
};
const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
setTimeout(() => document.addEventListener("mousedown", onDown), 0);
document.addEventListener("keydown", onKey);
return () => {
document.removeEventListener("mousedown", onDown);
document.removeEventListener("keydown", onKey);
};
}, [open]);
const openWA = (msg) => {
const url = `https://wa.me/${WA_PHONE}?text=${encodeURIComponent(msg)}`;
window.open(url, "_blank", "noopener,noreferrer");
setOpen(false);
};
return (
<>
{/* Initial nudge speech-bubble, shown once */}
{!open && hint && (
{ setHint(false); setOpen(true); }}
>
Need answers fast?
Chat with us on WhatsApp.
{/* arrow */}
)}
{/* Panel */}
{open && (
{/* Header — WhatsApp green */}
Promefy
Typically replies within hours
{/* Body */}
{/* Greeting bubble */}
👋 Hi! Pick a quick-start or send a custom message.