// SannaTrip — Concierge pill (floating WhatsApp contact)
// A premium concierge touchpoint in SannaTrip's palette — deliberately NOT the
// stock green WhatsApp bubble. Navy ground, ivory text, pink accent on hover.
// The WhatsApp glyph is monochrome (currentColor) so the channel is recognizable
// without borrowing the green discount-widget branding.
const CONCIERGE_WA_NUMBER = '17864310881'; // +1 786 431 0881
// Monochrome WhatsApp glyph — inherits the surrounding ink via currentColor.
function WhatsAppGlyph({ size = 18 }) {
return (
);
}
function ConciergePill({ lang }) {
const copy = COPY[lang] || COPY.en;
const c = copy.concierge;
const [mounted, setMounted] = React.useState(false); // gentle entrance gate
const [hover, setHover] = React.useState(false);
const [atForm, setAtForm] = React.useState(false); // Apply section on screen
// Subtle delayed entrance (fade + scale-in), no loud bounce.
React.useEffect(() => {
const t = setTimeout(() => setMounted(true), 350);
return () => clearTimeout(t);
}, []);
// Politely retreat while the Apply form is visible so the pill can never
// cover its bottom-right submit CTA on any viewport.
React.useEffect(() => {
const el = document.getElementById('apply');
if (!el || typeof IntersectionObserver === 'undefined') return;
const io = new IntersectionObserver(
([entry]) => setAtForm(entry.isIntersecting),
{ rootMargin: '0px 0px -35% 0px', threshold: 0 }
);
io.observe(el);
return () => io.disconnect();
}, []);
const open = () => {
const url = `https://wa.me/${CONCIERGE_WA_NUMBER}?text=${encodeURIComponent(c.waMessage)}`;
window.open(url, '_blank', 'noopener,noreferrer');
};
const visible = mounted && !atForm;
return (
);
}
Object.assign(window, { ConciergePill });