"use client"
import React from 'react';
import { ModernNavigation } from '@/components/layout/ModernNavigation';
import { HeroSection } from '@/components/sections/HeroSection';
import { ServicesSection } from '@/components/sections/ServicesSection';
import { TechFeaturesSection } from '@/components/sections/TechFeaturesSection';
import { AboutSection } from '@/components/sections/AboutSection';
import { Footer } from '@/components/layout/Footer';
import { Popup } from '@/components/ui/Popup';
import { ScrollToTopButton } from '@/components/ui/ScrollToTopButton';
import { ModernLanguageSwitcher } from '@/components/ui/ModernLanguageSwitcher';
import { useTranslation } from '@/lib/hooks/useTranslation';
import { useServiceModal } from '@/lib/hooks/useServiceModal';
import { useAccordion } from '@/lib/hooks/useAccordion';
import { useOceanDepthEffect } from '@/lib/hooks/useOceanDepthEffect';

export default function HomePage() {
  const { t, currentLanguage, changeLanguage, availableLanguages } = useTranslation();
  const { selectedService, openServiceModal, closeServiceModal } = useServiceModal();
  const { openAccordion, toggleAccordion } = useAccordion();
  const scrollDepth = useOceanDepthEffect();

  return (
    <div className="min-h-screen relative overflow-x-hidden">
      {/* Arrière-plan océanique uniforme avec assombrissement progressif basé sur le scroll */}
      <div className="fixed inset-0 pointer-events-none">
        {/* Dégradé principal océanique - Surface (clair) vers abysses (très sombre) */}
        <div className="absolute inset-0 bg-gradient-to-b from-banquise-blue-light via-banquise-blue via-banquise-blue-dark to-banquise-blue-dark"></div>
        
        {/* Couche de profondeur progressive basée sur le scroll - Plus intense */}
        <div 
          className="absolute inset-0 bg-gradient-to-b from-transparent via-banquise-blue-dark/60 to-banquise-blue-dark transition-opacity duration-500"
          style={{ opacity: scrollDepth * 0.9 }}
        ></div>
        
        {/* Effet de profondeur supplémentaire pour les moyennes profondeurs - Plus sombre */}
        <div 
          className="absolute inset-0 bg-gradient-to-b from-transparent via-banquise-blue-dark/70 to-banquise-blue-dark transition-opacity duration-500"
          style={{ opacity: Math.max(0, (scrollDepth - 0.2) * 1.5) }}
        ></div>
        
        {/* Assombrissement pour les grandes profondeurs - Plus intense */}
        <div 
          className="absolute inset-0 bg-gradient-to-b from-transparent via-banquise-blue-dark/80 to-slate-900 transition-opacity duration-500"
          style={{ opacity: Math.max(0, (scrollDepth - 0.5) * 2) }}
        ></div>
        
        {/* Assombrissement final pour les abysses - Très sombre */}
        <div 
          className="absolute inset-0 bg-gradient-to-b from-banquise-blue-dark/50 to-slate-900 transition-opacity duration-500"
          style={{ opacity: Math.max(0, (scrollDepth - 0.7) * 2.5) }}
        ></div>
        
        {/* Rayons de lumière subtils qui percent l'eau depuis la surface */}
        <div className="absolute inset-0 bg-gradient-to-br from-banquise-blue-lightest/4 via-transparent to-transparent"></div>
        <div className="absolute inset-0 bg-gradient-to-bl from-transparent via-banquise-blue-lightest/2 to-transparent"></div>
        
        {/* Effet de scintillement subtil avec animations océaniques */}
        <div className="absolute inset-0">
          <div className="absolute top-0 left-1/4 w-px h-full bg-gradient-to-b from-banquise-blue-lightest/20 via-banquise-blue-lightest/8 to-transparent animate-ocean-shimmer"></div>
          <div className="absolute top-0 left-2/3 w-px h-full bg-gradient-to-b from-banquise-blue-lightest/15 via-banquise-blue-lightest/6 to-transparent animate-ocean-shimmer delay-1000"></div>
          <div className="absolute top-0 left-3/4 w-px h-full bg-gradient-to-b from-banquise-blue-lightest/10 via-banquise-blue-lightest/4 to-transparent animate-ocean-shimmer delay-2000"></div>
        </div>
        
        {/* Particules flottantes (bulles) pour l'effet sous-marin avec animations variées */}
        <div className="absolute inset-0">
          {/* Bulles réparties sur toute la hauteur pour l'effet océanique continu */}
          <div className="absolute top-1/6 left-1/5 w-2 h-2 bg-banquise-blue-lightest/20 rounded-full animate-bubble-float"></div>
          <div className="absolute top-1/4 left-3/4 w-1 h-1 bg-banquise-blue-lightest/15 rounded-full animate-bubble-float-fast delay-500"></div>
          <div className="absolute top-1/3 left-1/3 w-3 h-3 bg-banquise-blue-lightest/10 rounded-full animate-bubble-float-slow"></div>
          <div className="absolute top-1/2 left-4/5 w-1.5 h-1.5 bg-banquise-blue-lightest/18 rounded-full animate-bubble-float delay-1000"></div>
          <div className="absolute top-2/3 left-1/6 w-2.5 h-2.5 bg-banquise-blue-lightest/8 rounded-full animate-bubble-float-slow delay-1500"></div>
          <div className="absolute top-3/4 left-2/3 w-1 h-1 bg-banquise-blue-lightest/22 rounded-full animate-bubble-float-fast delay-700"></div>
          <div className="absolute top-5/6 left-1/2 w-1.5 h-1.5 bg-banquise-blue-lightest/12 rounded-full animate-bubble-float delay-300"></div>
          <div className="absolute top-11/12 left-3/5 w-2 h-2 bg-banquise-blue-lightest/6 rounded-full animate-bubble-float-slow delay-2000"></div>
          
          {/* Bulles supplémentaires pour un effet plus dense */}
          <div className="absolute top-1/8 left-1/2 w-1.5 h-1.5 bg-banquise-blue-lightest/25 rounded-full animate-bubble-float-fast delay-800"></div>
          <div className="absolute top-3/8 left-1/8 w-2 h-2 bg-banquise-blue-lightest/12 rounded-full animate-bubble-float delay-1200"></div>
          <div className="absolute top-5/8 left-7/8 w-1 h-1 bg-banquise-blue-lightest/20 rounded-full animate-bubble-float-slow delay-600"></div>
          <div className="absolute top-7/8 left-1/4 w-2.5 h-2.5 bg-banquise-blue-lightest/8 rounded-full animate-bubble-float-fast delay-1800"></div>
          <div className="absolute top-1/7 left-5/6 w-1 h-1 bg-banquise-blue-lightest/28 rounded-full animate-bubble-float delay-400"></div>
          <div className="absolute top-2/7 left-2/5 w-1.5 h-1.5 bg-banquise-blue-lightest/15 rounded-full animate-bubble-float-slow delay-900"></div>
          <div className="absolute top-4/7 left-3/8 w-2 h-2 bg-banquise-blue-lightest/10 rounded-full animate-bubble-float-fast delay-1400"></div>
          <div className="absolute top-6/7 left-4/5 w-1 h-1 bg-banquise-blue-lightest/18 rounded-full animate-bubble-float delay-200"></div>
          
          {/* Bulles très petites pour densité */}
          <div className="absolute top-1/10 left-3/10 w-0.5 h-0.5 bg-banquise-blue-lightest/30 rounded-full animate-bubble-float-fast delay-100"></div>
          <div className="absolute top-3/10 left-7/10 w-0.5 h-0.5 bg-banquise-blue-lightest/25 rounded-full animate-bubble-float delay-1100"></div>
          <div className="absolute top-7/10 left-1/10 w-0.5 h-0.5 bg-banquise-blue-lightest/20 rounded-full animate-bubble-float-slow delay-1700"></div>
          <div className="absolute top-9/10 left-9/10 w-0.5 h-0.5 bg-banquise-blue-lightest/15 rounded-full animate-bubble-float-fast delay-2200"></div>
          
          {/* Bulles moyennes pour variation */}
          <div className="absolute top-1/5 left-4/7 w-3 h-3 bg-banquise-blue-lightest/5 rounded-full animate-bubble-float-slow delay-1600"></div>
          <div className="absolute top-2/5 left-6/7 w-2.5 h-2.5 bg-banquise-blue-lightest/7 rounded-full animate-bubble-float delay-800"></div>
          <div className="absolute top-4/5 left-2/7 w-3.5 h-3.5 bg-banquise-blue-lightest/4 rounded-full animate-bubble-float-slow delay-2400"></div>
        </div>
      </div>
      
      {/* Contenu principal avec arrière-plan océanique uniforme */}
      <div className="relative z-10 text-white">
        {/* Navigation flottante */}
        <ModernNavigation 
          translations={t.navigation}
          languageSwitcher={
            <ModernLanguageSwitcher 
              currentLanguage={currentLanguage}
              onLanguageChange={changeLanguage}
              availableLanguages={availableLanguages}
            />
          }
        />
        
        {/* Section Hero - Surface de l'océan */}
        <HeroSection translations={t.hero} />
        
        {/* Section Services */}
        <ServicesSection 
          services={t.services} 
          onServiceClick={openServiceModal}
          translations={t.common}
        />
        
        {/* Section TechFeatures */}
        <TechFeaturesSection />
        
        {/* Section About */}
        <AboutSection openAccordion={openAccordion} toggleAccordion={toggleAccordion} />
        
        {/* Footer */}
        <Footer />
      </div>

      {/* UI Components */}
      <ScrollToTopButton />
      
      {selectedService && (
        <Popup 
          service={selectedService} 
          onClose={closeServiceModal}
          translations={t.common}
        />
      )}
    </div>
  );
}