function Users() {
  const ROLE_STRUCTURE = [
    {
      role: 'super_admin',
      label: 'Super Admin',
      status: 'active',
      description: 'Full system access — requests, content, users, settings.',
    },
    {
      role: 'client',
      label: 'Client',
      status: 'planned',
      description: 'Can submit requests, track status, and view deliverables.',
    },
    {
      role: 'talent',
      label: 'Talent',
      status: 'planned',
      description: 'Can view and update assigned requests.',
    },
  ];

  return (
    <div>
      <h1 className="page-title">Users</h1>
      <p className="page-subtitle">Role structure — client and talent access coming in a future release</p>

      <div className="table-wrap" style={{ marginBottom: '28px' }}>
        <div className="table-header">
          <span className="table-header__label">Role Structure</span>
        </div>
        <table>
          <thead>
            <tr>
              <th>Role</th>
              <th>Description</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {ROLE_STRUCTURE.map((r) => (
              <tr key={r.role}>
                <td style={{ fontWeight: 500 }}>{r.label}</td>
                <td className="td-muted">{r.description}</td>
                <td>
                  <span className={`pill ${r.status === 'active' ? 'pill--completed' : 'pill--archived'}`}>
                    {r.status}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="empty-state">
        <div className="empty-state__icon">
          <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
            <circle cx="20" cy="14" r="6" stroke="currentColor" strokeWidth="1.5"/>
            <path d="M6 34c0-7.732 6.268-14 14-14s14 6.268 14 14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
        </div>
        <div className="empty-state__title">No users yet</div>
        <div className="empty-state__desc">
          User management will be available once client and talent roles are implemented.
        </div>
      </div>
    </div>
  );
}