import React from 'react';
import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import Home from './pages/Home';
import Portal from './pages/Portal';
import LockliPrivacy from './pages/LockliPrivacy';
import PasswordManagerDetail from './pages/PasswordManagerDetail';

import { AnimatePresence } from 'framer-motion';

function AnimatedRoutes() {
  const location = useLocation();

  return (
    <AnimatePresence mode="wait">
      <Routes location={location} key={location.pathname}>
        <Route path="/" element={<Home />} />
        <Route path="/portal" element={<Portal />} />
        
        <Route path="/lockli/privacy" element={<LockliPrivacy />} />

        <Route path="/projects/lockli" element={<PasswordManagerDetail />} /> 
      </Routes>
    </AnimatePresence>
  );
}

function App() {
  return (
    <Router>
      <AnimatedRoutes />
    </Router>
  );
}

export default App;