"use client";

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

export function AdvancedTransitions() {
  const { scrollY } = useScroll();
  const smoothScroll = useSpring(scrollY, {
    damping: 50,
    stiffness: 100,
    mass: 1,
  });

  // Parallax effects
  const y1 = useTransform(smoothScroll, [0, 1000], [0, -200]);
  const y2 = useTransform(smoothScroll, [0, 1000], [0, -100]);
  const opacity = useTransform(scrollY, [0, 300], [1, 0]);

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

      {/* Foreground parallax */}
      <motion.div
        className="fixed inset-0 -z-10 pointer-events-none"
        style={{ y: y2, opacity }}
      >
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.03)_0%,transparent_50%)]" />
      </motion.div>
    </>
  );
}






