function App() {
  const stageRef = React.useRef(null);
  const [vp, setVp] = React.useState({ scale: 1, height: 'auto', mobile: window.innerWidth < 768 });

  React.useLayoutEffect(() => {
    function update() {
      const node = stageRef.current;
      if (!node) return;
      const vw = document.documentElement.clientWidth;
      const mobile = vw < 768;
      if (mobile) { setVp({ scale: 1, height: 'auto', mobile: true }); return; }
      const scale = vw < 1280 ? vw / 1280 : 1;
      setVp({ scale, height: node.scrollHeight * scale, mobile: false });
    }
    update();
    const t1 = setTimeout(update, 100);
    const t2 = setTimeout(update, 800);
    window.addEventListener('resize', update);
    const imgs = stageRef.current ? stageRef.current.querySelectorAll('img') : [];
    imgs.forEach((img) => { if (!img.complete) img.addEventListener('load', update, { once: true }); });
    return () => { clearTimeout(t1); clearTimeout(t2); window.removeEventListener('resize', update); };
  }, []);

  return (
    <div style={{ width: '100%', height: vp.mobile ? 'auto' : vp.height, overflow: vp.mobile ? 'visible' : 'hidden', display: 'flex', justifyContent: 'center' }}>
      <div
        ref={stageRef}
        className="stage"
        style={{ transform: vp.mobile ? 'none' : `scale(${vp.scale})`, width: vp.mobile ? '100%' : undefined }}
      >
        <D1Home />
        <D1About />
        <D1Reviews />
        <D1Map />
      </div>
    </div>
  );
}

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