"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 { OceanBackground } from '@/components/ui/OceanBackground';
import { useTranslation } from '@/lib/hooks/useTranslation';
import { useServiceModal } from '@/lib/hooks/useServiceModal';
import { useAccordion } from '@/lib/hooks/useAccordion';

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

  return (
    <div className="min-h-screen relative overflow-x-hidden">
      {/* Navigation */}
      <ModernNavigation 
        translations={t.navigation}
        languageSwitcher={
          <ModernLanguageSwitcher 
            currentLanguage={currentLanguage}
            onLanguageChange={changeLanguage}
            availableLanguages={availableLanguages}
          />
        }
      />
      
      {/* Hero Section avec motif de grille */}
      <section 
        className="relative bg-grid-pattern"
        style={{
          background: 'linear-gradient(to bottom, var(--banquise-slate-50), var(--banquise-blue-50))',
          backgroundImage: 'linear-gradient(rgba(31, 80, 120, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 80, 120, 0.03) 1px, transparent 1px)',
          backgroundSize: '30px 30px'
        }}
      >
        <HeroSection translations={t.hero} />
      </section>

      {/* Services Section avec transition subtile */}
      <section 
        className="section-transition"
        style={{ backgroundColor: 'var(--banquise-white)' }}
      >
        <div 
          className="py-4"
          style={{
            background: 'linear-gradient(to right, transparent, rgba(52, 166, 252, 0.1), transparent)'
          }}
        ></div>
        <ServicesSection 
          services={t.services}
          onServiceClick={openServiceModal}
          translations={t.common}
        />
      </section>

      {/* Tech Features Section avec motif de grille */}
      <section 
        className="section-transition"
        style={{
          backgroundColor: 'var(--banquise-slate-50)',
          backgroundImage: 'linear-gradient(rgba(31, 80, 120, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 80, 120, 0.03) 1px, transparent 1px)',
          backgroundSize: '30px 30px'
        }}
      >
        <TechFeaturesSection />
      </section>

      {/* About Section avec transition moderne */}
      <section 
        className="section-transition"
        style={{ backgroundColor: 'var(--banquise-white)' }}
      >
        <div 
          className="py-4"
          style={{
            background: 'linear-gradient(to right, transparent, rgba(52, 166, 252, 0.08), transparent)'
          }}
        ></div>
        <AboutSection 
          openAccordion={openAccordion}
          toggleAccordion={toggleAccordion}
        />
      </section>      {/* Footer - Même couleur que navbar */}
      <Footer />

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