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 { Background } from './components/ui/Background';
import { SERVICES_DATA } from './shared/data/services';
import { useAccordion } from './shared/hooks';
import type { IService } from './shared/types';

const App: React.FC = () => {
  const [selectedService, setSelectedService] = useState<IService | null>(null);
  const { openAccordion, toggleAccordion } = useAccordion();

  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 */}
      <Background />
      
      {/* Main Content */}
      <div className="relative z-10">
        <Navigation />
        <HeroSection />
        <ServicesSection services={SERVICES_DATA} onServiceClick={setSelectedService} />
        <TechFeaturesSection />
        <AboutSection openAccordion={openAccordion} toggleAccordion={toggleAccordion} />
        <Footer />
      </div>

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

export default App;