/* Fluffy Friends — app root & routing */
const { HomePage, AboutPage, ContactPage, BookingPage, Header, Footer, WhatsAppFab } = window;

function App() {
  const [page, setPage] = React.useState(() => (location.hash.replace('#', '').split('?')[0]) || 'home');
  const [bookPet, setBookPet] = React.useState(null);

  // routing
  const nav = (to, anchor) => {
    setPage(to);
    history.replaceState(null, '', '#' + to);
    requestAnimationFrame(() => {
      if (anchor) {
        const el = document.getElementById(anchor);
        if (el) { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); return; }
      }
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  };
  React.useEffect(() => {
    const fn = () => setPage((location.hash.replace('#', '').split('?')[0]) || 'home');
    window.addEventListener('hashchange', fn);
    return () => window.removeEventListener('hashchange', fn);
  }, []);

  // "Book a groom" everywhere → the full booking page (optionally pre-selecting a pet).
  const openBook = (pet) => { setBookPet(typeof pet === 'string' ? pet : null); nav('book'); };
  // Staff login hands off to the real internal dashboard (FastAPI /login).
  const goStaff = () => { window.location.href = '/login'; };

  return (
    <div className="site">
      <Header page={page} onNav={nav} onBook={openBook} onStaff={goStaff} />
      {page === 'book' ? <BookingPage initialPet={bookPet} onNav={nav} />
        : page === 'about' ? <AboutPage onBook={openBook} onNav={nav} />
        : page === 'contact' ? <ContactPage onBook={openBook} />
        : <HomePage onBook={openBook} onNav={nav} />}
      <Footer onNav={nav} onBook={openBook} />
      <WhatsAppFab />
    </div>
  );
}

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