import React from 'react';

const LiquidBackground: React.FC<{ isLoggedOut?: boolean }> = ({ isLoggedOut }) => {
  return (
    <div className="fixed inset-0 z-[-2] overflow-hidden bg-[#050505]">
      {/* Background Texture - High-end subtle noise */}
      <div 
        className="absolute inset-0 opacity-[0.05] grayscale mix-blend-overlay"
        style={{
          backgroundImage: `url('https://images.unsplash.com/photo-1614850523296-d8c1af93d400?q=80&w=2070&auto=format&fit=crop')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center'
        }}
      ></div>

      {/* The Red Liquid Blob (Pulse) */}
      <div className="absolute top-[-20%] left-[-10%] w-[80%] h-[80%] bg-red-950/40 rounded-full mix-blend-screen filter blur-[120px] animate-[pulse_8s_ease-in-out_infinite]"></div>
      
      {/* The White Liquid Blob (Bounce) */}
      <div className="absolute bottom-[-20%] right-[-10%] w-[70%] h-[70%] bg-white/5 rounded-full mix-blend-screen filter blur-[140px] animate-[bounce_12s_ease-in-out_infinite]"></div>
      
      {/* The Thick Frost Overlay */}
      <div className={`absolute inset-0 z-[-1] backdrop-blur-[100px] transition-colors duration-1000 ${isLoggedOut ? 'bg-black/90' : 'bg-black/60'}`}></div>
    </div>
  );
};

export default LiquidBackground;