import { NavLink, Route, Routes } from 'react-router-dom';
import { Wand2, LayoutTemplate, PanelsTopLeft } from 'lucide-react';
import { WizardPage } from './pages/wizard/WizardPage';
import { PreviewCanvas } from './pages/preview/PreviewCanvas';
import { SiteDashboard } from './pages/dashboard/SiteDashboard';
import './App.css';

function App() {
  return (
    <div className="app-shell">
      <aside className="app-sidebar">
        <div className="brand">
          <span>Site Builder</span>
          <small>Phase 3 · wizard + preview</small>
        </div>
        <nav>
          <NavLink to="/" end>
            <Wand2 size={18} />
            Wizard
          </NavLink>
          <NavLink to="/preview">
            <LayoutTemplate size={18} />
            Preview
          </NavLink>
          <NavLink to="/dashboard">
            <PanelsTopLeft size={18} />
            Blueprint history
          </NavLink>
        </nav>
      </aside>

      <main className="app-main">
        <Routes>
          <Route path="/" element={<WizardPage />} />
          <Route path="/preview" element={<PreviewCanvas />} />
          <Route path="/dashboard" element={<SiteDashboard />} />
        </Routes>
      </main>
    </div>
  );
}

export default App;