import { cn } from "@/lib/utils";
import { WhatsApp } from "@/components/ui/icons";

const CallToActionWp = () => {
  return (
    <a
      href="https://api.whatsapp.com/send?phone=5491169103637&text=Hola!%20Quiero%20realizar%20una%20consulta"
      target="_blank"
      rel="noopener noreferrer"
      className="fixed bottom-4 right-4 w-[min(20%,5.625rem)] h-auto z-10 group text-white hover:text-[#25D366]"
    >
      <div className="pointer-events-none absolute top-1/2 -translate-y-[5%] left-1/2 w-[min(100%,5.625rem)] aspect-square opacity-40">
        {["[animation-delay:0s]", "[animation-delay:0.4s]", "[animation-delay:0.8s]"].map((className) => (
          <div
            className={cn("border border-[#25D366] rounded-full size-full absolute animate-waves opacity-0", className)}
            key={className}
          />
        ))}
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 101" fill="none" className="w-full relative">
        <g filter="url(#filter0_d_4820_1012)">
          <path
            d="M49.3654 0C73.8127 0 93.631 19.8184 93.631 44.2656C93.631 54.5138 90.1462 63.9468 84.3 71.4492L87.3303 82.7568C88.4741 87.0257 84.5678 90.9319 80.299 89.7881L64.9982 85.6875C60.137 87.5231 54.8692 88.5312 49.3654 88.5312C24.9181 88.5312 5.09979 68.7129 5.09979 44.2656C5.09985 19.8184 24.9182 3.76247e-05 49.3654 0Z"
            className="fill-[#25D366] group-hover:fill-white transition-colors"
          />
        </g>
        <defs>
          <filter
            id="filter0_d_4820_1012"
            x="-1.14441e-05"
            y="0"
            width="98.7309"
            height="100.189"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feColorMatrix
              in="SourceAlpha"
              type="matrix"
              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
              result="hardAlpha"
            />
            <feOffset dy="5.0998" />
            <feGaussianBlur stdDeviation="2.5499" />
            <feComposite in2="hardAlpha" operator="out" />
            <feColorMatrix type="matrix" values="0 0 0 0 0.558333 0 0 0 0 0.558333 0 0 0 0 0.558333 0 0 0 0.25 0" />
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4820_1012" />
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4820_1012" result="shape" />
          </filter>
        </defs>
      </svg>
      <WhatsApp className="w-[min(80%_3.125rem)] absolute top-1/2 left-1/2 -translate-x-[45%] -translate-y-[65%]" />
    </a>
  );
};

export default CallToActionWp;