// Calendar — content schedule + meetings + outbound batches
function Calendar() {
  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
  const startDay = 19; // May 19 starts Mon
  const events = {
    19: [{ time: '10:30', t: 'LinkedIn post · "SDR tools just want each other"', agent: 'Kairos', kind: 'post' }, { time: '14:00', t: 'Outbound batch · 412 prospects', agent: 'Atlas', kind: 'batch' }],
    20: [{ time: '09:00', t: 'Email broadcast · "Founders v3 · A/B winner"', agent: 'Calliope', kind: 'broadcast' }, { time: '15:30', t: 'Demo · Sarah Chen · Northwind', agent: 'Reza', kind: 'meeting' }],
    21: [{ time: '08:00', t: 'Reel · "How my SDR tools team up against me"', agent: 'Kairos', kind: 'post' }, { time: '11:00', t: 'Hermes voice batch · 18 calls', agent: 'Hermes', kind: 'batch' }, { time: '16:00', t: 'Demo · Marcus Liu · Helix', agent: 'Reza', kind: 'meeting' }],
    22: [{ time: '10:00', t: 'Carousel · "8 operators, 1 dashboard"', agent: 'Kairos', kind: 'post' }, { time: '13:00', t: 'Meta · "Demiurge for ops" · UK refresh', agent: 'Orion', kind: 'ad' }],
    23: [{ time: '09:00', t: 'Webinar · "Agents in production"', agent: 'Calliope', kind: 'event' }, { time: '14:00', t: 'Trial expiring · D14 SMS · 218 users', agent: 'Calliope', kind: 'sms' }],
    24: [],
    25: [],
  };
  const colorOf = (k) => ({
    post: 'var(--violet)',
    batch: 'var(--cyan)',
    broadcast: 'var(--cyan)',
    meeting: 'var(--good)',
    ad: 'var(--magenta)',
    event: 'var(--warn)',
    sms: 'var(--good)',
  })[k] || 'var(--text-dim)';

  return (
    <div>
      <div className="page-hd">
        <div className="page-hd-l">
          <div className="page-eyebrow">Schedule · week of May 19, 2026</div>
          <h1 className="page-title">Calendar</h1>
          <div className="page-sub">Scheduled content posts, outbound batches, meetings, and lifecycle events. What your operators will do — and when.</div>
        </div>
        <div className="page-hd-r">
          <div className="segmented">
            <button>DAY</button>
            <button className="active">WEEK</button>
            <button>MONTH</button>
          </div>
          <button className="btn ghost"><Icon.ChevronR style={{ transform: 'rotate(180deg)', width: 14, height: 14 }}/></button>
          <span className="mono dim" style={{ fontSize: 12, minWidth: 100, textAlign: 'center' }}>May 19 – 25</span>
          <button className="btn ghost"><Icon.ChevronR style={{ width: 14, height: 14 }}/></button>
          <button className="btn primary"><Icon.Plus className="icon"/>Schedule</button>
        </div>
      </div>

      <div style={{ padding: 24 }}>
        <div className="panel" style={{ overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: `repeat(7, 1fr)`, borderBottom: '1px solid var(--border)' }}>
            {days.map((d, i) => {
              const dayNum = startDay + i;
              const isToday = i === 2; // Wed
              return (
                <div key={d} style={{ padding: '14px 16px', borderRight: i < 6 ? '1px solid var(--border)' : 'none', display: 'flex', flexDirection: 'column', gap: 2 }}>
                  <span className="mono faint" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em' }}>{d}</span>
                  <span className="serif" style={{ fontSize: 22, fontStyle: 'italic', color: isToday ? 'var(--cyan)' : 'var(--text)' }}>{dayNum}</span>
                </div>
              );
            })}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: `repeat(7, 1fr)`, minHeight: 520 }}>
            {days.map((d, i) => {
              const dayNum = startDay + i;
              const dayEvents = events[dayNum] || [];
              return (
                <div key={d} style={{ padding: 8, borderRight: i < 6 ? '1px solid var(--border)' : 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {dayEvents.map((e, j) => {
                    const c = colorOf(e.kind);
                    return (
                      <div key={j} style={{
                        padding: 10,
                        background: `linear-gradient(135deg, ${c}15, ${c}05)`,
                        border: `1px solid ${c}30`,
                        borderLeft: `2px solid ${c}`,
                        borderRadius: 'var(--radius)',
                        cursor: 'pointer',
                        display: 'flex', flexDirection: 'column', gap: 4,
                      }}>
                        <div className="mono" style={{ fontSize: 10, color: c, letterSpacing: '0.06em' }}>{e.time} · {e.kind.toUpperCase()}</div>
                        <div style={{ fontSize: 11, lineHeight: 1.4, color: 'var(--text)' }}>{e.t}</div>
                        <div className="mono faint" style={{ fontSize: 9 }}>by {e.agent}</div>
                      </div>
                    );
                  })}
                  {dayEvents.length === 0 && <div className="faint" style={{ fontSize: 10, textAlign: 'center', padding: 12 }}>—</div>}
                </div>
              );
            })}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginTop: 14 }}>
          {[
            { label: 'SCHEDULED · 7D', val: '47' },
            { label: 'POSTED · 7D', val: '142' },
            { label: 'MEETINGS · 7D', val: '38' },
            { label: 'NEEDS REVIEW', val: '6' },
          ].map(s => (
            <div key={s.label} className="panel" style={{ padding: 14 }}>
              <div className="mono faint" style={{ fontSize: 10, letterSpacing: '0.12em', marginBottom: 8 }}>{s.label}</div>
              <div className="serif" style={{ fontSize: 28, fontStyle: 'italic' }}>{s.val}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.Calendar = Calendar;