// APP — top-level routing between variations + booking screens

function App() {
  const { tweaks, booking } = useApp();

  // Lock body scroll when overlay screens are open
  useEffect(() => {
    const open = booking.step === 'time' || booking.step === 'confirm';
    document.body.classList.toggle('apex-scroll-lock', open);
    return () => document.body.classList.remove('apex-scroll-lock');
  }, [booking.step]);

  const Variant = tweaks.variation === 'v2' ? V2
    : tweaks.variation === 'v3' ? V3
    : V1;

  return (
    <div data-variation={tweaks.variation} data-surface={tweaks.surface}>
      <InjectGlobals/>
      <Variant/>
      {booking.step === 'time' && <TimeScreen/>}
      {booking.step === 'confirm' && <ConfirmScreen/>}
      <TweaksPanel/>
    </div>
  );
}

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