import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import { Navbar } from './components/layout/Navbar';
import { Footer } from './components/layout/Footer';
import { AuthModal } from './components/common/AuthModal';

// Pages
import { Home } from './pages/Home';
import { Tools } from './pages/Tools';
import { Models } from './pages/Models';
import { Pricing } from './pages/Pricing';
import { Enterprise } from './pages/Enterprise';
import { Academy } from './pages/Academy';
import { Blog } from './pages/Blog';
import { BlogPost } from './pages/BlogPost';
import { About } from './pages/About';
import { Contact } from './pages/Contact';
import { ChatPlayground } from './pages/ChatPlayground';
import { Privacy } from './pages/Privacy';

// Scroll to top helper component
const ScrollToTop: React.FC = () => {
  const { pathname } = useLocation();

  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [pathname]);

  return null;
};

export const App: React.FC = () => {
  const [isAuthOpen, setIsAuthOpen] = useState(false);

  return (
    <Router>
      <ScrollToTop />
      <div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col font-vazir selection:bg-indigo-500/30 selection:text-indigo-200">
        <Navbar onOpenAuth={() => setIsAuthOpen(true)} />
        
        <main className="flex-1">
          <Routes>
            <Route path="/" element={<Home onOpenAuth={() => setIsAuthOpen(true)} />} />
            <Route path="/tools" element={<Tools />} />
            <Route path="/models" element={<Models />} />
            <Route path="/pricing" element={<Pricing onOpenAuth={() => setIsAuthOpen(true)} />} />
            <Route path="/enterprise" element={<Enterprise />} />
            <Route path="/academy" element={<Academy />} />
            <Route path="/blog" element={<Blog />} />
            <Route path="/blog/:slug" element={<BlogPost />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
            <Route path="/chat" element={<ChatPlayground />} />
            <Route path="/privacy" element={<Privacy />} />
            <Route path="*" element={<Home onOpenAuth={() => setIsAuthOpen(true)} />} />
          </Routes>
        </main>

        <Footer />
        
        <AuthModal 
          isOpen={isAuthOpen} 
          onClose={() => setIsAuthOpen(false)} 
        />
      </div>
    </Router>
  );
};

export default App;
