import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';
import CreateEvent from './components/CreateEvent';
import EventPoll from './components/EventPoll';
import AnalyticsDashboard from './components/AnalyticsDashboard';

function Layout() {
  return (
    <div className="min-h-screen bg-slate-50 flex flex-col items-center p-4 sm:p-6 font-sans text-slate-900">
      <header className="w-full max-w-2xl flex justify-between items-center py-6 mb-8">
        <div className="text-xl font-bold tracking-tight text-slate-900 flex items-center gap-2">
          <span className="w-8 h-8 rounded-lg bg-primary text-white flex items-center justify-center font-serif italic text-lg shadow-stripe">e</span>
          eventy
        </div>
      </header>
      <main className="w-full max-w-2xl relative z-10">
        <Outlet />
      </main>
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<Layout />}>
          <Route path="/" element={<CreateEvent />} />
          <Route path="/event/:id" element={<EventPoll />} />
          <Route path="/event/:id/analytics" element={<AnalyticsDashboard />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;