import { BrowserRouter as Router, Routes, Route, Navigate, Link } from 'react-router-dom';
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

import Layout from './components/Layout';
// Home component is no longer used as index, redirected to About
import Home from './pages/Home';
import About from './pages/About';
import ServiceDetail from './pages/ServiceDetail';
import Cases from './pages/Cases';
import Resources from './pages/Resources';
import News from './pages/News';
import NewsDetail from './pages/NewsDetail';
import ContactPage from './pages/ContactPage';

function ScrollToTopComp() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

function App() {
  return (
    <Router>
      <ScrollToTopComp />
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Navigate to="/about" replace />} />
          <Route path="about" element={<About />} />
          <Route path="services" element={<ServiceDetail />} />
          <Route path="services/:serviceId" element={<ServiceDetail />} />
          <Route path="cases" element={<Cases />} />
          <Route path="resources" element={<Resources />} />
          import Privacy from './pages/Privacy';

          // ...

          <Route path="news" element={<News />} />
          <Route path="news/:slug" element={<NewsDetail />} />
          <Route path="resources/:slug" element={<NewsDetail />} /> {/* Reuse NewsDetail for resources */}
          <Route path="contact" element={<ContactPage />} />
          <Route path="privacy" element={<Privacy />} />
        </Route>
      </Routes>
      <Link to="/contact" className="floating-cta" style={{ zIndex: 9999 }}>상담하기 💬</Link>
    </Router>
  );
}

export default App;