"use client";

import { motion } from "framer-motion";

export default function ScanlineOverlay() {
  return (
    <div className="pointer-events-none fixed inset-0 z-1 overflow-hidden">
      <div className="absolute inset-0 scanline-bg opacity-40" />

      <motion.div
        className="absolute inset-x-0 h-32"
        style={{
          background:
            "linear-gradient(180deg, transparent 0%, rgba(167, 139, 250, 0.06) 50%, transparent 100%)",
        }}
        animate={{ y: ["-10vh", "110vh"] }}
        transition={{ duration: 12, repeat: Infinity, ease: "linear" }}
      />

      <div
        className="absolute inset-0 opacity-[0.015] mix-blend-overlay"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
          backgroundSize: "200px 200px",
        }}
      />

      <div className="absolute inset-0 vignette" />
    </div>
  );
}