import { useEffect, useState } from "react";
import "./App.css";
import Header from "./components/Header";
import Hero from "./components/Hero";
import About from "./components/About";
import Stats from "./components/Stats";
import FAQ from "./components/FAQ";
import Service from "./components/Service";
import Testimonial from "./components/Testimonial";
import Team from "./components/Team";
import Footer from "./components/Footer";
import Contact from "./components/Contact";
import Loader from "./components/Loader"; // Import your loader

function App() {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // Simulate a delay to mimic DOM or data readiness
    const timer = setTimeout(() => {
      setIsLoading(false);
    }, 1000); // You can reduce this if needed

    return () => clearTimeout(timer);
  }, []);

  if (isLoading) {
    return <Loader />; // Show loader while waiting
  }

  return (
    <>
      <Header />

      <section id="home">
        <Hero />
      </section>

      <section id="stats">
        <Stats />
      </section>

      <section id="about">
        <About />
      </section>

      <section id="services">
        <Service />
      </section>

      <section id="testimonials">
        <Testimonial />
      </section>

      <section id="team">
        <Team />
      </section>

      <section id="faq">
        <FAQ />
      </section>

      <section id="contact">
        <Contact />
      </section>

        <Footer />
    </>
  );
}

export default App;
