/* Calendar Concept C — Compact icon rail.
   60px nav rail with icon-only items + active accent strip.
   Maximum calendar real estate; hover/click to expand to full sidebar. */

function CalConceptC() {
  return (
    <div className="cc" data-screen-label="Calendar · Concept C — Compact rail">
      <Toolbar />
      <div className="cc-body">
        <aside className="cc-rail">
          <div className="item" title="Home"><span style={{ color:'var(--accent)' }}>{Icon.home}</span></div>
          <div className="item active" title="Calendar"><span style={{ color:'var(--purple)' }}>{Icon.calendar}</span></div>
          <div className="item" title="Sleep"><span style={{ color:'var(--purple)' }}>{Icon.sleep}</span></div>
          <div className="item" title="Cognition"><span style={{ color:'var(--indigo)' }}>{Icon.brain}</span></div>
          <div className="item" title="Heart"><span style={{ color:'var(--red)' }}>{Icon.heart}</span></div>
          <div className="item" title="Activity"><span style={{ color:'var(--green)' }}>{Icon.bolt}</span></div>
          <div className="spacer"></div>
          <div className="item" title="Settings">{Icon.gear}</div>
          <div className="item av">P</div>
        </aside>
        <div className="cc-main">
          <WeekHead />
          <AllDayRow />
          <WeekBody />
        </div>
      </div>
      <div className="cc-banner">
        <b>Concept C · Compact rail</b>
        <span>60px icon-only rail. Hover or click any item to expand to the full Concept-A sidebar — same nav, just a visual mode toggle. Maximises week-grid space.</span>
      </div>
    </div>
  );
}

window.CalConceptC = CalConceptC;