function Scheduler() {
  const days = ['월 08.10','화 08.11','수 08.12','목 08.13','금 08.14'];
  const hours = ['09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00'];

  const events = [
    { day: 0, start: 1, len: 1, name: '이서연', role: 'Frontend', stage: '1차', tone: 'info', interviewer: '박준영' },
    { day: 0, start: 4, len: 1.5, name: '문서연', role: 'Product Designer', stage: '1차', tone: 'info', interviewer: '김민수' },
    { day: 1, start: 0, len: 1, name: '도경훈', role: 'Data Analyst', stage: '2차', tone: 'violet', interviewer: '정예린' },
    { day: 1, start: 5, len: 1, name: '오세진', role: 'Backend', stage: '1차', tone: 'info', interviewer: '박준영' },
    { day: 2, start: 2, len: 1, name: '한지현', role: 'Sr. Frontend', stage: '2차', tone: 'violet', interviewer: '박준영' },
    { day: 2, start: 6, len: 0.5, name: '강민재', role: 'Sr. Backend', stage: '제안', tone: 'warn', interviewer: '한지현' },
    { day: 3, start: 1, len: 1, name: '유하람', role: 'Frontend', stage: '1차', tone: 'info', interviewer: '박준영' },
    { day: 4, start: 3, len: 2, name: '정민아', role: 'PM', stage: '2차', tone: 'violet', interviewer: '김민수' },
  ];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
      {/* Toolbar */}
      <div style={{ padding: '16px 24px', display:'flex', alignItems:'center', gap: 10, borderBottom: '1px solid var(--border-default)' }}>
        <div style={{ display:'flex', border:'1px solid var(--border-default)', borderRadius: 8, overflow:'hidden' }}>
          <button style={{ padding:'6px 10px', border:'none', background:'var(--neutral-0)', cursor:'pointer' }}><Icon name="chevron-left" size={14}/></button>
          <div style={{ padding:'6px 12px', fontSize: 13, fontWeight: 600, borderLeft:'1px solid var(--border-default)', borderRight:'1px solid var(--border-default)' }}>2026년 8월 · 33주차</div>
          <button style={{ padding:'6px 10px', border:'none', background:'var(--neutral-0)', cursor:'pointer' }}><Icon name="chevron-right" size={14}/></button>
        </div>
        <Button variant="secondary" size="sm">오늘</Button>
        <div style={{ display: 'flex', gap: 2, background: 'var(--neutral-100)', borderRadius: 8, padding: 3 }}>
          {['일','주','월'].map((t,i)=>(
            <div key={t} style={{
              padding:'5px 12px', fontSize:12.5, fontWeight:500,
              color: i === 1 ? 'var(--fg-1)' : 'var(--fg-2)',
              borderRadius: 6, cursor:'pointer',
              background: i === 1 ? 'var(--neutral-0)' : 'transparent',
              boxShadow: i === 1 ? 'var(--shadow-xs)' : 'none',
            }}>{t}</div>
          ))}
        </div>
        <div style={{ flex: 1 }} />
        <div style={{ display:'flex', alignItems:'center', gap: 12, fontSize: 12, color: 'var(--fg-3)' }}>
          <LegendDot tone="info" label="1차"/>
          <LegendDot tone="violet" label="2차"/>
          <LegendDot tone="warn" label="제안"/>
        </div>
        <Button variant="primary" size="sm" icon="plus">일정 만들기</Button>
      </div>

      {/* Calendar grid */}
      <div style={{ flex: 1, overflow: 'auto', padding: 20 }}>
        <div style={{
          display:'grid',
          gridTemplateColumns: '56px repeat(5, 1fr)',
          border: '1px solid var(--border-default)',
          borderRadius: 12,
          overflow: 'hidden',
          background: 'var(--neutral-0)',
        }}>
          {/* Header */}
          <div style={{ borderBottom: '1px solid var(--border-default)', background: 'var(--neutral-25)' }}/>
          {days.map((d,i) => (
            <div key={d} style={{
              padding: '10px 12px', fontSize: 12,
              borderBottom: '1px solid var(--border-default)',
              borderLeft: '1px solid var(--border-subtle)',
              background: i === 2 ? 'var(--brand-50)' : 'var(--neutral-25)',
              color: i === 2 ? 'var(--brand-700)' : 'var(--fg-2)',
              fontWeight: i === 2 ? 600 : 500,
            }}>
              <div style={{ fontSize: 11, letterSpacing:'0.06em', textTransform: 'uppercase' }}>{d.split(' ')[0]}</div>
              <div style={{ fontSize: 16, fontFamily: 'var(--font-latin)', fontWeight: 700, marginTop: 2 }}>{d.split(' ')[1]}</div>
            </div>
          ))}

          {/* Body */}
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {hours.map(h => (
              <div key={h} style={{ height: 56, padding: '4px 6px', fontSize: 10, color: 'var(--fg-3)', fontFamily:'var(--font-mono)', borderBottom:'1px solid var(--border-subtle)' }}>{h}</div>
            ))}
          </div>
          {days.map((_, di) => (
            <div key={di} style={{ position:'relative', borderLeft: '1px solid var(--border-subtle)' }}>
              {hours.map((_, hi) => (
                <div key={hi} style={{ height: 56, borderBottom: '1px solid var(--border-subtle)' }}/>
              ))}
              {events.filter(e => e.day === di).map((e, i) => (
                <EventBlock key={i} event={e} />
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function EventBlock({ event }) {
  const tones = {
    info: { bg:'#E6F4FB', border:'#0E86C8', fg:'#0B6BA0' },
    violet: { bg:'#F3EFFF', border:'#7C55F2', fg:'#4E27B5' },
    warn: { bg:'#FEF5E3', border:'#E39514', fg:'#8F5807' },
  };
  const t = tones[event.tone];
  return (
    <div style={{
      position: 'absolute',
      top: event.start * 56 + 3,
      left: 4, right: 4,
      height: event.len * 56 - 6,
      background: t.bg,
      borderLeft: `3px solid ${t.border}`,
      borderRadius: 6,
      padding: '5px 8px',
      overflow: 'hidden',
      cursor: 'pointer',
    }}>
      <div style={{ fontSize: 11.5, fontWeight: 600, color: t.fg }}>{event.stage} · {event.name}</div>
      <div style={{ fontSize: 10.5, color: t.fg, opacity: .85, marginTop: 1 }}>{event.role}</div>
      <div style={{ fontSize: 10, color: t.fg, opacity: .75, marginTop: 4 }}>with {event.interviewer}</div>
    </div>
  );
}

function LegendDot({ tone, label }) {
  const colors = { info: '#0E86C8', violet: '#7C55F2', warn: '#E39514' };
  return (
    <span style={{ display:'inline-flex', alignItems:'center', gap: 5 }}>
      <span style={{ width: 8, height: 8, borderRadius: 999, background: colors[tone] }}/>
      {label}
    </span>
  );
}

window.Scheduler = Scheduler;