// Green Yard — hash router
const { useState, useEffect } = React;

function parseHash(){
  const h = (location.hash || '#/').replace(/^#/, '');
  const parts = h.split('/').filter(Boolean);
  return parts;
}

function App(){
  const [parts, setParts] = useState(parseHash());
  useEffect(()=>{
    const onHash = () => { setParts(parseHash()); window.scrollTo({top:0,behavior:'instant'}); };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  },[]);
  useEffect(()=>{
    requestAnimationFrame(() => window.dispatchEvent(new Event('app:rendered')));
  },[parts.join('/')]);

  const [a, b] = parts;
  let page;
  if (!a) page = <HomePage/>;
  else if (a==='services' && !b) page = <ServicesPage/>;
  else if (a==='services') page = <ServiceDetailPage slug={b}/>;
  else if (a==='sod-types' && !b) page = <SodTypesPage/>;
  else if (a==='sod-types') page = <SodTypeDetailPage slug={b}/>;
  else if (a==='service-areas' && !b) page = <AreasPage/>;
  else if (a==='service-areas') page = <AreaDetailPage slug={b}/>;
  else if (a==='pricing') page = <PricingPage/>;
  else if (a==='reviews') page = <ReviewsPage/>;
  else if (a==='about') page = <AboutPage/>;
  else if (a==='faq') page = <FaqPage/>;
  else if (a==='contact') page = <ContactPage/>;
  else if (a==='quote') page = <QuotePage/>;
  else if (a==='blog' && !b) page = <BlogPage/>;
  else if (a==='blog') page = <BlogPostPage slug={b}/>;
  else if (a==='process') page = <ServiceDetailPage slug="sod-installation"/>;
  else if (a==='gallery') page = <ReviewsPage/>;
  else page = <NotFoundPage/>;

  return <div className={`page active`} key={parts.join('/')}>{page}</div>;
}

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