// HRM — Org chart, employee directory, detail drawer

function HRM() {
  const D = window.HitcentsData;
  const [view, setView] = useState('chart'); // chart | directory
  const [openEmp, setOpenEmp] = useState(null);
  const [addOpen, setAddOpen] = useState(false);
  const [version, setVersion] = useState(0);
  const [filter, setFilter] = useState('');
  const [deptFilter, setDeptFilter] = useState('all');

  // Listen for global open events
  useEffect(() => {
    function onOpen(e) {
      if (e.detail && e.detail.type === 'employee') {
        const emp = D.EMPLOYEES.find(x => x.id === e.detail.id);
        if (emp) setOpenEmp(emp);
      }
    }
    window.addEventListener('hitcents:open', onOpen);
    return () => window.removeEventListener('hitcents:open', onOpen);
  }, []);

  const filtered = D.EMPLOYEES.filter(e => {
    if (deptFilter !== 'all' && e.dept !== deptFilter) return false;
    if (filter && !`${e.name} ${e.title} ${e.email}`.toLowerCase().includes(filter.toLowerCase())) return false;
    return true;
  });

  return (
    <div data-screen-label="HRM">
      <div className="page-head">
        <div>
          <h1>People</h1>
          <div className="sub">28 employees · 8 departments · 4 open requisitions</div>
        </div>
        <div className="row gap-2">
          <Button variant="secondary" icon="download">Export</Button>
          <Button variant="primary" icon="plus" onClick={() => setAddOpen(true)}>Add employee</Button>
        </div>
      </div>

      <div className="tabs" style={{ marginBottom: 18 }}>
        <button className={`tab ${view === 'chart' ? 'active' : ''}`} onClick={() => setView('chart')}>Org chart</button>
        <button className={`tab ${view === 'directory' ? 'active' : ''}`} onClick={() => setView('directory')}>Directory</button>
      </div>

      {view === 'chart' && <OrgChart onOpen={setOpenEmp} />}
      {view === 'directory' && (
        <>
          <div className="toolbar">
            <div className="search-inline">
              <Icon name="search" size={14} />
              <input placeholder="Search employees…" value={filter} onChange={e => setFilter(e.target.value)} />
            </div>
            <Button variant="ghost" size="sm" icon="filter">More filters</Button>
            <div style={{ marginLeft: 'auto' }} className="muted" >{filtered.length} of 28</div>
          </div>
          <div className="card flush">
            <table className="table">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Title</th>
                  <th>Tenure</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map(e => {
                  return (
                    <tr key={e.id} className="clickable" onClick={() => setOpenEmp(e)}>
                      <td>
                        <div className="row gap-2">
                          <Avatar person={e} size={28} />
                          <div>
                            <div style={{ fontWeight: 500 }}>{e.name}</div>
                            <div className="dim" style={{ fontSize: 11.5 }}>{e.email}</div>
                          </div>
                        </div>
                      </td>
                      <td>{e.title}</td>
                      <td className="mono">{e.tenure}y</td>
                      <td><Badge tone={e.status === 'Active' ? 'green' : 'neutral'}>{e.status}</Badge></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </>
      )}

      <Drawer open={!!openEmp} onClose={() => setOpenEmp(null)} title="Employee profile" width={640}
              actions={<Button variant="ghost" size="sm" icon="pencil">Edit</Button>}>
        {openEmp && <EmployeeDetail emp={openEmp} onOpen={setOpenEmp} />}
      </Drawer>

      {addOpen && (
        <AddEmployeeModal
          onClose={() => setAddOpen(false)}
          onCreate={(emp) => {
            D.EMPLOYEES.push(emp);
            setVersion(v => v + 1);
            setAddOpen(false);
            setOpenEmp(emp);
          }} />
      )}
    </div>
  );
}

function OrgChart({ onOpen }) {
  const D = window.HitcentsData;
  const [expanded, setExpanded] = useState(() => {
    // Default: only the CEO is expanded — showing CEO + direct reports.
    // User can drill deeper or expand-all from the toolbar.
    const ceo = D.EMPLOYEES.find(e => !e.mgr);
    return new Set(ceo ? [ceo.id] : []);
  });
  const canvasRef = useRef(null);

  function toggle(id) {
    setExpanded(s => {
      const next = new Set(s);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  }

  function renderNode(emp) {
    const reports = D.EMPLOYEES.filter(e => e.mgr === emp.id);
    const d = getDept(emp.dept);
    const isOpen = expanded.has(emp.id);
    const hasReports = reports.length > 0;
    const team = hasReports ? orgSubtreeSize(emp.id) : 0;
    return (
      <div className="org-branch" key={emp.id}>
        <div className="org-node" onClick={() => onOpen(emp)}
             style={{ borderTopColor: d?.color, borderTopWidth: 3 }}>
          <Avatar person={emp} size={42} />
          <div className="name">{emp.name}</div>
          <div className="role">{emp.title}</div>
        </div>

        {hasReports && (
          <button className={`org-toggle ${isOpen ? 'open' : ''}`}
                  title={isOpen ? 'Hide reports' : `Show ${reports.length} direct report${reports.length > 1 ? 's' : ''} · ${team} total`}
                  onClick={(e) => { e.stopPropagation(); toggle(emp.id); }}>
            {isOpen
              ? <Icon name="chev_u" size={13} />
              : <><span>{reports.length}</span><Icon name="chev_d" size={12} /></>}
          </button>
        )}

        {isOpen && hasReports && (
          <div className="org-subtree">
            <div className="org-children">
              {reports.map(r => (
                <div className="org-child" key={r.id}>{renderNode(r)}</div>
              ))}
            </div>
          </div>
        )}
      </div>
    );
  }

  const ceo = D.EMPLOYEES.find(e => !e.mgr);

  // Drag-to-pan on empty canvas space
  function onCanvasPointerDown(e) {
    if (e.button !== 0) return;
    if (e.target.closest('.org-node') || e.target.closest('.org-toggle')) return;
    const el = canvasRef.current;
    if (!el) return;
    el.classList.add('grabbing');
    const startX = e.clientX, startY = e.clientY;
    const sl = el.scrollLeft, st = el.scrollTop;
    function move(ev) {
      el.scrollLeft = sl - (ev.clientX - startX);
      el.scrollTop = st - (ev.clientY - startY);
    }
    function up() {
      el.classList.remove('grabbing');
      window.removeEventListener('pointermove', move);
      window.removeEventListener('pointerup', up);
    }
    window.addEventListener('pointermove', move);
    window.addEventListener('pointerup', up);
  }

  return (
    <div className="card flush org-card">
      <div className="org-toolbar">
        <Button size="sm" variant="secondary" icon="plus" onClick={() => setExpanded(new Set(D.EMPLOYEES.map(e => e.id)))}>Expand all</Button>
        <Button size="sm" variant="ghost" icon="chev_u" onClick={() => setExpanded(new Set([ceo.id]))}>Collapse</Button>
        <span className="org-hint">Drag to pan · click a card for details</span>
      </div>
      <div className="org-canvas" ref={canvasRef} onPointerDown={onCanvasPointerDown}>
        <div className="org-stage">
          {renderNode(ceo)}
        </div>
      </div>
    </div>
  );
}

// Count everyone in an employee's reporting subtree (recursive).
function orgSubtreeSize(empId) {
  const D = window.HitcentsData;
  const direct = D.EMPLOYEES.filter(e => e.mgr === empId);
  return direct.reduce((s, r) => s + 1 + orgSubtreeSize(r.id), 0);
}

function EmployeeDetail({ emp, onOpen }) {
  const D = window.HitcentsData;
  const d = getDept(emp.dept);
  const mgr = emp.mgr ? getEmployee(emp.mgr) : null;
  const reports = D.EMPLOYEES.filter(e => e.mgr === emp.id);
  const totalOrg = orgSubtreeSize(emp.id);
  const [, bumpAvatar] = useState(0);

  useEffect(() => {
    const onChange = (e) => { if (e.detail?.id === emp.id) bumpAvatar(n => n + 1); };
    window.addEventListener('hitcents:avatar-changed', onChange);
    return () => window.removeEventListener('hitcents:avatar-changed', onChange);
  }, [emp.id]);

  return (
    <div className="emp-profile">
      {/* Hero */}
      <div className="emp-hero" style={{ '--dept': d.color }}>
        <button className="emp-avatar-upload" onClick={() => pickAvatarImage(emp.id)} title="Upload profile picture">
          <Avatar person={emp} size={64} />
          <span className="emp-avatar-cam"><Icon name="upload" size={13} /></span>
        </button>
        <div style={{ flex: 1, minWidth: 0 }}>
          <h2 className="emp-hero-name">{emp.name}</h2>
          <div className="emp-hero-title">{emp.title}</div>
          <div className="row gap-2" style={{ marginTop: 8, flexWrap: 'wrap' }}>
            <Badge tone={emp.status === 'Active' ? 'green' : 'neutral'}>{emp.status}</Badge>
            <Badge>{emp.role}</Badge>
          </div>
        </div>
      </div>

      {/* Quick actions */}
      <div className="emp-actions" style={{ gridTemplateColumns: 'repeat(2, 1fr)' }}>
        <a className="emp-action" href={`mailto:${emp.email}`}><Icon name="mail" size={14} />Email</a>
        <button className="emp-action" onClick={() => window.dispatchEvent(new CustomEvent('hitcents:open-dm', { detail: { empId: emp.id } }))}><Icon name="send" size={14} />Message</button>
      </div>

      {/* Facts */}
      <div className="emp-facts">
        <Fact icon="mail" label="Email" value={emp.email} mono />
        <Fact icon="phone" label="Phone" value={emp.phone} mono />
        <Fact icon="cal" label="Started" value={`${fmtDate(emp.start)} · ${emp.tenure}y tenure`} />
      </div>

      {/* Reporting line */}
      <SectionTitle>Reporting line</SectionTitle>
      <div className="emp-reportline">
        {mgr ? (
          <button className="emp-person-row" onClick={() => onOpen(mgr)}>
            <span className="emp-person-tag">Manager</span>
            <Avatar person={mgr} size={32} />
            <div style={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
              <div className="emp-person-name">{mgr.name}</div>
              <div className="emp-person-sub">{mgr.title}</div>
            </div>
            <Icon name="chev_r" size={15} style={{ color: 'var(--text-muted)' }} />
          </button>
        ) : (
          <div className="emp-topbadge"><Icon name="star" size={13} />Top of the org — reports to the board</div>
        )}
      </div>

      {/* Direct reports — scales to any team size */}
      {reports.length > 0 && (
        <DirectReports reports={reports} totalOrg={totalOrg} onOpen={onOpen} />
      )}

      {/* Activity */}
      <SectionTitle>Recent activity</SectionTitle>
      <div className="emp-timeline">
        {[
          { icon: 'check', color: 'var(--green)', text: 'Completed onboarding checklist', when: '2 weeks ago' },
          { icon: 'briefcase', color: 'var(--text-muted)', text: 'Assigned to Atlas v4', when: '1 month ago' },
          { icon: 'bolt', color: 'var(--brand-orange)', text: 'Performance review — Q1 2026', when: '2 months ago' },
        ].map((a, i) => (
          <div key={i} className="emp-tl-row">
            <span className="emp-tl-dot" style={{ color: a.color }}><Icon name={a.icon} size={11} /></span>
            <span style={{ flex: 1 }}>{a.text}</span>
            <span className="dim" style={{ fontSize: 11.5 }}>{a.when}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function DirectReports({ reports, totalOrg, onOpen }) {
  const [q, setQ] = useState('');
  const showSearch = reports.length > 6;
  const filtered = q.trim()
    ? reports.filter(r => `${r.name} ${r.title}`.toLowerCase().includes(q.toLowerCase()))
    : reports;

  // Department spread among reports
  const deptSet = new Set(reports.map(r => r.dept));

  return (
    <>
      <div className="emp-reports-head">
        <SectionTitle>Direct reports</SectionTitle>
        <div className="emp-reports-stats">
          <span><strong>{reports.length}</strong> direct</span>
          {totalOrg > reports.length && <span><strong>{totalOrg}</strong> in org</span>}
          <span><strong>{deptSet.size}</strong> {deptSet.size === 1 ? 'team' : 'teams'}</span>
        </div>
      </div>

      {showSearch && (
        <div className="emp-reports-search">
          <Icon name="search" size={13} />
          <input value={q} onChange={e => setQ(e.target.value)} placeholder={`Search ${reports.length} reports…`} />
          {q && <button className="icon-btn" style={{ width: 22, height: 22 }} onClick={() => setQ('')}><Icon name="x" size={12} /></button>}
        </div>
      )}

      <div className={`emp-reports-grid ${reports.length > 8 ? 'scroll' : ''}`}>
        {filtered.map(r => {
          const rd = getDept(r.dept);
          const sub = D2(r);
          return (
            <button key={r.id} className="emp-person-chip" onClick={() => onOpen(r)} style={{ '--dept': rd.color }}>
              <Avatar person={r} size={32} />
              <div style={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
                <div className="emp-person-name">{r.name}</div>
                <div className="emp-person-sub">{r.title}{sub ? ` · ${sub}` : ''}</div>
              </div>
              <Icon name="chev_r" size={14} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
            </button>
          );
        })}
        {filtered.length === 0 && (
          <div className="muted" style={{ fontSize: 12.5, padding: '12px 4px', gridColumn: '1 / -1' }}>No reports match "{q}".</div>
        )}
      </div>
    </>
  );
}

// Tiny helper: if this report also manages people, surface the count.
function D2(r) {
  const n = window.HitcentsData.EMPLOYEES.filter(e => e.mgr === r.id).length;
  return n > 0 ? `manages ${n}` : '';
}

function Fact({ icon, label, value, mono }) {
  return (
    <div className="emp-fact">
      <div className="emp-fact-label"><Icon name={icon} size={11} />{label}</div>
      <div className={`emp-fact-value ${mono ? 'mono' : ''}`} title={value}>{value}</div>
    </div>
  );
}

function InfoRow({ icon, label, value }) {
  return (
    <div style={{ padding: '8px 10px', background: 'var(--bg-elev)', borderRadius: 8 }}>
      <div className="dim row gap-2" style={{ fontSize: 11, marginBottom: 2 }}>
        <Icon name={icon} size={11} />{label}
      </div>
      <div style={{ fontSize: 13 }}>{value}</div>
    </div>
  );
}

function SectionTitle({ children }) {
  return <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', fontWeight: 600, margin: '18px 0 8px' }}>{children}</div>;
}

// ─────────────────────────────────────────────────────────────────────────────
// Add Employee modal
// ─────────────────────────────────────────────────────────────────────────────

const SKILL_SUGGESTIONS = {
  eng: ['TypeScript','Go','React','Postgres','Kubernetes','Systems design'],
  des: ['Figma','Design systems','Prototyping','User research','Brand'],
  prd: ['Roadmapping','Discovery','Analytics','Strategy','Writing'],
  mkt: ['Content','SEO','Lifecycle','Paid social','Brand'],
  sal: ['Prospecting','Negotiation','Discovery','Forecasting','SaaS'],
  sup: ['Troubleshooting','SSO','Escalation','SLAs','Documentation'],
  hr:  ['Recruiting','Onboarding','Benefits','People ops','Compliance'],
  fin: ['Accounting','FP&A','Payroll','Audit','Modeling'],
};

function AddEmployeeModal({ onClose, onCreate }) {
  const D = window.HitcentsData;
  const [emailEdited, setEmailEdited] = useState(false);
  const [skillInput, setSkillInput] = useState('');
  const [draft, setDraft] = useState({
    name: '', title: '', dept: 'eng', mgr: 'e2',
    email: '', phone: '', loc: 'Bowling Green, KY',
    start: '2026-06-01', role: 'Employee', employment: 'Full-time',
    skills: [],
  });

  function set(patch) { setDraft(d => ({ ...d, ...patch })); }

  // Derive email from first name unless user typed their own
  function onName(name) {
    const first = name.trim().split(' ')[0].toLowerCase().replace(/[^a-z]/g, '');
    setDraft(d => ({ ...d, name, email: emailEdited ? d.email : (first ? `${first}@hitcents.com` : '') }));
  }

  function addSkill(s) {
    const v = s.trim();
    if (!v || draft.skills.includes(v)) return;
    set({ skills: [...draft.skills, v] });
    setSkillInput('');
  }
  function removeSkill(s) { set({ skills: draft.skills.filter(x => x !== s) }); }

  const dept = getDept(getEmployee(draft.mgr)?.dept || draft.dept || 'eng');
  const mgr = getEmployee(draft.mgr);
  // Managers a new hire could report to: the CEO, VPs/Directors/Heads, and existing managers
  const possibleMgrs = D.EMPLOYEES.filter(e => e.role === 'Manager' || e.role === 'Admin' || /VP|Head|Director|Lead|Chief/.test(e.title));

  const canCreate = draft.name.trim() && draft.title.trim() && draft.mgr;

  function submit() {
    if (!canCreate) return;
    const id = `e${D.EMPLOYEES.length + 1}`;
    const emp = {
      id,
      name: draft.name.trim(),
      title: draft.title.trim(),
      dept: getEmployee(draft.mgr)?.dept || draft.dept || 'eng',
      mgr: draft.mgr,
      email: draft.email || `${draft.name.trim().split(' ')[0].toLowerCase()}@hitcents.com`,
      phone: draft.phone || '+1 270 555 0100',
      loc: draft.loc,
      start: draft.start,
      role: draft.role,
      status: 'Active',
      skills: draft.skills.length ? draft.skills : ['Onboarding'],
      tenure: 0,
      avatar: avatarFor(draft.name.trim() || 'New Hire', D.EMPLOYEES.length + 1),
    };
    onCreate(emp);
  }

  const suggestions = (SKILL_SUGGESTIONS[draft.dept] || []).filter(s => !draft.skills.includes(s));

  return (
    <div className="cmdk-scrim" onClick={onClose} style={{ paddingTop: '6vh', alignItems: 'flex-start' }}>
      <div onClick={e => e.stopPropagation()}
           style={{ width: 820, maxWidth: '94vw', maxHeight: '88vh', background: 'var(--bg-card)', borderRadius: 14, border: '1px solid var(--border)', boxShadow: 'var(--shadow-lg)', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>

        {/* Header */}
        <div style={{ padding: '16px 24px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>Add employee</h2>
            <div className="muted" style={{ fontSize: 12.5, marginTop: 2 }}>Create a profile and place them in the org. They'll be invited and onboarding will kick off automatically.</div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={16} /></button>
        </div>

        {/* Body */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', flex: 1, minHeight: 0 }}>
          {/* Form */}
          <div style={{ padding: 24, overflowY: 'auto', borderRight: '1px solid var(--border)' }}>
            <div className="add-emp-sech">Identity</div>
            <div className="add-emp-row2">
              <div className="field" style={{ margin: 0 }}>
                <label>Full name</label>
                <input autoFocus placeholder="e.g. Jordan Avery" value={draft.name} onChange={e => onName(e.target.value)} />
              </div>
              <div className="field" style={{ margin: 0 }}>
                <label>Job title</label>
                <input placeholder="e.g. Backend Engineer" value={draft.title} onChange={e => set({ title: e.target.value })} />
              </div>
            </div>

            <div className="add-emp-sech">Placement</div>
            <div className="add-emp-row2">
              <div className="field" style={{ margin: 0 }}>
                <label>Reports to</label>
                <select value={draft.mgr} onChange={e => set({ mgr: e.target.value, dept: getEmployee(e.target.value)?.dept || 'eng' })}>
                  {possibleMgrs.map(m => <option key={m.id} value={m.id}>{m.name} · {m.title}</option>)}
                </select>
              </div>
              <div className="field" style={{ margin: 0 }}>
                <label>Access role</label>
                <select value={draft.role} onChange={e => set({ role: e.target.value })}>
                  {D.ROLES.map(r => <option key={r} value={r}>{r}</option>)}
                </select>
              </div>
            </div>

            <div className="add-emp-sech">Contact & start</div>
            <div className="field" style={{ margin: 0, marginBottom: 14 }}>
              <label>Work email</label>
              <input type="email" placeholder="name@hitcents.com" value={draft.email}
                     onChange={e => { setEmailEdited(true); set({ email: e.target.value }); }} />
            </div>
            <div className="add-emp-row2">
              <div className="field" style={{ margin: 0 }}>
                <label>Phone</label>
                <input placeholder="+1 270 555 0100" value={draft.phone} onChange={e => set({ phone: e.target.value })} />
              </div>
              <div className="field" style={{ margin: 0 }}>
                <label>Location</label>
                <input placeholder="City, State / Remote — City" value={draft.loc} onChange={e => set({ loc: e.target.value })} />
              </div>
            </div>
            <div className="add-emp-row2" style={{ marginTop: 14 }}>
              <div className="field" style={{ margin: 0 }}>
                <label>Start date</label>
                <input type="date" value={draft.start} onChange={e => set({ start: e.target.value })} />
              </div>
              <div className="field" style={{ margin: 0 }}>
                <label>Employment type</label>
                <select value={draft.employment} onChange={e => set({ employment: e.target.value })}>
                  {['Full-time','Part-time','Contractor','Intern'].map(t => <option key={t}>{t}</option>)}
                </select>
              </div>
            </div>

            <div className="add-emp-sech">Skills</div>
            <div className="add-emp-skillbox">
              {draft.skills.map(s => (
                <span key={s} className="add-emp-skill">
                  {s}
                  <button onClick={() => removeSkill(s)} aria-label={`Remove ${s}`}><Icon name="x" size={10} stroke={2.5} /></button>
                </span>
              ))}
              <input
                value={skillInput}
                onChange={e => setSkillInput(e.target.value)}
                onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); addSkill(skillInput); } }}
                placeholder={draft.skills.length ? 'Add another…' : 'Type a skill and press Enter'} />
            </div>
            {suggestions.length > 0 && (
              <div className="row gap-2" style={{ flexWrap: 'wrap', marginTop: 8 }}>
                {suggestions.map(s => (
                  <button key={s} className="add-emp-suggest" onClick={() => addSkill(s)}>
                    <Icon name="plus" size={10} stroke={2.5} />{s}
                  </button>
                ))}
              </div>
            )}
          </div>

          {/* Live preview */}
          <div style={{ padding: 24, overflowY: 'auto', background: 'var(--bg-elev)' }}>
            <div className="dim" style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: 0.6, fontWeight: 600, marginBottom: 10 }}>Preview</div>

            <div className="add-emp-card" style={{ '--dept': dept.color }}>
              <Avatar person={{ name: draft.name || 'New Hire', avatar: avatarFor(draft.name || 'New Hire', 99) }} size={56} />
              <div style={{ marginTop: 10, fontWeight: 600, fontSize: 16, color: 'var(--brand-wine)' }}>{draft.name || 'New hire'}</div>
              <div className="muted" style={{ fontSize: 12.5 }}>{draft.title || 'Title TBD'}</div>
              <div className="row gap-2" style={{ justifyContent: 'center', marginTop: 10, flexWrap: 'wrap' }}>
                <Badge>{draft.role}</Badge>
              </div>
            </div>

            <div className="add-emp-kv">
              <div><span>Reports to</span><strong>{mgr?.name || '—'}</strong></div>
              <div><span>Email</span><strong className="mono" style={{ fontSize: 11.5 }}>{draft.email || '—'}</strong></div>
              <div><span>Location</span><strong>{draft.loc || '—'}</strong></div>
              <div><span>Starts</span><strong>{fmtDate(draft.start)}</strong></div>
              <div><span>Type</span><strong>{draft.employment}</strong></div>
            </div>

            <div className="add-emp-effects">
              <div className="row gap-2" style={{ marginBottom: 6 }}>
                <Icon name="bolt" size={13} style={{ color: 'var(--brand-orange)' }} />
                <strong style={{ fontSize: 12 }}>On create</strong>
              </div>
              <ul style={{ margin: 0, padding: '0 0 0 18px', fontSize: 11.5, lineHeight: 1.6, color: 'var(--text-muted)' }}>
                <li>Added under <strong>{mgr?.name?.split(' ')[0] || 'their manager'}</strong> in the org chart</li>
                <li>Okta, GitHub & Slack accounts provisioned</li>
                <li>22-step onboarding checklist starts</li>
                <li>Welcome posted to <span className="mono">#general</span></li>
              </ul>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div style={{ padding: '14px 24px', borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'var(--bg-card)' }}>
          <Button variant="ghost" onClick={onClose}>Cancel</Button>
          <div className="row gap-2">
            {!canCreate && <span className="dim" style={{ fontSize: 11.5 }}>Name, title & manager required</span>}
            <Button variant="primary" icon="check" disabled={!canCreate} onClick={submit}>Add employee</Button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.HRM = HRM;
window.SectionTitle = SectionTitle;
window.InfoRow = InfoRow;

// ─────────────────────────────────────────────────────────────────────────────
// Time off
// ─────────────────────────────────────────────────────────────────────────────

const TIME_OFF_REQUESTS = [
  { id: 'to1', who: 'e11', type: 'Vacation', start: '2026-05-18', end: '2026-05-22', days: 5, status: 'Approved', note: 'Annual leave — Toronto' },
  { id: 'to2', who: 'e18', type: 'Vacation', start: '2026-05-20', end: '2026-05-29', days: 7, status: 'Approved', note: 'Family wedding' },
  { id: 'to3', who: 'e22', type: 'Sick', start: '2026-05-15', end: '2026-05-15', days: 1, status: 'Approved', note: '—' },
  { id: 'to4', who: 'e13', type: 'Vacation', start: '2026-06-08', end: '2026-06-19', days: 10, status: 'Pending', note: 'Honeymoon — Iceland' },
  { id: 'to5', who: 'e24', type: 'Personal', start: '2026-05-28', end: '2026-05-28', days: 1, status: 'Pending', note: 'Medical appointment' },
  { id: 'to6', who: 'e16', type: 'Vacation', start: '2026-07-06', end: '2026-07-10', days: 5, status: 'Approved', note: 'Beach trip' },
  { id: 'to7', who: 'e26', type: 'Vacation', start: '2026-05-25', end: '2026-05-30', days: 4, status: 'Approved', note: '—' },
  { id: 'to8', who: 'e3',  type: 'Conference', start: '2026-06-02', end: '2026-06-04', days: 3, status: 'Approved', note: 'Product@Heart Paris' },
];

function TimeOff() {
  const D = window.HitcentsData;
  const [requests, setRequests] = useState(TIME_OFF_REQUESTS);
  const [month, setMonth] = useState(new Date('2026-05-01'));

  const pending = requests.filter(r => r.status === 'Pending');
  const outToday = requests.filter(r => {
    const today = new Date('2026-05-15');
    return today >= new Date(r.start) && today <= new Date(r.end) && r.status === 'Approved';
  });

  function decide(id, status) {
    setRequests(rs => rs.map(r => r.id === id ? { ...r, status } : r));
  }

  // Build a 14-day strip starting from today
  const today = new Date('2026-05-15');
  const start = new Date(today);
  start.setDate(start.getDate() - 2);
  const days = Array.from({ length: 21 }, (_, i) => {
    const d = new Date(start);
    d.setDate(d.getDate() + i);
    return d;
  });

  return (
    <>
      <div className="grid g-4" style={{ marginBottom: 18, gap: 12 }}>
        <Kpi label="Out today" value={outToday.length} delta={outToday.map(r => getEmployee(r.who)?.name.split(' ')[0]).join(', ') || '—'} />
        <Kpi label="Pending approval" value={pending.length} delta="awaiting manager" tone={pending.length > 0 ? 'down' : 'up'} />
        <Kpi label="PTO used (YTD avg)" value="6.2 days" delta="of 20 day allotment" />
        <Kpi label="Coverage flags" value="0" delta="no clashes detected" tone="up" />
      </div>

      <div className="grid" style={{ gridTemplateColumns: '2fr 1fr', gap: 16 }}>
        <div className="card">
          <div className="card-h">
            <div><h3>Team availability</h3><div className="sub">Next 3 weeks · {requests.filter(r => r.status === 'Approved').length} approved blocks</div></div>
            <Button variant="primary" icon="plus" size="sm">Request time off</Button>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: `180px repeat(${days.length}, 1fr)`, gap: 2, fontSize: 11 }}>
            <div></div>
            {days.map((d, i) => {
              const isToday = d.toDateString() === today.toDateString();
              const weekend = d.getDay() === 0 || d.getDay() === 6;
              return (
                <div key={i} style={{ textAlign: 'center', padding: '6px 2px', color: isToday ? 'var(--brand-orange)' : weekend ? 'var(--text-dim)' : 'var(--text-muted)', fontWeight: isToday ? 600 : 400 }}>
                  <div style={{ fontSize: 9.5, textTransform: 'uppercase' }}>{['S','M','T','W','T','F','S'][d.getDay()]}</div>
                  <div className="mono" style={{ fontSize: 11 }}>{d.getDate()}</div>
                </div>
              );
            })}

            {D.EMPLOYEES.slice(0, 12).map(emp => (
              <React.Fragment key={emp.id}>
                <div className="row gap-2" style={{ padding: '6px 0', fontSize: 12 }}>
                  <Avatar person={emp} size={22} />
                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{emp.name}</span>
                </div>
                {days.map((d, i) => {
                  const block = requests.find(r => r.who === emp.id && d >= new Date(r.start) && d <= new Date(r.end));
                  const weekend = d.getDay() === 0 || d.getDay() === 6;
                  const isToday = d.toDateString() === today.toDateString();
                  return (
                    <div key={i} style={{
                      borderRadius: 4,
                      margin: '4px 0',
                      height: 22,
                      background: block
                        ? (block.status === 'Pending' ? 'var(--amber-tint)' : 'var(--brand-orange-tint)')
                        : weekend ? 'var(--bg-canvas)' : 'transparent',
                      border: block ? `1px solid ${block.status === 'Pending' ? 'var(--amber)' : 'var(--brand-orange)'}` : '1px solid transparent',
                      borderLeftWidth: isToday ? 2 : 1,
                      borderLeftColor: isToday ? 'var(--brand-orange)' : (block ? (block.status === 'Pending' ? 'var(--amber)' : 'var(--brand-orange)') : 'transparent'),
                    }} title={block ? `${block.type}: ${block.note}` : ''} />
                  );
                })}
              </React.Fragment>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-h">
            <div><h3>Pending approval</h3><div className="sub">{pending.length} requests need a decision</div></div>
          </div>
          {pending.length === 0 && <div className="muted" style={{ fontSize: 13, textAlign: 'center', padding: 20 }}>All caught up.</div>}
          {pending.map(r => {
            const who = getEmployee(r.who);
            return (
              <div key={r.id} style={{ padding: '12px 0', borderTop: '1px solid var(--border)' }}>
                <div className="row gap-2" style={{ marginBottom: 6 }}>
                  <Avatar person={who} size={26} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 500, fontSize: 13 }}>{who?.name}</div>
                    <div className="dim" style={{ fontSize: 11 }}>{r.type} · {r.days} day{r.days === 1 ? '' : 's'}</div>
                  </div>
                  <Badge tone="amber">Pending</Badge>
                </div>
                <div className="mono dim" style={{ fontSize: 11.5, marginBottom: 6 }}>{fmtDateShort(r.start)} → {fmtDateShort(r.end)}</div>
                {r.note !== '—' && <div className="muted" style={{ fontSize: 12, marginBottom: 8, fontStyle: 'italic' }}>"{r.note}"</div>}
                <div className="row gap-2">
                  <Button size="sm" variant="primary" icon="check" onClick={() => decide(r.id, 'Approved')}>Approve</Button>
                  <Button size="sm" variant="ghost" icon="x" onClick={() => decide(r.id, 'Declined')}>Decline</Button>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="card flush" style={{ marginTop: 16 }}>
        <table className="table">
          <thead><tr><th>Person</th><th>Type</th><th>Dates</th><th>Days</th><th>Note</th><th>Status</th></tr></thead>
          <tbody>
            {requests.slice().sort((a,b) => new Date(a.start) - new Date(b.start)).map(r => {
              const who = getEmployee(r.who);
              return (
                <tr key={r.id}>
                  <td><div className="row gap-2"><Avatar person={who} size={22} /><span style={{ fontSize: 12.5 }}>{who?.name}</span></div></td>
                  <td><Badge>{r.type}</Badge></td>
                  <td className="mono" style={{ fontSize: 11.5 }}>{fmtDateShort(r.start)} → {fmtDateShort(r.end)}</td>
                  <td className="mono">{r.days}</td>
                  <td className="muted" style={{ fontSize: 12, maxWidth: 280, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.note}</td>
                  <td><Badge tone={r.status === 'Approved' ? 'green' : r.status === 'Pending' ? 'amber' : 'red'}>{r.status}</Badge></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Hiring
// ─────────────────────────────────────────────────────────────────────────────

const HIRING_REQS = [
  { id: 'r1', title: 'Senior Backend Engineer', dept: 'eng', loc: 'Remote — US/EU', salary: '$170 – 210k', opened: '2026-04-08', recruiter: 'e6', mgr: 'e2', applicants: 84 },
  { id: 'r2', title: 'Account Executive — Enterprise', dept: 'sal', loc: 'Bowling Green or Remote', salary: '$110k base + OTE 220k', opened: '2026-03-20', recruiter: 'e6', mgr: 'e4', applicants: 56 },
  { id: 'r3', title: 'Designer — Product Systems', dept: 'des', loc: 'Remote — global', salary: '$140 – 165k', opened: '2026-05-01', recruiter: 'e6', mgr: 'e8', applicants: 122 },
  { id: 'r4', title: 'Customer Success Manager', dept: 'sup', loc: 'Bowling Green, KY', salary: '$90 – 115k', opened: '2026-04-22', recruiter: 'e6', mgr: 'e7', applicants: 38 },
];

const HIRE_STAGES = ['Applied','Screen','Interview','Offer','Hired'];

const CANDIDATES = [
  { id: 'cd1', name: 'Naila Sørensen', req: 'r1', stage: 'Interview', source: 'Referral', avatar: { initials: 'NS', hue: 30 } },
  { id: 'cd2', name: 'Eli Cho',         req: 'r1', stage: 'Offer',     source: 'LinkedIn', avatar: { initials: 'EC', hue: 200 } },
  { id: 'cd3', name: 'Tomi Adekunle',   req: 'r1', stage: 'Screen',    source: 'Inbound', avatar: { initials: 'TA', hue: 90 } },
  { id: 'cd4', name: 'Priya Ramaswamy', req: 'r1', stage: 'Applied',   source: 'LinkedIn', avatar: { initials: 'PR', hue: 280 } },
  { id: 'cd5', name: 'Mira Konstantopoulos', req: 'r1', stage: 'Interview', source: 'Conference', avatar: { initials: 'MK', hue: 140 } },
  { id: 'cd6', name: 'Anders Vinje',    req: 'r2', stage: 'Interview', source: 'Referral', avatar: { initials: 'AV', hue: 50 } },
  { id: 'cd7', name: 'Sasha Greene',    req: 'r2', stage: 'Screen',    source: 'Inbound', avatar: { initials: 'SG', hue: 320 } },
  { id: 'cd8', name: 'Wendy Kobayashi', req: 'r2', stage: 'Hired',     source: 'Referral', avatar: { initials: 'WK', hue: 240 } },
  { id: 'cd9', name: 'Bea Vargas',      req: 'r3', stage: 'Interview', source: 'Portfolio', avatar: { initials: 'BV', hue: 10 } },
  { id: 'cd10', name: 'Marc Lemieux',   req: 'r3', stage: 'Offer',     source: 'Referral', avatar: { initials: 'ML', hue: 170 } },
  { id: 'cd11', name: 'Iris Penã',      req: 'r3', stage: 'Applied',   source: 'Dribbble', avatar: { initials: 'IP', hue: 60 } },
  { id: 'cd12', name: 'Levi Onyango',   req: 'r4', stage: 'Interview', source: 'LinkedIn', avatar: { initials: 'LO', hue: 110 } },
  { id: 'cd13', name: 'Kara Spengler',  req: 'r4', stage: 'Screen',    source: 'Inbound', avatar: { initials: 'KS', hue: 300 } },
];

function Hiring() {
  const D = window.HitcentsData;
  const [selectedReq, setSelectedReq] = useState('r1');
  const reqCandidates = CANDIDATES.filter(c => c.req === selectedReq);
  const req = HIRING_REQS.find(r => r.id === selectedReq);
  const dept = req && getDept(req.dept);

  return (
    <>
      <div className="grid g-4" style={{ marginBottom: 18, gap: 12 }}>
        <Kpi label="Open reqs" value={HIRING_REQS.length} delta="across 4 departments" />
        <Kpi label="In interview" value={CANDIDATES.filter(c => c.stage === 'Interview').length} delta="this week" />
        <Kpi label="Offers out" value={CANDIDATES.filter(c => c.stage === 'Offer').length} delta="pending response" tone="up" />
        <Kpi label="Hires YTD" value="11" delta="vs plan of 14" />
      </div>

      <div className="grid" style={{ gridTemplateColumns: '320px 1fr', gap: 16 }}>
        <div className="col" style={{ gap: 10 }}>
          {HIRING_REQS.map(r => {
            const d = getDept(r.dept);
            const candCount = CANDIDATES.filter(c => c.req === r.id).length;
            return (
              <div key={r.id} className="card" onClick={() => setSelectedReq(r.id)}
                   style={{ cursor: 'pointer', padding: 14, borderColor: selectedReq === r.id ? 'var(--brand-orange)' : 'var(--border)', borderWidth: selectedReq === r.id ? 2 : 1 }}>
                <div className="row gap-2" style={{ marginBottom: 6 }}>
                  <Badge style={{ background: d?.color + '22', color: d?.color }}>{d?.name}</Badge>
                  <span className="dim mono" style={{ fontSize: 10.5, marginLeft: 'auto' }}>opened {fmtDateShort(r.opened)}</span>
                </div>
                <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 4 }}>{r.title}</div>
                <div className="dim" style={{ fontSize: 11.5 }}>{r.loc}</div>
                <div className="dim" style={{ fontSize: 11.5 }}>{r.salary}</div>
                <div className="row spread" style={{ marginTop: 10, paddingTop: 10, borderTop: '1px solid var(--border)' }}>
                  <span className="muted" style={{ fontSize: 11.5 }}>{r.applicants} applicants</span>
                  <span className="mono" style={{ fontSize: 11.5 }}>{candCount} in pipeline</span>
                </div>
              </div>
            );
          })}
          <Button variant="ghost" icon="plus" style={{ justifyContent: 'center', padding: 12, border: '1px dashed var(--border-strong)', borderRadius: 12 }}>Open new req</Button>
        </div>

        <div className="card flush">
          {req && (
            <div style={{ padding: 16, borderBottom: '1px solid var(--border)' }}>
              <div className="row gap-2" style={{ marginBottom: 4 }}>
                <Badge style={{ background: dept.color + '22', color: dept.color }}>{dept.name}</Badge>
                <Badge tone="green">Open</Badge>
              </div>
              <h3 style={{ margin: '4px 0', fontSize: 17, fontWeight: 600 }}>{req.title}</h3>
              <div className="muted" style={{ fontSize: 12.5 }}>{req.loc} · {req.salary} · {req.applicants} applicants</div>
              <div className="row gap-3" style={{ marginTop: 10, fontSize: 12 }}>
                <div className="row gap-2"><span className="muted">Hiring manager:</span><Avatar person={getEmployee(req.mgr)} size={20} /><span>{getEmployee(req.mgr)?.name}</span></div>
                <div className="row gap-2"><span className="muted">Recruiter:</span><Avatar person={getEmployee(req.recruiter)} size={20} /><span>{getEmployee(req.recruiter)?.name}</span></div>
              </div>
            </div>
          )}

          <div style={{ padding: 16 }}>
            <div style={{ display: 'grid', gridTemplateColumns: `repeat(${HIRE_STAGES.length}, 1fr)`, gap: 10 }}>
              {HIRE_STAGES.map(stage => {
                const cards = reqCandidates.filter(c => c.stage === stage);
                return (
                  <div key={stage} style={{ background: 'var(--bg-elev)', border: '1px solid var(--border)', borderRadius: 10, padding: 8, minHeight: 200 }}>
                    <div className="row spread" style={{ padding: '4px 6px 8px' }}>
                      <strong style={{ fontSize: 12 }}>{stage}</strong>
                      <span className="dim mono" style={{ fontSize: 11 }}>{cards.length}</span>
                    </div>
                    <div className="col" style={{ gap: 6 }}>
                      {cards.map(c => (
                        <div key={c.id} style={{ background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 8, padding: '8px 10px', fontSize: 12.5, cursor: 'pointer' }}>
                          <div className="row gap-2">
                            <div className="avatar" style={{ width: 24, height: 24, background: `oklch(72% 0.09 ${c.avatar.hue})`, color: `oklch(28% 0.06 ${c.avatar.hue})`, fontSize: 10 }}>{c.avatar.initials}</div>
                            <div style={{ flex: 1, minWidth: 0 }}>
                              <div style={{ fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.name}</div>
                              <div className="dim" style={{ fontSize: 10.5 }}>{c.source}</div>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Onboarding
// ─────────────────────────────────────────────────────────────────────────────

const ONBOARDING_HIRES = [
  { id: 'oh1', name: 'Pratik Sundar',  empId: 'e22', start: '2024-03-04', mgr: 'e4', buddy: 'e21', done: 18, total: 22 },
  { id: 'oh2', name: 'Caleb Otieno',   empId: 'e26', start: '2023-09-11', mgr: 'e7', buddy: 'e25', done: 22, total: 22 },
  { id: 'oh3', name: 'Wendy Kobayashi (incoming)', empId: null, start: '2026-06-02', mgr: 'e4', buddy: 'e20', done: 4, total: 22 },
  { id: 'oh4', name: 'Marc Lemieux (offer pending)', empId: null, start: '2026-06-15', mgr: 'e8', buddy: 'e18', done: 0, total: 22 },
];

const ONBOARDING_CHECKLIST = [
  { phase: 'Pre-start (Day -7 to 0)', items: [
    'Offer signed & countersigned',
    'Background check cleared',
    'Equipment shipped (laptop + peripherals)',
    'Accounts provisioned (Okta, GitHub, Slack)',
    'Welcome packet mailed',
  ]},
  { phase: 'Week 1', items: [
    'IT setup session',
    'Org overview & values onboarding',
    'Manager 1:1 cadence set',
    'Buddy intro + first 1:1',
    'Tools & systems orientation',
    'Benefits enrollment',
  ]},
  { phase: 'Days 30 / 60 / 90', items: [
    '30-day scorecard with manager',
    'First contribution shipped',
    '60-day team retro participation',
    '90-day performance review',
    'Long-term goal-setting',
  ]},
];

function Onboarding() {
  const [selected, setSelected] = useState('oh1');
  const hire = ONBOARDING_HIRES.find(h => h.id === selected);
  const mgr = hire && getEmployee(hire.mgr);
  const buddy = hire && getEmployee(hire.buddy);
  const pct = hire ? Math.round(hire.done / hire.total * 100) : 0;

  return (
    <>
      <div className="grid g-4" style={{ marginBottom: 18, gap: 12 }}>
        <Kpi label="Active onboardings" value={ONBOARDING_HIRES.length} delta="2 in flight · 2 incoming" />
        <Kpi label="Avg completion (30d)" value="91%" delta="↑ 4pt vs last quarter" tone="up" />
        <Kpi label="Buddy program coverage" value="100%" delta="every hire has a buddy" tone="up" />
        <Kpi label="Time-to-first-PR" value="6.2 days" delta="Engineering hires only" />
      </div>

      <div className="grid" style={{ gridTemplateColumns: '320px 1fr', gap: 16 }}>
        <div className="col" style={{ gap: 8 }}>
          {ONBOARDING_HIRES.map(h => {
            const m = getEmployee(h.mgr);
            const p = Math.round(h.done / h.total * 100);
            return (
              <div key={h.id} className="card" onClick={() => setSelected(h.id)}
                   style={{ padding: 12, cursor: 'pointer', borderColor: selected === h.id ? 'var(--brand-orange)' : 'var(--border)' }}>
                <div className="row gap-2" style={{ marginBottom: 8 }}>
                  <div className="avatar" style={{ width: 32, height: 32, background: 'var(--bg-elev)', color: 'var(--brand-wine)', fontWeight: 600 }}>{h.name.split(' ').map(x => x[0]).join('').slice(0,2)}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 500, fontSize: 13 }}>{h.name}</div>
                    <div className="dim" style={{ fontSize: 11 }}>Started {fmtDateShort(h.start)} · with {m?.name.split(' ')[0]}</div>
                  </div>
                </div>
                <div className="progress" style={{ marginBottom: 4 }}><div className="fill" style={{ width: `${p}%`, background: p === 100 ? 'var(--green)' : 'var(--brand-orange)' }} /></div>
                <div className="row spread" style={{ fontSize: 11, color: 'var(--text-muted)' }}>
                  <span>{h.done} of {h.total} tasks</span>
                  <span className="mono">{p}%</span>
                </div>
              </div>
            );
          })}
        </div>

        <div className="card">
          {hire && (
            <>
              <div className="row spread" style={{ marginBottom: 14 }}>
                <div>
                  <h3 style={{ margin: 0, fontSize: 17, fontWeight: 600 }}>{hire.name}</h3>
                  <div className="muted" style={{ fontSize: 12.5 }}>Starts {fmtDate(hire.start)} · Manager {mgr?.name} · Buddy {buddy?.name}</div>
                </div>
                <div className="row gap-2">
                  <Badge tone={pct === 100 ? 'green' : 'orange'}>{pct === 100 ? 'Complete' : `${hire.done} / ${hire.total}`}</Badge>
                  <Button variant="ghost" icon="send" size="sm">Nudge</Button>
                </div>
              </div>

              <div className="progress" style={{ marginBottom: 18 }}><div className="fill" style={{ width: `${pct}%`, background: pct === 100 ? 'var(--green)' : 'var(--brand-orange)' }} /></div>

              <div className="col" style={{ gap: 16 }}>
                {ONBOARDING_CHECKLIST.map((phase, pi) => {
                  let runningCount = ONBOARDING_CHECKLIST.slice(0, pi).reduce((s, p) => s + p.items.length, 0);
                  return (
                    <div key={phase.phase}>
                      <div className="dim" style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 600, marginBottom: 8 }}>{phase.phase}</div>
                      <div className="col" style={{ gap: 4 }}>
                        {phase.items.map((it, i) => {
                          const idx = runningCount + i;
                          const done = idx < hire.done;
                          return (
                            <div key={i} className="row gap-2" style={{ padding: '7px 10px', background: done ? 'transparent' : 'var(--bg-elev)', borderRadius: 6, fontSize: 13 }}>
                              <div style={{ width: 16, height: 16, borderRadius: 4, background: done ? 'var(--green)' : 'transparent', border: done ? 'none' : '1.5px solid var(--border-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', flexShrink: 0 }}>
                                {done && <Icon name="check" size={10} stroke={3} />}
                              </div>
                              <span style={{ flex: 1, color: done ? 'var(--text-muted)' : 'var(--text)', textDecoration: done ? 'line-through' : 'none' }}>{it}</span>
                              {!done && idx === hire.done && <Badge tone="orange">Next up</Badge>}
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  );
                })}
              </div>
            </>
          )}
        </div>
      </div>
    </>
  );
}

window.TimeOff = TimeOff;
window.Hiring = Hiring;
window.Onboarding = Onboarding;