import React, { useState, useEffect } from "react";
import "./i18n";
import Navbar from "./Components/Nav/Navbar";
import Home from "./Components/Sections/Home/Home";
import Services from "./Components/Sections/Services/Services";
import About from "./Components/Sections/About/About";
import Contact from "./Components/Sections/Contact/Contact";
import ImagePreloader from "./Components/ImagePreloader";
import Footer from "./Components/Nav/Footer";
import BackgroundCanvas from "./Components/BackgroundCanvas/BackgroundCanvas";
import "./App.css";

const App = () => {
  const [theme, setTheme] = useState("light");
useEffect(() => {
  console.log("Current theme:", theme);
  console.log("HTML has dark class:", document.documentElement.classList.contains('dark'));
  
  const canvas = document.querySelector('.background-canvas');
  if (canvas) {
    console.log("Canvas found:", canvas);
    console.log("Canvas dimensions:", canvas.width, "x", canvas.height);
    console.log("Canvas position:", canvas.style.position);
    console.log("Canvas z-index:", canvas.style.zIndex);
  } else {
    console.log("Canvas NOT found!");
  }
}, [theme]);

  useEffect(() => {
    const savedTheme = localStorage.getItem("theme");
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    
    if (savedTheme === "dark" || (!savedTheme && prefersDark)) {
      setTheme("dark");
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
      setTheme("light");
    }
  }, []);

  const toggleTheme = () => {
    const newTheme = theme === "light" ? "dark" : "light";
    setTheme(newTheme);
    
    if (newTheme === "dark") {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
    
    localStorage.setItem("theme", newTheme);
  };

  return (
    <ImagePreloader>
      <div className="relative min-h-screen bg-transparent">
        <BackgroundCanvas theme={theme} />
        <div className="relative z-10">
          <div className="min-h-screen bg-transparent">
            <div className="flex flex-col min-h-screen">
              <Navbar toggleTheme={toggleTheme} currentTheme={theme} />
              <main className="flex-grow">
                {/* <Home /> */}
                <Services />
                <About theme={theme} />
                <Contact />
              </main>
              
              <Footer />
            </div>
          </div>
        </div>
      </div>
    </ImagePreloader>
  );
};

export default App;