import { MessageCircle } from 'lucide-react';
import { motion } from 'framer-motion';

export default function FloatingWhatsApp() {
  // Coloque aqui o número do seu WhatsApp com DDI (Ex: 5511999999999)
  const whatsappNumber = "5511999999999";
  const defaultMessage = "Olá! Tenho uma dúvida sobre o kit Festa Mágica IA.";
  const url = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(defaultMessage)}`;

  return (
    <motion.a
      href={url}
      target="_blank"
      rel="noopener noreferrer"
      className="fixed bottom-6 right-6 z-50 flex items-center justify-center w-14 h-14 bg-emerald-500 text-white rounded-full shadow-[0_0_20px_rgba(16,185,129,0.3)] hover:bg-emerald-400 hover:scale-110 transition-all duration-300 group"
      initial={{ opacity: 0, scale: 0 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ delay: 1, duration: 0.5, type: 'spring' }}
    >
      <MessageCircle className="w-7 h-7" />
      
      {/* Tooltip */}
      <div className="absolute right-full mr-4 top-1/2 -translate-y-1/2 px-4 py-2 bg-indigo-950 border border-indigo-800 text-white font-medium text-sm whitespace-nowrap rounded-lg opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity drop-shadow-xl shadow-2xl">
        Fale com nosso suporte
        <div className="absolute right-[-5px] top-1/2 -translate-y-1/2 w-2 h-2 bg-indigo-950 border-r border-t border-indigo-800 rotate-45" />
      </div>
    </motion.a>
  );
}