import { motion } from "framer-motion";

export default function FloatingBoxes() {
  const items = [
    { name: "Voz", position: "top-10 left-10" },
    { name: "WhatsApp", position: "top-20 right-10" },
    { name: "Email", position: "bottom-20 left-10" },
    { name: "SMS", position: "bottom-10 right-10" },
  ];

  return (
    <div className="relative w-full h-screen">
      {items.map((item, index) => (
        <motion.div
          key={index}
          className={`absolute ${item.position} w-24 h-24 bg-white rounded-2xl shadow-xl flex items-center justify-center font-bold text-sm`}
          initial={{ y: 0 }}
          animate={{ y: [0, -10, 0] }}
          transition={{
            duration: 2 + index,
            repeat: Infinity,
            ease: "easeInOut",
          }}
        >
          {item.name}
        </motion.div>
      ))}
    </div>
  );
}