/* Calendar Concept A — Standard.
   Lift the Health/Home sidebar pattern straight into the Calendar view.
   Nav up top, calendar week grid fills the right pane. */

function CalConceptA() {
  return (
    <div className="cc" data-screen-label="Calendar · Concept A — Standard">
      <Toolbar />
      <div className="cc-body">
        <aside className="cc-sb">
          <div className="cc-sb-section">
            <div className="cc-sb-label"><span>Workspace</span></div>
            <div className="cc-sb-item"><span className="cc-sb-icon" style={{ background:'var(--accent)' }}>{Icon.home}</span>Home</div>
            <div className="cc-sb-item active"><span className="cc-sb-icon" style={{ background:'var(--purple)' }}>{Icon.calendar}</span>Calendar</div>
          </div>
          <div className="cc-sb-section">
            <div className="cc-sb-label"><span>Health</span></div>
            <div className="cc-sb-item"><span className="cc-sb-icon" style={{ background:'var(--purple)' }}>{Icon.sleep}</span>Sleep<span className="cc-sb-count">14</span></div>
            <div className="cc-sb-item"><span className="cc-sb-icon" style={{ background:'var(--indigo)' }}>{Icon.brain}</span>Cognition</div>
            <div className="cc-sb-item"><span className="cc-sb-icon" style={{ background:'var(--red)' }}>{Icon.heart}</span>Heart</div>
            <div className="cc-sb-item"><span className="cc-sb-icon" style={{ background:'var(--green)' }}>{Icon.bolt}</span>Activity</div>
          </div>
        </aside>
        <div className="cc-main">
          <WeekHead />
          <AllDayRow />
          <WeekBody />
        </div>
      </div>
      <div className="cc-banner">
        <b>Concept A · Standard</b>
        <span>Same sidebar as Home / Health — Calendar slots in as a peer. Mini-cal and feed list live on the right inspector (today's Inspector behaviour preserved).</span>
      </div>
    </div>
  );
}

window.CalConceptA = CalConceptA;