'use client';

import dynamic from 'next/dynamic';
import LeftPane from '@/components/LeftPane';
import { useGameState } from '@/lib/useGameState';

const Map = dynamic(() => import('@/components/Map'), { ssr: false });

export default function Home() {
  // Single polling source for the whole shell (v0.9.0): one /api/state loop, snapshot passed
  // down as props so later panes can share it without extra poll loops.
  const { state, loading, error, refresh } = useGameState(1000);

  return (
    <div className="app-shell">
      <LeftPane state={state} loading={loading} error={error} onRefresh={refresh} />
      <Map />
      <aside data-testid="right-pane" className="pane right-pane">
        <h2 className="pane-title">Jobs &amp; Market</h2>
      </aside>
    </div>
  );
}