import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import MissionHubs from './pages/MissionHubs';
import PartnershipBuilder from './pages/PartnershipBuilder';
import AccountabilityDashboard from './pages/AccountabilityDashboard';
import AlternativeMetrics from './pages/AlternativeMetrics';
import IndigenousVoices from './pages/IndigenousVoices';
import DeliberationTool from './pages/DeliberationTool';

function App() {
  return (
    <Router basename="/">
      <div className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900">
        <Navbar />
        <main className="container mx-auto px-4 py-8">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/missions" element={<MissionHubs />} />
            <Route path="/partnerships" element={<PartnershipBuilder />} />
            <Route path="/accountability" element={<AccountabilityDashboard />} />
            <Route path="/metrics" element={<AlternativeMetrics />} />
            <Route path="/indigenous" element={<IndigenousVoices />} />
            <Route path="/deliberation" element={<DeliberationTool />} />
          </Routes>
        </main>
        <footer className="bg-gradient-to-r from-indigo-900 to-purple-900 text-white py-10 mt-16">
          <div className="container mx-auto px-4 text-center">
            <p className="text-2xl font-bold mb-2">NextGen SDG Platform - Nexus for Systems Missions (N4SM)</p>
            <p className="mt-2 text-indigo-200 text-lg">Transforming the Sustainable Development Goals for a Better Future</p>
            <div className="mt-6 flex justify-center space-x-6">
              <a href="#" className="text-indigo-200 hover:text-white transition-colors">Privacy Policy</a>
              <a href="#" className="text-indigo-200 hover:text-white transition-colors">Terms of Service</a>
              <a href="#" className="text-indigo-200 hover:text-white transition-colors">Contact</a>
            </div>
          </div>
        </footer>
      </div>
    </Router>
  );
}

export default App;