const App = () => {
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    const timer = setTimeout(() => {
      setLoading(false);
    }, 1300);

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

  React.useEffect(() => {
    // (Re)render icons whenever the React tree updates.
    if (window.lucide) window.lucide.createIcons();
  });

  return (
    <>
      {loading && (
        <div className="site-preloader">
          <div className="site-preloader__inner">
            <img
              className="site-preloader__logo"
              src="assets/stonecrest-logo-footer-transparent.png"
              alt="Stonecrest Recruiting"
            />

            <div className="site-preloader__line">
              <span></span>
            </div>

            <p>Curating provider talent</p>
          </div>
        </div>
      )}

      <div className={`site-shell ${loading ? "is-loading" : "is-loaded"}`}>
        <Nav />
        <Hero />
        <TrustBand />
        <Approach />
        <Specialties />
        <ProviderRoster />
        <Testimonial />
        <LeadCapture />
        <CTABand />
        <Footer />
      </div>
    </>
  );
};

ReactDOM.createRoot(document.getElementById("app")).render(<App />);