import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import LandingPage from './pages/LandingPage';
import LoginPage from './pages/LoginPage';
import ForgotPasswordPage from './pages/ForgotPasswordPage';

function App() {
  return (
    <Router>
      <div className="relative min-h-screen bg-deep-forest overflow-hidden">
        {/* Background System - Fixed layers with proper z-index */}
        <div 
          aria-hidden="true" 
          role="presentation"
          className="pointer-events-none fixed inset-0 z-0 bg-pennyzo bg-cover bg-fixed bg-center"
        />
        <div 
          aria-hidden="true" 
          role="presentation"
          className="pointer-events-none fixed inset-0 z-[1] bg-gradient-to-br from-deep-forest/70 via-deep-forest/50 to-rich-brown/40"
        />
        
        {/* Animated Background Elements - Decorative only */}
        <div 
          aria-hidden="true" 
          role="presentation"
          className="pointer-events-none fixed top-1/4 left-1/4 z-[2] w-96 h-96 bg-luxury-gold/5 rounded-full blur-3xl animate-float"
        />
        <div 
          aria-hidden="true" 
          role="presentation"
          className="pointer-events-none fixed bottom-1/4 right-1/4 z-[2] w-80 h-80 bg-bronze/5 rounded-full blur-3xl animate-float" 
          style={{ animationDelay: '2s' }}
        />
        <div 
          aria-hidden="true" 
          role="presentation"
          className="pointer-events-none fixed top-1/2 left-1/2 z-[2] w-64 h-64 bg-brass/5 rounded-full blur-3xl animate-float -translate-x-1/2 -translate-y-1/2" 
          style={{ animationDelay: '4s' }}
        />

        {/* Main Content - Highest z-index for interactivity */}
        <main className="relative z-10 min-h-screen">
          <Routes>
            <Route path="/" element={<Navigate to="/login" replace />} />
            <Route path="/home" element={<LandingPage />} />
            <Route path="/login" element={<LoginPage />} />
            <Route path="/forgot-password" element={<ForgotPasswordPage />} />
          </Routes>
        </main>
      </div>
    </Router>
  );
}

export default App;