import { motion } from "motion/react";
import { Button } from "./ui/button";
import { Phone } from "lucide-react";

export function FloatingCallButton() {
  return (
    <motion.div
      className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-50"
      initial={{ scale: 0, opacity: 0 }}
      animate={{ scale: 1, opacity: 1 }}
      transition={{
        delay: 1,
        type: "spring",
        stiffness: 200,
        damping: 20,
      }}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
    >
      <div className="relative bg-gradient-to-r from-green-500 to-green-600 rounded-full shadow-xl border-2 sm:border-4 border-white/30">
        <Button
          size="lg"
          className="bg-transparent hover:bg-white/10 border-0 px-3 py-2 sm:px-4 sm:py-2 h-auto rounded-full"
          onClick={() => {
            // Opens dialpad directly on mobile
            window.location.href = "tel:+917477247488";
          }}
        >
          <div className="mr-1 sm:mr-2">
            <Phone className="h-4 w-4 sm:h-5 sm:w-5 text-white" />
          </div>
          <div className="text-white text-left">
            <div className="text-xs sm:text-sm font-bold">Call to Book</div>
            <div className="text-xs opacity-90">7477247488</div>
          </div>
        </Button>

        {/* Simple pulse animation */}
        <motion.div
          className="absolute inset-0 rounded-full bg-green-400/50"
          animate={{
            scale: [1, 1.5, 1],
            opacity: [0.7, 0, 0.7],
          }}
          transition={{
            duration: 2,
            repeat: Infinity,
            ease: "easeInOut",
          }}
        />
      </div>
    </motion.div>
  );
}