function App() {
  const { HashRouter, Routes, Route } = window.ReactRouterDOM;
  return (
    <HashRouter>
      <ScrollToTop />
      <div className="flex flex-col min-h-screen">
        <UtilityBar />
        <Navbar />
        <main className="flex-1">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/what-we-do" element={<WhatWeDo />} />
            <Route path="/about-us" element={<AboutUs />} />
            <Route path="/location" element={<Location />} />
            <Route path="/are-you-a-business" element={<AreYouABusiness />} />
            <Route path="/book" element={<Book />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </main>
        <Footer />
      </div>
    </HashRouter>
  );
}

function NotFound() {
  const { Link } = ReactRouterDOM;
  return (
    <div className="page-enter">
      <section className="py-24 md:py-32 text-center">
        <div className="max-w-container mx-auto px-5 md:px-8">
          <div className="font-mono text-[11px] uppercase tracking-widest text-[#A0522D]">404 · Off the wall</div>
          <h1 className="font-display ink mt-5 text-[clamp(48px,8vw,100px)] leading-[1.0]" style={{ fontWeight: 500 }}>
            That page <em style={{ fontStyle:'italic' }}>isn&apos;t framed</em><br/>just yet.
          </h1>
          <p className="mt-6 body-ink max-w-[44ch] mx-auto">
            Let&apos;s get you back somewhere with a few photographs on the walls.
          </p>
          <Link to="/" className="btn-primary mt-8">Back to the shop →</Link>
        </div>
      </section>
    </div>
  );
}

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

if (window.ReactRouterDOM) {
  startApp();
} else {
  // RRD UMD may still be loading via its <script> tag; wait for window.load
  window.addEventListener('load', () => {
    if (window.ReactRouterDOM) startApp();
    else {
      // Final fallback: poll briefly
      const t = setInterval(() => {
        if (window.ReactRouterDOM) { clearInterval(t); startApp(); }
      }, 30);
      setTimeout(() => clearInterval(t), 5000);
    }
  });
}