"use client";

import Image from "next/image";
import { motion, useReducedMotion } from "framer-motion";

export function FloatingDelivery() {
  const shouldReduce = useReducedMotion();

  return (
    <motion.div
      className="pointer-events-none select-none absolute right-[4%] xl:right-[8%] top-1/2 -translate-y-1/2 hidden lg:block w-[180px] xl:w-[220px] z-0"
      animate={shouldReduce ? undefined : { y: [0, -8, 0] }}
      transition={{ duration: 6, ease: "easeInOut", repeat: Infinity }}
    >
      <Image
        src="/images/nearle-redesign/delivery-doorstep.webp"
        alt=""
        width={220}
        height={220}
        className="w-full h-auto object-contain opacity-80"
        aria-hidden="true"
      />
    </motion.div>
  );
}