/* Shared concept icons & primitives — exported to window. */

const Icon = {
  // brand mark
  mark: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="18" rx="2.5"/>
      <line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/>
      <line x1="3" y1="10" x2="21" y2="10"/>
      <rect x="7" y="14" width="3.4" height="3.4" rx="0.6" fill="currentColor" stroke="none"/>
    </svg>
  ),
  // navigation
  home:     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12l9-8 9 8"/><path d="M5 10v10h14V10"/></svg>,
  calendar: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2.5"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>,
  sleep:    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>,
  brain:    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4.5a3 3 0 0 0-3 3v.2A3 3 0 0 0 7 13a3 3 0 0 0 2 2.8V18a2 2 0 1 0 3 0v-2.2A3 3 0 0 0 14 13a3 3 0 0 0-2-5.3v-.2a3 3 0 0 0 0-3z"/></svg>,
  heart:    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>,
  bolt:     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>,
  // chrome
  menu:     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>,
  cl:       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>,
  cr:       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>,
  plus:     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>,
  search:   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7"/><line x1="20" y1="20" x2="16.6" y2="16.6"/></svg>,
  refresh:  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>,
  gear:     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>,
  sidebar:  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>,
};

/* Compact week-grid data — Mon..Sun for May 11–17, 2026. Wed=13 is today. */
const WEEK = {
  head: [
    { name:'Mon', num:11 },
    { name:'Tue', num:12 },
    { name:'Wed', num:13, today:true },
    { name:'Thu', num:14 },
    { name:'Fri', num:15 },
    { name:'Sat', num:16 },
    { name:'Sun', num:17 },
  ],
  allDay: [
    [],
    [],
    [],
    [],
    [{ kind:'purple', label:'Society retreat' }],
    [{ kind:'green',  label:'Flight · LHR → BCN' }],
    [],
  ],
  // each col: events with top% + height% (of grid 9am→6pm = 9h)
  cols: [
    [ // Mon
      { top:5,  h:11, kind:'blue',  title:'CS 240 lecture', time:'9:00 — 10:00' },
      { top:44, h:17, kind:'teal',  title:'Study group',    time:'1:00 — 2:30' },
      { top:67, h:11, kind:'orange',title:'Sprint planning',time:'3:00 — 4:00' },
    ],
    [ // Tue
      { top:5,  h:11, kind:'blue',  title:'CS 240 lecture', time:'9:00' },
      { top:14, h:22, kind:'purple',title:'Tutorial · Lab 3', time:'10:30 — 12:30' },
      { top:56, h:15, kind:'orange',title:'5k run',         time:'2:30 — 3:30' },
    ],
    [ // Wed (today)
      { top:5,  h:11, kind:'blue',  title:'CS 240 lecture', time:'9:00' },
      { top:24, h:14, kind:'indigo',title:'Office hours',   time:'11:30' },
      { top:46, h:12, kind:'teal',  title:'Project deadline', time:'1:00 — 2:00' },
      { top:73, h:12, kind:'green', title:'Climbing',       time:'5:00 — 6:30' },
    ],
    [ // Thu
      { top:8,  h:24, kind:'teal',  title:'Deep work · Project', time:'10:00 — 12:30' },
      { top:46, h:11, kind:'purple',title:'Therapy',         time:'1:00' },
      { top:62, h:14, kind:'indigo',title:'1:1 manager',     time:'2:30' },
    ],
    [ // Fri
      { top:5,  h:11, kind:'blue',  title:'CS 240 lecture' },
      { top:18, h:26, kind:'purple',title:'Society exec',   time:'10:30 — 12:30' },
      { top:50, h:11, kind:'indigo',title:'Dinner — Sam',   time:'1:30' },
      { top:76, h:12, kind:'red',   title:'Flight · LHR → BCN', time:'3:45' },
    ],
    [ // Sat
      { top:14, h:14, kind:'orange',title:'Long run', time:'11:00 — 12:30' },
      { top:44, h:14, kind:'indigo',title:'Match · Sunday League' },
      { top:66, h:14, kind:'red',   title:'Anniversary dinner' },
    ],
    [ // Sun
      { top:24, h:12, kind:'red',   title:'Brunch · Sam' },
      { top:50, h:22, kind:'purple',title:'Study block · CS 240' },
    ],
  ],
};

function WeekHead() {
  return (
    <div className="cc-week-head">
      <div className="dh" style={{ borderLeft:'none', background:'transparent' }}></div>
      {WEEK.head.map(d => (
        <div key={d.num} className={`dh ${d.today ? 'today' : ''}`}>
          <div className="name">{d.name}</div>
          <div className="num">{d.num}</div>
        </div>
      ))}
    </div>
  );
}

function AllDayRow() {
  return (
    <div className="cc-allday">
      <div className="lbl">all-day</div>
      {WEEK.allDay.map((items, i) => (
        <div key={i} className="cell">
          {items.map((it, j) => <div key={j} className={`ad ${it.kind || ''}`}>{it.label}</div>)}
        </div>
      ))}
    </div>
  );
}

function WeekBody({ showNow = true }) {
  return (
    <div className="cc-body-grid">
      <div className="cc-hours">
        {['9 AM','10','11','12 PM','1','2','3','4','5','6'].map(h => <div key={h} className="cc-hour">{h}</div>)}
      </div>
      {WEEK.cols.map((evs, i) => {
        const isToday = WEEK.head[i].today;
        return (
          <div key={i} className={`cc-col ${isToday ? 'today-col' : ''}`}>
            {/* half-hour gridlines */}
            {[1,2,3,4,5,6,7,8,9].map(k => (
              <div key={k} className="h-line full" style={{ top:`${(k/10)*100}%` }}></div>
            ))}
            {evs.map((ev, j) => (
              <div key={j} className={`cc-evt ${ev.kind}`} style={{ top:`${ev.top}%`, height:`${ev.h}%` }}>
                {ev.title}{ev.time ? <small>{ev.time}</small> : null}
              </div>
            ))}
            {isToday && showNow ? <div className="cc-now" style={{ top:'30%' }}></div> : null}
          </div>
        );
      })}
    </div>
  );
}

/* Mini cal — May 2026, today=13. */
function MiniCalendar() {
  const days = [
    [26,27,28,29,30, 1, 2],
    [ 3, 4, 5, 6, 7, 8, 9],
    [10,11,12,13,14,15,16],
    [17,18,19,20,21,22,23],
    [24,25,26,27,28,29,30],
  ];
  const HAS = new Set([2,5,8,15,19,23,28]);
  return (
    <div className="cc-mc">
      <div className="cc-mc-h"><b>May 2026</b><span className="nav">‹  ›</span></div>
      <div className="cc-mc-grid">
        {['S','M','T','W','T','F','S'].map((d,i) => <b key={i}>{d}</b>)}
        {days.flat().map((n,i) => {
          const ri = Math.floor(i/7);
          const muted = (ri===0 && n>7);
          const today = (n===13 && !muted);
          const has = HAS.has(n) && !muted;
          const cls = [muted&&'muted', today&&'today', has&&'has'].filter(Boolean).join(' ');
          return <i key={i} className={cls}>{n}</i>;
        })}
      </div>
    </div>
  );
}

/* Standard toolbar */
function Toolbar({ withSidebar = true }) {
  return (
    <header className="cc-tb">
      {withSidebar ? (
        <button className="cc-tb-btn">{Icon.sidebar}</button>
      ) : null}
      <button className="cc-tb-btn">{Icon.cl}</button>
      <button className="cc-tb-btn">{Icon.cr}</button>
      <button className="cc-tb-btn text">Today</button>
      <h1 className="cc-tb-title">May 11 – 17, 2026</h1>
      <div className="cc-tb-spacer"></div>
      <span className="seg">
        <span>Day</span><span className="on">Week</span><span>Month</span><span>Year</span>
      </span>
      <button className="cc-tb-btn">{Icon.plus}</button>
      <button className="cc-tb-btn">{Icon.refresh}</button>
      <button className="cc-tb-btn">{Icon.gear}</button>
      <span className="cc-avatar">P</span>
    </header>
  );
}

window.Icon = Icon;
window.WEEK = WEEK;
window.WeekHead = WeekHead;
window.AllDayRow = AllDayRow;
window.WeekBody = WeekBody;
window.MiniCalendar = MiniCalendar;
window.Toolbar = Toolbar;