import { lazy, Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'
import DeployPage from './pages/DeployPage'

// Lazy load the sign-in page (includes Three.js - large bundle)
const SignInPage = lazy(() => import('./components/ui/sign-in-flow-1').then(m => ({ default: m.SignInPage })))

// Loading fallback for lazy-loaded routes
const PageLoader = () => (
  <div className="min-h-screen bg-black flex items-center justify-center">
    <div className="animate-pulse text-white/50">Loading...</div>
  </div>
)

function App() {
  return (
    <Routes>
      <Route path="/" element={<DeployPage />} />
      <Route 
        path="/auth" 
        element={
          <Suspense fallback={<PageLoader />}>
            <SignInPage />
          </Suspense>
        } 
      />
    </Routes>
  )
}

export default App