'use client';

/**
 * HeroFluidBackground — ShineCode
 *
 * Isolated, cursor-reactive fluid background effect for the Hero section.
 * - Buttery smooth spring-interpolated 3D parallax wave motion
 * - Soft brand-accent organic blobs (#CC2949 brand glow & subtle champagne warmth)
 * - Massive blur-[120px] and low opacity (10-15%) ensuring zero clash with text
 * - Pure GPU acceleration using Framer Motion springs (zero re-render lag)
 * - 100% isolated inside an absolute -z-10 container
 */

import React, { useEffect } from 'react';
import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion';

export function HeroFluidBackground() {
  // Raw cursor position relative to viewport center
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);

  // Buttery-smooth spring physics
  const springConfig = { damping: 30, stiffness: 60, mass: 1 };
  const smoothX = useSpring(mouseX, springConfig);
  const smoothY = useSpring(mouseY, springConfig);

  // Parallax multipliers for multi-depth 3D wave effect
  const blob1X = useTransform(smoothX, (x) => x * -0.06);
  const blob1Y = useTransform(smoothY, (y) => y * -0.06);

  const blob2X = useTransform(smoothX, (x) => x * 0.045);
  const blob2Y = useTransform(smoothY, (y) => y * 0.045);

  const blob3X = useTransform(smoothX, (x) => x * -0.03);
  const blob3Y = useTransform(smoothY, (y) => y * 0.035);

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      const { innerWidth, innerHeight } = window;
      // Center coordinates (-0.5 to +0.5 of viewport)
      mouseX.set(e.clientX - innerWidth / 2);
      mouseY.set(e.clientY - innerHeight / 2);
    };

    window.addEventListener('mousemove', handleMouseMove, { passive: true });
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, [mouseX, mouseY]);

  return (
    <div className="absolute inset-0 overflow-hidden pointer-events-none -z-10 select-none">
      {/* ── Blob 1: Primary Brand Accent Glow (#CC2949) Top-Left ── */}
      <motion.div
        style={{ x: blob1X, y: blob1Y }}
        className="absolute -top-20 -left-20 w-[480px] h-[480px] sm:w-[560px] sm:h-[560px] rounded-full bg-brand-500/12 dark:bg-brand-500/18 blur-[100px] sm:blur-[130px]"
      />

      {/* ── Blob 2: Warm Rose / Luxury Gold Accent Glow Bottom-Right ── */}
      <motion.div
        style={{ x: blob2X, y: blob2Y }}
        className="absolute top-1/3 -right-24 w-[520px] h-[520px] sm:w-[620px] sm:h-[620px] rounded-full bg-rose-500/10 dark:bg-rose-400/12 blur-[110px] sm:blur-[140px]"
      />

      {/* ── Blob 3: Subtle Champagne Amber Center Floating Ambient ── */}
      <motion.div
        style={{ x: blob3X, y: blob3Y }}
        className="absolute bottom-10 left-1/3 w-[400px] h-[400px] sm:w-[480px] sm:h-[480px] rounded-full bg-amber-500/8 dark:bg-amber-400/10 blur-[90px] sm:blur-[120px]"
      />
    </div>
  );
}

export default HeroFluidBackground;