// Top-level — design canvas with desktop and tablet artboards

const { DesignCanvas, DCSection, DCArtboard } = window;
const { ChromeWindow } = window;
const { DesktopDashboard, TabletDashboard } = window.OpsLayouts;

// Tablet bezel — simple frame, since we want to communicate "tablet"
function TabletShell({ children }) {
  return (
    <div style={{
      width: 900, height: 1180,
      background: '#1a1a1a',
      borderRadius: 36,
      padding: 14,
      boxShadow: '0 20px 50px rgba(0,0,0,0.18)',
    }}>
      <div style={{
        width: '100%', height: '100%',
        background: 'white', borderRadius: 24,
        overflow: 'hidden',
      }}>{children}</div>
    </div>
  );
}

function App() {
  return (
    <DesignCanvas title="Daily Ops Dashboard — Desktop + Tablet">
      <DCSection id="desktop" title="Desktop — primary view">
        <DCArtboard id="desktop-main" label="1440×900 — full operational view, mid-shift" width={1440} height={900}>
          <ChromeWindow url="manage.simplepos.com/today" tabs={[{ title: 'Today · Trattoria del Sole' }]} width={1440} height={900}>
            <DesktopDashboard />
          </ChromeWindow>
        </DCArtboard>
      </DCSection>

      <DCSection id="tablet" title="Tablet — portrait">
        <DCArtboard id="tablet-main" label="Tablet portrait — same data, vertical stack" width={930} height={1210}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', background: 'transparent' }}>
            <TabletShell>
              <TabletDashboard />
            </TabletShell>
          </div>
        </DCArtboard>
      </DCSection>
    </DesignCanvas>
  );
}

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