"use client";

import { useState } from "react";
import Image from "next/image";
import factoryImg from "../../public/assets/factory/factory.webp";
import Link from "next/link";

export default function FactoryMovingImage() {
  const [transform, setTransform] = useState(
    "translate3d(0px,0px,0px) scale(1.05)"
  );

  const handleMouseMove = (
    e: React.MouseEvent<HTMLDivElement>
  ) => {
    const rect = e.currentTarget.getBoundingClientRect();

    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    const moveX = (x / rect.width - 0.5) * 30;
    const moveY = (y / rect.height - 0.5) * 30;

    setTransform(
      `translate3d(${-moveX}px, ${-moveY}px, 0px) scale(1.05)`
    );
  };

  const handleMouseLeave = () => {
    setTransform(
      "translate3d(0px,0px,0px) scale(1.05)"
    );
  };

  return (
    <div className="max-w-7xl mx-auto lg:px-0 px-4 pb-5 lg:pb-10">
      <div className="relative w-full overflow-hidden rounded-3xl">
        <Link href={'/plants/sq-electricals-mirsarai'}>
           {/* Top Gradient Line */}
        <div
          className="absolute top-0 left-0 right-0 h-[2px] z-20"
          style={{
            background:
              "linear-gradient(90deg, transparent, #f97316, #fb923c, #f97316, transparent)",
          }}
        />

        <div
          className="
            relative
            h-[300px]
            sm:h-[400px]
            md:h-[500px]
            lg:h-[700px]
            overflow-hidden
            cursor-pointer
          "
          onMouseMove={handleMouseMove}
          onMouseLeave={handleMouseLeave}
        >
          <Image
            src={factoryImg}
            alt="SQ Electricals Factory"
            fill
            priority
            className="object-cover transition-transform duration-200 ease-out"
            style={{
              transform,
            }}
          />

          <div className="absolute bottom-4 left-4 lg:bottom-8 lg:left-8 z-10">
           <div
              className="
                inline-flex
                items-center
                gap-2
                px-4
                py-2
                rounded-full
                text-[10px]
                sm:text-xs
                font-semibold
                tracking-widest
                uppercase
                bg-white
                border
                border-[#136317]
                text-[#136317]
                backdrop-blur-md
              "
            >
              <span
                className="
                  w-2
                  h-2
                  rounded-full
                  animate-pulse
                  bg-[#136317]
                "
              />

              <span>
                SQ Industrial Park National Special Economic Zone · Mirsarai
              </span>
            </div>
          </div>
        </div>

        <div
          className="absolute bottom-0 left-0 right-0 h-[2px] z-20"
          style={{
            background:
              "linear-gradient(90deg, transparent, #f97316, #fb923c, #f97316, transparent)",
          }}
        />
        </Link>
      </div>
    </div>
  );
}