import React from 'react';
import { useOceanDepthEffect } from '@/lib/hooks/useOceanDepthEffect';

export const OceanBackground: React.FC = () => {
  const scrollDepth = useOceanDepthEffect();

  return (
    <div className="fixed inset-0 pointer-events-none">
      {/* Couche de base : dégradé océanique naturel de surface vers profondeur */}
      <div className="absolute inset-0 bg-gradient-to-b from-banquise-blue-lightest via-banquise-blue-light via-banquise-blue to-banquise-blue-dark"></div>
      
      {/* Couche d'assombrissement progressif basé sur le scroll */}
      <div 
        className="absolute inset-0 bg-gradient-to-b from-transparent via-banquise-blue-dark/40 to-slate-900/80 transition-opacity duration-700 ease-out"
        style={{ 
          opacity: scrollDepth * 0.8,
          transform: `translateY(${scrollDepth * 20}%)` 
        }}
      />
      
      {/* Couche de profondeur extrême pour les abysses */}
      <div 
        className="absolute inset-0 bg-gradient-to-b from-transparent via-slate-800/60 to-slate-950 transition-opacity duration-1000 ease-out"
        style={{ 
          opacity: Math.max(0, (scrollDepth - 0.4) * 1.5),
          transform: `translateY(${scrollDepth * 30}%)` 
        }}
      />
      
      {/* Rayons de lumière naturels qui s'estompent avec la profondeur */}
      <div 
        className="absolute inset-0 transition-opacity duration-1000"
        style={{ opacity: Math.max(0.2, 1 - scrollDepth * 1.2) }}
      >
        <div className="absolute top-0 left-0 w-full h-1/3 bg-gradient-to-br from-banquise-blue-lightest/15 via-transparent to-transparent" />
        <div className="absolute top-0 right-0 w-full h-1/4 bg-gradient-to-bl from-banquise-blue-lightest/10 via-transparent to-transparent" />
        <div className="absolute top-0 left-1/3 w-1 h-full bg-gradient-to-b from-banquise-blue-lightest/25 via-banquise-blue-lightest/5 to-transparent animate-ocean-shimmer" />
        <div className="absolute top-0 left-2/3 w-1 h-full bg-gradient-to-b from-banquise-blue-lightest/20 via-banquise-blue-lightest/3 to-transparent animate-ocean-shimmer delay-1000" />
      </div>
      
      {/* Bulles marines qui deviennent plus rares en profondeur */}
      <div className="absolute inset-0">
        {/* Bulles de surface - nombreuses et actives */}
        <div 
          className="absolute transition-opacity duration-700"
          style={{ opacity: Math.max(0.3, 1 - scrollDepth * 0.8) }}
        >
          <div className="absolute top-[10%] left-[15%] w-3 h-3 bg-banquise-blue-lightest/30 rounded-full animate-bubble-float" />
          <div className="absolute top-[20%] left-[75%] w-2 h-2 bg-banquise-blue-lightest/25 rounded-full animate-bubble-float-fast delay-300" />
          <div className="absolute top-[25%] left-[40%] w-4 h-4 bg-banquise-blue-lightest/20 rounded-full animate-bubble-float-slow delay-600" />
          <div className="absolute top-[35%] left-[80%] w-2 h-2 bg-banquise-blue-lightest/35 rounded-full animate-bubble-float delay-900" />
        </div>
        
        {/* Bulles de moyenne profondeur - moins nombreuses */}
        <div 
          className="absolute transition-opacity duration-700"
          style={{ opacity: Math.max(0.1, 0.6 - scrollDepth * 0.8) }}
        >
          <div className="absolute top-[50%] left-[25%] w-2 h-2 bg-banquise-blue-light/20 rounded-full animate-bubble-float-slow delay-1200" />
          <div className="absolute top-[60%] left-[70%] w-1.5 h-1.5 bg-banquise-blue-light/15 rounded-full animate-bubble-float delay-1500" />
          <div className="absolute top-[65%] left-[45%] w-3 h-3 bg-banquise-blue-light/10 rounded-full animate-bubble-float-fast delay-1800" />
        </div>
        
        {/* Bulles des profondeurs - très rares et subtiles */}
        <div 
          className="absolute transition-opacity duration-1000"
          style={{ opacity: Math.max(0, 0.3 - scrollDepth * 0.6) }}
        >
          <div className="absolute top-[80%] left-[20%] w-1 h-1 bg-banquise-blue/10 rounded-full animate-bubble-float-slow delay-2100" />
          <div className="absolute top-[85%] left-[60%] w-1.5 h-1.5 bg-banquise-blue/8 rounded-full animate-bubble-float delay-2400" />
          <div className="absolute top-[90%] left-[35%] w-1 h-1 bg-banquise-blue/5 rounded-full animate-bubble-float-fast delay-2700" />
        </div>
      </div>
      
      {/* Effet de caustics (reflets de lumière sous l'eau) qui disparaît en profondeur */}
      <div 
        className="absolute inset-0 transition-opacity duration-1000"
        style={{ opacity: Math.max(0, 0.4 - scrollDepth * 0.7) }}
      >
        <div className="absolute top-0 left-0 w-full h-full opacity-20">
          <div className="absolute top-[10%] left-[20%] w-32 h-1 bg-gradient-to-r from-transparent via-banquise-blue-lightest/40 to-transparent transform rotate-12 animate-ocean-shimmer" />
          <div className="absolute top-[30%] left-[60%] w-24 h-1 bg-gradient-to-r from-transparent via-banquise-blue-lightest/30 to-transparent transform -rotate-6 animate-ocean-shimmer delay-2000" />
          <div className="absolute top-[50%] left-[10%] w-40 h-1 bg-gradient-to-r from-transparent via-banquise-blue-lightest/20 to-transparent transform rotate-3 animate-ocean-shimmer delay-4000" />
        </div>
      </div>
    </div>
  );
};