const FloatingContact = () => {
    const [isOpen, setIsOpen] = React.useState(false);
    
    const t = (key, fallback) => {
        return (window.VILLA_TRANSLATIONS && window.VILLA_TRANSLATIONS[key]) ? window.VILLA_TRANSLATIONS[key] : fallback;
    };
    
    const phone = t('business_phone', '[Template / Placeholder]');
    const cleanPhone = phone.replace(/[^0-9]/g, '');
    const email = t('business_email', '[Template / Placeholder]');

    return (
        <div className="fixed bottom-6 right-6 z-50 flex flex-col items-center space-y-4">
            {/* Options */}
            <div className={`flex flex-col space-y-4 items-center transition-all duration-300 origin-bottom ${isOpen ? 'opacity-100 translate-y-0 pointer-events-auto scale-100' : 'opacity-0 translate-y-10 pointer-events-none scale-50'}`}>
                {/* WhatsApp */}
                <a href={cleanPhone ? `https://wa.me/${cleanPhone}` : "#"} target="_blank" className="w-12 h-12 bg-[#111] text-white rounded-full flex items-center justify-center shadow-xl hover:scale-110 transition-transform border border-white/10 group relative">
                    <i className="fab fa-whatsapp text-xl"></i>
                    <span className="absolute right-14 bg-black text-white text-xs px-3 py-1.5 rounded-full opacity-0 transition-opacity whitespace-nowrap border border-white/10 shadow-lg pointer-events-none md:group-hover:opacity-100 tracking-wider font-bold">WhatsApp</span>
                </a>
                {/* Email */}
                <a href={email ? `mailto:${email}` : "#"} className="w-12 h-12 bg-[#111] text-white rounded-full flex items-center justify-center shadow-xl hover:scale-110 transition-transform border border-white/10 group relative">
                    <i className="far fa-envelope text-lg"></i>
                    <span className="absolute right-14 bg-black text-white text-xs px-3 py-1.5 rounded-full opacity-0 transition-opacity whitespace-nowrap border border-white/10 shadow-lg pointer-events-none md:group-hover:opacity-100 tracking-wider font-bold">Email</span>
                </a>
                {/* Direct Call */}
                <a href={phone ? `tel:${phone}` : "#"} className="w-12 h-12 bg-[#111] text-white rounded-full flex items-center justify-center shadow-xl hover:scale-110 transition-transform border border-white/10 group relative">
                    <i className="fas fa-phone-alt text-lg"></i>
                    <span class="absolute right-14 bg-black text-white text-xs px-3 py-1.5 rounded-full opacity-0 transition-opacity whitespace-nowrap border border-white/10 shadow-lg pointer-events-none md:group-hover:opacity-100 tracking-wider font-bold">Call</span>
                </a>
            </div>

            {/* Main Toggle Button */}
            <button
                onClick={() => setIsOpen(!isOpen)}
                className={`w-14 h-14 text-white rounded-full flex items-center justify-center shadow-[0_8px_30px_rgb(0,0,0,0.4)] text-2xl hover:scale-110 transition-all duration-300 z-10 border border-white/20 ${isOpen ? 'rotate-90 bg-[#111]' : 'rotate-0 bg-black'}`}
            >
                <i className={`fas transition-all duration-300 ${isOpen ? 'fa-times' : 'fa-comment-dots'}`}></i>
            </button>
        </div>
    );
};

const contactRoot = ReactDOM.createRoot(document.getElementById('floating-contact-root'));
contactRoot.render(<FloatingContact />);