/* Calendar Concept B — Calendar-native sidebar.
   Same nav at top, with the Calendar's existing mini-cal + feed checkboxes
   collapsed into one taller sidebar. Power-user dense. */

const FEED_ROWS = [
  { color:'var(--green)',  label:'Health',           ct:'12', on:true },
  { color:'var(--accent)', label:'Personal',         ct:'24', on:true },
  { color:'var(--orange)', label:'Financial Planning', ct:'5', on:true },
  { color:'var(--accent)', label:'Student · QUT',    ct:'38', on:true },
  { color:'var(--red)',    label:'Work',             ct:'18', on:true },
  { color:'var(--yellow)', label:'Assessment Due Dates', ct:'4', on:true },
  { color:'var(--pink)',   label:'Emily Work',       ct:'7',  on:false },
  { color:'var(--purple)', label:'Seb — Uni Timetable', ct:'9', on:false },
];

function CalConceptB() {
  return (
    <div className="cc" data-screen-label="Calendar · Concept B — Calendar-native">
      <Toolbar />
      <div className="cc-body">
        <aside className="cc-sb" style={{ width: 260 }}>
          <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 className="cc-sb-item"><span className="cc-sb-icon" style={{ background:'var(--purple)' }}>{Icon.sleep}</span>Health</div>
          </div>
          <div className="cc-sb-section">
            <MiniCalendar />
          </div>
          <div className="cc-sb-section">
            <div className="cc-sb-label"><span>Calendars</span><span className="add">{Icon.plus}</span></div>
            <div className="cc-feeds">
              {FEED_ROWS.map((f, i) => (
                <label key={i} className={`cc-feed ${f.on ? '' : 'muted'}`}>
                  <input type="checkbox" defaultChecked={f.on} />
                  <span className="sw" style={{ background: f.color }}></span>
                  <span>{f.label}</span>
                  <span className="ct">{f.ct}</span>
                </label>
              ))}
            </div>
          </div>
        </aside>
        <div className="cc-main">
          <WeekHead />
          <AllDayRow />
          <WeekBody />
        </div>
      </div>
      <div className="cc-banner">
        <b>Concept B · Calendar-native</b>
        <span>Workspace nav at top — then mini-cal and per-feed toggles, the two controls the calendar leans on most. One sidebar for everything; no second drawer.</span>
      </div>
    </div>
  );
}

window.CalConceptB = CalConceptB;