"use client";

import * as React from "react";
import { motion, useScroll, useTransform } from "motion/react";

export function ParallaxLayers() {
  const { scrollY } = useScroll();
  const ySlow = useTransform(scrollY, [0, 800], [0, 20]);
  const yMed = useTransform(scrollY, [0, 800], [0, 40]);
  const yFast = useTransform(scrollY, [0, 800], [0, 60]);

  return (
    <div aria-hidden className="pointer-events-none fixed inset-0 -z-10">
      {/* Layer 1: subtle grid */}
      <motion.div
        className="absolute inset-0 opacity-[0.06] bg-grid-dark"
        style={{ y: ySlow }}
      />
      {/* Layer 2: diagonal stripes */}
      <motion.div
        className="absolute inset-0 opacity-[0.05] bg-stripes-dark"
        style={{ y: yMed }}
      />
      {/* Layer 3: soft radial vignette */}
      <motion.div
        className="absolute inset-0"
        style={{ y: yFast }}
      >
        <div
          className="absolute inset-0"
          style={{
            background:
              "radial-gradient(60% 50% at 50% 10%, color-mix(in oklch, var(--color-foreground), transparent 96%) 0%, transparent 100%)",
            opacity: 0.08,
          }}
        />
      </motion.div>
    </div>
  );
}

