const { useState: useAppState, useEffect: useAppEffect } = React;

const PAGE_IDS = ['home', 'about', 'infrastructure', 'ecommerce', 'fluentme', 'blog', 'contact'];

const PAGE_TITLES = {
  home: 'Vyovam — AI Engineering for Trading, Commerce & Consumer Apps',
  about: 'About — Vyovam',
  infrastructure: 'Algo Trading Platform — Vyovam',
  ecommerce: 'E-Commerce Operations (Coming Soon) — Vyovam',
  fluentme: 'FluentMe, AI Language App — Vyovam',
  blog: 'Blog — Vyovam',
  contact: 'Contact — Vyovam'
};

function pageFromHash() {
  const h = window.location.hash.replace(/^#\/?/, '');
  return PAGE_IDS.includes(h) ? h : 'home';
}

function App() {
  const [page, setPageState] = useAppState(pageFromHash);

  const setPage = (p) => {
    if (PAGE_IDS.includes(p)) window.location.hash = '#/' + p;
  };

  useAppEffect(() => {
    const onHash = () => setPageState(pageFromHash());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  useAppEffect(() => {
    document.title = PAGE_TITLES[page] || PAGE_TITLES.home;
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [page]);

  const pages = {
    home: <HomePage setPage={setPage} />,
    about: <AboutPage setPage={setPage} />,
    infrastructure: <InfrastructurePage setPage={setPage} />,
    ecommerce: <EcommercePage setPage={setPage} />,
    fluentme: <FluentMePage setPage={setPage} />,
    blog: <BlogPage setPage={setPage} />,
    contact: <ContactPage setPage={setPage} />
  };

  return (
    <div data-screen-label={`Vyovam · ${page}`}>
      <Nav page={page} setPage={setPage} />
      {pages[page]}
      <Footer setPage={setPage} />
    </div>
  );
}

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