REXNT/src/Components/Sections/Departments/Departments.jsx

import React, { useRef } from "react";
import {
  motion,
  useMotionValue,
  useSpring,
  useTransform,
  useScroll,
  useVelocity,
} from "framer-motion";
import { useNavigate } from "react-router-dom";

import d1 from "../../../../src/assets/Images/d1.jpeg";
import d7 from "../../../../src/assets/Images/d7.jpeg";
import d14 from "../../../../src/assets/Images/d14.jpg";
import d17 from "../../../../src/assets/Images/d17.png";
import d18 from "../../../../src/assets/Images/d18.jpg";
import d19 from "../../../../src/assets/Images/d19.jpeg";
import d20 from "../../../../src/assets/Images/d20.jpeg";
import d21 from "../../../../src/assets/Images/d21.jpeg";
import d22 from "../../../../src/assets/Images/d22.jpg";

const departments = [
  { id: 1, title: "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج", image: d1 },
  { id: 2, title: "قسم تنفيذ المرافق السكنية والخدمية", image: d7 },
  { id: 3, title: "قسم اعادة تأهيل وصيانة المباني", image: d14 },
  { id: 4, title: "قسم محطات الوقود وصيانة المنشآت النفطية", image: d17 },
  { id: 5, title: "قسم التفتيش والفحص الفني والهندسي", image: d18 },
  { id: 6, title: "قسم المشاريع الاستراتيجية", image: d19 },
  { id: 7, title: "قسم الاعمال المعدنية والدعم الصناعي", image: d20 },
  { id: 8, title: "قسم الخدمات والدعم اللوجستي", image: d21 },
  { id: 9, title: "قسم الاتمتة والتحكم", image: d22 },
];

function DepartmentCard({ dept, offset }) {
  const navigate = useNavigate();
  const wrapperRef = useRef(null);

  const rotateX = useMotionValue(0);
  const rotateY = useMotionValue(0);
  const scale = useMotionValue(1);

  const rx = useSpring(rotateX, { stiffness: 180, damping: 22 });
  const ry = useSpring(rotateY, { stiffness: 180, damping: 22 });
  const s = useSpring(scale, { stiffness: 180, damping: 24 });

  const titleZ = useTransform(s, [1, 1.05], [0, 36]);

  const onMove = (e) => {
    if (!wrapperRef.current) return;
    const rect = wrapperRef.current.getBoundingClientRect();
    const x = (e.clientX - rect.left - rect.width / 2) / rect.width;
    const y = (e.clientY - rect.top - rect.height / 2) / rect.height;

    rotateY.set(-x * 28);
    rotateX.set(y * 12);
    scale.set(1.05);
  };

  const onLeave = () => {
    rotateX.set(0);
    rotateY.set(0);
    scale.set(1);
  };

  const { scrollY, scrollYProgress } = useScroll({ target: wrapperRef });
  const velocity = useVelocity(scrollY);
  const smoothVelocity = useSpring(velocity, {
    stiffness: 600,
    damping: 90,
  });

  const velocityParallax = useTransform(
    smoothVelocity,
    [-3000, 0, 3000],
    [-45, 0, 45]
  );

  const progressParallax = useTransform(scrollYProgress, [0, 1], [15, -15]);

  const y = useTransform([velocityParallax, progressParallax], ([v, p]) => v + p);

  const handleClick = () => {
     if (dept.id === 5) {
      navigate("/department-detail5");
    }
     if (dept.id === 4) {
      navigate("/department-detail4");
    }
    if (dept.id === 3) {
      navigate("/department-detail3");
    } else if (dept.id === 2) {
      navigate("/department-detail2");
    } 
  };

  return (
    <div
      ref={wrapperRef}
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      style={{ perspective: 1400 }}
      className={`relative w-full ${offset}`}
    >
      <div className="absolute bottom-6 right-[-32px] z-40 pointer-events-none max-w-xs">
        <motion.span
          style={{ translateZ: titleZ }}
          className="block text-2xl md:text-3xl font-extrabold leading-snug
                     text-white drop-shadow-lg
                     bg-gradient-to-tr from-black/60 via-black/30 to-transparent
                     px-3 py-1 rounded-lg"
        >
          {dept.title}
        </motion.span>
      </div>

      <motion.img
        src={dept.image}
        alt={dept.title}
        draggable={false}
        onClick={handleClick}
        style={{
          rotateX: rx,
          rotateY: ry,
          scale: s,
          y,
          transformStyle: "preserve-3d",
          boxShadow: "0 18px 50px rgba(2,6,23,0.12), 0 6px 18px rgba(2,6,23,0.06)",
        }}
        // مهم: لا تضع خلفية صلبة هنا — اجعلها نصف شفافة حتى يظهر الكانفس وراءها
        className="cursor-pointer w-full h-96 object-cover rounded-2xl
                   bg-white/20 backdrop-blur-md border border-white/10"
      />
    </div>
  );
}

export default function Departments() {
  return (
    // لا تضف أي خلفية هنا — دع الكانفس العالمي يظهر
    <section className="min-h-screen text-black bg-transparent" dir="rtl">
      <header className="max-w-6xl mx-auto px-6 pt-12 relative z-20">
        <h1 className="text-5xl font-extrabold text-transparent bg-clip-text
                       bg-gradient-to-r from-[#041c40] via-[#57acd9] to-[#041c40]
                       drop-shadow-lg">
          أقسامنا
        </h1>
      </header>

      <main className="max-w-6xl mx-auto px-6 py-20 relative z-20">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-48">
          {departments.map((dept, index) => (
            <motion.div
              key={dept.id}
              initial={{ opacity: 0, y: 24 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: false, amount: 0.25 }}
              transition={{
                duration: 0.7,
                ease: "easeOut",
                delay: index * 0.06,
              }}
            >
              <DepartmentCard
                dept={dept}
                offset={index % 2 === 0 ? "" : "md:translate-y-16"}
              />
            </motion.div>
          ))}
        </div>
      </main>
    </section>
  );
}