"use client";

import { useEffect } from "react";
import { useScroll, useTransform, useSpring } from "framer-motion";
import { motion } from "framer-motion";

export function AdvancedScrollEffects() {
  const { scrollYProgress } = useScroll();
  const smoothProgress = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    mass: 0.5,
  });

  // Parallax layers with different speeds
  const backgroundY = useTransform(smoothProgress, [0, 1], [0, -200]);
  const midgroundY = useTransform(smoothProgress, [0, 1], [0, -100]);
  const foregroundY = useTransform(smoothProgress, [0, 1], [0, -50]);

  // Rotation based on scroll
  const rotation = useTransform(smoothProgress, [0, 1], [0, 360]);

  // Scale effect
  const scale = useTransform(smoothProgress, [0, 0.5, 1], [1, 1.1, 1]);

  return (
    <>
      {/* Background parallax layer */}
      <motion.div
        className="fixed inset-0 -z-20 pointer-events-none"
        style={{ y: backgroundY }}
      >
        <div className="absolute inset-0 bg-gradient-to-b from-black via-gray-950 to-black" />
      </motion.div>

      {/* Midground parallax layer */}
      <motion.div
        className="fixed inset-0 -z-10 pointer-events-none"
        style={{ y: midgroundY, scale }}
      >
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(255,255,255,0.05)_0%,transparent_50%)]" />
      </motion.div>

      {/* Foreground parallax layer */}
      <motion.div
        className="fixed inset-0 -z-[5] pointer-events-none"
        style={{ y: foregroundY }}
      >
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,rgba(255,255,255,0.03)_0%,transparent_50%)]" />
      </motion.div>

      {/* Rotating decorative element */}
      <motion.div
        className="fixed top-1/4 right-1/4 w-96 h-96 -z-[5] pointer-events-none opacity-5"
        style={{ rotate: rotation }}
      >
        <div className="w-full h-full border border-white rounded-full" />
      </motion.div>
    </>
  );
}






