portfolio/app/components/ShaderGradientBackground.tsx

"use client";

import React, { useEffect, useState } from "react";
import { ShaderGradientCanvas, ShaderGradient } from "@shadergradient/react";

const ShaderGradientBackground = () => {
  const [supported, setSupported] = useState(true);

  useEffect(() => {
    try {
      const canvas = document.createElement("canvas");
      const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
      if (!gl) setSupported(false);
    } catch {
      setSupported(false);
    }
  }, []);

  if (!supported) return null;

  return (
    <div
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
        zIndex: -1,
        filter: "blur(150px)",
        opacity: 0.65,
        pointerEvents: "none",
      }}
    >
      <ShaderGradientCanvas
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
        }}
      >
        {/* Sphere 1 - Links oben */}
        <ShaderGradient
          control="props"
          type="sphere"
          animate="off"
          brightness={1.3}
          cAzimuthAngle={180}
          cDistance={3.6}
          cPolarAngle={90}
          cameraZoom={1}
          color1="#b01040"
          color2="#b04a17"
          color3="#e167c5"
          positionX={-2.5}
          positionY={1.5}
          positionZ={0}
          rotationX={0}
          rotationY={15}
          rotationZ={50}
          uAmplitude={6.0}
          uDensity={0.8}
          uFrequency={5.5}
          uSpeed={0.5}
          uStrength={5.0}
        />
        
        {/* Sphere 2 - Rechts mitte */}
        <ShaderGradient
          control="props"
          type="sphere"
          animate="off"
          brightness={1.25}
          cAzimuthAngle={180}
          cDistance={3.6}
          cPolarAngle={90}
          cameraZoom={1}
          color1="#e167c5"
          color2="#b01040"
          color3="#b04a17"
          positionX={2.0}
          positionY={-0.5}
          positionZ={-0.5}
          rotationX={0}
          rotationY={25}
          rotationZ={70}
          uAmplitude={5.5}
          uDensity={0.9}
          uFrequency={4.8}
          uSpeed={0.45}
          uStrength={4.8}
        />
        
        {/* Sphere 3 - Unten links */}
        <ShaderGradient
          control="props"
          type="sphere"
          animate="off"
          brightness={1.2}
          cAzimuthAngle={180}
          cDistance={3.6}
          cPolarAngle={90}
          cameraZoom={1}
          color1="#b04a17"
          color2="#e167c5"
          color3="#b01040"
          positionX={-0.5}
          positionY={-2.0}
          positionZ={0.3}
          rotationX={0}
          rotationY={20}
          rotationZ={60}
          uAmplitude={5.8}
          uDensity={0.7}
          uFrequency={6.0}
          uSpeed={0.52}
          uStrength={4.9}
        />
      </ShaderGradientCanvas>
    </div>
  );
};

export default ShaderGradientBackground;