import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Layout from './layouts/Layout';
import LandingPage from './pages/LandingPage';
import AuthPage from './pages/AuthPage';
import OnboardingPage from './pages/OnboardingPage';
import DashboardPage from './pages/DashboardPage';
import ProfilePage from './pages/ProfilePage';
import CanvasPage from './pages/CanvasPage';
import HabitTrackerPage from './pages/HabitTrackerPage';
import SubscriptionPage from './pages/SubscriptionPage';
import SettingsPage from './pages/SettingsPage';
import ClaimPage from './pages/ClaimPage';

function App() {
  return (
    <Router>
      <Routes>
        {/* Public Routes with standard Layout */}
        <Route path="/" element={<Layout><LandingPage /></Layout>} />
        <Route path="/auth" element={<Layout><AuthPage /></Layout>} />
        <Route path="/onboarding" element={<Layout><OnboardingPage /></Layout>} />
        <Route path="/claim" element={<ClaimPage />} />
        
        {/* Protected Dashboard Route with its own internal layout */}
        <Route path="/dashboard" element={<DashboardPage />} />
        <Route path="/profile" element={<ProfilePage />} />
        <Route path="/canvas" element={<CanvasPage />} />
        <Route path="/canvas/:id" element={<CanvasPage />} />
        <Route path="/habits" element={<HabitTrackerPage />} />
        <Route path="/subscription" element={<SubscriptionPage />} />
        <Route path="/settings" element={<SettingsPage />} />
      </Routes>
    </Router>
  );
}





export default App;