import { Routes, Route, useLocation } from 'react-router-dom'
import Navbar from './components/Navbar'
import Footer from './components/Footer'
import LandingPage from './pages/LandingPage'
import LoginPage from './pages/LoginPage'
import SignupPage from './pages/SignupPage'
import DashboardPage from './pages/DashboardPage'
import GridViewPage from './pages/GridViewPage'
import ROICalculatorPage from './pages/ROICalculatorPage'
import AuditPage from './pages/AuditPage'
import AboutPage from './pages/AboutPage'
import PricingPage from './pages/PricingPage'

function App() {
  const location = useLocation()
  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      <main className="flex-grow">
        <div key={location.pathname} className="page-transition">
          <Routes location={location}>
          <Route path="/" element={<LandingPage />} />
          <Route path="/login" element={<LoginPage />} />
          <Route path="/signup" element={<SignupPage />} />
          <Route path="/dashboard" element={<DashboardPage />} />
          <Route path="/grid" element={<GridViewPage />} />
          <Route path="/roi" element={<ROICalculatorPage />} />
          <Route path="/audit" element={<AuditPage />} />
          <Route path="/about" element={<AboutPage />} />
          <Route path="/pricing" element={<PricingPage />} />
          </Routes>
        </div>
      </main>
      <Footer />
    </div>
  )
}

export default App