App.tsx

import React, { useState, useEffect } from 'react';
import { HashRouter as Router, Routes, Route, HashRouter } from 'react-router-dom';
import Navbar from './components/Navbar';
import HomePage from './pages/HomePage';
import ProjectListPage from './pages/ProjectListPage';
import ProjectDetailPage from './pages/ProjectDetailPage';
import TeamPage from './pages/TeamPage';

const App: React.FC = () => {
  const [isDark, setIsDark] = useState(true);

  useEffect(() => {
    if (isDark) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [isDark]);

  return (
    <HashRouter>
      <div className="relative min-h-screen">
        <Navbar isDark={isDark} toggleTheme={() => setIsDark(!isDark)} />
        <main>
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/fullstack" element={<ProjectListPage category="Full Stack" />} />
            <Route path="/ai-projects" element={<ProjectListPage category="AI Project" />} />
            <Route path="/team" element={<TeamPage />} />
            <Route path="/projects/:id" element={<ProjectDetailPage />} />
          </Routes>
        </main>

        <footer className="py-20 border-t border-zinc-100 dark:border-zinc-900 mt-20 text-center text-zinc-400 text-[10px] font-bold uppercase tracking-widest">
          © {new Date().getFullYear()} Team Showcase Studio. All Rights Reserved.
        </footer>
      </div>
    </HashRouter>
  );
};

export default App;