// Production app shell — replaces the design-canvas artboards with a
// single responsive container. Compact layout switches on below 640px.

const { useState, useEffect } = React;

function useCompact(breakpoint = 640) {
  const [compact, setCompact] = useState(
    typeof window !== 'undefined' && window.innerWidth < breakpoint
  );
  useEffect(() => {
    const onResize = () => setCompact(window.innerWidth < breakpoint);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, [breakpoint]);
  return compact;
}

function App() {
  const C = window.COLORS;
  const compact = useCompact();
  const [helpOpen, setHelpOpen] = useState(
    typeof window !== 'undefined' && /[?&]help=1\b/.test(window.location.search)
  );

  return (
    <div style={{
      position: 'relative',
      width: '100%',
      minHeight: '100vh',
      background: C.bg,
      overflow: 'hidden',
    }}>
      <window.PlayScreen onOpenHelp={() => setHelpOpen(true)} compact={compact} />
      <window.HowToPlayModal open={helpOpen} onClose={() => setHelpOpen(false)} compact={compact} />
    </div>
  );
}

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