const FloatingContact = () => {
    const [isOpen, setIsOpen] = React.useState(false);

    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="https://wa.me/306940686867" 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="mailto:info@villanevas.com" 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="tel:+306940686867" 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 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">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 />);