// APP — router + mount

function App() {
  const route = useHashRoute();
  const [fadeKey, setFadeKey] = useState(route);

  useEffect(() => { setFadeKey(route); }, [route]);

  let page;
  if (route === '/' || route === '') page = <Home />;
  else if (route === '/features') page = <FeaturesPage />;
  else if (route === '/pricing') page = <PricingPage />;
  else if (route === '/about') page = <AboutPage />;
  else if (route === '/contact') page = <ContactPage />;
  else if (route === '/blog') page = <BlogIndexPage />;
  else if (route.startsWith('/blog/')) {
    const slug = route.slice('/blog/'.length);
    page = <BlogPostPage slug={slug} />;
  }
  else page = <Home />;

  return (
    <>
      <Nav />
      <div key={fadeKey} style={{ animation: 'fadeIn 0.4s ease' }}>
        {page}
      </div>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);