import { useState } from "react";
import { AnimatePresence } from "framer-motion";
import Navigation from "@/components/Navigation";
import FloatingElements from "@/components/FloatingElements";
import MistClouds from "@/components/MistClouds";
import SmokeEffect from "@/components/SmokeEffect";
import HomeSection from "@/components/sections/HomeSection";
import AboutSection from "@/components/sections/AboutSection";
import ContactSection from "@/components/sections/ContactSection";

const Index = () => {
  const [activeSection, setActiveSection] = useState("home");

  const renderSection = () => {
    switch (activeSection) {
      case "home":
        return <HomeSection />;
      case "about":
        return <AboutSection />;
      case "kontak":
        return <ContactSection />;
      default:
        return <HomeSection />;
    }
  };

  return (
    <div className="relative min-h-screen overflow-hidden">
      {/* Background effects */}
      <FloatingElements />
      <MistClouds />
      <SmokeEffect />
      
      {/* Navigation */}
      <Navigation 
        activeSection={activeSection} 
        setActiveSection={setActiveSection} 
      />
      
      {/* Content */}
      <main className="relative z-10">
        <AnimatePresence mode="wait">
          {renderSection()}
        </AnimatePresence>
      </main>
    </div>
  );
};

export default Index;