import React, { useState, Suspense } from 'react';
import { ReactFlowProvider } from 'reactflow';
import { Sparkles } from 'lucide-react';
import LandingPage from './components/LandingPage';

// Lazy load the heavy builder component to improve initial load performance
const Builder = React.lazy(() => import('./components/Builder'));

// Loading screen fallback for Suspense
const LoadingScreen = () => (
  <div className="fixed inset-0 bg-slate-950 flex items-center justify-center text-white z-50">
     <div className="flex flex-col items-center gap-4">
        <Sparkles className="animate-spin text-blue-500" size={32} />
        <p className="text-slate-400 text-sm animate-pulse font-medium">Loading Builder Environment...</p>
     </div>
  </div>
);

const App = () => {
  const [showLanding, setShowLanding] = useState(true);

  if (showLanding) {
    return <LandingPage onEnterApp={() => setShowLanding(false)} />;
  }

  return (
    <ReactFlowProvider>
      <Suspense fallback={<LoadingScreen />}>
        <Builder onBackToHome={() => setShowLanding(true)} />
      </Suspense>
    </ReactFlowProvider>
  );
};

export default App;