"use client"; // ✅ Fix for Client Component

import React, { useState } from "react";

const ProjectsDelivered = () => {
  const [offsetX, setOffsetX] = useState(0);
  const [offsetY, setOffsetY] = useState(0);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const { innerWidth, innerHeight } = window;
    const maxOffset = 50; // Maximum movement range

    let x = ((e.clientX / innerWidth - 0.5) * 2 * maxOffset); // X-axis movement
    let y = ((e.clientY / innerHeight - 0.5) * 2 * maxOffset); // Y-axis movement

    // Limit movement within boundaries
    x = Math.max(-maxOffset, Math.min(maxOffset, x));
    y = Math.max(-maxOffset, Math.min(maxOffset, y));

    setOffsetX(x);
    setOffsetY(y);
  };

  return (
    <div className="relative py-14 md:py-32 h-full w-full overflow-hidden bg-black" onMouseMove={handleMouseMove}>
      {/* Background Image */}
      <div className="absolute top-0 left-0 w-full h-full bg-cover bg-center transition-transform duration-200" style={{ backgroundImage: "url('images/country_map.png')", transform: `translate(${offsetX}px, ${offsetY}px)`,}}/>

      <div className="relative max-w-[1200px] mx-auto px-4">
        <div className="text-center">
          <h2 data-aos="zoom-in" className="text-[30px] md:text-[52px] font-bold text-[#FFF] Manrope">Core Values</h2>
        </div>

        <div className="relative flex flex-wrap justify-center gap-6 py-16">
          {[
            { title: "People", desc: "We design responsive websites that adapt to any device, including mobile, tablet and computer and we always focus on search engine ranking, seeking maximum profitability for our customers." },
            { title: "Customers", desc: "We are located in the USA and India also. Of course, we expand our service to clients from all around the world." },
            { title: "Quality", desc: "Fruxinfo is a web design agency where quality is produced for our clients. Do not hesitate to contact qualitative web services." },
          ].map((item, index) => (
            <div key={index} className="bg-white p-6 w-64 h-60 rounded-lg shadow-lg transition-transform duration-300 hover:scale-105">
              <h3 className="text-lg font-bold">{item.title}</h3>
              <p className="text-sm text-gray-600">{item.desc}</p>
            </div>
          ))}
        </div>

        {/* <div className="flex justify-center mt-5">
          <a href="">
            <div className="Custome_Orange_button font-bold px-6 py-2">Explore More</div>
          </a>
        </div> */}
      </div>
    </div>
  );
};

export default ProjectsDelivered;
