import { useState, useEffect } from 'react';

export const useOceanDepthEffect = () => {
  const [scrollDepth, setScrollDepth] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      const scrollPosition = window.scrollY;
      const documentHeight = document.documentElement.scrollHeight - window.innerHeight;
      
      if (documentHeight <= 0) {
        setScrollDepth(0);
        return;
      }
      
      // Calcul de la profondeur avec courbe d'accélération naturelle
      const rawPercentage = Math.min(scrollPosition / documentHeight, 1);
      
      // Courbe d'easing pour un effet plus naturel de descente océanique
      // Plus on descend, plus l'assombrissement s'accélère (comme dans l'océan réel)
      const easedDepth = rawPercentage < 0.5 
        ? 2 * rawPercentage * rawPercentage 
        : 1 - Math.pow(-2 * rawPercentage + 2, 3) / 2;
      
      setScrollDepth(Math.min(easedDepth, 1));
    };

    window.addEventListener('scroll', handleScroll, { passive: true });
    handleScroll(); // Initial call

    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return scrollDepth;
};