import { useEffect } from 'react'
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
import Layout from './components/Layout'
import ErrorBoundary from './components/ErrorBoundary'
import { BRAND_PRIMARY } from './config'
import Home from './pages/Home'
import About from './pages/About'
import ServiceDetail from './pages/ServiceDetail'
import Project from './pages/Project'
import Contact from './pages/Contact'

function NotFound() {
  return (
    <div style={{ padding: '120px 24px', textAlign: 'center' }}>
      <h1>404 — Page Not Found</h1>
      <p>The page you're looking for doesn't exist.</p>
      <Link to="/" style={{ color: BRAND_PRIMARY }}>← Back to Home</Link>
    </div>
  )
}

export default function App() {
  useEffect(() => {
    const preloader = document.getElementById("preloader")
    if (preloader) {
      preloader.classList.add("loaded")
      setTimeout(() => preloader.remove(), 500)
    }
  }, [])
  return (
    <BrowserRouter>
      <ErrorBoundary>
        <Routes>
          <Route element={<Layout />}>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/service/:slug" element={<ServiceDetail />} />
            <Route path="/project" element={<Project />} />
            <Route path="/contact" element={<Contact />} />
            <Route path="*" element={<NotFound />} />
          </Route>
        </Routes>
      </ErrorBoundary>
    </BrowserRouter>
  )
}