/* OPTECH marketing — app shell + simple route state */

const { useState: useStateApp, useEffect: useEffectApp } = React;

function App() {
  const [route, setRoute] = useStateApp(() => {
    if (typeof window === 'undefined') return 'home';
    const h = window.location.hash.replace('#', '');
    return ['home','services','work','about','contact'].includes(h) ? h : 'home';
  });
  const [openWork, setOpenWork] = useStateApp(null);

  useEffectApp(() => {
    window.location.hash = route === 'home' ? '' : route;
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [route]);

  const nav = (r) => { setOpenWork(null); setRoute(r); };
  const open = (w) => setOpenWork(w);

  return (
    <div className="page" data-screen-label={`OPTECH / ${route}`}>
      <StatusBar />
      <TopNav route={route} onNav={nav} />

      {route === 'home' && <HomePage onNav={nav} onOpenWork={open} />}
      {route === 'services' && <ServicesPage onNav={nav} />}
      {route === 'work' && <WorkPage onNav={nav} onOpenWork={open} />}
      {route === 'about' && <AboutPage onNav={nav} />}
      {route === 'contact' && <ContactPage />}

      <Footer onNav={nav} />

      {openWork && <WorkDetailOverlay data={openWork} onClose={() => setOpenWork(null)} />}
    </div>
  );
}

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