function Calendar({ clients: _clients, onOpenClient, calView, onCalView }) {
  const MONTHS = [
    { name:"April",  year:2026, firstDow:2, daysIn:30 },
    { name:"May",    year:2026, firstDow:5, daysIn:31 },
    { name:"June",   year:2026, firstDow:0, daysIn:30 },
  ];
  const [monthIdx, setMonthIdx] = React.useState(1);
  const [showSchedule, setShowSchedule] = React.useState(false);
  const [schedForm, setSchedForm]       = React.useState({ client:"", date:"", time:"", notes:"" });

  // Use lifted state if provided, fall back to local
  const [localCalView, setLocalCalView] = React.useState("month");
  const activeCalView = calView || localCalView;
  function setActiveCalView(v) {
    if (onCalView) onCalView(v);
    setLocalCalView(v);
  }

  const { name: monthName, year, firstDow, daysIn } = MONTHS[monthIdx];
  const today = monthIdx === 1 ? 23 : null;

  const cells = [];
  for (let i = 0; i < firstDow; i++) cells.push({ out: true, day: (monthIdx === 0 ? 31 : 30) - firstDow + 1 + i });
  for (let d = 1; d <= daysIn; d++) cells.push({ out: false, day: d });
  while (cells.length % 7 !== 0) cells.push({ out: true, day: cells.length - daysIn - firstDow + 1 });

  const events = (_clients||CLIENTS).filter(c => c.nextCall).map(c => {
    const m = c.nextCall.match(/^(\w{3}) (\d{1,2})$/);
    if (!m) return null;
    return { mon: m[1], day: parseInt(m[2], 10), name: c.name, color: stageColor(c.stage), overdue: c.overdue, clientId: c.id };
  }).filter(Boolean);

  const ops = [
    { mon:"May", day:24, name:"GMaps scrape: Bloomington", color:"#5e6ad2" },
    { mon:"May", day:27, name:"Build batch: 4 sites",      color:"#f2994a" },
    { mon:"May", day:28, name:"Deploy batch",              color:"#27a644" },
    { mon:"May", day:29, name:"Invoice run",               color:"#3bbdb1" },
    { mon:"Jun", day:5,  name:"Riverbend renewal call",    color:"#3bbdb1" },
    { mon:"Jun", day:10, name:"Capitol City upsell call",  color:"#3bbdb1" },
  ];
  const allEvents = [...events, ...ops];

  function eventsOn(day) {
    return allEvents.filter(e => e.mon === monthName.slice(0,3) && e.day === day);
  }

  function handleSchedule(e) {
    e.preventDefault();
    alert(`Call scheduled!\n\nClient: ${schedForm.client}\nDate: ${schedForm.date}\nTime: ${schedForm.time}\n\nThis would save to data.js in a real app.`);
    setShowSchedule(false);
    setSchedForm({ client:"", date:"", time:"", notes:"" });
  }

  return (
    <div className="cm-page">
      <div className="cm-bar">
        <div className="cm-bar__l">
          <span className="cm-bar__crumb">Calendar <span className="cm-bar__crumbSep">/</span> <span className="cm-bar__crumbMuted">{monthName} {year}</span></span>
          <div className="cm-bar__tabs">
            <span className={"cm-bar__tab is-active"}>Month</span>
          </div>
        </div>
        <div className="cm-bar__r">
          <button className="cm-iconbtn" onClick={() => setMonthIdx(i => Math.max(0, i-1))} disabled={monthIdx===0}><i data-lucide="chevron-left" className="cm-icon-sm"></i></button>
          <button className="cm-btn cm-btn--ghost" onClick={() => setMonthIdx(1)}>Today</button>
          <button className="cm-iconbtn" onClick={() => setMonthIdx(i => Math.min(MONTHS.length-1, i+1))} disabled={monthIdx===MONTHS.length-1}><i data-lucide="chevron-right" className="cm-icon-sm"></i></button>
          <button className="cm-btn cm-btn--primary" onClick={() => setShowSchedule(true)}><i data-lucide="plus" className="cm-icon-xs"></i>Schedule call</button>
        </div>
      </div>

      {activeCalView === "month" && (
        <div className="cm-cal">
          <div className="cm-cal__head">
            {["Sun","Mon","Tue","Wed","Thu","Fri","Sat"].map(d => <div key={d}>{d}</div>)}
          </div>
          <div className="cm-cal__grid">
            {cells.map((c, i) => {
              const evts = c.out ? [] : eventsOn(c.day);
              return (
                <div key={i} className={"cm-cal__cell " + (c.out ? "is-out " : "") + (!c.out && c.day === today ? "is-today" : "")}>
                  <div className="cm-cal__day">{c.day}</div>
                  {evts.slice(0, 3).map((e, j) => (
                    <div key={j}
                      className={"cm-cal__event " + (e.overdue ? "is-overdue" : "")}
                      style={{ cursor: e.clientId ? "pointer" : "default" }}
                      onClick={() => e.clientId && onOpenClient && onOpenClient(e.clientId)}
                    >
                      <span className="cm-cal__eventDot" style={{ background: e.color }} />
                      {e.name}
                    </div>
                  ))}
                  {evts.length > 3 && <div style={{ fontSize:11, color:"var(--color-ink-subtle)", paddingLeft:6 }}>+{evts.length - 3} more</div>}
                </div>
              );
            })}
          </div>
        </div>
      )}

      {showSchedule && (
        <>
          <div className="cm-drawerScrim" onClick={() => setShowSchedule(false)} />
          <aside className="cm-drawer" style={{ width:420 }}>
            <div className="cm-drawer__bar">
              <span className="cm-drawer__crumb">Schedule a call</span>
              <div className="cm-drawer__bar-r">
                <button className="cm-iconbtn" onClick={() => setShowSchedule(false)}><i data-lucide="x" className="cm-icon-sm"></i></button>
              </div>
            </div>
            <form className="cm-drawer__body" onSubmit={handleSchedule} style={{ gap:14 }}>
              <div className="cm-section">
                <label className="cm-sectionHead">Client</label>
                <select className="cm-input" value={schedForm.client} onChange={e => setSchedForm(f => ({...f, client:e.target.value}))} required style={{ appearance:"none" }}>
                  <option value="">Select a client…</option>
                  {(_clients||CLIENTS).map(c => <option key={c.id} value={c.name}>{c.name} · {c.city}</option>)}
                </select>
              </div>
              <div style={{ display:"flex", gap:10 }}>
                <div className="cm-section" style={{ flex:1 }}>
                  <label className="cm-sectionHead">Date</label>
                  <input type="date" className="cm-input" value={schedForm.date} onChange={e => setSchedForm(f => ({...f, date:e.target.value}))} required />
                </div>
                <div className="cm-section" style={{ flex:1 }}>
                  <label className="cm-sectionHead">Time</label>
                  <input type="time" className="cm-input" value={schedForm.time} onChange={e => setSchedForm(f => ({...f, time:e.target.value}))} />
                </div>
              </div>
              <div className="cm-section">
                <label className="cm-sectionHead">Notes</label>
                <textarea className="cm-textarea" placeholder="What's the agenda?" value={schedForm.notes} onChange={e => setSchedForm(f => ({...f, notes:e.target.value}))} style={{ minHeight:72 }} />
              </div>
              <div style={{ display:"flex", gap:8, justifyContent:"flex-end" }}>
                <button type="button" className="cm-btn cm-btn--ghost" onClick={() => setShowSchedule(false)}>Cancel</button>
                <button type="submit" className="cm-btn cm-btn--primary"><i data-lucide="calendar" className="cm-icon-xs"></i>Schedule</button>
              </div>
            </form>
          </aside>
        </>
      )}
    </div>
  );
}
window.Calendar = Calendar;