// page-shell.jsx — shared host for every per-section page.
// Each section .html loads its required screens-X.jsx scripts, then calls:
//
//   ReactDOM.createRoot(document.getElementById('root')).render(
//     <PageShell sections={[
//       { id: 'shell', title: 'Match Detail Shell',
//         screens: [{ id: 'm-summary', label: '002 · Summary', component: 'ScreenMatchSummary' }, ...] }
//     ]}/>
//   );
//
// `component` is the global name (set via window.X = ... at bottom of each
// screens-X.jsx). If the component is missing — typical when a section
// hasn't been built yet — we render a Coming Soon placeholder so the link
// still works and the canvas doesn't blank.

const ComingSoon = ({ label }) => (
  <div className="phone">
    <div className="viewport" style={{ alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '0 32px' }}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 14 }}>
        <div style={{
          width: 64, height: 64, borderRadius: 16,
          background: 'var(--bg-surface)',
          border: '1px dashed var(--border-strong)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--text-secondary)', fontSize: 24, fontWeight: 700,
        }}>·</div>
        <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>Not built yet</div>
        <div style={{ fontSize: 12, color: 'var(--text-secondary)', maxWidth: 220 }}>
          {label || 'This screen is on PROGRESS.md but has not been designed yet. Coming in a later session.'}
        </div>
      </div>
    </div>
  </div>
);

const PageShell = ({ sections }) => (
  <DesignCanvas>
    {sections.map(sec => (
      <DCSection key={sec.id} id={sec.id} title={sec.title} subtitle={sec.subtitle}>
        {sec.screens.map(s => {
          const Comp = window[s.component];
          return (
            <DCArtboard key={s.id} id={s.id} label={s.label} width={s.width || 430} height={s.height || 895}>
              {Comp ? React.createElement(Comp) : <ComingSoon label={s.label}/>}
            </DCArtboard>
          );
        })}
      </DCSection>
    ))}
  </DesignCanvas>
);

window.PageShell = PageShell;
window.ComingSoon = ComingSoon;