"use client";
import { useRef, useState } from "react";
import { motion } from "framer-motion";

export function RealityDistortionCard() {
  const cardRef = useRef<HTMLDivElement>(null);
  const [mouse, setMouse] = useState({ x: 0, y: 0 });

  return (
    <div className="flex items-center justify-center w-full h-[500px] bg-[url('https://images.unsplash.com/photo-1550684848-fac1c5b4e853?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center rounded-xl border border-border relative overflow-hidden">
      
      <svg className="hidden">
        <filter id="distortionFilter">
          <feTurbulence type="fractalNoise" baseFrequency="0.015" numOctaves="3" result="noise" />
          <feDisplacementMap in="SourceGraphic" in2="noise" scale="20" xChannelSelector="R" yChannelSelector="G" />
        </filter>
      </svg>

      <motion.div
        ref={cardRef}
        onMouseMove={(e) => {
          if (!cardRef.current) return;
          const rect = cardRef.current.getBoundingClientRect();
          setMouse({
            x: e.clientX - rect.left,
            y: e.clientY - rect.top,
          });
        }}
        className="w-80 h-96 rounded-2xl relative flex flex-col justify-end p-6 border border-white/20 shadow-2xl overflow-hidden group cursor-crosshair"
        style={{
          background: "rgba(255, 255, 255, 0.05)",
          backdropFilter: "blur(10px)",
        }}
      >
        <div 
          className="absolute inset-0 z-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none mix-blend-overlay"
          style={{
            background: `radial-gradient(300px circle at ${mouse.x}px ${mouse.y}px, rgba(255,255,255,0.8), transparent 40%)`,
            filter: "url(#distortionFilter)",
          }}
        />
        <div className="relative z-10 pointer-events-none">
          <h3 className="text-2xl font-bold text-white mb-2 tracking-tight">Reality Distortion</h3>
          <p className="text-white/80">Move your cursor to witness the fabric of reality bend through the glass.</p>
        </div>
      </motion.div>
    </div>
  );
}