import { useState, useEffect } from "react"

export function ParallaxBackground() {
  const [scrollY, setScrollY] = useState(0)

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY)
    window.addEventListener("scroll", handleScroll, { passive: true })
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  return (
    <div className="fixed inset-0 pointer-events-none overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-b from-[#252e2e] via-[#1a2222] to-[#141a1a]" />

      <div
        className="absolute w-[800px] h-[800px] rounded-full bg-amber-900/[0.03] blur-[100px]"
        style={{
          top: "5%",
          left: "-20%",
          transform: `translateY(${scrollY * 0.08}px)`,
        }}
      />
      <div
        className="absolute w-[600px] h-[600px] rounded-full bg-rose-950/[0.04] blur-[80px]"
        style={{
          top: "35%",
          right: "-10%",
          transform: `translateY(${scrollY * 0.12}px)`,
        }}
      />
      <div
        className="absolute w-[500px] h-[500px] rounded-full bg-amber-800/[0.025] blur-[60px]"
        style={{
          top: "65%",
          left: "10%",
          transform: `translateY(${scrollY * 0.06}px)`,
        }}
      />
      <div
        className="absolute w-[400px] h-[400px] rounded-full bg-teal-900/[0.03] blur-[70px]"
        style={{
          bottom: "10%",
          right: "20%",
          transform: `translateY(${scrollY * 0.1}px)`,
        }}
      />

      <div className="absolute inset-0 opacity-[0.15] mix-blend-soft-light bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1Ii8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI2EpIi8+PC9zdmc+')]" />

      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,transparent_0%,rgba(10,14,14,0.4)_100%)]" />
    </div>
  )
}
