// App.jsx — Router, layout, page transitions

const { useState, useEffect } = React;
const { HashRouter, Routes, Route, useLocation } = window.ReactRouterDOM;

/* ── Animated page wrapper ── */
function PageTransition({ children }) {
  const location = useLocation();
  const [display, setDisplay] = useState(location);
  const [stage, setStage] = useState('enter');

  useEffect(() => {
    if (location.pathname !== display.pathname) {
      setStage('exit');
    }
  }, [location]);

  const handleAnim = () => {
    if (stage === 'exit') {
      setDisplay(location);
      setStage('enter');
      window.scrollTo(0, 0);
    }
  };

  return (
    <div
      className={stage === 'exit' ? 'page-exit' : 'page-enter'}
      onAnimationEnd={handleAnim}
      style={{ minHeight: '100vh' }}
    >
      <Routes location={display}>
        <Route path="/" element={<window.HomePage />} />
        <Route path="/products" element={<window.ProductsPage />} />
        <Route path="/products/:slug" element={<window.ProductDetailPage />} />
        <Route path="/about" element={<window.AboutPage />} />
        <Route path="/contact" element={<window.ContactPage />} />
      </Routes>
    </div>
  );
}

/* ── App root ── */
function App() {
  return (
    <HashRouter>
      <window.Cursor />
      <window.Navbar />
      <main>
        <PageTransition />
      </main>
      <window.Footer />
      <window.WhatsAppBtn />
    </HashRouter>
  );
}

// Export App — mounting happens via inline script in body
window._CrovistaApp = App;