// Router + app mount

function App() {
  const [route, setRoute] = useState(() => {
    const h = (window.location.hash || '').replace(/^#/, '');
    if (h) {
      const [name, slug] = h.split('/');
      if (name) return { name, slug };
    }
    return { name: 'home' };
  });

  const navigate = (next) => {
    if (next.name === route.name && next.slug === route.slug) {
      window.scrollTo({ top: 0, behavior: 'smooth' });
      return;
    }
    setRoute(next);
    window.scrollTo({ top: 0 });
  };

  // reflect route in hash for shareable deep links
  useEffect(() => {
    const slug = route.slug ? `/${route.slug}` : '';
    history.replaceState(null, '', `#${route.name}${slug}`);
  }, [route]);

  let page;
  switch (route.name) {
    case 'home': page = <HomePage navigate={navigate} />; break;
    case 'about': page = <AboutPage navigate={navigate} />; break;
    case 'expertise': page = <ExpertiseListPage navigate={navigate} />; break;
    case 'expertise-detail': page = <ExpertiseDetailPage slug={route.slug} navigate={navigate} />; break;
    case 'industries': page = <IndustriesPage navigate={navigate} />; break;
    case 'industry-detail': page = <IndustryDetail slug={route.slug} navigate={navigate} />; break;
    case 'insights': page = <InsightsPage navigate={navigate} />; break;
    case 'contact': page = <ContactPage navigate={navigate} />; break;
    default: page = <NotFound navigate={navigate} />;
  }

  const routeKey = route.name + (route.slug || '');

  return (
    <React.Fragment>
      <Nav route={route} navigate={navigate} />
      <div key={routeKey}>
        {page}
      </div>
    </React.Fragment>
  );
}

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