// Placeholder used for any screen that hasn't been designed yet.
// As each screen lands, it gets its own module file in this folder
// (e.g. screen-events-list.jsx) and the App router branches to it.

function ScreenPlaceholder({ page, screens }) {
  const all = screens.flatMap(g => g.items);
  const current = all.find(s => s.id === page);
  const label = current ? current.label : page;

  return (
    <div data-screen-label={label}>
      <V4TopNav onNav={() => {}} transparent={false}/>
      <div className="placeholder">
        <span className="tag">Not designed yet</span>
        <h1>{label}</h1>
        <p>This screen is on the build list. Pick another from the toolbar, or ask Claude to design this one next.</p>
      </div>
      <V4Footer/>
    </div>
  );
}