"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import Image from "next/image";


const Homepage = () => {
  const [overlayVisible, setOverlayVisible] = useState(false);
  const [rotationAngle, setRotationAngle] = useState(0);

  const handleLearnMoreClick = () => {
    setOverlayVisible(true);
  };

  const closeOverlay = () => {
    setOverlayVisible(false);
  };

  const rotateLeft = () => {
    setRotationAngle(rotationAngle - 72);
  };

  const rotateRight = () => {
    setRotationAngle(rotationAngle + 72);
  };

  // Button data array with dynamic positions
  const buttons = [
    { color: "#DDA73A", image: BT1 },
    { color: "#59BA48", image: BT2 },
    { color: "#F26A2D", image: BT3 },
    { color: "#126A9F", image: BT4 },
    { color: "#C5192D", image: BT5 },
  ];

      {/* Overlay */}
      {overlayVisible && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 0.8 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 1 }}
          className="fixed top-0 left-0 w-full h-full bg-black z-[1000] flex items-center justify-center"
        >
          {/* Overlay Content */}
          <motion.div
            initial={{ scale: 3 }}
            animate={{ scale: 1 }}
            className="text-white flex justify-center items-center h-screen"
          >
            <div className="relative">
              {buttons.map((button, index) => (
                <motion.button
                  key={index}
                  className={`absolute bg-[${button.color}] text-2xl font-semibold rounded-full focus:outline-none focus:ring-2 focus:ring-[#f3bd1b] flex justify-center items-center`}
                  style={{
                    width: "140px",
                    height: "140px",
                    top: "50%",
                    left: "50%",
                    transform: `translate(-50%, -50%) rotate(${
                      index * 72 + rotationAngle
                    }deg) translateX(180px) rotate(${
                      -index * 72 - rotationAngle
                    }deg)`,
                  }}
                >
                  <Image src={button.image} alt={`Button ${index + 1}`} />
                </motion.button>
              ))}
            </div>
            <div className="flex flex-row gap-6">
              <div onClick={rotateLeft} className="cursor-pointer">
                ←
              </div>
              <div onClick={closeOverlay} className="cursor-pointer">
                X
              </div>
              <div onClick={rotateRight} className="cursor-pointer">
                →
              </div>
            </div>
          </motion.div>
        </motion.div>

I’m seeking to enhance the visual experience of the motion button by implementing a gradual, frame-by-frame rotation transition. This approach aims to achieve a smooth and natural rotation effect, ensuring that the button’s movement appears seamless and visually appealing to users. The goal is to simulate a smooth, continuous motion that enhances the overall user experience by avoiding abrupt changes in orientation and instead providing a more fluid and engaging interaction with the button.