/* App router + main layout */

const APP_ROUTES = ['home','about','services','service-detail','cases','case-detail','articles','article-detail','prices','platforms','contact'];
const HASH_ROUTES = ['home','about','services','cases','articles','prices','platforms','contact'];

function normalizedPath(path) {
  if (!path || path === '/') return '/';
  return path.endsWith('/') ? path : `${path}/`;
}

function routeFromPath(path) {
  const current = normalizedPath(path);
  if (current === '/') return 'home';
  if (current === '/about/') return 'about';
  if (current === '/services/') return 'services';
  if (current.startsWith('/services/')) return 'service-detail';
  if (current === '/cases/') return 'cases';
  if (current.startsWith('/cases/')) return 'case-detail';
  if (current === '/articles/') return 'articles';
  if (current.startsWith('/articles/')) return 'article-detail';
  if (current === '/prices/') return 'prices';
  if (current === '/platforms/') return 'platforms';
  if (current === '/contact/') return 'contact';
  return window.__INITIAL_ROUTE__ || 'home';
}

function routeFromHash() {
  const value = window.location.hash.replace(/^#\/?/, '').replace(/\/$/, '');
  return HASH_ROUTES.includes(value) ? value : '';
}

function routeFromLocation() {
  return routeFromHash() || routeFromPath(window.location.pathname);
}

function canonicalPathForRoute(route) {
  const current = normalizedPath(window.location.pathname);
  if (route === 'service-detail' && current.startsWith('/services/') && current !== '/services/') return current;
  if (route === 'case-detail' && current.startsWith('/cases/') && current !== '/cases/') return current;
  if (route === 'article-detail' && current.startsWith('/articles/') && current !== '/articles/') return current;
  return routeHref(route);
}

function App() {
  const [route, setRoute] = React.useState(routeFromLocation);

  React.useEffect(() => {
    const onPopState = () => setRoute(routeFromLocation());
    window.addEventListener('popstate', onPopState);
    return () => window.removeEventListener('popstate', onPopState);
  }, []);

  React.useEffect(() => {
    const nextPath = canonicalPathForRoute(route);
    if (!nextPath) return;
    if (window.location.pathname === nextPath && !window.location.hash) return;
    const method = window.location.hash ? 'replaceState' : 'pushState';
    window.history[method]({ route }, '', nextPath);
  }, [route]);

  return (
    <div className="wl-app">
      <div className="bg-grid" />
      <div className="bg-noise" />
      <Nav route={route} setRoute={setRoute} />

      <main>
        {route === 'home' && (
          <>
            <Hero setRoute={setRoute} />
            <Approach />
            <Services setRoute={setRoute} />
            <Stack />
            <Cases />
            {typeof ArticlesPreview !== 'undefined' && <ArticlesPreview setRoute={setRoute} />}
            {typeof ReviewsPanel !== 'undefined' && <ReviewsPanel />}
            <Process />
            <Prices setRoute={setRoute} />
            <Limits />
            <FaqSection />
            <Contact setRoute={setRoute} />
          </>
        )}
        {route === 'about' && <AboutPage setRoute={setRoute} />}
        {route === 'services' && <ServicesPage setRoute={setRoute} />}
        {route === 'service-detail' && <ServiceDetailPage setRoute={setRoute} />}
        {route === 'cases' && <CasesPage setRoute={setRoute} />}
        {route === 'case-detail' && <CaseDetailDynamicPage setRoute={setRoute} />}
        {route === 'articles' && <ArticlesPage setRoute={setRoute} />}
        {route === 'article-detail' && <ArticleDetailPage setRoute={setRoute} />}
        {route === 'prices' && <PricesPage setRoute={setRoute} />}
        {route === 'platforms' && <PlatformsPage setRoute={setRoute} />}
        {route === 'contact' && <ContactPage setRoute={setRoute} />}
      </main>

      <Footer setRoute={setRoute} />
      {typeof CookieConsent !== 'undefined' && <CookieConsent />}
    </div>
  );
}

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