import React, { useState } from 'react';
import { Navigation } from './components/layout/Navigation';
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 { ParallaxBackground } from './components/ui/ParallaxBackground';
import { LanguageSwitcher } from './components/ui/LanguageSwitcher';
import { useTranslation } from './hooks/useTranslation';
import type { Service } from './types/service';

const App: React.FC = () => {
  const { t, currentLanguage, changeLanguage, availableLanguages } = useTranslation();
  const [selectedService, setSelectedService] = useState<Service | null>(null);
  const [openAccordion, setOpenAccordion] = useState<string | null>(null);

  const toggleAccordion = (title: string) => {
    setOpenAccordion(openAccordion === title ? null : title);
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-banquise-blue-dark via-banquise-blue-dark/95 to-banquise-blue-dark text-white overflow-x-hidden relative">
      {/* Background Effects */}
      <ParallaxBackground />
      
      {/* Main Content */}
      <div className="relative z-10">
        {/* Navigation avec sélecteur de langue */}
        <Navigation 
          translations={t.navigation}
          languageSwitcher={
            <LanguageSwitcher 
              currentLanguage={currentLanguage}
              onLanguageChange={changeLanguage}
              availableLanguages={availableLanguages}
            />
          }
        />
        
        <HeroSection translations={t.hero} />
        
        <ServicesSection 
          services={t.services} 
          onServiceClick={setSelectedService}
          translations={t.common}
        />
        
        <TechFeaturesSection />
        <AboutSection openAccordion={openAccordion} toggleAccordion={toggleAccordion} />
        <Footer />
      </div>

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

export default App;