// ===== App entry =====

function NotFound() {
  return (
    <Page>
      <section className="section" style={{ position: 'relative', overflow: 'hidden' }}>
        <Aurora variant="minimal" />
        <div className="wrap-tight" style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'center', position: 'relative' }}>
          <span className="eyebrow">404 · lost at sea</span>
          <h1 className="grad-text-soft">This page <span className="grad-text">slipped its anchor.</span></h1>
          <p className="lead" style={{ margin: '0 auto' }}>The page you were looking for isn't here — let's get you back to dry land.</p>
          <Link to="/" className="btn btn-grad btn-lg" style={{ marginTop: 14 }}>Back to home <Icon.Arr /></Link>
        </div>
      </section>
    </Page>
  );
}

const PAGES = {
  '/': HomePage,
  '/services': ServicesPage,
  '/portfolio': PortfolioPage,
  '/about': AboutPage,
  '/pricing': PricingPage,
  '/faq': FAQPage,
  '/contact': ContactPage,
};

function App() {
  const route = useRoute();
  const Cmp = PAGES[route] || NotFound;
  return (
    <>
      <Nav />
      <main key={route} data-screen-label={route}>
        <Cmp />
      </main>
      <Footer />
    </>
  );
}

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