// Desktop layout — orchestrates the modules into the cockpit grid.

function Desktop({ dense = false }) {
  return (
    <div className={`mc-app ${dense ? 'dense' : ''}`}>
      <HeaderBar/>

      <Cleanser/>

      <Compass/>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        <RailsStrip/>
        <WeekShape/>
      </div>

      <div className="mc-main"
           style={{
             gridTemplateColumns: '1fr 360px',
             gridTemplateAreas: `
               "prio brain"
               "row2 brain"
               "row3 row3"
             `,
           }}>
        <div style={{ gridArea: 'prio', display: 'flex', flexDirection: 'column', gap: 20 }}>
          <DayFocus/>
          <Priorities/>
          <ForwardQueue/>
        </div>

        <div style={{ gridArea: 'brain', display: 'flex', flexDirection: 'column', gap: 20, minHeight: 0 }}>
          <BrainDump/>
        </div>

        <div style={{ gridArea: 'row2', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          <Deadlines/>
          <Money/>
        </div>

        <div style={{ gridArea: 'row3', display: 'grid', gridTemplateColumns: '2fr 1.4fr 1fr', gap: 20 }}>
          <Admin/>
          <Pipeline/>
          <Wins/>
        </div>
      </div>

      <Wrap/>
    </div>
  );
}

Object.assign(window, { Desktop });