// app.jsx — root wiring

function App() {
  const [contactOpen, setContactOpen] = React.useState(false);
  const open = () => setContactOpen(true);
  const close = () => setContactOpen(false);

  return (
    <CmsProvider>
      <RouterProvider>
        <Shell onContactClick={open} contactOpen={contactOpen} onContactClose={close} />
      </RouterProvider>
    </CmsProvider>
  );
}

function Shell({ onContactClick, contactOpen, onContactClose }) {
  const { path } = useRouter();

  let content;
  if (path === '/' || path === '') {
    content = <HomePage onContactClick={onContactClick} />;
  } else if (path === '/services') {
    content = <ServicesIndexPage onContactClick={onContactClick} />;
  } else if (path.startsWith('/services/')) {
    const slug = path.replace('/services/', '');
    content = <ServiceDetailPage slug={slug} onContactClick={onContactClick} />;
  } else if (path === '/about') {
    content = <AboutPage onContactClick={onContactClick} />;
  } else if (path === '/blog') {
    content = <BlogIndexPage onContactClick={onContactClick} />;
  } else if (path.startsWith('/blog/')) {
    const slug = path.replace('/blog/', '');
    content = <BlogPostPage slug={slug} onContactClick={onContactClick} />;
  } else if (path === '/contact') {
    content = <ContactPage onContactClick={onContactClick} />;
  } else {
    content = (
      <div className="page-enter section">
        <div className="container" style={{ textAlign: 'center', padding: '80px 0' }}>
          <div className="eyebrow" style={{ marginBottom: 16, justifyContent: 'center' }}>404</div>
          <h2 style={{ marginBottom: 16 }}>Page not found.</h2>
          <p style={{ color: 'var(--fg-3)', marginBottom: 28 }}>The page you're looking for doesn't exist or has moved.</p>
          <Link to="/" className="btn btn-primary">Back to home <Icon.arrow /></Link>
        </div>
      </div>
    );
  }

  return (
    <>
      <Header onContactClick={onContactClick} />
      <main>{content}</main>
      <Footer />
      <QuoteBar onClick={onContactClick} />
      <ContactModal open={contactOpen} onClose={onContactClose} />
    </>
  );
}

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