// App shell + hash router for Automatic Restaurant & Grill redesign.
const { useState: useStateApp, useEffect: useEffectApp } = React;

function App() {
  const [route, setRoute] = useStateApp(getRouteFromHash());

  useEffectApp(() => {
    const onHash = () => {
      setRoute(getRouteFromHash());
      window.scrollTo({ top: 0, behavior: 'instant' });
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const navigate = (r) => {
    window.location.hash = '#/' + r;
  };

  return (
    <React.Fragment>
      <Navbar route={route} navigate={navigate} />
      <PageRouter route={route} navigate={navigate} />
      <Footer navigate={navigate} />
      <MobileCTA navigate={navigate} />
    </React.Fragment>
  );
}

function getRouteFromHash() {
  const h = (window.location.hash || '').replace(/^#\/?/, '').trim();
  const valid = ['home', 'menu', 'branches', 'catering', 'order', 'about'];
  if (!h && valid.includes(window.__BYTESGLUE_SHOWCASE_ROUTE)) return window.__BYTESGLUE_SHOWCASE_ROUTE;
  return valid.includes(h) ? h : 'home';
}

function PageRouter({ route, navigate }) {
  const props = { navigate };
  switch (route) {
    case 'menu': return <PageMenu {...props} />;
    case 'branches': return <PageBranches {...props} />;
    case 'catering': return <PageCatering {...props} />;
    case 'order': return <PageOrder {...props} />;
    case 'about': return <PageAbout {...props} />;
    case 'home':
    default: return <PageHome {...props} />;
  }
}

function MobileCTA({ navigate }) {
  return (
    <div className="mobile-cta">
      <button className="btn btn--ghost-light btn--sm" onClick={() => navigate('branches')} style={{ flex: 1 }}>Find branch</button>
      <button className="btn btn--primary btn--sm" onClick={() => navigate('order')} style={{ flex: 1 }}>Order now</button>
    </div>
  );
}

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