// ═══════════════════════════════════════════════════════════
// Leftshifted - App Router
// ═══════════════════════════════════════════════════════════

const App = () => {
  const [route, setRoute] = useState(window.location.hash.slice(1) || '/');

  useEffect(() => {
    const onHash = () => {
      setRoute(window.location.hash.slice(1) || '/');
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // Re-init Lucide icons after route changes
  useEffect(() => {
    if (window.lucide) {
      setTimeout(() => window.lucide.createIcons(), 100);
    }
  }, [route]);

  // Parse route segments
  const parts = route.split('/').filter(Boolean);
  const base = '/' + (parts[0] || '');
  const sub = parts[1] || null;

  // Route matching
  if (base === '/about') return <AboutPage />;
  if (base === '/pr-comms') return <PRCommsPage />;
  if (base === '/data') return <DataPage />;
  if (base === '/services' && sub) return <ProductPage slug={sub} />;
  if (base === '/services') return <ServicesPage />;
  if (base === '/case-studies' && sub) return <CaseStudyPage slug={sub} />;
  if (base === '/case-studies') return <CaseStudiesPage />;
  if (base === '/news' && sub) return <ArticlePage slug={sub} />;
  if (base === '/news') return <NewsPage />;
  if (base === '/contact') return <ContactPage />;
  if (base === '/privacy') return <PrivacyPage />;
  return <HomePage />;
};

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